/* ── Vested HR brand — VHR 2026 palette ──────────────────────────────────
   Navy = structure/navigation  |  Gold = action/accent/highlights

   CORE        Dark Navy   #081E4A     Gold        #C0B082
   HIGHLIGHT   Steel Blue  #385D93     Cream       #F5F3EE
               Charcoal    #3D3D3D     Bronze      #9C6B1A

   Derived steps (kept in-family, not new brand colours):
     Navy   #0A2761 gradient/hover · #051533 pressed
     Gold   #B29F66 hover · #9C884F pressed · #CFC3A0 gradient top
            #E6DBBC highlight band · #DCCDA3 striped · #5C4A18 text-on-gold
     Steel  #E9EEF7 subtle bg · #A6B8D4 subtle border

   Contrast rule: Gold #C0B082 is light (4.4 luminance). It carries Dark Navy
   text (7.6:1), never white (2.2:1). Where a gold-toned *foreground* is wanted
   on a white surface, use Bronze #9C6B1A (4.6:1) — Gold on white is only 2.2:1.
   ──────────────────────────────────────────────────────────────────────── */

/* Autocomplete dropdown */
[data-controller="autocomplete"] .dropdown-item:hover,
[data-controller="autocomplete"] .dropdown-item.active {
  background-color: #E6DBBC;
  color: #081E4A;
}
[data-controller="autocomplete"] .dropdown-item {
  cursor: pointer;
  font-size: .9rem;
  transition: background-color .1s;
}

/* Bootstrap color tokens */
:root {
  --bs-primary:           #081E4A;
  --bs-primary-rgb:       8, 30, 74;
  --bs-link-color:        #385D93;
  --bs-link-color-rgb:    56, 93, 147;
  --bs-link-hover-color:  #081E4A;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.site-navbar {
  background: #081E4A;
  box-shadow: 0 2px 16px rgba(8, 30, 74, 0.28);
}
.site-navbar .nav-link {
  color: rgba(255,255,255,0.78) !important;
  border-radius: .4rem;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
  color: #fff !important;
  background: rgba(255,255,255,0.1);
}
.site-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.16);
}

/* ── Primary button → Vested Gold CTA ─────────────────────────
   The 2026 Gold (#C0B082) is light enough that white label text only reaches
   2.2:1, so the label is Dark Navy across all three states of the gold ramp
   (base / hover / pressed) — 7.6:1, 6.2:1 and 4.7:1 respectively. */
.btn-primary {
  --bs-btn-color:               #081E4A;
  --bs-btn-bg:                  #C0B082;
  --bs-btn-border-color:        #C0B082;
  --bs-btn-hover-color:         #081E4A;
  --bs-btn-hover-bg:            #B29F66;
  --bs-btn-hover-border-color:  #B29F66;
  --bs-btn-focus-shadow-rgb:    192, 176, 130;
  --bs-btn-active-color:        #081E4A;
  --bs-btn-active-bg:           #9C884F;
  --bs-btn-active-border-color: #9C884F;
  --bs-btn-disabled-color:      #081E4A;
  --bs-btn-disabled-bg:         #C0B082;
  --bs-btn-disabled-border-color: #C0B082;
}

.btn-outline-primary {
  --bs-btn-color:               #081E4A;
  --bs-btn-border-color:        #081E4A;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #081E4A;
  --bs-btn-hover-border-color:  #081E4A;
  --bs-btn-focus-shadow-rgb:    8, 30, 74;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #051533;
  --bs-btn-active-border-color: #051533;
}

/* Admin Fee Method selection buttons → Gold when checked.
   Unchecked the label is Bronze on white (4.6:1); once the chip fills with Gold
   the label flips to Dark Navy (7.6:1). The border stays Gold throughout. */
.btn-outline-gold {
  --bs-btn-color:               #9C6B1A;
  --bs-btn-border-color:        #C0B082;
  --bs-btn-hover-color:         #081E4A;
  --bs-btn-hover-bg:            #C0B082;
  --bs-btn-hover-border-color:  #C0B082;
  --bs-btn-focus-shadow-rgb:    192, 176, 130;
  --bs-btn-active-color:        #081E4A;
  --bs-btn-active-bg:           #C0B082;
  --bs-btn-active-border-color: #C0B082;
  --bs-btn-disabled-color:      #9C6B1A;
  --bs-btn-disabled-border-color: #C0B082;
}

