/* =====================================================================
   FSM CRM v2 — custom layer over AdminLTE 4 / Bootstrap 5
   Brand accent: FSM orange (#F05A24). Keep this file small; it only
   overrides tokens and adds a few app-specific touches.
   ===================================================================== */

:root {
  --fsm-orange: #F05A24;
  --fsm-orange-dark: #d24a18;
  /* Re-point Bootstrap's primary to the FSM accent so buttons, links,
     active nav and small-boxes pick it up automatically. */
  --bs-primary: #F05A24;
  --bs-primary-rgb: 240, 90, 36;
}

/* Buttons / links that map to primary */
.btn-primary {
  --bs-btn-bg: var(--fsm-orange);
  --bs-btn-border-color: var(--fsm-orange);
  --bs-btn-hover-bg: var(--fsm-orange-dark);
  --bs-btn-hover-border-color: var(--fsm-orange-dark);
  --bs-btn-active-bg: var(--fsm-orange-dark);
  --bs-btn-active-border-color: var(--fsm-orange-dark);
}
a { color: var(--fsm-orange); }
a:hover { color: var(--fsm-orange-dark); }

/* Sidebar active item accent */
.app-sidebar .sidebar-menu .nav-link.active {
  background-color: var(--fsm-orange);
  color: #fff;
}

/* Content header spacing */
.app-content-header h3 { font-weight: 600; letter-spacing: .2px; }

/* =====================================================================
   Sidebar sub-menus (14-Aug) — Reports and Appointments expand.
   The chevron is a separate button so the TITLE stays an ordinary link;
   see the comment in layout-top.asp for why AdminLTE's own treeview is
   not used here.
   ===================================================================== */
.app-sidebar .fsm-navrow > .nav-link { min-width: 0; }

.app-sidebar .fsm-subtoggle {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: .5rem .6rem;
  margin-right: .25rem;
  color: inherit;
  opacity: .85;   /* the chevron is the ONLY affordance for the sub-menu —
                     at .6 it sat on the WCAG non-text-contrast floor */
  line-height: 1;
  cursor: pointer;
  border-radius: .375rem;
}
.app-sidebar .fsm-subtoggle:hover,
.app-sidebar .fsm-subtoggle:focus-visible {
  opacity: 1;
  background-color: rgba(255, 255, 255, .1);
}
.app-sidebar .fsm-subtoggle > i {
  display: block;
  transition: transform .2s ease;
}
.app-sidebar .fsm-subtoggle.show > i { transform: rotate(90deg); }

.app-sidebar .fsm-subnav { padding-left: 1.1rem; }
.app-sidebar .fsm-subnav .nav-link {
  padding-top: .35rem;
  padding-bottom: .35rem;
  font-size: .9rem;
}
.app-sidebar .fsm-subnav .nav-icon { font-size: .8rem; opacity: .75; }

/* The GROUP header when you are inside it. Full orange .active is reserved
   for the leaf you are actually on — without this the section and the page
   render as two identical orange bars with nothing to separate them. */
.app-sidebar .sidebar-menu .nav-link.fsm-group-current {
  background-color: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 600;
}

/* Collapsed sidebar: there is no room for either affordance. Mirrors
   AdminLTE's own `.sidebar-collapse .app-sidebar:not(:hover)` idiom so the
   sub-menu returns on hover exactly like the rest of the labels do. */
.sidebar-collapse .app-sidebar:not(:hover) .fsm-subnav,
.sidebar-collapse .app-sidebar:not(:hover) .fsm-subtoggle { display: none; }

/* Reduced-motion users get the state change without the sweep. */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar .fsm-subtoggle > i { transition: none; }
}

/* The theme switch's selected item. Bootstrap compiles
   --bs-dropdown-link-active-bg to a literal #0d6efd, so repointing
   --bs-primary to the FSM accent does NOT reach it — the brand-new navbar
   control would otherwise ship with a Bootstrap-blue highlight. */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--fsm-orange);
  color: #fff;
}

