/* Current design system. Legacy layouts live in @layer legacy; these components own presentation. */
.portal-design { background:var(--ops-bg); color:var(--ops-ink); font:15px/1.55 var(--ops-font); -webkit-font-smoothing:antialiased; margin:0; }
.portal-design *, .portal-design *::before, .portal-design *::after { box-sizing:border-box; }
.portal-design [hidden] { display:none!important; }
.portal-design :where(h1,h2,h3,p) { margin-top:0; }
.portal-design :where(h1,h2,h3) { color:var(--ops-ink); font-family:var(--ops-display); text-transform:none; font-weight:600; }
.portal-design h1 { font-size:clamp(27px,2.6vw,36px); line-height:1.2; letter-spacing:-1px; margin-bottom:9px; }
.portal-design h2 { font-size:21px; line-height:1.3; letter-spacing:-.4px; }
.portal-design h3 { font-size:17px; line-height:1.4; }
.portal-design a { color:var(--ops-accent); text-decoration:none; }
.portal-design a:hover { text-decoration:none; }
.portal-design :focus-visible { outline:3px solid var(--ops-accent); outline-offset:3px; }
.portal-design :where(small,.note,.muted,.empty) { color:var(--ops-muted); font-size:13px; }
.portal-design :where(.eyebrow,.dashboard-kicker,.ui-overline,.ui-module-code,.section-kicker) { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--ops-muted); }
.portal-design .app-shell { display:grid; grid-template-columns:244px minmax(0,1fr); min-height:100vh; }
.portal-design .sidebar { position:sticky; top:0; height:100vh; width:auto; background:var(--ops-surface); border:0; border-right:1px solid var(--ops-line); padding:27px 17px 24px; overflow:auto; }
.portal-design .brand { color:var(--ops-ink); gap:11px; padding:0 9px 24px; }
.portal-design .brand strong,.portal-design .login-brand strong { font-size:24px; font-weight:700; letter-spacing:-.8px; }
.portal-design .brand small,.portal-design .login-brand small { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ops-muted); }
.portal-design .brand-mark { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:0; border-radius:14px; background:var(--ops-accent); color:var(--accent-ink); font-size:19px; font-weight:700; box-shadow:none; }
.portal-design .admin-session { padding:12px; border:1px solid var(--ops-line); border-radius:14px; background:var(--ops-surface-2); gap:5px; font-size:13px; margin-bottom:15px; }
.portal-design .admin-session form { margin:3px 0 0; }
.portal-design .sidebar-command-tools { margin:8px 0 18px; gap:6px; }
.portal-design .sidebar-command-tools button { border:1px solid var(--ops-line); background:var(--ops-surface); border-radius:10px; min-height:40px; color:var(--ops-muted); font-size:12px; }
.portal-design .side-nav .nav-section { border:0; margin:7px 0; }
.portal-design .side-nav summary.nav-group { min-height:36px; padding:8px 11px; color:var(--ops-muted); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; border-radius:9px; }
.portal-design .side-nav a { display:flex; gap:10px; align-items:center; min-height:41px; margin:3px 0; padding:9px 12px; border:0; border-radius:11px; font-size:13px; font-weight:500; color:var(--ops-muted); background:transparent; }
.portal-design .side-nav a:hover { background:var(--ops-bg); color:var(--ops-ink); }
.portal-design .side-nav a.active { background:var(--ops-surface-2); color:var(--ops-accent); font-weight:650; box-shadow:none; }
.portal-design .side-nav .nav-icon { width:7px; height:7px; border:1.5px solid currentColor; border-radius:3px; background:transparent; opacity:.8; }
.portal-design .app-shell > .page { width:100%; max-width:1680px; margin:auto; min-width:0; padding:24px clamp(20px,3vw,48px) 60px; }
.portal-design :where(.page,.ops-command-page,.grid,.ops-main,.ops-side) > * { min-width:0; }
.portal-design .workspace-context-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:0 0 28px; padding:0 0 16px; border:0; border-bottom:1px solid var(--ops-line); background:transparent; font-size:12px; color:var(--ops-muted); }
.portal-design .workspace-context-tools button { background:var(--ops-surface); border:1px solid var(--ops-line); border-radius:10px; color:var(--ops-muted); min-height:36px; padding:6px 10px; font-size:12px; }
.portal-design .workspace-role-badge { border-radius:8px; background:var(--ops-surface-2); border:0; color:var(--ops-accent); font-size:11px; }
.portal-design :where(.page-head,.ops-head,.command-head,.worker-head) { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:8px 0 24px; margin:0; background:transparent; border:0; min-height:0; box-shadow:none; }
.portal-design :where(.page-head,.ops-head,.command-head,.worker-head) p { font-size:14px; color:var(--ops-muted); max-width:720px; line-height:1.6; margin-bottom:0; }
.portal-design :where(.head-actions,.inline-form,.quick-links) { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.portal-design :where(.panel,.form-drawer,.calendar-card,.dashboard-card,.review-card,.request-card,.equipment-card,.vehicle-card,.employee-card,.signature-card,.worker-card,.worker-section,.command-palette-dialog) { background:var(--ops-surface); border:1px solid var(--ops-line); border-radius:20px; box-shadow:var(--ops-shadow); padding:23px; color:var(--ops-ink); }
.portal-design :where(.panel,.form-drawer) { margin-bottom:21px; }
.portal-design :where(.panel-head,.section-head) { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 18px; border:0; padding:0; }
.portal-design :where(.panel-head,.section-head) h2 { margin-bottom:0; }
.portal-design :where(.panel-head,.section-head) p { color:var(--ops-muted); font-size:13px; margin:5px 0 0; }
.portal-design :where(label,.form-label) { color:var(--ops-muted); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; }
.portal-design :where(input,select,textarea) { font:inherit; font-size:14px; color:var(--ops-ink); background:var(--ops-surface); border:1px solid var(--ops-line-strong); border-radius:11px; min-height:44px; padding:10px 12px; max-width:100%; box-shadow:none; }
.portal-design input::placeholder,.portal-design textarea::placeholder { color:var(--ops-muted); opacity:.85; }
.portal-design :where(input,select,textarea):focus { border-color:var(--ops-accent); outline:0; box-shadow:0 0 0 3px rgba(var(--ops-accent-rgb),.13); }
.portal-design :where(input[type="checkbox"],input[type="radio"]) { width:19px; height:19px; min-height:19px; padding:0; accent-color:var(--ops-accent); }
.portal-design input[type="hidden"] { display:none; }
.portal-design textarea { resize:vertical; min-height:90px; }
.portal-design :where(.button,button.button,.worker-action,.portal-action,.ui-button) { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid var(--ops-line); border-radius:11px; background:var(--ops-surface); color:var(--ops-ink); font:600 13px/1.35 var(--ops-font); box-shadow:none; letter-spacing:0; text-transform:none; cursor:pointer; }
.portal-design :where(.button,.ui-button):hover { background:var(--ops-surface-2); border-color:var(--ops-accent); }
.portal-design :is(.button.primary,.ui-button-primary,.worker-primary-button) { color:var(--accent-ink); background:var(--ops-accent); border-color:var(--ops-accent); }
.portal-design :where(.button.danger,.button.bad) { background:var(--ops-critical-soft); border-color:var(--ops-critical-soft); color:var(--ops-critical); }
.portal-design .button.small { min-height:36px; padding:7px 11px; font-size:12px; border-radius:9px; }
.portal-design button:disabled { cursor:default; opacity:.5; }
.portal-design :where(.status,.badge,.metric-chip,.planning-mode-chip,.active-filter-chip) { display:inline-flex; align-items:center; border-radius:8px; padding:5px 9px; border:0; color:var(--ops-muted); background:var(--ops-surface-2); font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }
.portal-design :where(.status.ok,.status.active,.badge.ok) { color:var(--ops-ready); background:var(--ops-surface-2); }
.portal-design :where(.status.warn,.badge.warn) { color:var(--ops-warning); background:var(--ops-warning-soft); }
.portal-design :where(.status.bad,.status.error,.badge.bad) { color:var(--ops-critical); background:var(--ops-critical-soft); }
.portal-design :where(.notice,.flash,.empty,.setup-empty,.system-state-card) { background:var(--ops-surface-2); border:1px solid var(--ops-line); border-radius:13px; color:var(--ops-ink); padding:16px 18px; font-size:14px; }
.portal-design :where(.notice.warning,.flash.warning) { background:var(--ops-warning-soft); color:var(--ops-warning); }
.portal-design :where(.notice.error,.flash.error) { background:var(--ops-critical-soft); color:var(--ops-critical); }
.portal-design :where(.ops-metrics,.vehicle-metrics,.review-metrics,.employee-metrics,.worker-mobile-status) { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin:0 0 22px; }
.portal-design :where(.ops-metric,.vehicle-metric,.review-metric,.kpi-card,.metric-card) { display:flex; flex-direction:column; gap:6px; padding:17px 19px; min-height:0; border:1px solid var(--ops-line); border-radius:16px; background:var(--ops-surface); box-shadow:none; color:var(--ops-ink); }
.portal-design :where(.ops-metric,.vehicle-metric,.review-metric,.kpi-card,.metric-card) > span { font-size:12px; color:var(--ops-muted); text-transform:none; letter-spacing:0; }
.portal-design :where(.ops-metric,.vehicle-metric,.review-metric,.kpi-card,.metric-card) strong { color:var(--ops-ink); font-size:27px; font-weight:600; line-height:1.2; letter-spacing:-.8px; }
.portal-design :where(.ops-metric,.vehicle-metric,.review-metric,.kpi-card,.metric-card) small { font-size:12px; color:var(--ops-muted); line-height:1.4; }
.portal-design :where(.filter-panel,.active-filter-strip) { background:var(--ops-surface); border:1px solid var(--ops-line); border-radius:14px; padding:16px; margin-bottom:18px; }
.portal-design :where(.filter-grid,.form-grid) { gap:16px; }
.portal-design :where(.table-scroll,.table-wrap) { width:100%; max-width:100%; overflow:auto; border:1px solid var(--ops-line); border-radius:14px; background:var(--ops-surface); }
.portal-design table { background:var(--ops-surface); color:var(--ops-ink); font-size:14px; border-collapse:collapse; width:100%; }
.portal-design th { padding:12px 14px; background:var(--ops-bg); color:var(--ops-muted); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; border:0; border-bottom:1px solid var(--ops-line); text-align:left; }
.portal-design td { padding:14px; border:0; border-bottom:1px solid var(--ops-line); background:transparent; line-height:1.5; font-size:14px; }
.portal-design tr:last-child td { border-bottom:0; }
.portal-design tbody tr:hover { background:var(--ops-bg); }
.portal-design[data-ui-density="compact"] td { padding-top:8px; padding-bottom:8px; }
.portal-design :where(.facts,.detail-facts) { gap:14px; }
.portal-design :where(.facts,.detail-facts) > div { background:var(--ops-bg); border:0; border-radius:12px; padding:13px; }
.portal-design dt { color:var(--ops-muted); font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }
.portal-design dd { margin:4px 0 0; color:var(--ops-ink); font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.portal-design :where(.photo-tile,.attachment-card) { border:1px solid var(--ops-line); border-radius:14px; overflow:hidden; background:var(--ops-bg); color:var(--ops-muted); }
.portal-design .photo-tile span { font-size:12px; padding:8px 10px; overflow-wrap:anywhere; }
.portal-design :where(.photo-tile img,.equipment-photo,.vehicle-photo) { border-radius:12px; object-fit:cover; }
.portal-design :where(.photo-grid,.photo-gallery) { gap:12px; }
.portal-design :where(details.form-drawer,details.panel) > summary { cursor:pointer; font-size:15px; color:var(--ops-ink); padding:4px; border:0; letter-spacing:0; text-transform:none; }
.portal-design .planning-page { display:flex; flex-direction:column; }
.portal-design .planning-kw-title { font-size:inherit; color:var(--ops-muted); }
.portal-design .planning-calendar-panel { padding:20px; }
.portal-design .planning-calendar-head h2 { font-size:20px; }

.portal-design .planning-intelligence-panel .system-state-card { padding:12px; }
.portal-design .worker-shell { width:min(100% - 32px,1080px); padding:27px 0 100px; margin:auto; background:transparent; }
.portal-design .worker-head h1 { font-size:30px; }
.portal-design .worker-theme-toggle { position:fixed; top:15px; right:18px; min-width:42px; min-height:42px; border-radius:13px; background:var(--ops-surface); border:1px solid var(--ops-line); color:var(--ops-accent); z-index:20; }
.portal-design :where(.worker-dashboard,.worker-hero,.worker-priority-card,.worker-mobile-status a,.worker-section-card,.worker-info-card) { border:1px solid var(--ops-line); background:var(--ops-surface); color:var(--ops-ink); border-radius:20px; padding:20px; box-shadow:var(--ops-shadow); }
.portal-design .worker-priority-card { display:flex; flex-direction:column; gap:6px; background:var(--ops-surface-2); }
.portal-design .worker-priority-card strong { font-size:21px; color:var(--ops-ink); }
.portal-design .worker-priority-card :where(span,small) { font-size:12px; color:var(--ops-muted); text-transform:none; letter-spacing:0; }
.portal-design .worker-home-block { margin-bottom:20px; }
.portal-design .worker-mobile-status a { padding:15px; border-radius:15px; }
.portal-design .worker-mobile-status strong { color:var(--ops-ink); font-size:20px; }
.portal-design :where(.worker-bottom-nav,.worker-nav,.portal-nav,.language-switch) { background:var(--ops-surface); border-color:var(--ops-line); border-radius:14px; }
.portal-design :where(.worker-bottom-nav,.worker-nav,.portal-nav,.language-switch) :where(a,button) { color:var(--ops-muted); background:transparent; border:0; border-radius:10px; font-size:13px; }
.portal-design :where(.worker-bottom-nav,.worker-nav,.portal-nav,.language-switch) .active { color:var(--ops-accent); background:var(--ops-surface-2); }
.portal-design .login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--ops-bg); }
.portal-design .login-card { width:min(460px,100%); padding:40px; border:1px solid var(--ops-line); border-radius:26px; background:var(--ops-surface); box-shadow:0 18px 70px #1836260c; }
.portal-design .login-brand { display:flex; gap:12px; align-items:center; padding-bottom:30px; }
.portal-design .login-brand small { display:block; }
.portal-design .login-card h1 { font-size:29px; }
.portal-design .login-card > p { color:var(--ops-muted); font-size:14px; }
.portal-design .login-form { display:grid; gap:19px; margin-top:25px; }
.portal-design .login-form label { display:grid; gap:7px; }
.portal-design .login-form .button { width:100%; }
.calm-dashboard { display:grid; gap:22px; }
.calm-dashboard .page-head { padding-bottom:0; }
.calm-dashboard .ops-metrics { margin:0; }
.calm-dashboard-columns { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); gap:22px; align-items:start; }
.calm-dashboard .panel { margin-bottom:0; }
.calm-action-list { display:grid; gap:0; }
.calm-action { display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:14px; padding:17px 0; border-bottom:1px solid var(--ops-line); }
.calm-action:last-child { border:0; }
.calm-action-dot { width:7px; height:7px; border-radius:50%; background:var(--ops-accent); }
.calm-action.critical .calm-action-dot { background:var(--ops-critical); }
.calm-action.warn .calm-action-dot { background:var(--ops-warning); }
.calm-action strong { display:block; font-size:15px; font-weight:600; color:var(--ops-ink); }
.calm-action small { display:block; margin-top:5px; }
.calm-action > span:last-child { font-size:13px; }
.calm-shortcuts { display:grid; gap:10px; }
.calm-shortcut { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ops-bg); padding:15px; border-radius:12px; font-size:14px; }
.calm-team-list { display:grid; gap:12px; }
.calm-team { display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--ops-line); }
.calm-team strong { display:block; font-size:15px; color:var(--ops-ink); }
.calm-team small { display:block; margin-top:3px; }
.calm-team-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--ops-surface-2); color:var(--ops-accent); }
.calm-report-device { margin-top:20px; padding-top:18px; border-top:1px solid var(--ops-line); }
@media(max-width:1100px) { .portal-design .app-shell { grid-template-columns:220px minmax(0,1fr); } .portal-design :where(.page-head,.ops-head,.command-head) { flex-wrap:wrap; } .calm-dashboard-columns { grid-template-columns:1fr; } }
@media(max-width:900px) { .portal-design .app-shell { display:block; } .portal-design .sidebar { position:fixed; width:min(300px,87vw); z-index:50; height:100dvh; left:0; transform:translateX(-105%); transition:transform .18s; } .portal-design[data-admin-nav-open="true"] .sidebar,.portal-design.admin-nav-open .sidebar { transform:translateX(0); } .portal-design .mobile-admin-bar { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; padding:12px 20px; background:var(--ops-surface); border-bottom:1px solid var(--ops-line); } .portal-design .mobile-admin-bar .brand { padding:0; } .portal-design .mobile-admin-actions button { background:var(--ops-bg); color:var(--ops-accent); border:1px solid var(--ops-line); border-radius:11px; min-height:42px; } .portal-design .app-shell > .page { padding:20px 22px 50px; } }
@media(min-width:901px) { .portal-design .mobile-admin-bar { display:none; } }
@media(max-width:600px) { .portal-design .app-shell > .page { padding:18px 16px 45px; } .portal-design .workspace-context-bar { margin-bottom:18px; } .portal-design .workspace-context-tools { display:none; } .portal-design :where(.panel,.form-drawer,.worker-section) { padding:18px; border-radius:18px; } .portal-design :where(.ops-metrics,.review-metrics,.worker-mobile-status) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .portal-design :where(input,select,textarea) { font-size:16px; min-height:48px; } .portal-design .button { min-height:46px; } .portal-design .worker-head { flex-wrap:wrap; padding-right:40px; } .portal-design .worker-shell { width:calc(100% - 28px); } .portal-design .login-card { padding:27px; } .calm-action { gap:10px; } .calm-action > span:last-child { font-size:0; } .calm-action > span:last-child::after { content:'→'; font-size:17px; } .portal-design .planning-calendar-panel { padding:13px; } }
@media(prefers-reduced-motion:reduce) { .portal-design *, .portal-design *::before { transition:none!important; animation:none!important; } }

