/*!
 * Rinse — brand token layer
 * -------------------------
 * Palette: fresh laundry. Azure #0b6aa2 on a cool linen canvas #eff5fa,
 * deep navy #0c2436 chrome, teal / indigo / violet accents.
 *
 * The blue is the trade's own colour — water, soap, clean linen — and the
 * canvas is tinted rather than white so a shop floor screen under strip
 * lighting does not glare.
 *
 * Change brand colour HERE and nowhere else. It must load LAST — after
 * style.min.css, app.css, pos.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.
 */

/* ============================================================ light (default) */
:root {
  /* --- Bootstrap surface + ink --- */
  --bs-body-bg: #fbfdff;
  --bs-body-bg-rgb: 251, 253, 255;
  --bs-body-color: #12232f;
  --bs-body-color-rgb: 18, 35, 47;
  --bs-emphasis-color: #08151f;
  --bs-emphasis-color-rgb: 8, 21, 31;
  --bs-secondary-color: rgba(18, 35, 47, 0.72);
  --bs-secondary-color-rgb: 18, 35, 47;
  --bs-secondary-bg: #dde8f0;
  --bs-secondary-bg-rgb: 221, 232, 240;
  --bs-tertiary-bg: #e8f0f7;
  --bs-tertiary-bg-rgb: 232, 240, 247;
  --bs-border-color: #d3e0ea;
  --bs-border-color-translucent: rgba(18, 45, 66, 0.16);

  /* The primary itself, which the compiled Bootstrap in style.min.css bakes in
     as a literal. The previous brand only re-set it on dark, so the light
     theme inherited whatever colour Bootstrap was built with and no rebrand
     from this file could ever be complete. Set on both themes now.
     White on #0b6aa2 is 5.84:1, so .btn-primary and .bg-primary carry it. */
  --bs-primary: #0b6aa2;
  --bs-primary-rgb: 11, 106, 162;
  --bs-primary-text: #08517d;
  --bs-primary-bg-subtle: #d8e9f4;
  --bs-primary-border-subtle: #a9cde4;

  --bs-link-color: #12232f;
  --bs-link-color-rgb: 18, 35, 47;
  --bs-link-hover-color: #0b6aa2;
  --bs-link-hover-color-rgb: 11, 106, 162;

  /* --- shell --- */
  --app-canvas: #eff5fa;
  --app-surface: #fbfdff;
  --app-hairline: rgba(18, 45, 66, 0.13);
  --app-sidebar-bg: #0c2436;
  --app-primary-gradient: linear-gradient(135deg, #0b6aa2 0%, #08517d 100%);

  /* The splash highlight is decorative only — glows, drifting fields, accent
     bars. Never put text on it: white on #38a5db is 2.6:1. (Kept under the
     old --app-ember- name because app.css reads it by that name.) */
  --app-ember-rgb: 56, 165, 219;

  /* 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.31:1), not only on the lighter surface —
     inputs sit on both. */
  --app-control-border: #72899d;

  --app-radius: 10px;
  --app-radius-sm: 8px;

  /* Hairlines separate; shadows are reserved for things that float. */
  --app-shadow-sm: 0 1px 1px rgba(18, 45, 66, 0.05);
  --app-shadow: none;
  --app-shadow-lg: 0 2px 6px rgba(12, 36, 54, 0.08), 0 24px 48px -24px rgba(12, 36, 54, 0.36);

  /* --- KPI accents: azure / amber / teal / moss --- */
  --tone-sale: #0b6aa2;
  --tone-return: #b45309;
  --tone-purchase-return: #0f766e;
  --tone-profit: #3f6212;
  --tone-paid: #1f7a4d;
  --tone-due: #a16207;
  --tone-purchase-paid: #0f766e;
  --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: #0b141c;
  --bs-body-bg-rgb: 11, 20, 28;
  --bs-body-color: #dbe7f0;
  --bs-body-color-rgb: 219, 231, 240;
  --bs-emphasis-color: #f2f8fc;
  --bs-emphasis-color-rgb: 242, 248, 252;
  --bs-secondary-color: rgba(219, 231, 240, 0.82);
  --bs-secondary-color-rgb: 219, 231, 240;
  --bs-secondary-bg: #1b2c3a;
  --bs-secondary-bg-rgb: 27, 44, 58;
  --bs-tertiary-bg: #131f2a;
  --bs-tertiary-bg-rgb: 19, 31, 42;
  --bs-border-color: #23394a;
  --bs-border-color-translucent: rgba(226, 240, 250, 0.16);

  --bs-link-color: #f2f8fc;
  --bs-link-color-rgb: 242, 248, 252;
  --bs-link-hover-color: #4aa3d8;
  --bs-link-hover-color-rgb: 74, 163, 216;

  /* 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 #0b6aa2 does not (2.4:1). --bs-primary-rgb stays azure because
     .bg-primary / .text-bg-primary paint white text on it, and white on the
     lighter blue fails. Keep the two apart. */
  --bs-primary: #4aa3d8;
  --bs-primary-text: #9ccdea;
  --bs-primary-bg-subtle: #10293c;
  --bs-primary-border-subtle: #1d4a6b;

  --app-canvas: #0b141c;
  --app-surface: #101d27;
  --app-hairline: rgba(226, 240, 250, 0.1);
  --app-sidebar-bg: #071019;
  --app-control-border: #5c7183;

  --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: #4aa3d8;
  --tone-return: #f0a03a;
  --tone-purchase-return: #4bb8ac;
  --tone-profit: #a3c94e;
  --tone-paid: #3fbc7c;
  --tone-due: #e0a640;
  --tone-purchase-paid: #4bb8ac;
  --tone-purchase-due: #ef6a5f;
}

/* Same reason as the --bs-primary split: these paint the primary as text, and
   the azure --bs-primary-rgb they read only reaches 2.4:1 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: #4aa3d8 !important;
}

/* ============================================ compiled-Bootstrap overrides */
/* style.min.css is Bootstrap compiled with the 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 terracotta.
 *
 * 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-primary {
  --bs-btn-bg: #0b6aa2;
  --bs-btn-border-color: #0b6aa2;
  --bs-btn-hover-bg: #095a89;
  --bs-btn-hover-border-color: #08517d;
  --bs-btn-active-bg: #08517d;
  --bs-btn-active-border-color: #074870;
  --bs-btn-disabled-bg: #0b6aa2;
  --bs-btn-disabled-border-color: #0b6aa2;
  --bs-btn-focus-shadow-rgb: 48, 128, 180;
}
.btn-outline-primary {
  --bs-btn-color: #0b6aa2;
  --bs-btn-border-color: #0b6aa2;
  --bs-btn-hover-bg: #0b6aa2;
  --bs-btn-hover-border-color: #0b6aa2;
  --bs-btn-active-bg: #0b6aa2;
  --bs-btn-active-border-color: #0b6aa2;
  --bs-btn-disabled-color: #0b6aa2;
  --bs-btn-focus-shadow-rgb: 11, 106, 162;
}

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

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

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

/* --- tinted table rows --- */
.table {
  --bs-table-striped-bg: rgba(11, 106, 162, 0.05);
  --bs-table-active-bg: rgba(11, 106, 162, 0.1);
  --bs-table-hover-bg: rgba(11, 106, 162, 0.075);
}

/* --- utilities that hard-code the colour --- */
.text-bg-primary { background-color: RGBA(11, 106, 162, var(--bs-bg-opacity, 1)) !important; }
.link-primary { color: #0b6aa2 !important; }

/* --- theme chrome --- */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link.active { border-bottom-color: #0b6aa2; }
.nav-tabs.nav-vertical .nav-link.active { background-color: #0b6aa2; }
.timeline-icon { color: #0b6aa2; }
.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: #0b6aa2; }
.page-sidebar .nav-link.active,
.page-sidebar .nav-link[data-bs-toggle="collapse"].active,
.page-sidebar .sidebar-item .sidebar-link.active { background-color: #0b6aa2; }

/* ============================================================= display type */
/* assets/fonts ships Inter and Cairo only, and the till must not depend on a
   font CDN, so the display voice is weight and tracking on the text face
   rather than a second family. */
h1, h2, h3,
.h1, .h2, .h3,
.content-heading h1,
.content-heading h2,
.content-heading h3 {
  font-weight: 680;
  letter-spacing: -0.026em;
}
.page-sidebar .logo-text { letter-spacing: -0.03em; }
.stat-value { letter-spacing: -0.035em; }

/* ================================================================== shape */
/* 10px on shell surfaces, 8px on controls. */
.btn-sm { --bs-btn-border-radius: 6px; }
.btn-lg { --bs-btn-border-radius: 10px; }
.badge { border-radius: 6px; }
.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu > li > a:not(.dropdown-item),
.dropdown-menu > li > .btn-link { border-radius: 6px; }
.header-icon-btn { border-radius: 8px; }
.filter-toggle { border-radius: 10px; }
.filter-toggle .date-btn { --bs-btn-border-radius: 7px; }
.stat-icon { border-radius: 9px; }
.page-link { border-radius: 6px; }
@media (min-width: 992px) {
  body:not(.layout-boxed) .page-sidebar { border-radius: 12px; }
}
@media (max-width: 991.98px) {
  .page-sidebar { border-radius: 0 12px 12px 0; }
}

/* 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;
}

/* ==================================================================== POS
   The till and the back office are one brand: the rail is the same navy as the
   admin sidebar and the "selected" colour is the same azure.

   The semantic set below is spread deliberately around the wheel — azure 202°,
   indigo 232°, violet 263°, teal 175°, moss 148°, amber 34°, orange 27°,
   red 0° — because on the payment dialog four of them sit side by side as
   cards, and a blue-on-blue palette would make the choices indistinguishable
   at a glance. */
.pos-modern {
  --pos-nav: #0c2436;
  --pos-nav-2: #123048;
  --pos-nav-ink: rgba(232, 242, 249, 0.86);
  --pos-nav-ink-dim: rgba(232, 242, 249, 0.6);

  --pos-accent: #0b6aa2;
  --pos-accent-ink: #ffffff;
  --pos-accent-soft: #e7f1f8;

  --pos-canvas: #eff5fa;
  --pos-surface: #fbfdff;
  --pos-line: #d5e2ec;
  --pos-line-soft: #e8f0f7;
  --pos-ink: #132430;
  --pos-ink-2: #445b6d;
  --pos-ink-3: #63798a;

  --pos-green: #15703f;
  --pos-green-soft: #e6f3ec;
  --pos-green-line: #c4e0d1;

  /* Card / terminal payments. Indigo rather than the accent azure: this is a
     method card sitting next to the "selected" highlight, and the two being
     the same blue made a chosen card and a card-type card look alike. */
  --pos-blue: #3949ab;
  --pos-blue-soft: #eaecf9;
  --pos-blue-line: #c6cdee;

  --pos-purple: #6d28d9;
  --pos-purple-soft: #f0eafc;
  --pos-purple-line: #d9c8f6;

  /* Part-payment: a deposit now, the balance on collection. Its own hue rather
     than borrowing the card blue, which it used to share and be mistaken for. */
  --pos-teal: #0f766e;
  --pos-teal-soft: #e3f2f0;
  --pos-teal-line: #bfdedb;

  --pos-orange: #a8500a;
  --pos-orange-soft: #fdf0e2;
  --pos-orange-line: #f7dcbb;
  --pos-red: #c81e1e;
  --pos-red-soft: #fdeaea;
  --pos-amber: #96590a;
  --pos-amber-soft: #fdf3e5;

  --pos-radius: 12px;
  --pos-radius-sm: 10px;
  --pos-radius-xs: 8px;
  --pos-shadow: 0 1px 1px rgba(18, 45, 66, 0.05);
  --pos-shadow-lg: 0 2px 6px rgba(12, 36, 54, 0.08), 0 24px 48px -24px rgba(12, 36, 54, 0.4);
}