/* ============================================================
   MYKA PRO — Brand Theme Override
   Aligns the Modernize (Blue_Theme) admin template with the
   MYKA PRO TRENDS identity so the whole app shares one brand.
     Primary : #17191E (graphite — MYKA_PRO_INK)
     Accent  : #D6452F (TRENDS crimson — product accent)

   LOAD ORDER: styles.css / custom.css  →  modern-theme.css  →  THIS FILE.
   modern-theme.css is loaded globally by public/layout/common/head.php and
   owns every colour value. This file only *maps* those tokens onto the
   Modernize template's Bootstrap variables and utility classes.
   ============================================================ */

/* ---- --brand-* are ALIASES of --erp-*, not independent values ----
   Previously both files declared #102133 separately and could drift.
   modern-theme.css is now the single source of truth: change a colour
   there and it propagates here. Do not put a hex literal in this block. */
:root {
  --brand-primary: var(--erp-primary);
  --brand-primary-600: var(--erp-primary-hover);
  --brand-primary-700: var(--erp-primary-active);
  --brand-primary-rgb: var(--erp-primary-rgb);

  --brand-accent: var(--erp-accent);
  --brand-accent-600: var(--erp-accent-hover);
  --brand-accent-rgb: var(--erp-accent-rgb);
}

/* ---- Remap Bootstrap/Modernize theme tokens (light + dark) ---- */
[data-color-theme="Blue_Theme"]:root,
[data-bs-theme="dark"][data-color-theme="Blue_Theme"]:root,
[data-bs-theme="light"][data-color-theme="Blue_Theme"]:root {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-primary-text-emphasis: var(--brand-primary-700);
  --bs-light-primary: rgba(var(--brand-primary-rgb), 0.10);
  --bs-primary-bg-subtle: rgba(var(--brand-primary-rgb), 0.10);
  --bs-primary-border-subtle: rgba(var(--brand-primary-rgb), 0.25);

  --bs-secondary: var(--brand-accent);
  --bs-secondary-rgb: var(--brand-accent-rgb);
  --bs-light-secondary: rgba(var(--brand-accent-rgb), 0.10);
  --bs-secondary-bg-subtle: rgba(var(--brand-accent-rgb), 0.10);

  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--erp-accent);
  --bs-link-hover-color-rgb: var(--erp-accent-rgb);

}

/* ---- Components that bake the template blue into their OWN variable ----
   Modernize compiles #5d87ff straight into these rather than deriving them
   from --bs-primary, so remapping --bs-primary never reached them: tabs,
   pagination and selected list rows stayed vendor blue while the rest of the
   shell turned graphite. Measuring before and after confirmed they were the
   only components still computing rgb(93, 135, 255).

   These MUST be declared on the component selector, not on :root. Bootstrap
   5.3 scopes each family to its own block (.pagination { --bs-pagination-* }),
   and a value set on the component always beats one inherited from :root — a
   :root override here silently does nothing.

   They take the PRIMARY graphite, not the accent: these are "selected" states
   and they need to agree with the sidebar's active pill. The accent is for
   highlight, not for every selected row. */
.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--brand-primary);
  --bs-nav-tabs-link-active-color: var(--erp-on-primary);
  --bs-nav-tabs-link-active-border-color: var(--brand-primary);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand-primary);
  --bs-nav-pills-link-active-color: var(--erp-on-primary);
}
.pagination {
  --bs-pagination-color: var(--brand-primary);
  --bs-pagination-hover-color: var(--erp-accent);
  --bs-pagination-focus-color: var(--erp-accent);
  --bs-pagination-active-bg: var(--brand-primary);
  --bs-pagination-active-border-color: var(--brand-primary);
}
.list-group {
  --bs-list-group-active-bg: var(--brand-primary);
  --bs-list-group-active-border-color: var(--brand-primary);
}
/* The one component here that takes the accent: a progress bar is a data
   element, and graphite on it reads as "disabled". */
.progress {
  --bs-progress-bar-bg: var(--erp-accent);
}

