/*!
 * Brand token layer — home services & cleaning
 * --------------------------------------------
 * Palette: navy & steel. Steel blue #1d5fa8 on a cool slate canvas #eef2f6,
 * deep navy #0f1d2e chrome, with a safety-amber #f5a623 accent.
 *
 * Blue is the trade's own colour — water, clean glass, a fresh-washed floor —
 * and navy chrome with an amber marker reads as a crew in workwear rather than
 * a boutique. Corners are tighter (6px / 4px) and type is heavier than the
 * default theme, so the shell feels like a tool, not a brochure.
 *
 * Change brand colour HERE and nowhere else. It must load LAST — after
 * style.min.css, app.css and auth.css — because it works by
 * redefining the tokens those files already consume. The other files carry
 * matching defaults only so the shell survives this one failing to load; they
 * are not a second place to edit.
 *
 * Every foreground/background pair below is checked against WCAG AA: 4.5:1 for
 * text, 3:1 for large text, icons and control borders. White on #1d5fa8 is
 * 6.45:1, so .btn-primary and .bg-primary carry it. Amber is never a text
 * background for white (1.9:1) — it marks, it does not carry labels.
 */

/* ============================================================ light (default) */
:root {
  /* --- Bootstrap surface + ink --- */
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #16202c;
  --bs-body-color-rgb: 22, 32, 44;
  --bs-emphasis-color: #0b131c;
  --bs-emphasis-color-rgb: 11, 19, 28;
  --bs-secondary-color: rgba(22, 32, 44, 0.72);
  --bs-secondary-color-rgb: 22, 32, 44;
  --bs-secondary-bg: #e1e7ee;
  --bs-secondary-bg-rgb: 225, 231, 238;
  --bs-tertiary-bg: #f3f6f9;
  --bs-tertiary-bg-rgb: 243, 246, 249;
  --bs-border-color: #d5dde6;
  --bs-border-color-translucent: rgba(15, 29, 46, 0.14);

  /* The primary itself, which the compiled Bootstrap in style.min.css bakes in
     as a literal. Set on both themes, not dark alone: on light the theme would
     otherwise inherit whatever colour Bootstrap was built with and no rebrand
     from this file could ever be complete. */
  --bs-primary: #1d5fa8;
  --bs-primary-rgb: 29, 95, 168;
  --bs-primary-text: #174d8a;
  --bs-primary-bg-subtle: #e3edf9;
  --bs-primary-border-subtle: #b3cbe9;

  --bs-link-color: #16202c;
  --bs-link-color-rgb: 22, 32, 44;
  --bs-link-hover-color: #1d5fa8;
  --bs-link-hover-color-rgb: 29, 95, 168;

  /* --- shell --- */
  --app-canvas: #eef2f6;
  --app-surface: #ffffff;
  --app-hairline: rgba(15, 29, 46, 0.12);
  --app-sidebar-bg: #0f1d2e;
  --app-primary-gradient: linear-gradient(135deg, #1d5fa8 0%, #174d8a 100%);

  /* Safety amber. Decorative only — glows, accent bars, the active-item
     marker. Never put white text on it. (Kept under the old --app-ember-
     name because app.css reads it by that name.) */
  --app-ember-rgb: 245, 166, 35;
  --app-accent: #f5a623;

  /* Control boundaries have to clear 3:1 against their own surface (WCAG
     1.4.11), which the soft hairline used for table rules cannot do. This
     clears it on the canvas too (3.74:1), not only on the white surface —
     inputs sit on both. */
  --app-control-border: #6f7d8c;

  --app-radius: 6px;
  --app-radius-sm: 4px;

  /* Hairlines separate; shadows are reserved for things that float. */
  --app-shadow-sm: 0 1px 1px rgba(15, 29, 46, 0.06);
  --app-shadow: 0 1px 2px rgba(15, 29, 46, 0.05);
  --app-shadow-lg: 0 2px 6px rgba(15, 29, 46, 0.08), 0 24px 48px -24px rgba(15, 29, 46, 0.4);

  /* --- KPI accents: blue / orange / violet / green ---
     Money keeps its conventional reading — paid is green, overdue is red —
     because those two are the only tones on the dashboard a manager acts on
     without reading the label. The rest are spread far enough around the wheel
     to stay apart when four stat tiles sit in a row. */
  --tone-sale: #1d5fa8;
  --tone-return: #b45309;
  --tone-purchase-return: #6d28d9;
  --tone-profit: #15803d;
  --tone-paid: #15803d;
  --tone-due: #a16207;
  --tone-purchase-paid: #0e7490;
  --tone-purchase-due: #b91c1c;
}

/* =================================================================== dark */
/* Every token set in the :root block above has to be re-set here. `:root` and
   `[data-bs-theme=dark]` carry the same specificity, and this file loads after
   style.min.css — so a token left out below keeps its light value while the
   switcher is on dark. */
[data-bs-theme="dark"] {
  --bs-body-bg: #111a24;
  --bs-body-bg-rgb: 17, 26, 36;
  --bs-body-color: #e7edf3;
  --bs-body-color-rgb: 231, 237, 243;
  --bs-emphasis-color: #f7fafc;
  --bs-emphasis-color-rgb: 247, 250, 252;
  --bs-secondary-color: rgba(231, 237, 243, 0.8);
  --bs-secondary-color-rgb: 231, 237, 243;
  --bs-secondary-bg: #1f2b38;
  --bs-secondary-bg-rgb: 31, 43, 56;
  --bs-tertiary-bg: #142029;
  --bs-tertiary-bg-rgb: 20, 32, 41;
  --bs-border-color: #263443;
  --bs-border-color-translucent: rgba(231, 237, 243, 0.14);

  --bs-link-color: #f7fafc;
  --bs-link-color-rgb: 247, 250, 252;
  --bs-link-hover-color: #7cb3ff;
  --bs-link-hover-color-rgb: 124, 179, 255;

  /* Deliberate split: --bs-primary is the *foreground* mark (tab underline,
     active rank badge, meter fill) and has to clear 4.5:1 on a dark surface,
     which #1d5fa8 does not. --bs-primary-rgb stays steel blue because
     .bg-primary / .text-bg-primary paint white text on it, and white on the
     lighter blue fails. Keep the two apart. */
  --bs-primary: #7cb3ff;
  --bs-primary-text: #a9cdff;
  --bs-primary-bg-subtle: #10243d;
  --bs-primary-border-subtle: #1e3f66;

  --app-canvas: #0d141c;
  --app-surface: #151f2a;
  --app-hairline: rgba(231, 237, 243, 0.1);
  --app-sidebar-bg: #09111a;
  --app-control-border: #6f8296;

  --app-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.5);
  --app-shadow: none;
  --app-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.95);

  --tone-sale: #7cb3ff;
  --tone-return: #f0a03a;
  --tone-purchase-return: #b39afc;
  --tone-profit: #4ade80;
  --tone-paid: #4ade80;
  --tone-due: #e0a640;
  --tone-purchase-paid: #4bc0d9;
  --tone-purchase-due: #f87171;
}

