/*
  LIOS for Business — Sociafy-style UI/UX layer (v3)
  Presentation-only. Loaded after site.css, uat-premium.css, uat-executive.css and lios-v2.css.
  Business rules, routes, controller actions, model binding and authorization are intentionally untouched.
*/
/* ---------- Brand typeface: 29LT Zarid Sans (licensed font, served locally) ---------- */
/* Brand guideline: Zarid Sans Regular and Bold only. Any declared weight renders as one of the two brand cuts
   (100–549 → Regular, 550–900 → Bold), so legacy 500/600/650/800/900 declarations can never load an off-brand cut. */
@font-face{font-family:"29LT Zarid Sans";src:url("../fonts/zarid-sans/29LTZaridSans-Regular.otf") format("opentype");font-weight:100 549;font-style:normal;font-display:swap}
@font-face{font-family:"29LT Zarid Sans";src:url("../fonts/zarid-sans/29LTZaridSans-Bold.otf") format("opentype");font-weight:550 900;font-style:normal;font-display:swap}
body.lios-ui-v2,body.auth-body,body.auth-body-centered{font-family:"29LT Zarid Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
:root{
  /* Brand palette — 70% dark primary, 10% each mint/lavender/peach accent, neutrals */
  --lv3-orange:#1e1d2d;
  --lv3-orange-deep:#100f19;
  --lv3-orange-soft:#e2e2e2;
  --lv3-mint:#c0dfd3;
  --lv3-mint-soft:#eef7f3;
  --lv3-lavender:#cbd0e8;
  --lv3-lavender-soft:#eef0f9;
  --lv3-peach:#f8dbc4;
  --lv3-peach-soft:#fdf3ec;
  --lv3-gradient:linear-gradient(to left,#1e1d2d 0%,#4a495e 100%);
  --lv3-gradient-shadow:0 10px 24px rgba(30,29,45,.28);
  --lv3-ink:#1e1d2d;
  --lv3-text:#2c2e3e;
  --lv3-muted:#646677; /* AA ≥4.9:1 on every light surface (was #8b8d9c, ~3:1) */
  --lv3-subtle:#646677; /* used for text; aligned to AA muted (was #a7a9b8, ~2.4:1) */
  --lv3-bg:#eef0f5;
  --lv3-surface:#ffffff;
  --lv3-surface-soft:#fbfbfe;
  --lv3-line:#ececf3;
  --lv3-line-strong:#e1e2ec;
  --lv3-success:#1fa971;
  --lv3-success-soft:#e9f9f1;
  --lv3-warning:#e2962c;
  --lv3-warning-soft:#fff4e3;
  --lv3-danger:#ef5a68;
  --lv3-danger-soft:#feecee;
  --lv3-purple:#8890b5;
  --lv3-purple-soft:var(--lv3-lavender-soft);
  --lv3-blue:#6ba79a;
  --lv3-blue-soft:var(--lv3-mint-soft);
  --lv3-radius-sm:10px;
  --lv3-radius:16px;
  --lv3-radius-lg:20px;
  --lv3-shadow-xs:0 2px 8px rgba(30,32,56,.04);
  --lv3-shadow-sm:0 10px 26px rgba(30,32,56,.06);
  --lv3-shadow-md:0 20px 50px rgba(30,32,56,.09);
  --lv3-sidebar:264px;

  /* remap v2 tokens so every existing hook repaints without markup changes */
  --lios-purple:var(--lv3-orange);
  --lios-purple-deep:var(--lv3-orange-deep);
  --lios-line:var(--lv3-line);
  --lios-bg:var(--lv3-bg);
  --lios-ink:var(--lv3-ink);
  --lios-muted:var(--lv3-muted);
  --lios-shadow-sm:var(--lv3-shadow-xs);
  --lios-shadow:var(--lv3-shadow-sm);
  --lios2-navy-950:var(--lv3-surface);
  --lios2-navy-900:var(--lv3-surface);
  --lios2-navy-850:var(--lv3-surface);
  --lios2-navy-800:var(--lv3-surface);
  --lios2-blue-700:var(--lv3-orange-deep);
  --lios2-blue-600:var(--lv3-orange);
  --lios2-blue-500:var(--lv3-orange);
  --lios2-cyan-500:var(--lv3-orange-deep);
  --lios2-ink:var(--lv3-ink);
  --lios2-text:var(--lv3-text);
  --lios2-muted:var(--lv3-muted);
  --lios2-subtle:var(--lv3-subtle);
  --lios2-bg:var(--lv3-bg);
  --lios2-bg-soft:var(--lv3-surface-soft);
  --lios2-surface:var(--lv3-surface);
  --lios2-surface-soft:var(--lv3-surface-soft);
  --lios2-line:var(--lv3-line);
  --lios2-line-strong:var(--lv3-line-strong);
  --lios2-success:var(--lv3-success);
  --lios2-warning:var(--lv3-warning);
  --lios2-danger:var(--lv3-danger);
  --lios2-radius-sm:var(--lv3-radius-sm);
  --lios2-radius:var(--lv3-radius);
  --lios2-radius-lg:var(--lv3-radius-lg);
  --lios2-shadow-xs:var(--lv3-shadow-xs);
  --lios2-shadow-sm:var(--lv3-shadow-sm);
  --lios2-shadow-md:var(--lv3-shadow-md);
  --lios2-sidebar:var(--lv3-sidebar);
}

html{background:var(--lv3-bg)!important}
body.lios-ui-v2{background:var(--lv3-bg)!important;color:var(--lv3-text)!important}
body.lios-ui-v2::before{background:var(--lv3-bg)!important}
::selection{background:rgba(255,122,61,.18)!important;color:var(--lv3-ink)!important}
body.lios-ui-v2 :focus-visible{outline:3px solid rgba(255,122,61,.4)!important}

/* ---------- Sidebar: light, card-like, pill active state ---------- */
.sidebar{
  width:var(--lv3-sidebar)!important;
  padding:20px 16px 18px!important;
  background:var(--lv3-surface)!important;
  border-right:1px solid var(--lv3-line)!important;
  box-shadow:none!important;
}
.main{margin-left:var(--lv3-sidebar)!important;width:calc(100% - var(--lv3-sidebar))!important}

.sidebar-topline{margin-bottom:18px!important}
.brandmark{flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
.brandmark strong{color:var(--lv3-ink)!important;font-weight:800!important}
.brandmark small{color:var(--lv3-muted)!important;display:block!important;font-size:9px!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin-left:2px!important}
.brand-orb{
  width:150px!important;
  height:40px!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  border-color:transparent!important;
  background-size:contain!important;
  background-position:left center!important;
}
.sidebar-close{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}

.org-switcher{
  background:var(--lv3-surface-soft)!important;
  border:1px solid var(--lv3-line)!important;
}
.org-switcher .logo-chip{background:var(--lv3-orange-soft)!important;border-color:transparent!important;color:var(--lv3-orange-deep)!important}
.org-switcher strong{color:var(--lv3-ink)!important}
.org-switcher small{color:var(--lv3-muted)!important}
.org-switcher>i{color:var(--lv3-subtle)!important}

.side-nav .nav-label{color:var(--lv3-subtle)!important}
.side-nav a{
  color:#5c5e70!important;
  border-radius:999px!important;
  border-color:transparent!important;
  font-weight:600!important;
}
.side-nav a i{color:#9294a5!important}
.side-nav a:hover{background:var(--lv3-surface-soft)!important;color:var(--lv3-ink)!important;border-color:var(--lv3-line)!important}
.side-nav a.active{
  background:var(--lv3-gradient)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:var(--lv3-gradient-shadow)!important;
}
.side-nav a.active i{color:#fff!important}
.side-nav a.active::after{background:#fff!important;box-shadow:none!important}
/* "Available soon" launch state (FeatureFlags: Features:{Name}Enabled="Soon"). Theme tokens keep it legible in both themes. */
.side-nav .soon-badge{margin-left:auto;padding:.1rem .5rem;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.03em;background:var(--lv3-lavender-soft);color:var(--lv3-ink);border:1px solid var(--lv3-line)}

.secure-note{background:var(--lv3-surface-soft)!important;border:1px solid var(--lv3-line)!important;color:var(--lv3-text)!important}
.secure-note i{color:var(--lv3-success)!important}
.secure-note strong{color:var(--lv3-ink)!important}
.secure-note small{color:var(--lv3-muted)!important}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--lv3-bg)!important;
  border-bottom:1px solid transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.workspace-context-icon{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important;border-color:transparent!important}
.workspace-context small{color:var(--lv3-muted)!important}
.workspace-context strong{color:var(--lv3-ink)!important}
.icon-btn{background:var(--lv3-surface)!important;border-color:var(--lv3-line)!important;color:#5c5e70!important;box-shadow:var(--lv3-shadow-xs)!important}
.icon-btn:hover{border-color:var(--lv3-orange)!important;color:var(--lv3-orange-deep)!important;background:var(--lv3-orange-soft)!important}
.publish-btn{background:var(--lv3-gradient)!important;border-color:transparent!important;box-shadow:var(--lv3-gradient-shadow)!important}
.publish-btn:hover{filter:brightness(1.05)!important;border-color:transparent!important}
.user-chip:hover{background:var(--lv3-surface)!important}
.avatar{background:var(--lv3-gradient)!important;box-shadow:var(--lv3-gradient-shadow)!important}
.user-chip-copy strong{color:var(--lv3-ink)!important}
.user-chip-copy small{color:var(--lv3-muted)!important}
.premium-dropdown{border-color:var(--lv3-line)!important;box-shadow:var(--lv3-shadow-md)!important;border-radius:14px!important}

/* ---------- Heading system ---------- */
.page-heading,.page-head{border-bottom:0!important;padding-bottom:0!important;margin-bottom:24px!important}
.page-heading::after,.page-head::after{content:none!important}
.dashboard-heading{border:0!important;background:transparent!important;padding:0 0 24px!important;border-radius:0!important;box-shadow:none!important}
.dashboard-heading::after{content:none!important}
.eyebrow,.section-kicker{color:var(--lv3-orange-deep)!important}
.page-heading h1,.page-head h1{color:var(--lv3-ink)!important;font-weight:800!important}

/* ---------- Surfaces / panels / cards ---------- */
.panel,.panel-card,.metric-card,.content-card,.product-card,.room-card,.usage-strip,
.dashboard-kpi-grid,.kpi-grid,.analytics-kpi-grid-five,.event-row,.booking-row,
.booking-summary,.booking-summary-card,.plan-card,.mini-kpi,.offer-card,.verification-doc-card,
.verification-status-card,
.notification-center,.dashboard-action-grid,.priority-item,.ops-card{
  background:var(--lv3-surface)!important;
  border:1px solid var(--lv3-line)!important;
  border-radius:var(--lv3-radius)!important;
  box-shadow:var(--lv3-shadow-xs)!important;
}
.panel:hover,.product-card:hover,.room-card:hover,.content-card:hover{border-color:var(--lv3-line-strong)!important;box-shadow:var(--lv3-shadow-sm)!important}

/* Booking row columns are a CSS grid; grid/flex children don't shrink below their content's
   natural width by default, so a long unbroken line (e.g. "Respond by 02 Oct, 3:47 PM") could
   force its column wider than its minmax() share and overlap the neighbouring column/actions.
   min-width:0 lets each cell shrink to the grid track and wrap its text instead. Applies in
   both themes — this is a layout bug, not a colour one. */
.booking-row>*{min-width:0!important}
.booking-row small{white-space:normal!important;word-break:break-word!important}
.booking-actions{flex-wrap:wrap!important;min-width:140px!important}
.panel-head h3{color:var(--lv3-ink)!important}
.panel-head p{color:var(--lv3-muted)!important}
.soft-badge,.analytics-level-badge{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important;border-color:transparent!important}
.verified-badge{background:var(--lv3-success-soft)!important;color:#117a53!important;border-color:transparent!important}
.alert-success{background:var(--lv3-success-soft)!important;border-color:transparent!important;color:#0f7a52!important}
.alert-warning{background:var(--lv3-warning-soft)!important;border-color:transparent!important;color:#8a5c14!important}
.alert-danger{background:var(--lv3-danger-soft)!important;border-color:transparent!important;color:#a13543!important}

/* ---------- Dashboard KPI grid: separate rounded cards, not a fused strip ---------- */
.dashboard-kpi-grid,.kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.kpi-card,.analytics-kpi{
  border:1px solid var(--lv3-line)!important;
  border-radius:var(--lv3-radius)!important;
  box-shadow:var(--lv3-shadow-xs)!important;
  background:var(--lv3-surface)!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:118px!important;
  padding:18px 20px!important;
}
.kpi-icon{flex:0 0 auto!important;margin-top:1px!important}
/* Task 9: clickable KPI cards are real <button> elements (for native keyboard support), so the
   browser's default button chrome (border, font, text-align, cursor) needs resetting back to how
   the existing .kpi-card <div> already looked. Visual card styling itself is untouched. */
.kpi-card-clickable{width:100%!important;text-align:left!important;font:inherit!important;color:inherit!important;cursor:pointer!important;transition:box-shadow .15s ease,border-color .15s ease!important}
.kpi-card-clickable[aria-pressed="true"]{border-color:var(--lv3-orange)!important;box-shadow:0 0 0 2px var(--lv3-orange-soft)!important}
.kpi-card:hover,.analytics-kpi:hover{box-shadow:var(--lv3-shadow-sm)!important;transform:translateY(-2px)!important}
.kpi-card.primary-kpi{background:var(--lv3-gradient)!important;color:#fff!important;border-color:transparent!important}
.kpi-card.primary-kpi span,.kpi-card.primary-kpi small{color:rgba(255,255,255,.78)!important}
.kpi-card.primary-kpi h3{color:#fff!important}
.kpi-icon.purple{background:var(--lv3-purple-soft)!important;color:var(--lv3-purple)!important}
.kpi-icon.blue{background:var(--lv3-blue-soft)!important;color:var(--lv3-blue)!important}
.kpi-icon.orange{background:var(--lv3-peach-soft)!important;color:#b9793f!important}
.kpi-icon.green{background:var(--lv3-success-soft)!important;color:var(--lv3-success)!important}
.primary-kpi .kpi-icon{background:rgba(255,255,255,.2)!important;color:#fff!important}
.kpi-card h3{color:var(--lv3-ink)!important}
.kpi-card small.up,.analytics-kpi span.up{
  color:var(--lv3-success)!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  background:var(--lv3-success-soft)!important;
  padding:2px 7px 2px 4px!important;
  border-radius:999px!important;
  font-weight:700!important;
}
.kpi-card small.down,.analytics-kpi span.down{
  color:var(--lv3-danger)!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  background:var(--lv3-danger-soft)!important;
  padding:2px 7px 2px 4px!important;
  border-radius:999px!important;
  font-weight:700!important;
}
/* Honest KPI change: "No change" is neutral, never green (KpiDelta). Secondary fact sits on its own line. */
.kpi-card small.flat{color:var(--lv3-muted)!important;display:inline-flex!important;background:var(--lv3-surface-soft)!important;padding:2px 7px!important;border-radius:999px!important;font-weight:700!important}
.kpi-card small.kpi-fact{display:block!important;margin-top:6px!important;color:var(--lv3-muted)!important;font-size:13px!important;font-weight:400!important;background:none!important;padding:0!important}
/* Dashboard launch checklist (until first sale). */
.launch-progress{flex:0 0 160px;height:8px;border-radius:999px;background:var(--lv3-surface-soft);overflow:hidden;align-self:center}
.launch-progress span{display:block;height:100%;background:var(--lv3-mint);border-radius:inherit}
.launch-step.done .action-icon{background:var(--lv3-success-soft)!important;color:var(--lv3-success)!important}
.launch-step.done strong{color:var(--lv3-muted)!important;text-decoration:line-through}
/* Error shown inside the reopened modal (site.js keeps the typed values). */
.form-error-inline{border:0!important;border-radius:12px!important;background:var(--lv3-danger-soft)!important;color:var(--lv3-danger)!important;font-size:13px!important;margin-bottom:14px!important}
.metric-stack strong{color:var(--lv3-ink)!important}
.metric-stack i{color:var(--lv3-orange-deep)!important}

.dashboard-action-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.dashboard-action-grid a{
  border:1px solid var(--lv3-line)!important;
  border-radius:14px!important;
  background:var(--lv3-surface)!important;
}
.dashboard-action-grid a:hover{border-color:var(--lv3-orange)!important;box-shadow:var(--lv3-shadow-sm)!important;transform:translateY(-1px)!important}
.dashboard-action-grid .action-icon{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}

/* ---------- Buttons ---------- */
.btn{border-radius:12px!important;font-weight:600!important;letter-spacing:0!important}
.btn-primary{background:var(--lv3-gradient)!important;border-color:transparent!important;box-shadow:var(--lv3-gradient-shadow)!important}
.btn-primary:hover{filter:brightness(1.05)!important;border-color:transparent!important}
.btn-dark{background:var(--lv3-ink)!important;border-color:var(--lv3-ink)!important}
.btn-light{background:var(--lv3-surface)!important;border-color:var(--lv3-line)!important;color:var(--lv3-text)!important}
.btn-outline-primary{color:var(--lv3-orange-deep)!important;border-color:var(--lv3-orange)!important}
.btn-outline-primary:hover{background:var(--lv3-orange)!important;border-color:var(--lv3-orange)!important}
.btn-outline-secondary{border-color:var(--lv3-line-strong)!important;color:#5c5e70!important}

.table-responsive{border-radius:var(--lv3-radius)!important}
.table a:not(.btn){color:var(--lv3-orange-deep)!important}
.status-chip.published,.status-chip.active,.status-chip.completed,.status-chip.approved,.status-chip.verified{background:var(--lv3-success-soft)!important;color:#117a53!important}
.status-chip.pending,.status-chip.scheduled,.status-chip.pendingownerconfirmation,.status-chip.pendingpayment{background:var(--lv3-warning-soft)!important;color:#8a5c14!important}
.status-chip.cancelled,.status-chip.rejected,.status-chip.removed,.status-chip.paymentfailed,.status-chip.failed{background:var(--lv3-danger-soft)!important;color:#a13543!important}

/* ---------- Product / shop, events, rooms ---------- */
.product-image,.product-visual{background-color:var(--lv3-orange-soft)!important}
.price-line strong,.product-price{color:var(--lv3-ink)!important}
.product-badge.dark{background:var(--lv3-ink)!important;border-color:var(--lv3-ink)!important}
.progress-bar{background:var(--lv3-gradient)!important}
.event-date{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}

/* ---------- Booking / order queues, summary strips, hero banners ---------- */
.summary-strip,.employee-room-hero,.billing-hero,.dashboard-heading.onboarding-welcome,.onboarding-welcome,.hub-hero,.platform-hero{
  background:linear-gradient(135deg,var(--lv3-orange) 0%,var(--lv3-orange-deep) 100%)!important;
  border-radius:var(--lv3-radius-lg)!important;
  box-shadow:var(--lv3-shadow-md)!important;
}
.billing-scope span,.onboarding-state span{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.16)!important}

/* ---------- Onboarding journey ---------- */
.journey-progress{background:var(--lv3-surface)!important;border:1px solid var(--lv3-line)!important;box-shadow:var(--lv3-shadow-sm)!important}
.journey-step .step-dot{background:var(--lv3-surface-soft)!important;color:var(--lv3-subtle)!important}
.journey-step.complete .step-dot{background:var(--lv3-success-soft)!important;color:var(--lv3-success)!important}
.journey-step.current .step-dot{background:var(--lv3-lavender-soft)!important;color:var(--lv3-purple)!important;box-shadow:0 0 0 4px var(--lv3-lavender-soft)!important}

/* ---------- Plans / billing ---------- */
.plan-card.recommended{border-color:var(--lv3-orange)!important;background:linear-gradient(180deg,var(--lv3-surface),var(--lv3-surface-soft))!important}
.plan-card.recommended::before{background:var(--lv3-gradient)!important}
.plan-ribbon{background:var(--lv3-lavender-soft)!important;color:var(--lv3-purple)!important}
.plan-tier{color:var(--lv3-purple)!important}

/* ---------- Analytics ---------- */
.analytics-level-badge.basic{background:var(--lv3-surface-soft)!important;color:var(--lv3-muted)!important}
.analytics-level-badge.advanced{background:var(--lv3-lavender-soft)!important;color:var(--lv3-purple)!important}
.analytics-lock-icon{background:var(--lv3-lavender-soft)!important;color:var(--lv3-purple)!important}
.analytics-price{color:var(--lv3-purple)!important}
.funnel-step{border-left-color:var(--lv3-line)!important}
.funnel-step::before{background:var(--lv3-orange)!important;box-shadow:0 0 0 4px var(--lv3-orange-soft)!important}
.funnel-step>div>span{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}

/* ---------- Notifications ---------- */
.notification-item.unread{background:var(--lv3-surface-soft)!important}
.notification-icon{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}
.notification-count{background:var(--lv3-orange-soft)!important;color:var(--lv3-orange-deep)!important}

/* ---------- Modals / offcanvas ---------- */
.modal-content{border-radius:var(--lv3-radius-lg)!important;border-color:var(--lv3-line)!important}
.modal-header,.modal-footer{border-color:var(--lv3-line)!important}
.offcanvas{border-color:var(--lv3-line)!important}

/* ---------- Forms ---------- */
.form-control,.form-select{border-color:var(--lv3-line-strong)!important;border-radius:10px!important}
.form-control:focus,.form-select:focus{border-color:var(--lv3-orange)!important;box-shadow:0 0 0 .2rem var(--lv3-orange-soft)!important}
.form-check-input:checked{background-color:var(--lv3-orange)!important;border-color:var(--lv3-orange)!important}

/* ---------- Auth pages ---------- */
.auth-shell{background:var(--lv3-bg)!important}
.auth-visual{background:linear-gradient(160deg,var(--lv3-orange) 0%,var(--lv3-orange-deep) 100%)!important}
.auth-brand-orb{
  width:190px!important;
  height:52px!important;
  border-radius:0!important;
  background-color:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  background-size:contain!important;
  background-position:left center!important;
}
.auth-panel{background:var(--lv3-bg)!important}
.auth-card{background:#fff!important;border-color:var(--lv3-line)!important;border-radius:22px!important;box-shadow:0 24px 60px rgba(0,0,0,.35)!important}
.auth-btn,.auth-secondary-btn{border-radius:13px!important}
.auth-secondary-btn.btn-primary{background:var(--lv3-gradient)!important;border-color:transparent!important;box-shadow:var(--lv3-gradient-shadow)!important}
.auth-secondary-btn.btn-primary:hover{filter:brightness(1.08)!important;border-color:transparent!important}
.auth-secondary-btn.btn-dark{background:var(--lv3-ink)!important;border-color:var(--lv3-ink)!important}
.auth-note{background:var(--lv3-lavender-soft)!important;border-color:transparent!important}
.auth-note i{color:var(--lv3-purple)!important}
.auth-divider::before,.auth-divider::after{background:var(--lv3-line)!important}
.auth-status{background:var(--lv3-success-soft)!important;border-color:transparent!important;color:#0f7a52!important}
.auth-errors{background:var(--lv3-danger-soft)!important;border-color:transparent!important;color:#a13543!important}
.auth-method-note{background:var(--lv3-surface-soft)!important;color:#5c5e70!important}
.auth-mini-card{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.1)!important}
.auth-mini-card span{color:#8fd7bb!important}

.auth-help-row .form-check{display:flex!important;align-items:center!important;gap:.5rem!important;padding-left:0!important}
.auth-help-row .form-check-input{margin-left:0!important;flex:0 0 auto!important}
.auth-help-row .form-check-label{font-size:.82rem!important;color:#5c5e70!important;white-space:nowrap!important;margin-left:0!important}

/* ---------- Employee Room / onboarding welcome ---------- */
.onboarding-welcome{background:linear-gradient(135deg,#1c1d2b 0,#2b2c40 58%,var(--lv3-orange) 165%)!important}

/* ---------- Scrollbars ---------- */
html,
body.lios-ui-v2,
.sidebar,
.main,
.content,
.table-responsive,
textarea{
  scrollbar-width:thin;
  scrollbar-color:#c7c8d1 var(--lv3-bg);
}
html::-webkit-scrollbar,
body.lios-ui-v2::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar,
.content::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
textarea::-webkit-scrollbar{
  width:9px;
  height:9px;
}
html::-webkit-scrollbar-track,
body.lios-ui-v2::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track{
  background:var(--lv3-bg);
}
html::-webkit-scrollbar-thumb,
body.lios-ui-v2::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb{
  background-color:#c7c8d1;
  border-radius:8px;
  border:2px solid var(--lv3-bg)!important;
}
html::-webkit-scrollbar-thumb:hover,
body.lios-ui-v2::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover{
  background-color:var(--lv3-orange)!important;
}

@media (max-width:1099.98px){
  .sidebar{width:280px!important}
}

/* ---------- SweetAlert2 ---------- */
.lios-swal-toast{
  background:var(--lv3-surface)!important;
  border-radius:14px!important;
  box-shadow:0 12px 32px rgba(30,32,56,.16)!important;
  border:1px solid var(--lv3-line)!important;
  padding:12px 16px!important;
  font-family:inherit!important;
}
.lios-swal-toast .swal2-title{font-size:13px!important;font-weight:700!important;color:var(--lv3-ink)!important;margin:0 0 2px!important}
.lios-swal-toast .swal2-html-container{font-size:12.5px!important;color:var(--lv3-muted)!important;margin:0!important}
.lios-swal-toast .swal2-icon{width:32px!important;height:32px!important;margin:0 12px 0 0!important}
.lios-swal-modal{background:var(--lv3-surface)!important;border-radius:18px!important;font-family:inherit!important}
.lios-swal-modal .swal2-title{font-size:18px!important;font-weight:700!important;color:var(--lv3-ink)!important}
.lios-swal-modal .swal2-html-container{font-size:13px!important;color:var(--lv3-muted)!important}
.swal2-container{z-index:3000!important}

/* ---------- Theme toggle button ---------- */
.theme-toggle-btn{position:relative!important;overflow:hidden!important}
.theme-toggle-btn .bi-moon-stars{display:none!important}
.theme-toggle-btn .bi-sun{display:none!important}
html[data-theme="dark"] .theme-toggle-btn .bi-moon-stars{display:none!important}
html[data-theme="dark"] .theme-toggle-btn .bi-sun{display:inline-block!important}
html:not([data-theme="dark"]) .theme-toggle-btn .bi-moon-stars{display:inline-block!important}
html:not([data-theme="dark"]) .theme-toggle-btn .bi-sun{display:none!important}

/* ---------- Dark theme ----------
   These --lv3-* redefinitions apply at html[data-theme="dark"] scope (effectively :root),
   so every element anywhere in the page — sidebar, topbar and .content alike — sees the
   dark values of these variables. Because lios-v3.css already remaps the older --lios-*
   and --lios2-* tokens to these --lv3-* ones at :root (see lines 53-89), widening this
   redefinition to html-level automatically pushes dark colours through every selector in
   site.css/uat-premium.css/uat-executive.css/lios-v2.css that reads any of those tokens,
   with zero changes needed to those four files. */
html[data-theme="dark"]{
  --lv3-orange-soft:#2a2940;
  --lv3-mint-soft:#1d3a32;
  --lv3-lavender-soft:#26283f;
  --lv3-peach-soft:#3a2f28;
  --lv3-ink:#f1f1f6;
  --lv3-text:#d7d8e4;
  --lv3-muted:#9d9fb3;
  --lv3-subtle:#9d9fb3; /* AA on dark surfaces (was #7d7f95) */
  --lv3-bg:#15141f;
  --lv3-surface:#1e1d2d;
  --lv3-surface-soft:#242335;
  --lv3-line:#33324a;
  --lv3-line-strong:#3c3b56;
  --lv3-success-soft:#173328;
  --lv3-warning-soft:#3a2c14;
  --lv3-danger-soft:#3a1f24;
  --lv3-shadow-xs:0 2px 8px rgba(0,0,0,.24);
  --lv3-shadow-sm:0 10px 26px rgba(0,0,0,.32);
  --lv3-shadow-md:0 20px 50px rgba(0,0,0,.4);
}
html[data-theme="dark"] .side-nav a{color:#b6b8cc!important}
html[data-theme="dark"] .side-nav a i{color:#8385a0!important}
html[data-theme="dark"] .topbar .icon-btn{color:#b6b8cc!important}
html[data-theme="dark"] .topbar .btn-outline-secondary{color:#b6b8cc!important}
/* .sidebar-close/.org-switcher .logo-chip/.workspace-context-icon/.icon-btn:hover use
   var(--lv3-orange-deep) as text/icon colour on top of var(--lv3-orange-soft); orange-deep is
   a brand-navy constant that stays near-black in dark mode too, so on the dark value of
   orange-soft that text would be almost invisible. Give these their own light dark-mode ink. */
html[data-theme="dark"] .sidebar-close,
html[data-theme="dark"] .org-switcher .logo-chip,
html[data-theme="dark"] .workspace-context-icon{color:#c0dfd3!important}
html[data-theme="dark"] .icon-btn:hover{color:#c0dfd3!important}
html[data-theme="dark"] .topbar .dropdown-menu{background:var(--lv3-surface)!important;border-color:var(--lv3-line)!important}
html[data-theme="dark"] .topbar .dropdown-item{color:var(--lv3-text)!important}
html[data-theme="dark"] .topbar .dropdown-item:hover{background:var(--lv3-surface-soft)!important}
html[data-theme="dark"] .topbar .dropdown-item-text{color:var(--lv3-text)!important}
html[data-theme="dark"] .topbar .dropdown-item-text strong{color:var(--lv3-ink)!important}
html[data-theme="dark"] .topbar .dropdown-item-text .text-muted{color:var(--lv3-muted)!important}
html[data-theme="dark"] .topbar .dropdown-divider{border-color:var(--lv3-line)!important}
html[data-theme="dark"] .sidebar{scrollbar-color:#44435e #15141f!important}
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb{
  background-color:#44435e!important;
}

/* ---------- Dark theme: explicit component overrides ----------
   Each visible component gets its own dark-native colours here (variable-driven wherever
   possible), instead of inverting the whole .content region and patching the fallout.
   <img>/<video>/<svg>/<canvas>/uploaded photos and background-image art need no rule at all —
   they simply keep rendering as authored since nothing here touches them. */
html[data-theme="dark"] .main{
  background:var(--lv3-bg)!important;
}

/* ---------- Buttons ---------- */
html[data-theme="dark"] .content .btn-primary{
  background:linear-gradient(to left,#4a495e 0%,#c0dfd3 100%)!important;
  color:#15141f!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .content .btn-primary:hover,
html[data-theme="dark"] .content .btn-primary:active{
  background:linear-gradient(to left,#4a495e 0%,#c0dfd3 100%)!important;color:#15141f!important;
}
html[data-theme="dark"] .content .btn-outline-primary{
  color:#c0dfd3!important;
  border-color:#c0dfd3!important;
  background:transparent!important;
}
html[data-theme="dark"] .content .btn-outline-primary:hover{
  background:#c0dfd3!important;
  color:#15141f!important;
}
html[data-theme="dark"] .content .btn-dark{
  background:#c0dfd3!important;
  border-color:transparent!important;
  color:#15141f!important;
}
html[data-theme="dark"] .content .btn-dark:hover{background:#d4ebe2!important;color:#15141f!important}
html[data-theme="dark"] .content .btn-light{
  background:var(--lv3-surface-soft)!important;
  border-color:var(--lv3-line)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .btn-light:hover{background:#2e2d44!important;color:var(--lv3-ink)!important}
html[data-theme="dark"] .content .btn-outline-secondary{
  color:#b6b8cc!important;
  border-color:var(--lv3-line-strong)!important;
  background:transparent!important;
}
html[data-theme="dark"] .content .btn-outline-secondary:hover{
  background:var(--lv3-surface-soft)!important;
  color:var(--lv3-ink)!important;
}
html[data-theme="dark"] .content .btn-success{
  background:#1fa971!important;
  border-color:#1fa971!important;
  color:#f1f1f6!important;
}
html[data-theme="dark"] .content .btn-outline-success{
  color:#5fd6a4!important;
  border-color:#1fa971!important;
  background:transparent!important;
}
html[data-theme="dark"] .content .btn-outline-success:hover{
  background:#1fa971!important;
  color:#f1f1f6!important;
}
html[data-theme="dark"] .content .btn-danger{
  background:#ef5a68!important;
  border-color:#ef5a68!important;
  color:#f1f1f6!important;
}
html[data-theme="dark"] .content .btn-outline-danger{
  color:#f38a95!important;
  border-color:#ef5a68!important;
  background:transparent!important;
}
html[data-theme="dark"] .content .btn-outline-danger:hover{
  background:#ef5a68!important;
  color:#f1f1f6!important;
}
html[data-theme="dark"] .content .btn-outline-warning{
  color:#f0b559!important;
  border-color:#e2962c!important;
  background:transparent!important;
}
html[data-theme="dark"] .content .btn-outline-warning:hover{
  background:#e2962c!important;
  color:#15141f!important;
}
html[data-theme="dark"] .content .product-badge.dark{
  background:var(--lv3-surface-soft)!important;
  border-color:var(--lv3-line)!important;
  color:var(--lv3-ink)!important;
}
html[data-theme="dark"] .content .product-badge{
  background:var(--lv3-surface)!important;
  border-color:var(--lv3-line)!important;
  color:var(--lv3-text)!important;
}

/* ---------- KPI cards / analytics KPIs ---------- */
html[data-theme="dark"] .content .kpi-card,
html[data-theme="dark"] .content .analytics-kpi{
  background:var(--lv3-surface)!important;
  border-color:var(--lv3-line)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .kpi-card h3,
html[data-theme="dark"] .content .analytics-kpi strong{color:var(--lv3-ink)!important}
html[data-theme="dark"] .content .kpi-card span,
html[data-theme="dark"] .content .kpi-card small,
html[data-theme="dark"] .content .analytics-kpi span,
html[data-theme="dark"] .content .analytics-kpi small{color:var(--lv3-muted)!important}
html[data-theme="dark"] .content .kpi-card small.up,
html[data-theme="dark"] .content .analytics-kpi span.up{color:#5fd6a4!important;background:var(--lv3-success-soft)!important}
html[data-theme="dark"] .content .kpi-card small.down,
html[data-theme="dark"] .content .analytics-kpi span.down{color:#f38a95!important;background:var(--lv3-danger-soft)!important}
html[data-theme="dark"] .content .kpi-icon.purple{background:var(--lv3-lavender-soft)!important;color:#a9aee0!important}
html[data-theme="dark"] .content .kpi-icon.blue{background:var(--lv3-mint-soft)!important;color:#7fc6b5!important}
html[data-theme="dark"] .content .kpi-icon.orange{background:var(--lv3-peach-soft)!important;color:#f0b878!important}
html[data-theme="dark"] .content .kpi-icon.green{background:var(--lv3-success-soft)!important;color:#5fd6a4!important}
html[data-theme="dark"] .content .kpi-card.primary-kpi{background:linear-gradient(to left,#4a495e 0%,#c0dfd3 100%)!important;color:#15141f!important}
html[data-theme="dark"] .content .kpi-card.primary-kpi h3,
html[data-theme="dark"] .content .kpi-card.primary-kpi span,
html[data-theme="dark"] .content .kpi-card.primary-kpi small{color:#15141f!important}
html[data-theme="dark"] .content .primary-kpi .kpi-icon{background:rgba(21,20,31,.16)!important;color:#15141f!important}
html[data-theme="dark"] .content .kpi-card .kpi-progress{background:#2c2d3e!important}

/* ---------- Placeholders, status chips, legends ---------- */
html[data-theme="dark"] .content .product-placeholder,
html[data-theme="dark"] .content .content-placeholder{
  background:linear-gradient(145deg,var(--lv3-surface-soft),var(--lv3-surface))!important;
}
html[data-theme="dark"] .content .product-placeholder-icon,
html[data-theme="dark"] .content .content-placeholder{
  color:#5c5e78!important;
}
html[data-theme="dark"] .content .product-image,
html[data-theme="dark"] .content .product-visual{
  background-color:var(--lv3-surface-soft)!important;
}
html[data-theme="dark"] .content .status-chip.draft{background:var(--lv3-orange-soft)!important;color:#b6b8cc!important}
html[data-theme="dark"] .content .status-chip.archived,
html[data-theme="dark"] .content .status-chip.completed{background:var(--lv3-surface-soft)!important;color:var(--lv3-muted)!important}
/* .verified-badge/.alert-*/.status-chip.* text colours are dark, readable "ink" shades meant
   to sit on the light pastel *-soft backgrounds; on the dark *-soft backgrounds those
   variables resolve to in dark mode, the same dark text would fail contrast. Swap in the
   light pastel shades already used elsewhere in this file for text-on-dark-soft pairs. */
html[data-theme="dark"] .content .verified-badge,
html[data-theme="dark"] .content .alert-success,
html[data-theme="dark"] .content .status-chip.published,
html[data-theme="dark"] .content .status-chip.active,
html[data-theme="dark"] .content .status-chip.approved,
html[data-theme="dark"] .content .status-chip.verified{color:#5fd6a4!important}
html[data-theme="dark"] .content .alert-warning,
html[data-theme="dark"] .content .status-chip.pending,
html[data-theme="dark"] .content .status-chip.scheduled,
html[data-theme="dark"] .content .status-chip.pendingownerconfirmation,
html[data-theme="dark"] .content .status-chip.pendingpayment{color:#f0b878!important}
html[data-theme="dark"] .content .alert-danger,
html[data-theme="dark"] .content .status-chip.cancelled,
html[data-theme="dark"] .content .status-chip.rejected,
html[data-theme="dark"] .content .status-chip.removed,
html[data-theme="dark"] .content .status-chip.paymentfailed,
html[data-theme="dark"] .content .status-chip.failed{color:#f38a95!important}
/* Chart.js legends/labels rendered as plain HTML next to a canvas (not on the canvas itself)
   still used light-mode-only greys; give them explicit dark-mode contrast. site.js redraws
   the canvas itself with a theme-aware palette (see liosRedrawCharts/chartPalette) whenever
   data-theme flips, independently of this CSS. */
html[data-theme="dark"] .content .legend{color:var(--lv3-muted)!important}
html[data-theme="dark"] .content .legend .dot-secondary{background:#5c5e78!important}
html[data-theme="dark"] .content .panel-head p,
html[data-theme="dark"] .content .metric-stack small,
html[data-theme="dark"] .content .analytics-range span{color:var(--lv3-muted)!important}

/* Phone-preview mobile mockup shop tiles reuse .media-mosaic (also used on the Media page for
   real photo placeholders), but here — inside the now-dark .premium-phone — they are plain
   empty bag-icon tiles, not photos, and need their own dark colours. */
html[data-theme="dark"] .content .premium-phone .preview-product-grid span{
  background:linear-gradient(145deg,var(--lv3-surface-soft),var(--lv3-surface))!important;
  color:#5c5e78!important;
}
/* Employee Room "Team Pulse" trend bars/date labels: the "suppressed" (no-data) bar used a
   light-grey diagonal stripe and the date labels under each bar used light-mode muted grey,
   both meant for a white background and unreadable once the surrounding panel went dark. */
html[data-theme="dark"] .content .pulse-bar.suppressed{
  background:repeating-linear-gradient(135deg,var(--lv3-line),var(--lv3-line) 5px,var(--lv3-surface-soft) 5px,var(--lv3-surface-soft) 10px)!important;
}
html[data-theme="dark"] .content .pulse-bar-wrap small{color:var(--lv3-muted)!important}
html[data-theme="dark"] .content .pulse-score-card,
html[data-theme="dark"] .content .pulse-stat{background:var(--lv3-surface)!important;border-color:var(--lv3-line)!important}
html[data-theme="dark"] .content .pulse-score-card small,
html[data-theme="dark"] .content .pulse-stat small,
html[data-theme="dark"] .content .pulse-score-card span,
html[data-theme="dark"] .content .pulse-stat span{color:var(--lv3-muted)!important}
html[data-theme="dark"] .content .pulse-score-card strong,
html[data-theme="dark"] .content .pulse-stat strong{color:var(--lv3-ink)!important}

/* ---------- Tables (site.css/uat-premium.css/lios-v2.css hardcode header/row colours) ---------- */
html[data-theme="dark"] .content .table,
html[data-theme="dark"] .content .corporate-table,
html[data-theme="dark"] .content .analytics-table{color:var(--lv3-text)!important}
html[data-theme="dark"] .content .table thead th,
html[data-theme="dark"] .content .corporate-table thead th,
html[data-theme="dark"] .content .analytics-table thead th{
  background:var(--lv3-surface-soft)!important;
  color:var(--lv3-muted)!important;
  border-bottom-color:var(--lv3-line)!important;
}
html[data-theme="dark"] .content .table tbody td,
html[data-theme="dark"] .content .corporate-table tbody td,
html[data-theme="dark"] .content .analytics-table tbody td{
  border-bottom-color:var(--lv3-line)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .table tbody tr:hover,
html[data-theme="dark"] .content .table tbody tr:hover>td{background:var(--lv3-surface-soft)!important}
html[data-theme="dark"] .content .table td strong,
html[data-theme="dark"] .content .table tbody strong{color:var(--lv3-ink)!important}
html[data-theme="dark"] .content .table a:not(.btn){color:#c0dfd3!important}
html[data-theme="dark"] .content .table-empty{color:var(--lv3-muted)!important}
html[data-theme="dark"] .content .table-empty strong{color:var(--lv3-ink)!important}

/* ---------- Forms (lios-v2.css/uat-premium.css hardcode a white background/dark text) ---------- */
html[data-theme="dark"] .content .form-control,
html[data-theme="dark"] .content .form-select,
html[data-theme="dark"] .content .input-group-text{
  background-color:var(--lv3-surface)!important;
  border-color:var(--lv3-line-strong)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .form-control::placeholder{color:var(--lv3-subtle)!important}
html[data-theme="dark"] .content label,
html[data-theme="dark"] .content .form-label{color:var(--lv3-text)!important}
html[data-theme="dark"] .content .form-text,
html[data-theme="dark"] .content .field-hint,
html[data-theme="dark"] .content .form-hint{color:var(--lv3-muted)!important}

/* ---------- Modals / dropdowns anywhere in .content (topbar's own dropdown is handled above) ---------- */
html[data-theme="dark"] .content .modal-content{
  background:var(--lv3-surface)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .modal-header h4,
html[data-theme="dark"] .content .modal-header h3,
html[data-theme="dark"] .content .modal-body h5{color:var(--lv3-ink)!important}
html[data-theme="dark"] .content .modal-footer{background:var(--lv3-surface-soft)!important}
html[data-theme="dark"] .content .offcanvas{background:var(--lv3-surface)!important;color:var(--lv3-text)!important}
html[data-theme="dark"] .content .dropdown-menu{
  background:var(--lv3-surface)!important;
  border-color:var(--lv3-line)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .content .dropdown-item{color:var(--lv3-text)!important}
html[data-theme="dark"] .content .dropdown-item:hover{background:var(--lv3-surface-soft)!important;color:var(--lv3-ink)!important}

/* ---------- Orange-soft chips/icons ----------
   .eyebrow/.soft-badge/.metric-stack i/.dashboard-action-grid .action-icon/.event-date/
   .funnel-step>div>span/.notification-icon/.notification-count all pair var(--lv3-orange-deep)
   (a fixed brand-navy, near-black in both themes) as text/icon colour with
   var(--lv3-orange-soft) as background; orange-soft goes dark navy in dark mode, so that
   near-black text would be unreadable. Swap in the light mint accent used elsewhere for
   text-on-dark-soft pairs. */
html[data-theme="dark"] .content .eyebrow,
html[data-theme="dark"] .content .section-kicker,
html[data-theme="dark"] .content .soft-badge,
html[data-theme="dark"] .content .analytics-level-badge,
html[data-theme="dark"] .content .metric-stack i,
html[data-theme="dark"] .content .dashboard-action-grid .action-icon,
html[data-theme="dark"] .content .event-date,
html[data-theme="dark"] .content .funnel-step>div>span,
html[data-theme="dark"] .content .notification-icon,
html[data-theme="dark"] .content .notification-count{color:#c0dfd3!important}
html[data-theme="dark"] .content .funnel-step::before{box-shadow:0 0 0 4px var(--lv3-orange-soft)!important}

/* ---------- Logo (dark navy ink on transparent PNG) ----------
   The logo sits in .sidebar/.auth-visual, both dark by default, so without inverting it the
   logo art would keep its light-mode navy ink and disappear against the dark background. This
   is a real logic need, not an invert-hack artefact, so it stays. */
html[data-theme="dark"] .brand-orb,
html[data-theme="dark"] .auth-brand-orb{
  filter:invert(1) brightness(1.6)!important;
}

/* ---------- Auth pages (uat-premium.css hardcodes a white .auth-card and grey copy) ---------- */
html[data-theme="dark"] .auth-card{
  background:var(--lv3-surface)!important;
  color:var(--lv3-text)!important;
}
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .auth-card .eyebrow{color:var(--lv3-ink)!important}
html[data-theme="dark"] .auth-card>p{color:var(--lv3-muted)!important}
html[data-theme="dark"] .auth-choice-label{color:var(--lv3-subtle)!important}
html[data-theme="dark"] .auth-field label{color:var(--lv3-text)!important}
html[data-theme="dark"] .auth-status{background:var(--lv3-success-soft)!important;color:#5fd6a4!important}
html[data-theme="dark"] .auth-errors{background:var(--lv3-danger-soft)!important;color:#f38a95!important}
html[data-theme="dark"] .auth-method-note{background:var(--lv3-surface-soft)!important;color:var(--lv3-text)!important}
html[data-theme="dark"] .auth-method-note i{color:var(--lv3-ink)!important}
html[data-theme="dark"] .auth-password-policy{color:var(--lv3-muted)!important}
html[data-theme="dark"] .auth-help-row a{color:#c0dfd3!important}

/* ---------- App-wide text scale-up ----------
   Almost every font-size in the app is a hardcoded px value spread across ~100+ selectors
   in site.css/uat-premium.css/uat-executive.css/lios-v2.css, so there's no single variable
   to bump. zoom scales every font size, icon and spacing in the shell uniformly (roughly the
   +2px the user asked for at the small end, proportionally less at the large-heading end)
   without having to rewrite each declaration individually. .app-shell wraps both .sidebar
   and .main so the whole UI (nav, topbar, content) scales together and stays proportional. */
.app-shell{
  zoom:1.12;
}

/* ---------- Scrollable modals wrapped in a <form> ----------
   Bootstrap's .modal-dialog-scrollable only scrolls a .modal-body that is a direct flex child of
   .modal-content. The product Edit modal wraps header/body/footer in a <form>, so the body never
   scrolled and the footer (Cancel / Save) was pushed below the viewport. Let the form pass the
   flex layout through so the body scrolls and the footer stays visible. */
.modal-dialog-scrollable .modal-content>form{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.modal-dialog-scrollable .modal-content>form>.modal-body{
  overflow-y:auto;
  min-height:0;
}

/* ---------- KPI cards with a capacity bar (Shop) ----------
   Shop's capacity figures use the same .kpi-card as the dashboard; the live progress bar sits
   under the value in place of the dashboard's sub-line. */
.kpi-card .kpi-progress{
  height:6px!important;
  margin-top:10px!important;
  border-radius:999px!important;
  background:var(--lv3-line)!important;
}
.kpi-card .kpi-progress .progress-bar{border-radius:999px!important}
html[data-theme="dark"] .content .kpi-card .kpi-progress{background:#2c2d3e!important}

/* ---------- Pagination (Views/Shared/_Pager.cshtml + js/lios-pagination.js) ----------
   One look for both server-paged lists (Shop, Orders) and client-paged lists (everything else). */
.lios-page-hidden{display:none!important}
.lios-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  padding:14px 4px 2px;
}
.panel>.lios-pager,.panel-card>.lios-pager,.panel .lios-pager{padding-left:20px;padding-right:20px;padding-bottom:16px}
.lios-pager-info{font-size:12px;color:var(--lv3-muted);font-weight:600}
.lios-pager .pagination{gap:4px;flex-wrap:wrap}
.lios-pager .page-link{
  min-width:32px;
  height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px!important;
  border:1px solid var(--lv3-line)!important;
  background:var(--lv3-surface);
  color:var(--lv3-text);
  font-size:12.5px;
  font-weight:700;
  box-shadow:none!important;
}
.lios-pager .page-link:hover{background:var(--lv3-surface-soft);border-color:var(--lv3-line-strong)!important;color:var(--lv3-ink)}
.lios-pager .page-item.active .page-link{background:var(--lv3-ink)!important;border-color:var(--lv3-ink)!important;color:#fff!important}
.lios-pager .page-item.disabled .page-link{color:var(--lv3-subtle);background:var(--lv3-surface)}
/* "Show [n] per page" selector inside the pager */
.lios-pager-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.lios-pager-size{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--lv3-muted);font-weight:600}
.lios-pager-size label{display:inline-flex;align-items:center;gap:6px;margin:0}
.lios-pager-size .form-select{width:auto;min-width:68px;height:32px;padding:0 28px 0 10px;font-size:12.5px;font-weight:700;border-radius:9px;border-color:var(--lv3-line);color:var(--lv3-text)}

/* ---------- Event rows: action buttons stay inside the card ----------
   (The action column is a fixed minimum - 120px, enough for "Ticket sales" + the menu - on every
   row, so free and paid events keep their demand bars aligned.)
   The last grid column was a fixed 40-44px (sized for the "..." menu alone), so paid events'
   "Ticket sales" button plus the menu overflowed the card. The column now sizes to its content and
   the other columns may shrink (minmax(0,...)). Viewport breakpoints (not container queries) are used
   here because .event-list also holds the per-event edit modals, which a query container would re-anchor. */
.event-row.enterprise{grid-template-columns:82px minmax(0,1fr) minmax(0,.7fr) minmax(120px,max-content)!important}
.event-row.enterprise>*{min-width:0}
.event-actions{align-items:center;justify-content:flex-end;flex-wrap:nowrap;justify-self:end}
.event-actions .btn{white-space:nowrap}
@media (max-width:1199px){
  .event-row.enterprise{grid-template-columns:72px minmax(0,1fr) minmax(0,.7fr) minmax(120px,max-content)!important}
}
@media (max-width:991.98px){
  .event-row.enterprise{grid-template-columns:62px minmax(0,1fr) auto!important}
  .event-row.enterprise>.event-demand{grid-column:2 / -1;grid-row:2}
  .event-row.enterprise>.date-tile{grid-row:1 / span 2;align-self:start}
}
@media (max-width:767px){
  .event-row.enterprise{grid-template-columns:62px minmax(0,1fr)!important}
  .event-row.enterprise>.event-demand{grid-column:2;grid-row:auto}
  .event-row.enterprise>.event-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
  .event-row.enterprise>.date-tile{grid-row:auto}
}

/* ---------- Booking rows: action buttons stay inside the card ----------
   The five columns had large minimum widths (about 850px in total) while the list sits in the
   narrower left column, so Confirm / Suggest time / Complete were pushed past the card edge. Columns
   now shrink, and the row re-flows based on the list's own width (container query - the list holds no
   modals), independent of the viewport width. */
.booking-list{container-type:inline-size}
.booking-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.1fr)!important;
  grid-template-areas:"time person status value actions";
}
.booking-row>.booking-time{grid-area:time}
.booking-row>.booking-person{grid-area:person}
.booking-row>.booking-status{grid-area:status}
.booking-row>.booking-value{grid-area:value;display:block!important}
.booking-row>.booking-actions{grid-area:actions;min-width:0!important;justify-content:flex-end}
.booking-actions .btn{white-space:nowrap}
@container (max-width:820px){
  .booking-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)!important;
    grid-template-areas:"time person value" "status status actions";
    row-gap:10px!important;
  }
  .booking-row>.booking-value{text-align:right}
}
@container (max-width:520px){
  .booking-row{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"time" "person" "status" "value" "actions";
    row-gap:8px!important;
  }
  .booking-row>.booking-value{text-align:left}
  .booking-row>.booking-actions{justify-content:flex-start}
}

/* ---------- Small screens: give the full width back to the page ----------
   .main above reserves the sidebar width with !important at every size, which also overrode
   lios-v2's own small-screen reset (the sidebar is an off-canvas drawer below 1100px), so the
   content kept a ~280px empty gutter on tablets/phones. Restore that reset at the same breakpoint. */
@media (max-width:1099.98px){
  .main{margin-left:0!important;width:100%!important}
}

/* KPI card rows: four across on desktop (unchanged), two on tablets, one on phones. The grid rule
   above is !important at every width, so without these the cards were squeezed four-wide on phones
   and pushed the page wider than the screen. */
@media (max-width:991.98px){
  .dashboard-kpi-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:575.98px){
  .dashboard-kpi-grid,.kpi-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- Button hover/pressed states: text always readable ----------
   Light mode: .btn-outline-primary forces its dark text with !important, so when hover fills it
   with the same dark ink the label disappeared; .btn-outline-secondary went grey-on-grey; and
   lios-v2's blue .btn-primary:hover (higher specificity) replaced the brand gradient. */
.btn-outline-primary:hover,.btn-outline-primary:focus-visible,.btn-outline-primary:active,
.btn-outline-primary.active,.btn-outline-primary.show{
  background:var(--lv3-orange)!important;border-color:var(--lv3-orange)!important;color:#fff!important;
}
.btn-outline-primary:hover i,.btn-outline-primary:active i{color:inherit!important}
.btn-outline-secondary:hover,.btn-outline-secondary:focus-visible,.btn-outline-secondary:active,
.btn-outline-secondary.active,.btn-outline-secondary.show{
  background:var(--lv3-surface-soft)!important;border-color:var(--lv3-ink)!important;color:var(--lv3-ink)!important;
}
.btn-primary:hover,.btn-primary:focus-visible,.btn-primary:active{
  background:var(--lv3-gradient)!important;border-color:transparent!important;color:#fff!important;
}

/* .btn-dark/.btn-light/.btn-outline-secondary/.btn-success/.btn-outline-success/.btn-danger/
   .btn-outline-danger/.btn-outline-warning dark-mode colours are declared once, above in the
   "Buttons" block, rather than repeated here. */

/* ==========================================================================================================
   Brand type & contrast floor (UI/UX Phase 2). Last in the cascade on purpose: guarantees the brand guideline's
   minimum size (10pt ≈ 13px on screen) and WCAG AA contrast regardless of the legacy layers above. Sizes follow the
   brand scale: 13 caption · 14 body · 20 section · 32 page title. Measured by scratchpad/uiaudit/measure.js.
   ========================================================================================================== */
.app-shell .side-nav a,.app-shell .side-nav a span{font-size:14px!important}
.app-shell .nav-label,.app-shell .section-kicker,.app-shell .eyebrow{font-size:13px!important;letter-spacing:.08em!important;color:var(--lv3-muted)!important}
.app-shell .org-switcher strong{font-size:14px!important}
.app-shell .org-switcher small,.app-shell .brandmark small,.app-shell .user-chip-copy small{font-size:13px!important;color:var(--lv3-muted)!important}
.app-shell .user-chip-copy strong{font-size:14px!important}
.app-shell .avatar{font-size:13px!important}
.app-shell .content p,.app-shell .content td,.app-shell .page-heading p{font-size:14px!important}
.app-shell .content th,.app-shell .content thead th,.app-shell .content th.text-end{font-size:13px!important;color:var(--lv3-muted)!important}
.app-shell .content small,.app-shell .content .small,.app-shell .content label,.app-shell .content .form-label,.app-shell .content time,
.app-shell .content .field-hint,.app-shell .content .lios-pager-info,.app-shell .content .lios-pager-size,.app-shell .content b{font-size:13px!important}
.app-shell .content .text-muted,.app-shell .content small.text-muted,.app-shell .content .small.text-muted,.app-shell .content .field-hint,
.app-shell .content .lios-pager-info,.app-shell .content time{color:var(--lv3-muted)!important}
.app-shell .status-chip,.app-shell .badge,.app-shell .soon-badge,.app-shell .kpi-card small.up,.app-shell .kpi-card small.down,.app-shell .kpi-card small.flat{font-size:13px!important}
.app-shell .btn,.app-shell .topbar .btn{font-size:14px!important}
.app-shell .btn-sm,.app-shell .dropdown-item{font-size:13px!important}
.app-shell .kpi-card > div > span{font-size:13px!important;color:var(--lv3-muted)!important}
/* KPI change chips: brand pastels with ink text (≥10:1) instead of tinted text on tint (~2.8:1). */
.app-shell .kpi-card small.up,.app-shell .analytics-kpi span.up{background:var(--lv3-mint)!important;color:var(--lv3-ink-fixed,#1e1d2d)!important}
.app-shell .kpi-card small.down,.app-shell .analytics-kpi span.down{background:var(--lv3-peach)!important;color:var(--lv3-ink-fixed,#1e1d2d)!important}
/* Remaining sub-13px components found by measurement (the phone preview is a deliberate miniature and is excluded). */
.app-shell .content :is(.metric-stack span,.text-link,.product-category,.pulse-stat span,.pulse-score-card span,.billing-scope span,.analytics-level-badge,.legend span,
  .alert,.alert strong,.date-tile span,.event-type,.room-meta span,.room-grant-chips span,.soft-badge,.plan-tier,.plan-price span,.plan-vat,.plan-ribbon,.add-on-card,
  .add-on-card span,.analytics-range span,.product-badge,.privacy-badge,.notification-count,.notification-item strong,.input-group-text,.status-dot-live){font-size:13px!important}
.app-shell .content small strong{font-size:inherit!important}
.app-shell .content :is(.form-control,.form-select,textarea){font-size:14px!important}
.app-shell .content :is(.metric-stack small,.metric-stack span,.pulse-stat span,.pulse-stat small,.pulse-score-card span,.pulse-score-card small,.funnel-step small,.price-line small,
  .event-info,.event-demand small,.room-meta span,.plan-price span,.plan-vat,.analytics-range span,.legend span,.input-group-text,.notification-item small){color:var(--lv3-muted)!important}
.app-shell .content :is(.plan-ribbon,.analytics-level-badge){background:var(--lv3-lavender)!important;color:#1e1d2d!important}
/* Dark mode: every text role reads from the dark tokens (fixes ink-on-ink cards, links, prices and outline buttons). */
html[data-theme="dark"] .app-shell .content :is(h1,h2,h3,h4,h5,h6,strong,b):not(.premium-phone *){color:var(--lv3-ink)!important}
html[data-theme="dark"] .app-shell .content a:not(.btn):not(.dropdown-item):not(.premium-phone *){color:var(--lv3-lavender)!important}
html[data-theme="dark"] .app-shell .content :is(.dashboard-action-grid a,.launch-step) :is(small){color:var(--lv3-muted)!important}
html[data-theme="dark"] .app-shell .btn-outline-primary{color:var(--lv3-lavender)!important;border-color:var(--lv3-lavender)!important;background:transparent!important}
html[data-theme="dark"] .app-shell .btn-outline-primary:hover{background:var(--lv3-lavender)!important;color:#1e1d2d!important}
/* Status chips in dark: brand pastel + brand ink (≥10:1), same meaning as light (mint = good, peach = attention). */
html[data-theme="dark"] .app-shell :is(.status-chip.active,.status-chip.published,.status-chip.completed,.status-chip.verified,.status-chip.approved,.verified-badge){background:var(--lv3-mint)!important;color:#1e1d2d!important}
html[data-theme="dark"] .app-shell :is(.status-chip.pending,.status-chip.scheduled,.status-chip.draft,.status-chip.pendingpayment,.status-chip.pendingownerconfirmation,.status-chip.pendingreview){background:var(--lv3-peach)!important;color:#1e1d2d!important}
html[data-theme="dark"] .app-shell .content .text-muted{color:var(--lv3-muted)!important}
/* Secondary text in both themes: all captions read from the AA muted token (legacy layers hard-code ~3:1 greys). */
.app-shell .content small:not(.up):not(.down):not(.flat):not(.badge *):not(.status-chip *):not(.btn *),
.app-shell .content :is(.event-info,.event-info p,.event-row span:not(.status-chip):not(.event-type):not(.badge):not(.date-tile *),.product-category,.plan-tier,.plan-card li span,.plan-card > span:not(.plan-ribbon),
  .notification-item p,.pulse-bar-wrap small,.analytics-finance-grid span){color:var(--lv3-muted)!important}
.app-shell .content :is(.date-tile span,.badge,.plan-ribbon){color:inherit}
/* Dark mode: containers that kept light-theme backgrounds become dark surfaces, so dark-theme text is legible on them. */
html[data-theme="dark"] .app-shell .content :is(.alert,.analytics-finance-grid > div,.notification-toolbar,.preview-confidence,.add-on-card){
  background:var(--lv3-surface-soft)!important;border-color:var(--lv3-line)!important;color:var(--lv3-text)!important}
html[data-theme="dark"] .app-shell .content .security-list b{background:var(--lv3-mint)!important;color:#1e1d2d!important}
html[data-theme="dark"] .app-shell .content .analytics-level-badge{background:var(--lv3-lavender)!important;color:#1e1d2d!important}
.app-shell .content p:not(.alert *):not(.premium-phone *):not(.kpi-card *){color:var(--lv3-muted)!important}
.app-shell .content .plan-ribbon{background:var(--lv3-lavender)!important;color:#1e1d2d!important}
.app-shell .content .date-tile span{color:#fff!important}
.app-shell .content .status-chip.draft{color:#44465a!important}
.app-shell .content .status-dot-live{color:#1e1d2d!important}
html[data-theme="dark"] .app-shell .content :is(.room-meta > span,.analytics-range){background:var(--lv3-surface-soft)!important;color:var(--lv3-muted)!important}
.app-shell .content :is(.analytics-finance-grid span,.hero-pill,small > strong){font-size:13px!important}
.app-shell .topbar .workspace-context small{font-size:13px!important;color:var(--lv3-muted)!important}
.app-shell .topbar .workspace-context strong{font-size:14px!important}
.app-shell .content :is(td strong,.user-cell strong,.dashboard-action-grid strong,.verification-doc-state strong,.security-list strong,.settings-toggle-list strong,
  .funnel-step strong,.audit-timeline strong,.event-demand strong,.plan-features strong,.preview-confidence strong){font-size:14px!important}
.app-shell .content :is(.employee-room-metrics span,.event-demand span,.plan-features span){font-size:13px!important}
.app-shell .content :is(td,.heading-actions,.panel-head) .btn,.app-shell .content .btn-sm{white-space:nowrap!important}
/* Layout: the storefront phone preview fits its column; phone-width rows use a gutter the content padding can hold. */
.app-shell .sticky-preview .premium-phone{max-width:100%!important}
@media (max-width:575px){.app-shell .content .row.g-4{--bs-gutter-x:1rem}}
.app-shell .side-nav .soon-badge{line-height:1.15!important;padding:.1rem .5rem!important}