.portal-design :where(.ops-metric,.vehicle-metric) { min-height:140px; }
.portal-design :where(.ops-metric,.vehicle-metric) strong { margin:8px 0 0; }
.portal-design :where(.ops-metric,.vehicle-metric) small { text-transform:none; letter-spacing:0; font-weight:400; }
.portal-design :where(.ops-metric,.vehicle-metric) strong small { display:inline; margin-left:4px; }
.portal-design .calm-dashboard .ops-metric::after { display:none; }
.portal-design .workspace-context-label { text-transform:none; letter-spacing:0; }
.portal-design :where(.ops-metric,.vehicle-metric)::after { display:none; }
.portal-design .flat-stat-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; border:0; background:transparent; margin:0 0 24px; }
.portal-design .flat-stat-strip > a { display:flex; flex-direction:column; gap:8px; padding:19px; border:1px solid var(--ops-line); border-radius:16px; background:var(--ops-surface); color:var(--ops-muted); font-size:13px; }
.portal-design .flat-stat-strip strong { color:var(--ops-ink); font-size:27px; font-weight:600; }
.portal-design .flat-stat-strip :where(span,small) { text-transform:none; letter-spacing:0; font-weight:400; }
.portal-design .worker-portal { font-family:var(--ops-font); }
.portal-design .worker-portal :where(strong,b) { font-weight:600; letter-spacing:0; }
.portal-design .worker-priority-card { box-shadow:none; }
.portal-design .worker-mobile-status { background:transparent; padding:0; border:0; }
.portal-design .worker-mobile-status a { font-size:12px; }
.portal-design .worker-mobile-status strong { font-size:18px; }
.portal-design .worker-dashboard-main { background:transparent; border:0; padding:0; }
.portal-design .worker-bottom-nav { gap:5px; padding:9px; border:1px solid var(--ops-line); box-shadow:0 -6px 24px #18362608; }
.portal-design .worker-bottom-nav a { flex:0 0 72px; min-width:72px; min-height:54px; font-weight:500; }
.portal-design .worker-bottom-nav span { font:500 11px/1.4 var(--ops-font); }
.portal-design :where(.ux-form-dialog,.ux-confirm-dialog,.ux-submit-dialog) { border:1px solid var(--ops-line); border-radius:22px; background:var(--ops-surface); color:var(--ops-ink); }
.portal-design .mobile-nav-backdrop { z-index:40; background:rgba(16,29,22,.35); }
@media(prefers-reduced-motion:reduce) { .portal-design *, .portal-design *::before, .portal-design *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media(max-width:600px) { .portal-design .head-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; } .portal-design .head-actions > :is(form,div) { grid-column:1 / -1; } .portal-design .head-actions > .button { width:100%; } }