/* MASAR 360 — P20.3R Complete UI/UX Redesign: unified shell top-coat.
   Loads LAST (after design-system.css and login-identity.css) in both
   index.html and owner.html, so it authoritatively repaints every screen
   built on the pre-existing shared classes (.card/.entity-card/.sidebar/
   .nav-item/.status/.badge/.primary-button/table/.modal/etc.) with the
   premium brand tokens defined in design-system.css, without touching the
   ~40 files that generate that markup. !important is used only where the
   existing cascade (v11-styles.css, masar360-r2/r3-*.css) already relies
   on !important to win — matching this codebase's own convention rather
   than starting a new specificity war. */

/* ─── 1. Re-point every legacy CSS variable at the new brand tokens ────────
   Every screen already renders with var(--primary)/var(--card)/var(--bg)/
   var(--line)/var(--muted)/var(--ink) etc. — repointing these here re-themes
   the entire product (light + dark) in one place. */
:root{
  --primary:var(--ds-primary); --primary-dark:var(--ds-primary-dark); --primary-soft:var(--ds-primary-soft);
  --accent:var(--ds-accent); --success:var(--ds-success); --warning:var(--ds-warning); --danger:var(--ds-danger);
  --ink:var(--ds-text); --ink-strong:var(--ds-text); --muted:var(--ds-text-muted); --line:var(--ds-border);
  --bg:var(--ds-bg); --card:var(--ds-surface); --surface:var(--ds-bg); --surface-2:var(--ds-hover);
  --teal:var(--ds-brand-start); --gold:var(--ds-accent); --shadow:var(--ds-elevated-shadow); --radius:var(--ds-radius-lg);
}
body{background:var(--ds-bg)!important;color:var(--ds-text)!important;}
.app-screen,.app-main,.content{background:var(--ds-bg)!important;}
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;}}

