/* =====================================================================
   CRP — Complete UI Redesign (Stage 1: global design system)
   New look across the WHOLE site, same fields & logic. This is a visual
   layer applied to the shared components every page uses (layout, forms,
   tables, buttons, modals). No HTML structure or JS behaviour is changed.

   Loaded last in base.html so it defines the final appearance.
   ===================================================================== */

:root {
  --crp-primary: #0f766e;        /* teal 700 */
  --crp-primary-600: #0d9488;    /* teal 600 */
  --crp-primary-50: #f0fdfa;
  --crp-accent: #2563eb;         /* blue 600 */
  --crp-ink: #0f172a;            /* slate 900 */
  --crp-text: #1f2937;           /* gray 800 */
  --crp-muted: #6b7280;          /* gray 500 */
  --crp-border: #e2e8f0;         /* slate 200 */
  --crp-border-strong: #cbd5e1;  /* slate 300 */
  --crp-surface: #ffffff;
  --crp-canvas: #f8fafc;         /* slate 50 */
  --crp-danger: #dc2626;
  --crp-warning: #d97706;
  --crp-success: #16a34a;
  --crp-radius: 10px;
  --crp-radius-sm: 7px;
  --crp-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --crp-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --crp-focus: 0 0 0 3px rgba(13,148,136,.20);
}

/* ---- Base typography & canvas ---- */
body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
  color: var(--crp-text);
  background: var(--crp-canvas);
}

h1, h2, h3, h4 { color: var(--crp-ink); }

/* ---- Page / section headings ---- */
.fontsizes,
#titleSetKarnaHai {
  font-weight: 700 !important;
  color: var(--crp-ink) !important;
  letter-spacing: .2px;
}

/* =====================================================================
   Buttons — unified across the site
   ===================================================================== */
button,
.btn,
a.btn {
  border-radius: var(--crp-radius-sm) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .05s ease !important;
}
button:active { transform: translateY(1px); }

.bg-blue-500, .bg-blue-600,
button.bg-blue-500, button.bg-blue-600 {
  background-color: var(--crp-primary) !important;
  color: #fff !important;
}
.bg-blue-500:hover, .bg-blue-600:hover,
button.bg-blue-500:hover, button.bg-blue-600:hover {
  background-color: var(--crp-primary-600) !important;
  box-shadow: 0 2px 8px rgba(13,148,136,.30) !important;
}

/* =====================================================================
   Form controls — global, consistent look
   (Scoped to form areas so table/search inputs keep their own styles.)
   ===================================================================== */