/* Login page */
.login-page { background: linear-gradient(160deg, #0b1e3a 0%, #12294a 60%, #1c3559 100%); }
.login-logo a { color: #fff; font-weight: 700; letter-spacing: .5px; }
.login-box { width: 380px; max-width: 92vw; }
.login-card-body { border-radius: .5rem; }
.login-accent { height: 4px; background: var(--fsm-orange); border-radius: 4px 4px 0 0; }

/* Dashboard small-box tiles keep the accent on the icon */
.small-box .small-box-icon { opacity: .35; }

/* Dense tables — the daily workhorse screens */
table.table-fsm { font-size: .9rem; }
table.table-fsm thead th { white-space: nowrap; }

/* =====================================================================
   THEME-AWARE CHROME (14-Aug, FSMcrm02.10)

   Everything below exists for one reason: a colour was baked in as a
   LITERAL -- either by Bootstrap at compile time, or by a vendored
   stylesheet written before Bootstrap 5.3 had a dark mode -- so it could
   only ever be right in ONE theme. Each rule re-points that literal at a
   Bootstrap 5.3 theme token, which then flips with data-bs-theme for
   free. Nothing here is keyed to a specific theme.
   ===================================================================== */

/* ---- Quiet neutral badge --------------------------------------------
   Replaces `badge text-bg-light` (+ `text-dark` / `border`). Bootstrap
   compiles `.text-bg-light` down to `color:#000; background:#f8f9fa` --
   both LITERALS -- so that chip stayed paper-white in dark mode while
   every badge around it flipped.

   Deliberately NOT folded into the existing `text-bg-secondary`
   convention: at several of these sites a quiet chip sits in the SAME
   ROW as a `text-bg-secondary` one (Forecast beside Manual in the
   cashflow ledger; the note-type chip beside the entity-type chip in
   Notes & Tags and in Follow-ups), and merging them would throw away a
   distinction that is doing work. This keeps the "lighter than
   secondary" reading in BOTH themes.

   Used by: includes/notes.asp, includes/cashflow.asp,
   admin/note-tags.asp, reports/follow-ups/default.asp. */
.badge-quiet {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  font-weight: 500;
}

/* ---- Tom Select 2.4.3 -----------------------------------------------
   The vendored Bootstrap-5 theme predates BS 5.3's dark mode. It uses
   var(--bs-*) for most things but bakes literals into the text colour,
   the multi-select chips and the dropdown border.

   MEASURED LIVE on clients/default.asp, 14-Aug, BEFORE this fix:
     dark  -- .ts-control color #343a40 on background #212529, about
              1.2:1, i.e. a selected value was effectively invisible
     light -- .ts-control border-color #495057, visibly heavier than the
              date inputs and the native <select> beside it
   The border was resolving to the OPPOSITE theme's token in each mode,
   which is why the control read as wrong in light as well as in dark.

   fsm-admin.css is the LAST stylesheet in <head> (layout-top.asp line
   167, after tom-select's at 166), so a matching-specificity rule wins
   on source order; the two-class selectors beat the vendored
   single-class ones outright. */
/* ⚠ Qualified with `.ts-wrapper` (0,2,0) rather than left as a bare
   `.ts-control` (0,1,0). BOTH adversarial reviewers found this
   independently: admin/directory.asp:114 re-links the vendored Tom Select
   sheet in the BODY, AFTER layout-top.asp has already loaded this file, so
   on that one page -- the page with the most Tom Select controls in the
   app -- an equal-specificity rule LOSES on source order and the #343a40
   text would have survived. Every other new rule here was already
   two-class and immune. Safe: Tom Select always renders .ts-control and
   .ts-dropdown inside .ts-wrapper, and neither init in
   includes/layout-bottom.asp (lines 13 and 69) passes `dropdownParent`. */
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.ts-wrapper .ts-dropdown {
  color: var(--bs-body-color);
}
.ts-wrapper .ts-control {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
.ts-wrapper .ts-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
.ts-wrapper .ts-dropdown .optgroup-header {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}
.ts-wrapper .ts-dropdown .active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
/* The chips in a multi picker: #efefef background with #343a40 text, a
   light chip that never flipped. Active was Bootstrap blue (#0d6efd),
   not the FSM accent. */
.ts-wrapper.multi .ts-control > div {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.ts-wrapper.multi .ts-control > div.active {
  background-color: var(--fsm-orange);
  color: #fff;
}
/* remove_button's divider, hardcoded #dee2e6 (and #fff when disabled). */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { border-left-color: var(--bs-border-color); }
.ts-wrapper.plugin-remove_button.rtl .item .remove { border-right-color: var(--bs-border-color); }

/* DataTables 2.1.8 was CHECKED and needs nothing: --dt-row-stripe,
   --dt-row-hover and --dt-column-ordering all measured 0,0,0 in light
   and 255,255,255 in dark, so its chrome already flips. The one literal
   left is --dt-row-selected (Bootstrap blue), and no table in this app
   uses row selection. Recorded here so the next sweep does not re-check
   it from scratch. */

/* ---- Appointment-report history rows --------------------------------
   Was `background: rgba(0,0,0,.03)`, inlined in BOTH appointment
   reports. Darkening an already-dark surface by 3% is invisible, so the
   child rows lost their tint the moment the theme switch shipped.
   --bs-emphasis-color-rgb is 0,0,0 in light and 255,255,255 in dark,
   which is exactly the flip this needs. Kept here rather than in the two
   page <style> blocks so there is one definition instead of two that can
   drift apart. */
.ap-hist { background: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), .04); }

/* Panel/section title rows (Names, Address, …) — theme-consistent grey so
   the sections stand out inside slideouts and forms in dark AND light. */
.card > .card-header {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.card > .card-header .card-title { font-weight: 600; }

/* ---- Quiet card ------------------------------------------------------
   A report card the current user cannot open. Replaces
   `card h-100 shadow-sm opacity-50`.

   `opacity-50` halves EVERYTHING on the element -- the border and the
   shadow, but also the text -- so an unavailable state that should have
   been a colour was being expressed as transparency. MEASURED LIVE on
   reports/default.asp, 17-Aug, BEFORE this fix, against a 4.5:1 bar:
     dark   -- title 3.93:1, body text 2.85:1
     light  -- title 3.10:1, body text 2.23:1   (worst case)
   The live card beside it measured 11.85:1 / 7.29:1 dark.

   Same defect class as .badge-quiet above. The muted reading now comes
   from a dashed border and the secondary background, not from alpha, so
   the text stays at full strength in both themes. `text-muted` is
   REMOVED from the markup at these sites rather than overridden here:
   Bootstrap compiles it with !important, and out-specifying it would
   mean matching that (see the vendored-stylesheet rule).

   Used by: reports/default.asp (5 sites), appointments/default.asp (2). */
.card-quiet {
  background-color: var(--bs-secondary-bg);
  border-style: dashed;
}
.card-quiet .card-title,
.card-quiet .card-text,
.card-quiet .fa-solid {
  color: var(--bs-secondary-color);
}