/* Same reason as the --bs-primary split: these paint the primary as text, and
   the steel blue --bs-primary-rgb they read is too dark on a dark surface.
   .bg-primary keeps the rgb, because it carries white text. */
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary {
  color: #7cb3ff !important;
}

/* ============================================ compiled-Bootstrap overrides */
/* style.min.css is Bootstrap compiled with a previous brand colour baked in
   as a literal, not as var(--bs-primary). Roughly fifty declarations in it
   therefore ignore the tokens above — .bg-primary and .alert-primary follow the
   rebrand, but .btn-primary, focus rings, checkboxes, pills and the sidebar's
   active item would all have stayed the old colour.
 *
 * Rather than edit a compiled vendor file (which the next Bootstrap build would
 * overwrite), each of them is re-pointed here. Every rule below exists solely
 * because its source carries a literal; anything already reading a token is
 * deliberately absent.
 *
 * Grouped by what they colour, and kept at the same specificity as the source
 * so they win on file order alone — no !important beyond the two the source
 * itself declares !important. */

/* --- buttons --- */
.btn {
  --bs-btn-font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: #1d5fa8;
  --bs-btn-border-color: #1d5fa8;
  --bs-btn-hover-bg: #174d8a;
  --bs-btn-hover-border-color: #133f72;
  --bs-btn-active-bg: #133f72;
  --bs-btn-active-border-color: #10355f;
  --bs-btn-disabled-bg: #1d5fa8;
  --bs-btn-disabled-border-color: #1d5fa8;
  --bs-btn-focus-shadow-rgb: 63, 119, 181;
}
.btn-outline-primary {
  --bs-btn-color: #1d5fa8;
  --bs-btn-border-color: #1d5fa8;
  --bs-btn-hover-bg: #1d5fa8;
  --bs-btn-hover-border-color: #1d5fa8;
  --bs-btn-active-bg: #1d5fa8;
  --bs-btn-active-border-color: #1d5fa8;
  --bs-btn-disabled-color: #1d5fa8;
  --bs-btn-focus-shadow-rgb: 29, 95, 168;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #7cb3ff;
  --bs-btn-border-color: #7cb3ff;
  --bs-btn-disabled-color: #7cb3ff;
}