/* ─── 2. App shell: sidebar / nav / topbar ─────────────────────────────── */
.sidebar{background:linear-gradient(180deg,var(--ds-brand-ink) 0%,#0a2744 62%,#071b30 100%)!important;
  color:#dfeef8!important;box-shadow:none!important;border-inline-end:1px solid rgba(255,255,255,.06)!important;}
.sidebar-brand{border-block-end-color:rgba(255,255,255,.08)!important;}
.sidebar-brand h1,.sidebar-brand p{color:#fff!important;}
.tenant-brand-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--ds-radius-md);
  padding:var(--ds-space-2) var(--ds-space-3);display:flex;align-items:center;gap:var(--ds-space-2);margin:0 12px 10px;}
.tenant-logo-slot{width:32px;height:32px;border-radius:var(--ds-radius-sm);background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;overflow:hidden;}
.tenant-logo-slot img{width:100%;height:100%;object-fit:cover;}
.tenant-logo-fallback{color:#fff;font-weight:700;}
.tenant-brand-copy small{color:#8fb0c9;font-size:10px;display:block;}
.tenant-brand-copy b{color:#fff;font-size:12px;}
.nav-section{color:#5f84a0!important;}
.nav-item{color:#b9d3e5!important;}
.nav-item:hover{background:rgba(11,207,174,.10)!important;color:#fff!important;}
.nav-item.active{background:linear-gradient(90deg,rgba(11,207,174,.22),rgba(10,132,201,.30))!important;
  color:#fff!important;box-shadow:inset 3px 0 0 var(--ds-brand-start)!important;font-weight:var(--ds-fw-semibold)!important;}
html[dir=ltr] .nav-item.active{box-shadow:inset -3px 0 0 var(--ds-brand-start)!important;}
.nav-icon{background:rgba(255,255,255,.06)!important;color:#cfe8f2;}
.nav-item.active .nav-icon{background:rgba(255,255,255,.14)!important;}
.nav-wrap.featured{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important;}
.nav-wrap.featured>.nav-item{background:linear-gradient(135deg,var(--ds-brand-start),var(--ds-brand-mid))!important;color:#04241d!important;font-weight:700!important;}
.nav-wrap.featured>.nav-item .nav-icon{background:rgba(255,255,255,.25)!important;color:#04241d!important;}
.nav-badge{background:var(--ds-brand-accent)!important;color:#3a2a06!important;}
.sidebar-footer{border-block-start-color:rgba(255,255,255,.08)!important;}
.profile-mini strong{color:#fff;} .profile-mini small{color:#8fb0c9;}
.logout-button{background:rgba(242,104,95,.16)!important;color:#ffb3ac!important;}

.topbar{background:var(--ds-surface)!important;border-block-end-color:var(--ds-border)!important;color:var(--ds-text)!important;}
.topbar h2{color:var(--ds-text);} .topbar p{color:var(--ds-text-muted);}
.global-search{background:var(--ds-bg)!important;color:var(--ds-text-muted);}
.global-search input{color:var(--ds-text);}
.icon-button{background:var(--ds-bg)!important;color:var(--ds-text-muted)!important;transition:background-color var(--ds-dur-fast) var(--ds-ease);}
.icon-button:hover{background:var(--ds-hover)!important;color:var(--ds-text)!important;}
.profile-button{color:var(--ds-text)!important;}
#app-screen input:not([type="checkbox"]):not([type="radio"]),#app-screen select,#app-screen textarea,
#owner-app input:not([type="checkbox"]):not([type="radio"]),#owner-app select,#owner-app textarea{
  background:var(--ds-surface)!important;color:var(--ds-text)!important;border-color:var(--ds-border)!important;
}
#app-screen input::placeholder,#app-screen textarea::placeholder,
#owner-app input::placeholder,#owner-app textarea::placeholder{color:var(--ds-text-muted)!important;}

/* ─── 3. Buttons ────────────────────────────────────────────────────────── */
.primary-button{background:linear-gradient(135deg,var(--ds-brand-mid),var(--ds-brand-end))!important;color:#fff!important;
  box-shadow:0 6px 16px -6px rgba(11,62,140,.45)!important;transition:transform var(--ds-dur-fast) var(--ds-ease),box-shadow var(--ds-dur-base) var(--ds-ease)!important;}
.primary-button:hover{box-shadow:0 10px 22px -8px rgba(11,62,140,.5)!important;}
.primary-button:active{transform:scale(.97);}
.secondary-button{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;}
.secondary-button:hover{background:var(--ds-hover)!important;}
.danger-button{background:var(--ds-danger-bg)!important;color:var(--ds-danger)!important;}
.ghost-button{background:var(--ds-bg)!important;color:var(--ds-text-muted)!important;}
.mini-button{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;transition:background-color var(--ds-dur-fast) var(--ds-ease);}
.mini-button:hover{background:var(--ds-hover)!important;}
.mini-button.archive{background:var(--ds-accent-soft)!important;color:#8a5a10!important;}
:root[data-theme="dark"] .mini-button.archive{color:var(--ds-accent);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mini-button.archive{color:var(--ds-accent);}}

/* ─── 4. Cards / KPI / tables / status / badges (legacy, non ds- classes) ─ */
.card,.entity-card,.kpi-card,.report-card{background:var(--ds-surface)!important;border-color:var(--ds-border)!important;
  box-shadow:var(--ds-shadow-card)!important;border-radius:var(--ds-radius-lg)!important;}
.entity-card{transition:box-shadow var(--ds-dur-base) var(--ds-ease),border-color var(--ds-dur-base) var(--ds-ease)!important;}
.entity-card:hover{transform:none!important;box-shadow:var(--ds-elevated-shadow)!important;border-color:var(--ds-primary)!important;}
.card-title h4,.page-head h3,.topbar h2{color:var(--ds-text)!important;}
.kpi-icon{background:var(--ds-primary-soft)!important;}
.kpi-card.warning .kpi-icon{background:var(--ds-warning-bg)!important;}
.kpi-card.danger .kpi-icon{background:var(--ds-danger-bg)!important;}
.kpi-card.success .kpi-icon{background:var(--ds-success-bg)!important;}
.entity-avatar,.large-avatar{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;}
.avatar{background:linear-gradient(135deg,var(--ds-brand-start),var(--ds-brand-mid))!important;}

table{color:var(--ds-text);}
th{background:var(--ds-bg)!important;color:var(--ds-text-muted)!important;}
td{border-block-end-color:var(--ds-border)!important;}
tr:hover td{background:var(--ds-hover)!important;}
.status.success{background:var(--ds-success-bg)!important;color:var(--ds-success)!important;}
.status.warning{background:var(--ds-warning-bg)!important;color:var(--ds-warning)!important;}
.status.danger{background:var(--ds-danger-bg)!important;color:var(--ds-danger)!important;}
.status.info{background:var(--ds-info-bg)!important;color:var(--ds-info)!important;}
.badge{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;}
.action-link{color:var(--ds-primary)!important;}
.progress{background:var(--ds-bg)!important;}
.progress span{background:var(--ds-success)!important;}

/* The stable dashboard marker used to be a compact gradient hero. P20.3R
   keeps that marker as the outer dashboard root, so neutralize the old
   descendant-wide !important typography before applying component tokens. */
.r1-dashboard-hero.ds-dashboard-v2{
  display:block!important;grid-template-columns:none!important;gap:0!important;align-items:initial!important;
  margin-bottom:0!important;border-radius:0!important;padding:0!important;background:transparent!important;
  color:var(--ds-text)!important;box-shadow:none!important;overflow:visible!important;position:static!important;
}
.r1-dashboard-hero.ds-dashboard-v2::before,.r1-dashboard-hero.ds-dashboard-v2::after{content:none!important;display:none!important;}
.ds-dashboard-v2 span{
  color:inherit!important;font-size:inherit!important;font-weight:inherit!important;
  letter-spacing:normal!important;text-transform:none!important;
}
.ds-dashboard-v2 .page-head h3{font-size:inherit!important;line-height:inherit!important;margin:0!important;color:var(--ds-text)!important;}
.ds-dashboard-v2 .page-head p{color:var(--ds-text-muted)!important;line-height:inherit!important;margin:0!important;max-width:none!important;}
.ds-dashboard-v2 .ds-kpi-label{font-size:var(--ds-fs-label)!important;color:var(--ds-text-muted)!important;font-weight:var(--ds-fw-medium)!important;}
.ds-dashboard-v2 .ds-kpi-value{font-size:28px!important;color:var(--ds-text)!important;font-weight:var(--ds-fw-bold)!important;}
.ds-dashboard-v2 .ds-kpi-trend{font-size:var(--ds-fs-caption)!important;font-weight:var(--ds-fw-semibold)!important;}
.ds-dashboard-v2 .ds-kpi-trend.ds-up{color:var(--ds-success)!important;}
.ds-dashboard-v2 .ds-kpi-trend.ds-down{color:var(--ds-danger)!important;}
.ds-dashboard-v2 .ds-kpi-trend.ds-flat{color:var(--ds-text-muted)!important;}
.ds-dashboard-v2 .ds-chart-title{font-size:var(--ds-fs-section-title)!important;color:var(--ds-text)!important;font-weight:var(--ds-fw-semibold)!important;}
.ds-dashboard-v2 .ds-chart-meta,.ds-dashboard-v2 .ds-chart-legend,
.ds-dashboard-v2 .ds-chart-bar-label,.ds-dashboard-v2 .ds-dash-filter>span{
  color:var(--ds-text-muted)!important;font-weight:var(--ds-fw-medium)!important;
}
.ds-dashboard-v2 .ds-chart-bar-label,.ds-dashboard-v2 .ds-chart-bar-value{font-size:var(--ds-fs-secondary)!important;}
.ds-dashboard-v2 .ds-chart-bar-value{color:var(--ds-text)!important;font-weight:var(--ds-fw-semibold)!important;}

/* ─── 5. Heroes / hubs / department banners → brand gradient ─────────────── */
.premium-welcome,.reports-hero{background:linear-gradient(120deg,var(--ds-brand-end) 0%,var(--ds-brand-mid) 62%,var(--ds-brand-start) 100%)!important;}
.hr-hero{background:linear-gradient(120deg,var(--ds-brand-end),var(--ds-brand-mid))!important;}
.fleet-hero{background:linear-gradient(120deg,#0b2f57,var(--ds-brand-start))!important;}
.developer-hero{background:linear-gradient(120deg,var(--ds-brand-ink),var(--ds-brand-end))!important;}
.hub-tile{border-color:var(--ds-border)!important;box-shadow:var(--ds-shadow-card)!important;background:var(--ds-surface)!important;
  transition:box-shadow var(--ds-dur-base) var(--ds-ease),border-color var(--ds-dur-base) var(--ds-ease)!important;}
.hub-tile:hover{transform:none!important;box-shadow:var(--ds-elevated-shadow)!important;border-color:var(--ds-primary)!important;}
.hub-icon{background:var(--ds-primary-soft)!important;color:var(--ds-primary)!important;}
.profile-tabs{background:var(--ds-surface)!important;border-color:var(--ds-border)!important;}
.profile-tabs button{background:var(--ds-bg)!important;color:var(--ds-text-muted)!important;}
.profile-tabs button.active{background:linear-gradient(135deg,var(--ds-brand-mid),var(--ds-brand-end))!important;color:#fff!important;box-shadow:none!important;}
.workflow-overview div,.readiness-grid div,.employee-workflow-strip div{background:var(--ds-bg)!important;border-color:var(--ds-border)!important;}
.workflow-overview i{background:linear-gradient(90deg,var(--ds-brand-start),var(--ds-brand-mid))!important;}
.readiness-grid b,.employee-workflow-strip b{color:var(--ds-primary)!important;}

/* ─── 6. Modals / toasts / notices / empty states ─────────────────────────── */
.modal-backdrop{background:rgba(6,27,51,.55)!important;}
.modal,.panel{background:var(--ds-surface)!important;border-color:var(--ds-border)!important;box-shadow:var(--ds-shadow-modal)!important;}
.modal-head,.modal-foot{border-color:var(--ds-border)!important;}
.modal-head h3{color:var(--ds-text)!important;}
.modal-close{background:var(--ds-bg)!important;color:var(--ds-text-muted)!important;}
.toast{background:var(--ds-brand-ink)!important;}
.notice{background:var(--ds-primary-soft)!important;border-color:var(--ds-border)!important;color:var(--ds-text)!important;}
.empty-state{color:var(--ds-text-muted)!important;}
.check-list li:before{color:var(--ds-success)!important;}

/* ─── 7. Motion: entrance transitions for freshly-rendered content ────────── */
#content>*{animation:p203r-fade-up var(--ds-dur-slow,320ms) var(--ds-ease-out,ease) both;}
@keyframes p203r-fade-up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.sidebar.open,.owner-sidebar.open{transition:transform var(--ds-dur-base,200ms) var(--ds-ease,ease);}
@media (prefers-reduced-motion:reduce){
  #content>*{animation:none!important;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ─── 8. Responsive table safety net: any bare <table> not already wrapped
   gets horizontal scroll instead of breaking the layout (paired with the
   p203r-normalize-tables() runtime pass in masar360-p203r-shell.js). ───── */
.p203r-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.p203r-table-scroll table{min-width:640px;}
@media (max-width:600px){.p203r-table-scroll table{min-width:520px;}}

/* ─── 9. Theme toggle button (used in both topbars) ───────────────────────── */
.p203r-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
  background:var(--ds-bg);color:var(--ds-text-muted);border:none;cursor:pointer;font-size:16px;transition:background-color var(--ds-dur-fast) var(--ds-ease);}
.p203r-theme-toggle:hover{background:var(--ds-hover);color:var(--ds-text);}
.sidebar .p203r-theme-toggle,.owner-sidebar .p203r-theme-toggle{background:rgba(255,255,255,.06);color:#cfe8f2;}
.sidebar .p203r-theme-toggle:hover,.owner-sidebar .p203r-theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ─── 10. Owner Console parity (same shell classes, .owner- prefixed) ─────── */
.owner-sidebar{background:linear-gradient(180deg,var(--ds-brand-ink) 0%,#0a2744 62%,#071b30 100%)!important;color:#dfeef8!important;}
.owner-sidebar nav button{color:#b9d3e5!important;}
.owner-sidebar nav button:hover{background:rgba(11,207,174,.10)!important;color:#fff!important;}
.owner-sidebar nav button.active{background:linear-gradient(90deg,rgba(11,207,174,.22),rgba(10,132,201,.30))!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--ds-brand-start)!important;}
.owner-app{grid-template-columns:265px minmax(0,1fr)!important;}
.owner-main,.owner-app,body:has(#owner-app){background:var(--ds-bg)!important;}
.owner-main,#owner-content,.owner-main .panel,.owner-main .p203r-table-scroll{min-width:0;max-width:100%;}
.owner-main>header{background:var(--ds-surface)!important;border-color:var(--ds-border)!important;}
.owner-main h1,.owner-main h2,.owner-main h3,.owner-main h4,.owner-main b{color:var(--ds-text);}
.owner-main p,.owner-main small{color:var(--ds-text-muted);}
.owner-header-actions{display:flex;align-items:center;gap:10px;}
#owner-content>*{animation:p203r-fade-up var(--ds-dur-slow,320ms) var(--ds-ease-out,ease) both;}
@media (prefers-reduced-motion:reduce){#owner-content>*{animation:none!important;}}

/* ─── 11. Mobile: keep the existing off-canvas mechanics, only reskin ─────── */
@media (max-width:900px){
  .sidebar.open,.owner-sidebar.open{box-shadow:0 0 0 9999px rgba(6,27,51,.35)!important;}
}
@media (max-width:1100px){
  .topbar .global-search,.topbar .profile-button{display:none!important;}
}
@media (max-width:430px){
  .topbar{padding-inline:8px!important;gap:6px!important;}
  .topbar-start{gap:6px!important;min-width:0;}
  .topbar-start>div{min-width:0;}
  .topbar h2{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar p{display:none;}
  .topbar-actions{gap:3px!important;flex-wrap:nowrap!important;}
  .topbar .global-search{display:none!important;}
  .topbar .profile-button{display:none!important;}
  .topbar .icon-button,.topbar .p203r-theme-toggle{width:36px;height:36px;flex:none;}
}