#formView input:not([type=checkbox]):not([type=radio]):not(.search-input),
#formView select,
#formView textarea,
form input:not([type=checkbox]):not([type=radio]):not(.search-input):not(.ts-control input),
form select,
form textarea {
  border: 1px solid var(--crp-border-strong) !important;
  border-radius: var(--crp-radius-sm) !important;
  background-color: var(--crp-surface) !important;
  color: var(--crp-text) !important;
  font-size: 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#formView input:not([type=checkbox]):not([type=radio]):not(.search-input):focus,
#formView select:focus,
#formView textarea:focus,
form input:not([type=checkbox]):not([type=radio]):not(.search-input):focus,
form select:focus,
form textarea:focus {
  border-color: var(--crp-primary) !important;
  box-shadow: var(--crp-focus) !important;
  outline: none !important;
}

label { color: var(--crp-label, #374151) !important; }

/* =====================================================================
   TomSelect — consistent control + dropdown styling site-wide
   ===================================================================== */
.ts-wrapper .ts-control {
  border-radius: var(--crp-radius-sm) !important;
  border-color: var(--crp-border-strong) !important;
  min-height: 38px !important;
  font-size: 14px !important;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--crp-primary) !important;
  box-shadow: var(--crp-focus) !important;
}
.ts-dropdown {
  border-radius: var(--crp-radius) !important;
  border: 1px solid var(--crp-border) !important;
  box-shadow: var(--crp-shadow-md) !important;
}
.ts-dropdown .active { background: var(--crp-primary-50) !important; color: var(--crp-ink) !important; }

/* =====================================================================
   Cards / panels
   ===================================================================== */
.crp-card,
.bg-white.rounded-lg,
.bg-white.rounded-xl {
  border-radius: var(--crp-radius) !important;
  box-shadow: var(--crp-shadow-sm) !important;
  border: 1px solid var(--crp-border) !important;
}

/* =====================================================================
   Tables — cleaner list views
   ===================================================================== */
table thead th {
  background: #f1f5f9 !important;
  color: var(--crp-ink) !important;
  font-weight: 600 !important;
}
table tbody tr:hover {
  background: var(--crp-primary-50) !important;
}

/* =====================================================================
   Modals — soften overlays and panels
   ===================================================================== */
.fixed.inset-0.bg-black.bg-opacity-50 > div,
[role="dialog"] {
  border-radius: var(--crp-radius) !important;
  box-shadow: var(--crp-shadow-md) !important;
}

/* =====================================================================
   List / Form toggle pills
   ===================================================================== */
#listBtn:hover, #formBtn:hover,
#listBtn.active-toggle, #formBtn.active-toggle {
  background: var(--crp-primary) !important;
  color: #fff !important;
}

/* =====================================================================
   CRP — UI Redesign (Stage 2: data-entry form layout, from scratch)

   Replaces the old hard-bordered "Excel sheet" look of every master-data
   and transaction form (Banks, Party, Category, Forecast, Actuals, ...)
   with a clean, modern card design. These forms all share the .crp-excel-*
   classes, so restyling them here updates ALL forms at once. No HTML or
   JS is touched — only the visual layer. Loaded last so it wins.
   ===================================================================== */

/* ---- The form is now a clean card, not a bordered spreadsheet ---- */
.crp-excel-form {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr minmax(160px, 220px) 1fr;
  background-color: var(--crp-surface) !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px !important;
  border: 1px solid var(--crp-border) !important;
  border-radius: var(--crp-radius) !important;
  box-shadow: var(--crp-shadow-md) !important;
  overflow: visible !important;       /* let dropdowns (TomSelect) escape the card */
  padding: 0 !important;
  gap: 0 !important;
}

/* ---- Rows: soft separators instead of heavy black grid lines ---- */
.crp-excel-cell {
  border: none !important;
  border-bottom: 1px solid var(--crp-border) !important;
  padding: 12px 18px !important;
  display: flex;
  align-items: center;
  font-size: 14px;
  min-height: 52px;
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--crp-surface) !important;
}