/* --- focus rings --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(29, 95, 168, 0.25);
}
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(29, 95, 168, 0.25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(29, 95, 168, 0.25); }
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(29, 95, 168, 0.25); }
.pagination { --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(29, 95, 168, 0.25); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(29, 95, 168, 0.25); }

/* --- checked / active controls --- */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #1d5fa8;
  border-color: #1d5fa8;
}
.form-range::-webkit-slider-thumb { background-color: #1d5fa8; }
.form-range::-moz-range-thumb { background-color: #1d5fa8; }

/* --- component "active" fills --- */
.dropdown-menu,
.dropdown-menu-dark { --bs-dropdown-link-active-bg: #1d5fa8; }
.nav-pills { --bs-nav-pills-link-active-bg: #1d5fa8; }
.pagination {
  --bs-pagination-active-bg: #1d5fa8;
  --bs-pagination-active-border-color: #1d5fa8;
}
.progress,
.progress-stacked { --bs-progress-bar-bg: #1d5fa8; }
.list-group {
  --bs-list-group-active-bg: #1d5fa8;
  --bs-list-group-active-border-color: #1d5fa8;
}

/* --- tinted table rows --- */
.table {
  --bs-table-striped-bg: rgba(15, 29, 46, 0.035);
  --bs-table-active-bg: rgba(29, 95, 168, 0.1);
  --bs-table-hover-bg: rgba(29, 95, 168, 0.06);
}
[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(231, 237, 243, 0.03);
}

/* --- utilities that hard-code the colour --- */
.text-bg-primary { background-color: RGBA(29, 95, 168, var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: #1d5fa8 !important; }

/* --- theme chrome --- */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link.active { border-bottom-color: #1d5fa8; }
.nav-tabs.nav-vertical .nav-link.active { background-color: #1d5fa8; }
.timeline-icon { color: #1d5fa8; }
.page-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"],
.page-sidebar .sidebar-link[data-bs-toggle="collapse"][aria-expanded="true"],
.page-sidebar .nav-link[data-bs-toggle="collapse"].active,
.page-sidebar .sidebar-link[data-bs-toggle="collapse"].active { color: #fff; }
.page-sidebar .nav-link.active,
.page-sidebar .nav-link[data-bs-toggle="collapse"].active,
.page-sidebar .sidebar-item .sidebar-link.active { background-color: #1d5fa8; }

/* ============================================================= display type */
/* assets/fonts ships Inter and Cairo only, and the app must not depend on a
   font CDN, so the display voice is weight and tracking on the text face
   rather than a second family. Heavier and less tightly tracked than the
   default: square-shouldered rather than delicate. */
h1, h2, h3,
.h1, .h2, .h3,
.content-heading h1,
.content-heading h2,
.content-heading h3 {
  font-weight: 750;
  letter-spacing: -0.015em;
}
h4, h5, h6,
.h4, .h5, .h6 { font-weight: 700; }
.page-sidebar .logo-text { font-weight: 800; letter-spacing: -0.01em; }
.stat-value { font-weight: 750; letter-spacing: -0.025em; }

/* ================================================================== shape */
/* 6px on shell surfaces, 4px on controls. */
.btn { --bs-btn-border-radius: 4px; }
.btn-sm { --bs-btn-border-radius: 3px; }
.btn-lg { --bs-btn-border-radius: 6px; }
.btn-header-cta { --bs-btn-border-radius: 4px; }
.form-control,
.form-select,
.input-group-text,
.bootstrap-select > .dropdown-toggle { border-radius: 4px; }
.modal { --bs-modal-border-radius: 8px; --bs-modal-inner-border-radius: 7px; }
.dropdown-menu { --bs-dropdown-border-radius: 6px; }
.badge { border-radius: 3px; }
.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu > li > a:not(.dropdown-item),
.dropdown-menu > li > .btn-link { border-radius: 3px; }
.header-icon-btn { border-radius: 4px; }
.header-user { border-radius: 6px; }
.header-user .avatar-initials { border-radius: 4px; }
.filter-toggle { border-radius: 6px; }
.filter-toggle .date-btn { --bs-btn-border-radius: 4px; }
.stat-icon { border-radius: 6px; }
.page-link { border-radius: 4px; }

/* Control boundaries, at the contrast the hairline cannot carry. */
.form-control,
.form-select,
.input-group-text,
.dropzone {
  border-color: var(--app-control-border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
}
.bootstrap-select > .dropdown-toggle {
  border-color: var(--app-control-border) !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--bs-primary) !important;
}

/* ================================================================ structure */
/* --- sidebar: a solid, full-height rail ---
   The default theme floats the sidebar as a rounded card inset from the
   viewport. Docked flush to the edge it reads as fixed equipment rather than
   an overlay, and it gives the content back the 14px gutter. */
.page-sidebar {
  box-shadow: none;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}
.page-sidebar::after {
  /* Amber glow behind the logo, kept faint: a work light, not a spotlight. */
  background: radial-gradient(circle, rgba(var(--app-ember-rgb), 0.16) 0%, rgba(var(--app-ember-rgb), 0) 70%);
}
.page-sidebar .aside-logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page-sidebar .aside-logo img { border-radius: 4px; }
.page-sidebar .sidebar-title {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}
.page-sidebar .nav-link,
.page-sidebar .sidebar-item .sidebar-link {
  border-radius: 4px;
}

/* Active item: a flat steel fill with an amber marker on the leading edge,
   instead of the glowing gradient pill. The marker uses logical insets so it
   sits on the correct side in RTL. */
.page-sidebar .nav-link.active,
.page-sidebar .nav-link[data-bs-toggle="collapse"].active,
.page-sidebar .sidebar-item .sidebar-link.active,
.page-sidebar li.active > .nav-link,
.page-sidebar li.active > .sidebar-link {
  background: #1d5fa8;
  border-radius: 4px;
  box-shadow: none;
}
.page-sidebar .nav-link.active::before,
.page-sidebar .sidebar-item .sidebar-link.active::before,
.page-sidebar li.active > .nav-link::before,
.page-sidebar li.active > .sidebar-link::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--app-accent);
}
[dir="rtl"] .page-sidebar .nav-link.active::before,
[dir="rtl"] .page-sidebar .sidebar-item .sidebar-link.active::before,
[dir="rtl"] .page-sidebar li.active > .nav-link::before,
[dir="rtl"] .page-sidebar li.active > .sidebar-link::before {
  border-radius: 2px 0 0 2px;
}
/* Second level: no fill, just the amber marker and white ink. */
.page-sidebar .sidebar-dropdown .sidebar-link.active {
  background: rgba(255, 255, 255, 0.06);
}
.page-sidebar .sidebar-dropdown::before { background: rgba(255, 255, 255, 0.1); }
.sidebar-cta { border-radius: 4px; }

@media (min-width: 992px) {
  body:not(.layout-boxed) .page-sidebar {
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 0;
  }
  body:not(.layout-boxed) .page-content { margin-left: var(--app-sidebar-width); }
  body.page-sidebar-mini .page-content { margin-left: 76px; }
}
@media (max-width: 991.98px) {
  .page-sidebar { border-radius: 0; }
}

/* --- header: a solid bar, not frosted glass --- */
.page-header {
  background-color: var(--app-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--app-shadow-sm);
}
.header-user .avatar-initials { box-shadow: none; }
.btn-header-cta { box-shadow: none; }
.btn-header-cta:hover { filter: none; background: #174d8a; }

/* --- cards: defined edges, a headed title bar --- */
.card { box-shadow: var(--app-shadow); }
.card > .card-header {
  background: var(--bs-tertiary-bg);
  padding-block: 0.875rem;
}
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3,
.card > .card-header h4, .card > .card-header h5, .card > .card-header h6 {
  font-weight: 700;
}

/* --- page title: a short amber rule under the heading --- */
.content-heading h1,
.content-heading h2,
.content-heading h3 {
  position: relative;
  padding-bottom: 0.5rem;
}
.content-heading h1::after,
.content-heading h2::after,
.content-heading h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--app-accent);
}

/* --- tables: firmer header row --- */
.table > thead th {
  font-weight: 700;
  text-transform: none;
  color: var(--bs-emphasis-color);
}

/* --- branch switcher in the header --- */
.btn-branch {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-bg: var(--bs-tertiary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--app-control-border);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  border-inline-start: 3px solid var(--app-accent);
}
.badge-branch {
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-inline-start: 3px solid var(--app-accent);
  border-radius: 4px;
}

/* --- notification bell --- */
.dropdown-menu.notifications { width: min(24rem, calc(100vw - 2rem)); }
.notifications-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--app-hairline);
}
.notifications-list { max-height: 26rem; overflow-y: auto; padding: 0.25rem; }
.notification-item { display: flex; gap: 0.6rem; align-items: flex-start; white-space: normal; padding: 0.55rem 0.6rem; }
.notification-item + .notification-item { border-top: 1px solid var(--app-hairline); }
.notification-item-icon { color: var(--bs-primary); font-size: 1.05rem; margin-top: 0.1rem; }
.notification-item-body { display: flex; flex-direction: column; gap: 0.05rem; font-size: 0.8125rem; line-height: 1.35; min-width: 0; }
.notification-item-body strong { font-size: 0.85rem; }