/* Deal-outcome buttons (Profitability Summary) → fancy gradient CTAs in the
   same family as the Vested Gold/Blue Save & Back buttons: soft gradient, inset
   highlight, colored shadow and a subtle lift on hover. Kept as `.btn` so they
   line up with the Generate Proposal button in the Actions row. */
.btn-won,
.btn-lost {
  color: #fff;
  border: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-won:hover, .btn-won:focus,
.btn-lost:hover, .btn-lost:focus {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.btn-won:active, .btn-lost:active,
.btn-won.active, .btn-lost.active {
  transform: translateY(0);
  filter: brightness(.95);
}

.btn-won {
  background: linear-gradient(130deg, #146c43 0%, #198754 58%, #23a86b 100%);
  box-shadow: 0 2px 6px rgba(21, 135, 84, .28), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.btn-won:hover, .btn-won:focus {
  box-shadow: 0 4px 12px rgba(21, 135, 84, .34), 0 1px 0 rgba(255, 255, 255, .3) inset;
}
.btn-won:active, .btn-won.active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
}

.btn-lost {
  background: linear-gradient(130deg, #a52834 0%, #dc3545 58%, #e86571 100%);
  box-shadow: 0 2px 6px rgba(220, 53, 69, .28), 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.btn-lost:hover, .btn-lost:focus {
  box-shadow: 0 4px 12px rgba(220, 53, 69, .34), 0 1px 0 rgba(255, 255, 255, .3) inset;
}
.btn-lost:active, .btn-lost.active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
}

/* Quote-builder action buttons → the same fancy CTA family as the outcome
   buttons: Vested Gold for the primary Save/Generate/Continue-to CTAs, Vested
   Blue for the Continue/utility actions (scoped to .quote-builder so the rest
   of the site's buttons stay as they were). */
.quote-builder .btn-primary {
  border: none;
  background: linear-gradient(130deg, #B29F66 0%, #C0B082 58%, #CFC3A0 100%);
  box-shadow: 0 2px 6px rgba(192, 176, 130, .30), 0 1px 0 rgba(255, 255, 255, .28) inset;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
}
.quote-builder .btn-primary:hover,
.quote-builder .btn-primary:focus {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(192, 176, 130, .36), 0 1px 0 rgba(255, 255, 255, .32) inset;
}
.quote-builder .btn-primary:active,
.quote-builder .btn-primary.active {
  transform: translateY(0);
  filter: brightness(.95);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
}

.quote-builder .btn-outline-primary {
  color: #fff;
  border: none;
  background: linear-gradient(130deg, #0A2761 0%, #081E4A 58%, #385D93 100%);
  box-shadow: 0 2px 6px rgba(8, 30, 74, .28), 0 1px 0 rgba(255, 255, 255, .22) inset;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
}
.quote-builder .btn-outline-primary:hover,
.quote-builder .btn-outline-primary:focus {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(8, 30, 74, .34), 0 1px 0 rgba(255, 255, 255, .26) inset;
}
.quote-builder .btn-outline-primary:active,
.quote-builder .btn-outline-primary.active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
}

/* The remaining builder buttons → same fancy gradient family, colored by role:
   slate for secondary/neutral, green for success, red for danger. (The gold
   Admin-Fee method-selector chips and plain text/btn-link buttons are left
   as-is so their toggle/link behavior is unchanged.) */
.quote-builder .btn-secondary,
.quote-builder .btn-outline-secondary,
.quote-builder .btn-success,
.quote-builder .btn-outline-success,
.quote-builder .btn-danger,
.quote-builder .btn-outline-danger {
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .16) inset;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
}
.quote-builder .btn-secondary:hover, .quote-builder .btn-secondary:focus,
.quote-builder .btn-outline-secondary:hover, .quote-builder .btn-outline-secondary:focus,
.quote-builder .btn-success:hover, .quote-builder .btn-success:focus,
.quote-builder .btn-outline-success:hover, .quote-builder .btn-outline-success:focus,
.quote-builder .btn-danger:hover, .quote-builder .btn-danger:focus,
.quote-builder .btn-outline-danger:hover, .quote-builder .btn-outline-danger:focus {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.quote-builder .btn-secondary:active, .quote-builder .btn-secondary.active,
.quote-builder .btn-outline-secondary:active, .quote-builder .btn-outline-secondary.active,
.quote-builder .btn-success:active, .quote-builder .btn-success.active,
.quote-builder .btn-outline-success:active, .quote-builder .btn-outline-success.active,
.quote-builder .btn-danger:active, .quote-builder .btn-danger.active,
.quote-builder .btn-outline-danger:active, .quote-builder .btn-outline-danger.active {
  transform: translateY(0);
  filter: brightness(.95);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
}
.quote-builder .btn-secondary,
.quote-builder .btn-outline-secondary {
  background: linear-gradient(130deg, #565f68 0%, #6c757d 58%, #868e96 100%);
}
.quote-builder .btn-success,
.quote-builder .btn-outline-success {
  background: linear-gradient(130deg, #146c43 0%, #198754 58%, #23a86b 100%);
}
.quote-builder .btn-danger,
.quote-builder .btn-outline-danger {
  background: linear-gradient(130deg, #a52834 0%, #dc3545 58%, #e86571 100%);
}

/* Utility overrides */
.text-primary   { color: #385D93 !important; }
.bg-primary     { background-color: #081E4A !important; }
.border-primary { border-color: #081E4A !important; }
.link-primary   { color: #385D93 !important; }

.bg-primary-subtle     { background-color: #E9EEF7 !important; }
.border-primary-subtle { border-color:     #A6B8D4 !important; }
.text-primary-emphasis { color:            #081E4A !important; }

/* Form focus → Gold ring (stands out on white surfaces) */
.form-control:focus,
.form-select:focus {
  border-color: #C0B082;
  box-shadow: 0 0 0 0.25rem rgba(192, 176, 130, 0.22);
}

/* Prevent Tailwind's .collapse utility (visibility:collapse) from hiding open Bootstrap accordions */
.accordion-collapse {
  visibility: visible !important;
}

/* Accordion active → Light Gold */
.accordion-button:not(.collapsed) {
  color:            #081E4A;
  background-color: #E6DBBC;
  box-shadow:       inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(192, 176, 130, 0.22);
}

/* Nav pills sidebar → Vested Blue active */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #081E4A;
}

/* Bootstrap nav-link (outside site-navbar) */
.nav-link:hover,
.nav-link:focus {
  color: #385D93;
}
.nav-link.active {
  color: #081E4A !important;
}

/* list-group hover */
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: #F5F3EE;
}

/* Table selected row → Light Gold */
.table-primary {
  --bs-table-bg:            #E6DBBC;
  --bs-table-striped-bg:    #DCCDA3;
  --bs-table-active-bg:     #DCCDA3;
  --bs-table-hover-bg:      #DCCDA3;
  --bs-table-border-color:  #C0B082;
  color: #081E4A;
}

/* Badge */
.badge.bg-primary { background-color: #081E4A !important; }

/* Progress bar → Gold */
.progress-bar { background-color: #C0B082; }

/* ── Sidebar layout ──────────────────────────────────────────── */
body {
  background: #ffffff;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

/* Cards get a light grey background so they stand out from the white page */
.card {
  --bs-card-bg: #f4f6f9;
}

/* Sidebar background — applies on both mobile (offcanvas) and desktop (fixed) */
.app-sidebar {
  --bs-offcanvas-bg: #081E4A;
  background: #081E4A !important;
  border-right: none !important;
}

/* Desktop: fixed sidebar */
@media (min-width: 992px) {
  .app-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px !important;
    z-index: 1040;
    visibility: visible !important;
    transform: none !important;
  }

  .sidebar-main {
    margin-left: 220px;
    padding: 1.25rem 1.5rem;
    min-height: 100vh;
  }
}

/* Mobile: full-width main */
@media (max-width: 991.98px) {
  .sidebar-main {
    padding: 1rem;
  }
}

/* Nav link base */
.sidebar-nav-link {
  color: rgba(255, 255, 255, 0.72);
  font-size: .875rem;
  font-weight: 500;
  transition: background .1s, color .1s;
}
.sidebar-nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.sidebar-nav-link.active {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 600;
}
.sidebar-nav-link.active i {
  color: #E6DBBC;
}

/* User link hover */
.sidebar-user-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Quote builder step navigation ───────────────────────────── */
.step-link-active {
  box-shadow: inset 0 -3px 0 0 #C0B082;
}

/* Horizontally scrollable step bar with a slim, visible scrollbar so it's
   obvious the trailing steps can be reached on a narrow window. */
.step-nav-scroll {
  overflow-x: auto;
  cursor: grab;                                        /* draggable to scroll */
  scrollbar-width: thin;                               /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}
/* While click-dragging the bar: show the grabbing cursor, suppress text
   selection, and make the step links inert so releasing a drag never
   accidentally navigates to a step. */
.step-nav-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.step-nav-scroll.is-dragging a { pointer-events: none; }
.step-nav-scroll::-webkit-scrollbar { height: 6px; }
.step-nav-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.step-nav-scroll::-webkit-scrollbar-track { background: transparent; }

/* Right-edge fade hint — shown (via step_nav controller) only while more steps
   remain off-screen to the right; hidden once scrolled to the end / all fit. */
.step-nav-wrap { position: relative; }
.step-nav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to right, rgba(8, 30, 74, 0), #081E4A);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.step-nav-wrap.has-overflow-end::after { opacity: 1; }

/* ── Quote builder step navigation badges ────────────────────── */
.step-badge-active {
  background: #C0B082;
  color: #3D3D3D;
  border: 1.5px solid #C0B082;
}
.step-badge-inactive {
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.4);
}

/* ── Required field dot indicators ──────────────────────────────
   .req-y  amber dot = required for a base quote estimate
   .req-g  green dot = required for final / complete pricing
   ─────────────────────────────────────────────────────────── */
.req-y::before,
.req-g::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.req-y::before { background: #d49a06; }
.req-g::before { background: #198754; }

.req-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem .9rem;
  align-items: center;
  font-size: .78rem;
  color: #64748b;
}

.req-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}

/* ── Sticky Notes (tester feature) ──────────────────────────── */

.sn-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 9000;
}

.sn-note {
  position: absolute;
  width: 230px;
  background: #fef9c3;
  border: 1px solid #e2ca5a;
  border-top: 3px solid #e2b800;
  border-radius: 3px;
  box-shadow: 3px 4px 12px rgba(0,0,0,0.18);
  padding: 0;
  pointer-events: all;
  cursor: grab;
  user-select: none;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
  transition: box-shadow .1s;
}

.sn-note.sn-acknowledged {
  background: #dcfce7;
  border-color: #86efac;
  border-top-color: #22c55e;
}

.sn-note.sn-dragging {
  cursor: grabbing;
  box-shadow: 6px 8px 20px rgba(0,0,0,0.28);
  z-index: 9100;
}

.sn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px 2px 0 0;
  gap: 4px;
}

.sn-author {
  font-size: 11px;
  font-weight: 700;
  color: #44380a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.sn-note.sn-acknowledged .sn-author { color: #14532d; }

.sn-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.sn-ack-btn,
.sn-del-btn {
  background: none;
  border: none;
  padding: 1px 4px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  color: #78716c;
  transition: background .15s, color .15s;
}
.sn-ack-btn:hover { background: #bbf7d0; color: #15803d; }
.sn-del-btn:hover { background: #fecaca; color: #dc2626; }

.sn-ack-badge {
  font-size: 14px;
  color: #16a34a;
  padding: 1px 4px;
}

.sn-body {
  padding: 8px 10px;
  color: #1c1917;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 40px;
}

.sn-footer {
  padding: 3px 10px 5px;
  font-size: 10px;
  color: #a8a29e;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.sn-add-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9001;
  background: #081E4A;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(8, 30, 74,0.35);
  transition: background .15s, transform .1s;
  display: flex;
  align-items: center;
}

.sn-add-btn:hover {
  background: #0A2761;
  transform: translateY(-1px);
}


/* ── Notes Tracker (feedback page) ──────────────────────────── */

.nt-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .15s, background .15s;
}

.nt-row:hover { border-color: #cbd5e1; }

.nt-row-acked {
  background: #f8fdf9;
  border-color: #bbf7d0;
  opacity: .85;
}

.nt-row-main { align-items: flex-start; }

.nt-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.nt-badge-open  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.nt-badge-acked { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }

.nt-note-content {
  word-break: break-word;
  line-height: 1.45;
}

.nt-action-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 15px;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s, border-color .15s;
}

.nt-action-btn:hover      { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.nt-ack-btn:hover         { background: #dcfce7; border-color: #86efac; color: #16a34a; }
.nt-ack-btn.nt-acked      { cursor: default; }
.nt-ack-btn[disabled]     { cursor: default; }
.nt-goto-btn:hover        { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.nt-del-btn:hover         { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.nt-subnote-btn:hover     { background: #f0f0ff; border-color: #c7d2fe; color: #4f46e5; }

.nt-subnote-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.nt-subnote-input {
  font-size: .83rem;
  resize: vertical;
  border-color: #e2e8f0;
}

.nt-filter-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: .8rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  transition: background .15s, color .15s;
}

.nt-filter-btn:hover,
.nt-filter-btn.active {
  background: #081E4A;
  border-color: #081E4A;
  color: #fff;
}

/* ── Workers' Comp step toggles (Carve-out, USL&H Exposure) ──────────────── */
/* Darker grey when on, so these underwriting flags read distinctly from the
   brand-navy switches used elsewhere. Scoped to .wc-toggle so it never leaks. */
.wc-toggle .form-check-input {
  width: 2.4rem;
  height: 1.2rem;
  cursor: pointer;
}
.wc-toggle .form-check-input:checked {
  background-color: #555b62;
  border-color: #4a4f55;
}
.wc-toggle .form-check-input:focus {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.2rem rgba(85, 91, 98, 0.20);
}

/* ── Carve-out / underwriting-flag toggle cards ─────────────────────────────
   Replaces the flat alert-light boxes (WC & EPLI carve-outs, USL&H exposure)
   with a rounded light-gray card and a Vested-Blue left accent bar, plus a soft
   lift on hover. When the flag is switched on the card deepens slightly and the
   blue accent darkens (via :has) so an active carve-out / exposure reads. */
.carveout-toggle {
  border: 1px solid #e3e5e8;
  border-left: 4px solid #385D93;
  border-radius: .65rem;
  background: linear-gradient(180deg, #fbfbfc 0%, #f4f5f6 100%);
  box-shadow: 0 1px 2px rgba(61, 61, 61, .05);
  transition: box-shadow .18s ease, border-color .18s ease, background .2s ease;
}
.carveout-toggle:hover {
  box-shadow: 0 5px 16px rgba(61, 61, 61, .10);
}
.carveout-toggle:has(.form-check-input:checked) {
  border-color: #d3d6da;
  border-left-color: #081E4A;
  background: linear-gradient(180deg, #f1f3f5 0%, #e8eaed 100%);
  box-shadow: 0 3px 12px rgba(61, 61, 61, .12);
}

/* ── Billing & Loss Analysis comparison table ───────────────────────────────
   Zebra striping + row hover on the wide grid for readability (the coloured
   header / total bands stay inline in the view). Data rows are the first
   <tbody>; the Totals tbody and grand-total tfoot are left untouched. */
.billing-table tbody:first-of-type tr td {
  transition: background-color .12s ease;
}
.billing-table tbody:first-of-type tr:nth-child(even) td {
  background-color: #fafbfc;
}
.billing-table tbody:first-of-type tr:hover td {
  background-color: #eef4fb;
}

/* ── System Operations → Permissions tab ─────────────────────────────────── */
/* Scoped so toggle restyling never leaks to checkboxes elsewhere in the app. */
#panel-permissions .form-check-input:checked {
  background-color: #081E4A;
  border-color: #081E4A;
}
#panel-permissions .form-check-input:focus {
  border-color: #C0B082;
  box-shadow: 0 0 0 0.2rem rgba(192, 176, 130, 0.18);
}
#panel-permissions .form-switch .form-check-input {
  width: 2.2rem;
  height: 1.15rem;
  cursor: pointer;
}
#panel-permissions .form-check-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* A permission row whose toggle differs from the role default. */
#panel-permissions [data-perm-row].is-custom {
  background: #f3f7fb;
  box-shadow: inset 3px 0 0 #081E4A;
}
#panel-permissions [data-perm-row] .perm-custom-flag {
  display: none;
}
#panel-permissions [data-perm-row].is-custom .perm-custom-flag {
  display: inline-block;
}

/* Selected user in the left list. */
#panel-permissions .perm-user-link.active {
  background: #E9EEF7;
  box-shadow: inset 3px 0 0 #081E4A;
}
#panel-permissions .perm-user-link.active .text-truncate {
  color: #081E4A;
}

/* Permissions / Activity Log sub-tabs: the active pill is navy, so its label
   must be white. Overrides the global `.nav-link.active { color: #081E4A }`
   (which is !important), hence !important here too. */
#panel-permissions .nav-pills .nav-link.active {
  color: #fff !important;
}
#panel-permissions .nav-pills .nav-link {
  color: #081E4A;
}

/* Login honeypot — kept out of the visual + a11y tree; bots that fill it are
   rejected server-side. (Inline styles on the field are the primary hide; this
   is a backup in case the field markup changes.) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}