/* ---- Section header: a modern accent bar ---- */
.crp-excel-header {
  grid-column: 1 / -1;
  font-weight: 700 !important;
  text-align: center;
  font-size: 15px !important;
  padding: 14px 18px !important;
  border: none !important;
  justify-content: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--crp-primary) 0%, var(--crp-primary-600) 100%) !important;
}
.crp-excel-header.forecast {
  color: #ffffff !important;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}
.crp-excel-header.actuals {
  color: #ffffff !important;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
}

/* ---- Labels: quiet, readable, subtle canvas tint ---- */
.crp-excel-label {
  font-weight: 600 !important;
  color: var(--crp-ink) !important;
  line-height: 1.35 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 12px !important;
  font-size: 13px !important;
  background-color: var(--crp-canvas) !important;
  border-right: 1px solid var(--crp-border) !important;
}

/* ---- Soft accent tints (replace saturated Excel fills) ---- */
.crp-excel-cell.cyan,
.crp-excel-input.cyan   { background-color: #ecfeff !important; }
.crp-excel-cell.yellow,
.crp-excel-input.yellow { background-color: #fffbeb !important; }
.crp-excel-cell.pink,
.crp-excel-input.pink   { background-color: #fdf2f8 !important; }
.crp-excel-cell.gray,
.crp-excel-input.gray   { background-color: #f1f5f9 !important; }

/* ---- Record-type markers become clean badges ---- */
.crp-excel-cell.green {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .5px;
  justify-content: center !important;
}
.crp-excel-cell.orange {
  background-color: #ffedd5 !important;
  color: #9a3412 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .5px;
  justify-content: center !important;
}

/* ---- Inputs: modern rounded fields with a teal focus ring ---- */
.crp-excel-input {
  border: none !important;
  padding: 8px 14px !important;
  position: relative;
  width: 100% !important;
  background-color: var(--crp-surface) !important;
}
.crp-excel-input input:not(.ts-control input),
.crp-excel-input select,
.crp-excel-input textarea,
.crp-excel-input .ts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 40px !important;
  border: 1px solid var(--crp-border-strong) !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: var(--crp-surface) !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  border-radius: var(--crp-radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crp-excel-input textarea {
  height: auto !important;
  min-height: 84px !important;
}
.crp-excel-input input:not(.ts-control input):focus,
.crp-excel-input select:focus,
.crp-excel-input textarea:focus,
.crp-excel-input .ts-wrapper.focus {
  border-color: var(--crp-primary) !important;
  box-shadow: var(--crp-focus) !important;
  background-color: var(--crp-surface) !important;
}
.crp-excel-input input[readonly] {
  background-color: var(--crp-canvas) !important;
  color: var(--crp-muted) !important;
  cursor: not-allowed;
  border-color: var(--crp-border) !important;
}

/* TomSelect fits the new rounded field (simple, fully clickable behavior) */
.crp-excel-input .ts-wrapper { padding: 0 !important; }
.crp-excel-input .ts-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  height: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: hidden !important;
}
.crp-excel-input .ts-control .item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
/* ----- TomSelect: clean value when idle, search box only while open -----
   Collapse the inline search box whenever the field is idle so you see just
   the selected value. It stays focusable (collapsed, NOT display:none) so a
   click still opens the dropdown; on focus/open it expands so you can type to
   filter. A small script (master_data.js) blurs the field right after a
   selection so the box doesn't linger while the field keeps focus. */
.crp-excel-input .ts-wrapper.has-items:not(.focus):not(.dropdown-active) .ts-control > input {
  display: inline-block !important;   /* keep focusable (never display:none) */
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  flex: 0 0 auto !important;
}

/* ---- Billing grid: match the soft, modern borders ---- */
.billing-grid-table {
  border: 1px solid var(--crp-border) !important;
  border-radius: var(--crp-radius-sm) !important;
  overflow: hidden !important;
}
.billing-grid-table .grid { border-bottom: 1px solid var(--crp-border) !important; }
.billing-grid-table .grid > div { border-right: 1px solid var(--crp-border) !important; }

/* ---- Responsive: gracefully collapse the 4-column grid ---- */
@media (max-width: 1024px) {
  .crp-excel-form {
    grid-template-columns: minmax(140px, 170px) 1fr minmax(140px, 170px) 1fr;
  }
}
@media (max-width: 768px) {
  .crp-excel-form { grid-template-columns: 1fr; }
  .crp-excel-header { grid-column: 1 / -1; }
  .crp-excel-span-2,
  .crp-excel-span-3,
  .crp-excel-span-4 { grid-column: 1 / -1; }
  .crp-excel-label {
    border-right: none !important;
    border-bottom: 1px solid var(--crp-border) !important;
    background-color: var(--crp-canvas) !important;
  }
  .crp-excel-cell { min-height: 44px; }
}

/* =====================================================================
   CRP — UI Redesign (Stage 3: list views, toolbars & buttons)

   Brings the surrounding screen (data tables, column search boxes, the
   list/form toggle, the fixed action bars at the bottom) in line with the
   new form card design. Shared across every master-data & transaction
   page. Visual layer only — no HTML/JS changes. Loaded last so it wins.
   ===================================================================== */

/* ---- List table: clean framed card ---- */
#tableWrapper,
.hight_table {
  border: 1px solid var(--crp-border) !important;
  border-radius: var(--crp-radius) !important;
  overflow: auto !important;
  background: var(--crp-surface) !important;
}

table.min-w-full thead tr,
table thead tr.bg-\[\#F7F7F7\] {
  background: #f1f5f9 !important;
}
table thead th .textsize,
table thead th { color: var(--crp-ink) !important; }

table.min-w-full tbody tr { transition: background-color .12s ease; }
table.min-w-full tbody tr:hover { background: var(--crp-primary-50) !important; }
table.min-w-full tbody td { border-color: var(--crp-border) !important; }

/* ---- Column search boxes in table headers ---- */
.search-input {
  border-radius: var(--crp-radius-sm) !important;
  font-size: 13px !important;
  color: var(--crp-text) !important;
}
th .flex.gap-1.bg-white {
  border: 1px solid var(--crp-border-strong) !important;
  border-radius: var(--crp-radius-sm) !important;
  background: var(--crp-surface) !important;
}
th .flex.gap-1.bg-white:focus-within {
  border-color: var(--crp-primary) !important;
  box-shadow: var(--crp-focus) !important;
}

/* ---- List/Form toggle pills ---- */
.bg-gray-200.rounded.p-1 {
  background: #eef2f6 !important;
  border-color: var(--crp-border-strong) !important;
  border-radius: 999px !important;
}
#listBtn, #formBtn { border-radius: 999px !important; color: var(--crp-muted); }
#listBtn:hover, #formBtn:hover,
#listBtn.active-toggle, #formBtn.active-toggle {
  background: var(--crp-primary) !important;
  color: #fff !important;
}

/* ---- "Form Data" tab strip above the form ---- */
#formTabControls { border-bottom: 1px solid var(--crp-border) !important; }
#formTabBtn {
  background: linear-gradient(135deg, var(--crp-primary) 0%, var(--crp-primary-600) 100%) !important;
  color: #fff !important;
  border-radius: var(--crp-radius-sm) var(--crp-radius-sm) 0 0 !important;
  font-weight: 600 !important;
}

/* ---- Fixed action bars (list toolbar + form save/clear/back) ---- */
.fixed.bottom-0.right-0,
.bottom-btn-box {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--crp-border) !important;
  box-shadow: 0 -4px 16px rgba(15,23,42,.06) !important;
}

/* Toolbar buttons: consistent, rounded, with a subtle lift on hover */
.fixed.bottom-0.right-0 button,
.bottom-btn-box button {
  border-radius: var(--crp-radius-sm) !important;
  border: 1px solid var(--crp-border-strong) !important;
  color: var(--crp-text) !important;
  background-color: var(--crp-surface) !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.fixed.bottom-0.right-0 button:hover,
.bottom-btn-box button:hover {
  background-color: var(--crp-primary-50) !important;
  border-color: var(--crp-primary) !important;
  box-shadow: var(--crp-shadow-sm) !important;
}
.fixed.bottom-0.right-0 button:active,
.bottom-btn-box button:active { transform: translateY(1px); }

/* Delete keeps a clear (soft) danger tint */
.fixed.bottom-0.right-0 button.bg-\[\#F3D6D6\] {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.fixed.bottom-0.right-0 button.bg-\[\#F3D6D6\]:hover {
  background-color: #fecaca !important;
  border-color: var(--crp-danger) !important;
}

/* Disabled toolbar buttons read as clearly inactive */
.fixed.bottom-0.right-0 button:disabled,
.bottom-btn-box button:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ---- Delete confirmation modal: match the card system ---- */
#custom-confirm > div,
#shortcutsModal > div {
  border-radius: var(--crp-radius) !important;
  box-shadow: var(--crp-shadow-md) !important;
  border: 1px solid var(--crp-border) !important;
}

/* =====================================================================
   CRP — UI Redesign (Stage 4: Status field -> segmented toggle)

   Every form's "Status *" field uses two radios (Active / Inactive) with
   Active checked by default. This turns that pair into a modern segmented
   toggle (Active = green, Inactive = red) without changing any HTML or JS,
   so the form still submits "Active"/"Inactive" exactly as before.

   Scoped to input[type="radio"][name="status"] so the list-view "status"
   SEARCH box (a text input) is never affected.
   ===================================================================== */

/* The wrapper that holds the two options becomes a pill track */
form *:has(> label > input[type="radio"][name="status"]) {
  display: inline-flex !important;
  gap: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--crp-border-strong) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: var(--crp-canvas) !important;
}

/* Each option becomes a segment; hide the native radio dot */
form label:has(> input[type="radio"][name="status"]) {
  margin: 0 !important;
  padding: 7px 22px !important;
  cursor: pointer;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--crp-muted) !important;
  background: transparent;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
form label:has(> input[type="radio"][name="status"]) input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Checked states: Active = green, Inactive = red */
form label:has(> input[type="radio"][name="status"][value="Active"]:checked) {
  background: var(--crp-success) !important;
  color: #ffffff !important;
}
form label:has(> input[type="radio"][name="status"][value="Inactive"]:checked) {
  background: var(--crp-danger) !important;
  color: #ffffff !important;
}

/* ---- Extra left padding in both grid columns (label + input) ---- */
.crp-excel-label { padding-left: 22px !important; }
.crp-excel-input { padding-left: 22px !important; }

/* =====================================================================
   CRP — UI Redesign (Stage 5: form view side padding)

   The form view (data-entry tabs) ran flush against the left/right edges
   of the page. Add comfortable horizontal breathing room so the form
   card sits away from the window edges on both sides. Applies to every
   master-data & transaction form.
   ===================================================================== */
#formView {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* The moved-tab container and panels shouldn't add their own edge bleed */
.ftab-moved-container,
.form-tab-panel {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 640px) {
  #formView { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =====================================================================
   CRP — UI Redesign (Stage 6: in-form record navigator)

   First / Prev / Next / Last controls shown at the top of the form view
   when a record is loaded for editing. Clicking them loads the adjacent
   record's data into the form. Styled to match the list pagination.
   ===================================================================== */
.crp-form-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 6px 24px 12px;
  flex-wrap: wrap;
}
.crp-form-nav-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--crp-muted);
}
.crp-form-nav-btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.crp-form-nav-btns button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--crp-border) !important;
  border-radius: var(--crp-radius-sm) !important;
  background: var(--crp-surface) !important;
  color: var(--crp-ink) !important;
  box-shadow: var(--crp-shadow-sm) !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.crp-form-nav-btns button svg {
  width: 18px;
  height: 18px;
}
.crp-form-nav-btns button:hover:not(:disabled) {
  background: var(--crp-primary-50) !important;
  border-color: var(--crp-primary) !important;
  color: var(--crp-primary) !important;
}
.crp-form-nav-btns button:active:not(:disabled) { transform: translateY(1px); }
.crp-form-nav-btns button:disabled {
  background: #f1f5f9 !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* =====================================================================
   CRP — UI Redesign (Stage 7: dropdown clipping fix)

   The form card now uses overflow:visible so TomSelect dropdowns aren't
   clipped. Round the header corners explicitly (clipping no longer does
   it) and make sure the open dropdown layers above neighbouring fields.
   ===================================================================== */
.crp-excel-header {
  border-top-left-radius: var(--crp-radius) !important;
  border-top-right-radius: var(--crp-radius) !important;
}

/* Open dropdown sits above sibling rows/cells */
.crp-excel-input .ts-wrapper.dropdown-active { position: relative; z-index: 50; }
.crp-excel-input .ts-dropdown {
  z-index: 60 !important;
  border-radius: var(--crp-radius-sm) !important;
  border: 1px solid var(--crp-border) !important;
  box-shadow: var(--crp-shadow-md) !important;
}