/* ---- Buttons (template hardcodes hex per theme with high
        specificity, so force the brand vars with !important) ---- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-bg: var(--brand-primary-600) !important;
  --bs-btn-hover-border-color: var(--brand-primary-600) !important;
  --bs-btn-active-bg: var(--brand-primary-700) !important;
  --bs-btn-active-border-color: var(--brand-primary-700) !important;
  --bs-btn-disabled-bg: var(--brand-primary) !important;
  --bs-btn-disabled-border-color: var(--brand-primary) !important;
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb) !important;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.24);
}
.btn-primary:hover { box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.30); }

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-bg: var(--brand-primary) !important;
  --bs-btn-hover-border-color: var(--brand-primary) !important;
  --bs-btn-active-bg: var(--brand-primary-600) !important;
  --bs-btn-active-border-color: var(--brand-primary-600) !important;
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb) !important;
}

.btn-secondary {
  --bs-btn-bg: var(--brand-accent) !important;
  --bs-btn-border-color: var(--brand-accent) !important;
  --bs-btn-hover-bg: var(--brand-accent-600) !important;
  --bs-btn-hover-border-color: var(--brand-accent-600) !important;
  --bs-btn-active-bg: var(--brand-accent-600) !important;
  --bs-btn-active-border-color: var(--brand-accent-600) !important;
  --bs-btn-disabled-bg: var(--brand-accent) !important;
  --bs-btn-disabled-border-color: var(--brand-accent) !important;
  --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb) !important;
}
.btn-outline-secondary {
  --bs-btn-color: var(--brand-accent) !important;
  --bs-btn-border-color: var(--brand-accent) !important;
  --bs-btn-hover-bg: var(--brand-accent) !important;
  --bs-btn-hover-border-color: var(--brand-accent) !important;
  --bs-btn-active-bg: var(--brand-accent-600) !important;
  --bs-btn-active-border-color: var(--brand-accent-600) !important;
  --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb) !important;
}

/* ---- Utility color classes driven by the brand ---- */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-accent) !important; }
.bg-secondary { background-color: var(--brand-accent) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* ---- Semantic status: success is GREEN, not brand gold ----
   These two rules previously read
       .text-secondary, .text-success { color: var(--brand-accent) }
       .bg-secondary,   .bg-success   { background-color: var(--brand-accent) }
   which made every success state render gold and left it visually
   indistinguishable from a secondary state. All 158 call sites in
   views/ + includes/ + public/layout/ mean success semantically
   (check-circle icons, Active / Approved / Paid / SETTLED badges,
   Excel-export icons, attendance present-counts) — none wanted gold.
   Bootstrap's own -subtle/-border variants were never overridden, so
   pairings like `bg-success-subtle text-success` were rendering pale
   green behind gold text.

   Gold remains reachable, but only when asked for explicitly:
   use .text-brand-accent / .bg-brand-accent (below), or .text-secondary
   / .bg-secondary, or the --erp-accent token. */
.text-success { color: var(--erp-success) !important; }
.bg-success   { background-color: var(--erp-success) !important; }
.border-success { border-color: var(--erp-success) !important; }

/* Keep Bootstrap's whole success family coherent with the design token
   so .bg-success-subtle / .text-bg-success / .border-success agree. */
:root,
[data-bs-theme="light"] {
  --bs-success: var(--erp-success);
  --bs-success-rgb: 5, 150, 105;      /* #059669 — matches --erp-success (light) */
}
[data-bs-theme="dark"] {
  --bs-success: var(--erp-success);
  --bs-success-rgb: 52, 211, 153;     /* #34d399 — matches --erp-success (dark)  */
}

/* ---- Explicit brand-accent utilities ----
   The deliberate way to ask for gold. Added so that removing the
   .text-success override does not leave the accent unreachable. */
.text-brand-accent { color: var(--erp-accent) !important; }
.bg-brand-accent   { background-color: var(--erp-accent) !important; color: var(--erp-accent-contrast) !important; }
.bg-brand-accent-soft { background-color: var(--erp-accent-soft) !important; color: var(--erp-accent) !important; }
.border-brand-accent { border-color: var(--erp-accent) !important; }

.badge.text-bg-primary,
.badge.bg-primary { background-color: var(--brand-primary) !important; }
.badge.text-bg-secondary,
.badge.bg-secondary { background-color: var(--brand-accent) !important; }

/* Subtle badges (Modernize uses .bg-light-primary etc.) */
.bg-light-primary { background-color: rgba(var(--brand-primary-rgb), 0.10) !important; color: var(--brand-primary) !important; }
.bg-light-secondary { background-color: rgba(var(--brand-accent-rgb), 0.10) !important; color: var(--brand-accent) !important; }

/* Links, form focus, checks.
   Hover moves to the accent rather than --brand-primary-700. With a graphite
   primary the pressed shade is #0E1013, so a near-black link hovering to a
   slightly-blacker black gave no visible feedback at all. */
a { color: var(--brand-primary); }
a:hover { color: var(--erp-accent); }
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--brand-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.18);
}
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-check-input:focus {
  border-color: rgba(var(--brand-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.18);
}

/* =========================================================
   Dark mode: controls painted with --brand-primary

   --brand-primary is THEME-STABLE by design (#17191E in both themes), so every
   control that takes it as a FOREGROUND disappears on a dark surface — links,
   outline buttons and checked inputs all measured about 1.1:1 against
   --erp-bg-card. This predates the graphite palette; the navy did exactly the
   same thing. --erp-accent is the canonical highlight and DOES invert, so
   these take it in dark mode only. Light mode is untouched.

   Deliberately NOT covered here: .text-primary and .bg-light-primary. Those
   utilities mean "the brand colour" literally, several report views already
   carry their own dark overrides for them, and blanket-recolouring them would
   fight those. Logged in the report instead.
   ========================================================= */
[data-bs-theme="dark"] a { color: var(--erp-accent); }
[data-bs-theme="dark"] a:hover { color: var(--erp-accent-hover); }

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--erp-accent) !important;
  --bs-btn-border-color: var(--erp-accent) !important;
  --bs-btn-hover-bg: var(--erp-accent) !important;
  --bs-btn-hover-border-color: var(--erp-accent) !important;
  --bs-btn-hover-color: var(--erp-accent-contrast) !important;
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--erp-accent);
  border-color: var(--erp-accent);
}

