/* ============================================================
   SYNCRO THEME · DevExpress Blazor (Bootstrap 5 based)
   ------------------------------------------------------------
   Load this AFTER the DevExpress theme + Bootstrap, e.g. in
   App.razor / index.html / _Host.cshtml:

     <link href="_content/DevExpress.Blazor.Themes/office-white.bs5.min.css" rel="stylesheet" />
     <link href="css/syncro-theme.css" rel="stylesheet" />   <-- last wins

   Tip: start from a NEUTRAL DevExpress theme (Office White or the
   plain Bootstrap theme) so coral isn't fighting another accent.
   ============================================================ */

/* 1 ────────── BRAND TOKENS (single source of truth) ────────── */
:root{
  --syncro-coral-50:#FDEEE9;
  --syncro-coral-100:#FBD9CF;
  --syncro-coral-300:#F7A98F;
  --syncro-coral-500:#F2542D;   /* primary  */
  --syncro-coral-600:#D13E1C;   /* hover    */
  --syncro-coral-700:#B8401F;   /* text/active */

  --syncro-ink-900:#1C1917;
  --syncro-ink-700:#44403C;
  --syncro-ink-500:#78716C;
  --syncro-ink-400:#A8A29E;

  --syncro-border:#ECE5DA;
  --syncro-surface:#FAF8F4;
  --syncro-surface-2:#FBF9F6;
  --syncro-amber:#FBBF24;

  --syncro-success:#16A34A; --syncro-success-tint:#E7F4EE; --syncro-success-text:#15803D;
  --syncro-warning:#D97706; --syncro-warning-tint:#FDF0D5; --syncro-warning-text:#A16207;
  --syncro-danger:#DC2626;  --syncro-danger-tint:#FBE7E7;  --syncro-danger-text:#B91C1C;
}

/* 2 ────────── DRIVE BOOTSTRAP FROM THE TOKENS ──────────
   This single block recolours the bulk of DevExpress Blazor:
   primary buttons, grid selection/focus, pager active page,
   form-control focus, links, checks, switches.            */