/* =========================================================
   Sidebar — premium SaaS treatment
   ========================================================= */
[data-bs-theme="light"] .left-sidebar {
  --bs-body-bg: #FFFFFF;
  background: #FFFFFF !important;
  border-right: 1px solid var(--erp-border) !important;
}
/* #1A1C21 is the graphite counterpart of the navy #1B2436 this replaced,
   held one step darker than --erp-bg-page so the rail still reads as a
   distinct plane. */
[data-bs-theme="dark"] .left-sidebar {
  --bs-body-bg: #1A1C21;
  background: #1A1C21 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}

.sidebar-nav { padding: 6px 14px 18px; }

/* Menu links */
.sidebar-nav ul .sidebar-item .sidebar-link {
  color: var(--erp-text-primary);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 9px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
/* Icons carry the product accent. This was a hardcoded #ce8432 — not even the
   gold token it was imitating (#C39557), so it drifted from the palette it
   belonged to. It is now the token, which is what makes the rail change colour
   with the product instead of with an edit here. */
.sidebar-nav ul .sidebar-item .sidebar-link .ti {
  color: var(--erp-accent);
  transition: color 0.18s ease;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link { color: #B9BDC6; }
/* Dark icons stay muted rather than accent — preserving the existing design,
   where the accent rail reads as too hot against a dark ground. */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link .ti { color: #8A8F99; }

/* Hover (non-active) */
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background-color: rgba(var(--brand-primary-rgb), 0.09) !important;
  color: var(--brand-primary) !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover .ti,
.sidebar-nav ul .sidebar-item .sidebar-link:hover .hide-menu {
  color: var(--brand-primary) !important;
}

/* Hover in dark mode.
   --brand-primary is #17191E in BOTH themes, so the rule above paints near-black
   text on a near-black hover tint. --erp-accent is the design system's canonical
   highlight and DOES invert (#D6452F light / #E9705B dark), so it carries the
   same "branded highlight" meaning while staying legible.
   Light mode is deliberately untouched. */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background-color: rgba(var(--erp-accent-rgb), 0.14) !important;
  color: var(--erp-accent) !important;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover .ti,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover .hide-menu {
  color: var(--erp-accent) !important;
}

/* Active — solid brand pill with WHITE text (fixes invisible-label bug) */
.sidebar-nav ul .sidebar-item > .sidebar-link.active,
.sidebar-nav ul .sidebar-item .sidebar-link.active {
  background-color: var(--brand-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.30);
}
.sidebar-nav ul .sidebar-item .sidebar-link.active .ti,
.sidebar-nav ul .sidebar-item .sidebar-link.active .hide-menu,
.sidebar-nav ul .sidebar-item .sidebar-link.active span {
  color: #FFFFFF !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link.active.has-arrow::after {
  border-color: #FFFFFF !important;
}

/* Dark mode: the pill takes --erp-primary-hover, not --erp-primary.
   --erp-primary (#17191E) is DARKER than the dark rail (#1A1C21), so the
   active item read as a hole punched in the sidebar rather than a raised
   selection — only its white label distinguished it. The lifted step reads as
   a pill in both themes. Light mode keeps --erp-primary and is untouched. */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.active {
  background-color: var(--erp-primary-hover) !important;
  box-shadow: none;
}

/* Section captions */
/* --erp-text-light measured 2.71:1 on the white rail (the previous hardcoded
   #94A3B8 was 2.6:1 — this caption has never cleared AA). --erp-text-muted is
   the next token up at 5.61:1 and still sits far below the 16:1 menu labels,
   so the hierarchy holds. */
.sidebar-nav .nav-small-cap {
  color: var(--erp-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 18px;
  padding-left: 10px;
}
/* #757A85 measured 3.96:1 on the graphite rail — under AA for 11px uppercase.
   Lifted until it cleared 4.5:1. */
[data-bs-theme="dark"] .sidebar-nav .nav-small-cap { color: #8A8F99; }

/* Submenu (collapsed second level) */
.sidebar-nav .first-level .sidebar-item .sidebar-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--erp-text-muted);
}
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link { color: #9EA3AD; }

/* Submenu active — brand-blue text on a light tint (NOT a white-on-white
   pill). More specific than the top-level active rule, so it wins. */
.sidebar-nav .first-level .sidebar-item > .sidebar-link.active,
.sidebar-nav .first-level .sidebar-item .sidebar-link.active {
  background-color: rgba(var(--brand-primary-rgb), 0.10) !important;
  color: var(--brand-primary) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sidebar-nav .first-level .sidebar-item .sidebar-link.active .ti,
.sidebar-nav .first-level .sidebar-item .sidebar-link.active .hide-menu,
.sidebar-nav .first-level .sidebar-item .sidebar-link.active span {
  color: var(--brand-primary) !important;
}
/* Dark submenu active. This was a hardcoded #93B4FF — a pale blue with no
   token behind it, and the one place in the shell that still read as another
   MYKA PRO product's colour. --erp-accent already inverts for dark, so the
   selected submenu row now matches the rest of the accent system. */
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link.active,
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link.active .ti,
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link.active .hide-menu,
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link.active span {
  color: var(--erp-accent) !important;
}
[data-bs-theme="dark"] .sidebar-nav .first-level .sidebar-item .sidebar-link.active {
  background-color: rgba(var(--erp-accent-rgb), 0.16) !important;
}

/* Brand logo spacing — compact horizontal lockup, divider before navigation */
.left-sidebar .brand-logo {
  padding: 20px 24px 18px !important; /* custom.css zeroes padding-bottom with !important */
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 10px !important;
}
[data-bs-theme="dark"] .left-sidebar .brand-logo {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   Chrome controls in dark mode

   `a { color: var(--brand-primary) }` above is the only colour these controls
   get, and --brand-primary is theme-stable (#17191E). The topbar and the
   sidebar header both INVERT, so in dark mode the sidebar-collapse toggle and
   the light/dark toggle rendered at 1.11:1 — effectively invisible.
   --erp-text-primary inverts, so it stays readable in both themes.
   ========================================================= */
[data-bs-theme="dark"] .topbar .navbar .navbar-nav .nav-item .nav-link,
[data-bs-theme="dark"] .topbar .navbar .navbar-nav .nav-item .nav-link .ti,
[data-bs-theme="dark"] .left-sidebar .sidebartoggler,
[data-bs-theme="dark"] .left-sidebar .sidebartoggler .ti,
[data-bs-theme="dark"] .topbar .sidebartoggler,
[data-bs-theme="dark"] .topbar .sidebartoggler .ti {
  color: var(--erp-text-primary);
}

/* =========================================================
   MYKA PRO brand lockup — sidebar sizing

   The sidebar is 270px; .brand-logo pads 24px each side, so the lockup has
   222px of real estate. The lockup's intrinsic ratio is 649.4:120.35 (5.40:1),
   so height is what controls width here. 28px yields a 151px lockup — 68% of
   the content width, a 22px MYKA cap height, real breathing room at the right.

   Two earlier attempts are worth recording. At 34px the lockup rendered 214px
   wide and sat edge to edge: the "forced into the old container" look. Sizing
   alone did not fix it, because the artwork then scaled the symbol to only
   1.16x and left a 36-unit gap, so at 24px the Gate read as a letterform
   inside the word rather than as an independent mark. The artwork now scales
   the symbol to 1.45x — taller than the cap height — and opens the gap to 58
   units. Sizing and composition had to change together.

   Height is set, width is left auto: the intrinsic viewBox ratio does the
   rest, so the artwork can never be stretched or squashed by this rule.
   ========================================================= */
.left-sidebar .myka-brand img {
  height: 25px;
  width: auto;
  display: block;
}

/* Collapsed rail is 87px and the template crops .logo-img to a 40px window.
   Cropping the full lockup there would show the Gate plus a slice of the M,
   so swap to the symbol instead and let it sit centred in the rail. */
.left-sidebar .myka-brand--mini {
  display: none;
}
.left-sidebar .myka-brand--mini img {
  height: 30px;
}
[data-sidebartype="mini-sidebar"] .left-sidebar .myka-brand--full {
  display: none;
}
[data-sidebartype="mini-sidebar"] .left-sidebar .myka-brand--mini {
  display: block;
  width: auto;      /* releases the template's 40px crop window */
  overflow: visible;
}
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center;
}

/* Narrow viewports: the mobile close control shares the row, so trim the
   lockup enough to keep a clear gap between them. */
@media (max-width: 1199.98px) {
  .left-sidebar .myka-brand img { height: 26px; }
  .left-sidebar .brand-logo { padding-right: 16px !important; }
}