:root{
  --bs-primary:           #F2542D;
  --bs-primary-rgb:       242,84,45;
  --bs-link-color:        #D13E1C;
  --bs-link-color-rgb:    209,62,28;
  --bs-link-hover-color:  #B8401F;
  --bs-body-color:        #1C1917;
  --bs-body-color-rgb:    28,25,23;
  --bs-border-color:      #ECE5DA;
  --bs-secondary-color:   #78716C;
  --bs-emphasis-color:    #1C1917;
  --bs-font-sans-serif:   'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Primary button (DxButton RenderStyle="Primary") */
.btn-primary,
.dxbl-btn-primary{
  --bs-btn-bg:#F2542D; --bs-btn-border-color:#F2542D;
  --bs-btn-hover-bg:#D13E1C; --bs-btn-hover-border-color:#D13E1C;
  --bs-btn-active-bg:#B8401F; --bs-btn-active-border-color:#B8401F;
  --bs-btn-disabled-bg:#F7A98F; --bs-btn-disabled-border-color:#F7A98F;
  box-shadow:0 8px 18px -6px rgba(242,84,45,.5);
}

/* Focus ring -> coral */
.form-control:focus,
.form-select:focus,
.dxbl-text-edit:focus-within,
.dxbl-combobox:focus-within{
  border-color:#F2542D !important;
  box-shadow:0 0 0 3px rgba(242,84,45,.18) !important;
}

/* 3 ────────── DEVEXPRESS DxGrid POLISH ──────────
   Class names below match recent DevExpress Blazor (dxbl-*).
   If you're on an older build, swap for your version's classes
   (e.g. dxbs-grid) — the colours stay identical.            */

/* Header: warm tint + muted bold caps, like the mockups */
.dxbl-grid .dxbl-grid-header,
.dxbl-grid thead{
  background:var(--syncro-surface-2);
}
.dxbl-grid .dxbl-grid-header-cell,
.dxbl-grid thead th{
  color:var(--syncro-ink-500);
  font-weight:700;
  letter-spacing:.04em;
  border-bottom:1px solid var(--syncro-border);
}

/* Group panel ("Drag a column header here…") */
.dxbl-grid-group-panel,
.dxbl-grid .dxbl-grid-group-panel{
  background:var(--syncro-surface);
  color:var(--syncro-ink-400);
  border-bottom:1px solid var(--syncro-border);
}

/* Row hover + selection in coral tint */
.dxbl-grid-data-row:hover > td,
.dxbl-grid .dxbl-grid-data-row:hover{
  background:var(--syncro-coral-50);
}
.dxbl-grid-data-row-selected,
.dxbl-grid-data-row.dxbl-selected > td{
  background:var(--syncro-coral-50) !important;
  box-shadow:inset 3px 0 0 0 var(--syncro-coral-500);
}

/* Filter row inputs */
.dxbl-grid-filter-row .form-control,
.dxbl-grid-filter-row .dxbl-text-edit{
  background:var(--syncro-surface);
  border-color:var(--syncro-border);
  border-radius:7px;
}

/* Pager active page */
.dxbl-pager .dxbl-pager-page.dxbl-active,
.dxbl-pager .page-item.active .page-link{
  background:var(--syncro-coral-500);
  border-color:var(--syncro-coral-500);
  color:#fff;
}

/* 4 ────────── EDITORS (ComboBox / DateEdit / TextBox) ────────── */
.dxbl-text-edit,
.dxbl-combobox,
.dxbl-date-edit{
  --dxbl-editor-border-color:var(--syncro-border);
  border-radius:10px;
}
.dxbl-dropdown-item.dxbl-active,
.dxbl-listbox-item.dxbl-selected{
  background:var(--syncro-coral-50);
  color:var(--syncro-coral-700);
}

/* 5 ────────── REUSABLE STATUS BADGES ──────────
   Use in a template column: <span class="syncro-pill syncro-done">…</span> */
.syncro-pill{ display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:700; padding:.18rem .55rem; border-radius:999px; }
.syncro-done{ color:var(--syncro-success-text); background:var(--syncro-success-tint); }
.syncro-empty,
.syncro-overdue{ color:var(--syncro-danger-text); background:var(--syncro-danger-tint); }
.syncro-awaiting{ color:var(--syncro-warning-text); background:var(--syncro-warning-tint); }

/* Type badges (GL account types) */
.syncro-type{ font-size:.66rem; font-weight:700; padding:.22rem .6rem; border-radius:6px; letter-spacing:.03em; }
.syncro-type-asset{ color:var(--syncro-success-text); background:var(--syncro-success-tint); }
.syncro-type-liability{ color:var(--syncro-warning-text); background:var(--syncro-warning-tint); }
.syncro-type-income{ color:var(--syncro-coral-700); background:var(--syncro-coral-50); }
.syncro-type-equity{ color:var(--syncro-ink-700); background:#F1EDE7; }
.syncro-type-expense{ color:var(--syncro-ink-500); background:#EDE9E4; }

/* 6 ────────── VERSION-PROOF HOOKS (recommended, DevExpress 24.2) ──────────
   Attach these via DxGrid.CustomizeElement instead of depending on
   internal dxbl-* selectors. C# example:

     <DxGrid Data="@data" CustomizeElement="OnCustomizeElement"> ... </DxGrid>

     @code {
       void OnCustomizeElement(GridCustomizeElementEventArgs e) {
         if (e.ElementType == GridElementType.HeaderCell) e.CssClass = "syncro-grid-header";
         if (e.ElementType == GridElementType.GroupPanel)  e.CssClass = "syncro-grid-grouppanel";
         if (e.ElementType == GridElementType.DataRow)     e.CssClass = "syncro-grid-row";
       }
     }

   For status/type cells, use a DxGridDataColumn CellDisplayTemplate:
     <span class="syncro-pill syncro-done">Done</span>
     <span class="syncro-type syncro-type-asset">CURRENT ASSET</span>                       */

.syncro-grid-header{
  background:var(--syncro-surface-2) !important;
  color:var(--syncro-ink-500) !important;
  font-weight:700; letter-spacing:.04em;
  border-bottom:1px solid var(--syncro-border) !important;
}
.syncro-grid-grouppanel{
  background:var(--syncro-surface) !important;
  color:var(--syncro-ink-400) !important;
  border-bottom:1px solid var(--syncro-border) !important;
}
.syncro-grid-row:hover{ background:var(--syncro-coral-50) !important; }