/* OpsHQ UI16 — calm, modern layer. Loaded last; presentation only (no business logic).
   Tokens → shell (sidebar, topbar, mobile tab bar) → shared surfaces → Home → login → company picker. */

:root{
  --ui-canvas:#f6f7f9;
  --ui-surface:#ffffff;
  --ui-surface-subtle:#fafbfc;
  --ui-surface-selected:#eef1f5;
  --ui-text:#0f1b2a;
  --ui-text-muted:#5b6675;
  --ui-border:#e6e9ee;
  --ui-border-strong:#d5dae1;
  --ui-brand:#0c233b;
  --ui-brand-hover:#15304d;
  --ui-accent:#8a6420;
  --ui-accent-soft:#fbf5ea;
  --ui-gold:#b8874a;--ui-gold-light:#e3c08a;--ui-cream:#fbf5ea;
  --ui-warn:#9a3412;
  --ui-warn-soft:#fff1e6;
  --ui-info:#1d4ed8;
  --ui-info-soft:#eef3ff;
  --ui-success:#15803d;
  --ui-success-soft:#eaf7ee;
  --ui-radius-card:14px;
  --ui-radius-control:10px;
  --ui-shadow-card:0 1px 2px rgb(15 27 42 / 4%);
  --sidebar-width:256px;
  --header-height:64px;
  --page-padding:32px;
  --bg:var(--ui-canvas);--line:var(--ui-border);--ink:var(--ui-text);--muted:var(--ui-text-muted);--shadow:var(--ui-shadow-card);
}
body{background:var(--ui-canvas);color:var(--ui-text);font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased}

/* ── Sidebar ─────────────────────────────────────────────── */
.app-shell .sidebar{background:var(--ui-surface);color:var(--ui-text);border-right:1px solid var(--ui-border);padding:18px 12px 14px;gap:0;scrollbar-width:thin}
.app-shell .sidebar .brand{margin:0 0 14px;padding:0 8px;gap:10px}
.app-shell .sidebar .brand img{width:40px;height:40px;border-radius:10px;background:transparent;border:0;padding:0;object-fit:contain}
.app-shell .sidebar .brand strong{color:var(--ui-text);font-size:16px;font-weight:700;letter-spacing:-.2px}
.app-shell .sidebar .brand small{color:var(--ui-text-muted);font-size:12px}

.company-switcher{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 10px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.company-switcher:hover{border-color:var(--ui-border-strong)}
.company-switcher:focus-within{border-color:var(--ui-brand);box-shadow:0 0 0 3px rgb(12 35 59 / 12%)}
.company-switcher-mark{position:relative;flex:none;width:34px;height:34px;border-radius:9px;background:var(--ui-brand);color:var(--ui-gold-light);display:flex;align-items:center;justify-content:center;overflow:hidden}
.company-switcher-mark .ui-icon{width:18px;height:18px;margin:0}
.company-switcher-mark .context-company-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:3px;box-sizing:border-box;margin:0;border:0;border-radius:0}
.company-switcher-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.company-switcher-copy small{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--ui-text-muted);line-height:1.2}
.app-shell .company-switcher .company-select{appearance:none;-webkit-appearance:none;width:100%;max-width:none;min-height:0;height:auto;padding:0 18px 0 0;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E") right center/14px no-repeat;color:var(--ui-text);font:inherit;font-size:14px;font-weight:600;box-shadow:none;cursor:pointer;text-overflow:ellipsis}
.app-shell .company-switcher .company-select:focus{outline:none;box-shadow:none}

.app-shell .sidebar .nav{display:flex;flex-direction:column;gap:14px;margin:0}
.nav-section{display:flex;flex-direction:column;gap:1px}
.nav-section-label{margin:0;padding:0 12px 4px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ui-text-muted)}
.app-shell .sidebar .nav a{display:flex;align-items:center;gap:11px;min-height:38px;padding:0 12px;border-radius:9px;color:#3b4655;font-size:14px;font-weight:500;line-height:1.2;background:transparent;border:0;box-shadow:none;transition:background .12s,color .12s}
.app-shell .sidebar .nav a:hover{background:var(--ui-surface-selected);color:var(--ui-text)}
.app-shell .sidebar .nav a.active{background:var(--ui-brand);color:#fff;font-weight:600}
.app-shell .sidebar .nav a.active:before,.app-shell .sidebar .nav a:before{display:none}
.app-shell .sidebar .nav a:focus-visible{outline:2px solid var(--ui-info);outline-offset:1px}
.nav-svg.ui-icon{width:18px;height:18px;margin:0;flex:none;stroke-width:1.8}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.app-shell .sidebar .nav-group{margin-top:2px;border-top:1px solid var(--ui-border);padding-top:10px;background:transparent}
.app-shell .sidebar .nav-group-toggle{display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#3b4655;font:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:none}
.app-shell .sidebar .nav-group-toggle:hover{background:var(--ui-surface-selected);color:var(--ui-text)}
.app-shell .sidebar .nav-group.active-parent .nav-group-toggle{color:var(--ui-text);font-weight:600;background:transparent}
.app-shell .sidebar .nav-group-toggle .nav-chevron{margin-left:auto;transition:transform .15s;color:var(--ui-text-muted)}
.app-shell .sidebar .nav-group-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.app-shell .sidebar .nav-group-links{display:flex;flex-direction:column;gap:1px;padding:2px 0 0 29px;margin:0;border:0;background:transparent}
.app-shell .sidebar .nav-group-links a{min-height:34px;font-size:13px}

.app-shell .sidebar .account{display:flex;align-items:center;gap:8px;margin-top:auto;padding:12px 6px 0;border-top:1px solid var(--ui-border);color:var(--ui-text)}
.app-shell .sidebar .account-copy strong{color:var(--ui-text);font-size:14px}
.app-shell .sidebar .account-copy small{color:var(--ui-text-muted)}
.app-shell .sidebar .logout{margin-left:auto;min-height:36px;padding:0 10px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-surface);color:#3b4655;font-size:13px;font-weight:600}
.app-shell .sidebar .logout:hover{background:var(--ui-surface-selected);color:var(--ui-text)}

/* ── Top bar ─────────────────────────────────────────────── */
.app-shell .topbar{height:var(--header-height);min-height:var(--header-height);padding:0 var(--page-padding);background:rgb(255 255 255 / 92%);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--ui-border);gap:12px}
.app-shell .topbar .global-search{position:relative;display:flex;align-items:center;flex:1 1 360px;width:auto;max-width:540px;margin:0}
.app-shell .topbar .global-search input{height:42px;min-height:42px;padding-right:72px;border-radius:10px;border:1px solid var(--ui-border);background:var(--ui-canvas);font-size:14px;box-shadow:none}
.app-shell .topbar .global-search input:focus{background:#fff;border-color:var(--ui-brand);box-shadow:0 0 0 3px rgb(12 35 59 / 10%)}
.search-shortcut{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 7px;border:1px solid var(--ui-border-strong);border-radius:6px;background:#fff;color:var(--ui-text-muted);font:600 11px/1.5 var(--ui-font);pointer-events:none}
.global-search:focus-within .search-shortcut{display:none}
.app-shell .topbar .icon-btn{width:42px;height:42px;min-height:42px;border-radius:10px;border:1px solid var(--ui-border);background:#fff;box-shadow:none}

/* ── Content and shared surfaces ─────────────────────────── */
.app-shell .content{max-width:1320px;padding:28px var(--page-padding) 40px}
.app-shell .panel,.app-shell .ui-card{border:1px solid var(--ui-border);border-radius:var(--ui-radius-card);box-shadow:var(--ui-shadow-card);background:var(--ui-surface)}
.app-shell .page-head h2,.app-shell .ui-page-header h2{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.4px;color:var(--ui-text)}
.app-shell .btn{border-radius:var(--ui-radius-control);font-weight:600;box-shadow:none}
.app-shell .btn.primary{background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}
.app-shell .btn.primary:hover{background:var(--ui-brand-hover);border-color:var(--ui-brand-hover)}
.app-shell .btn:not(.primary):not(.danger){background:#fff;border-color:var(--ui-border);color:var(--ui-text)}
.app-shell .btn:not(.primary):not(.danger):hover{background:var(--ui-surface-selected);border-color:var(--ui-border-strong)}

/* Help markers: present but quiet until the heading is hovered or focused. */
.app-shell .ui-help>summary{width:20px;height:20px;min-height:20px;border:0;background:transparent;color:var(--ui-text-muted);font-size:12px;opacity:.45;transition:opacity .15s;box-shadow:none}
.app-shell .ui-heading-with-help:hover .ui-help>summary,.app-shell .ui-help>summary:focus-visible,.app-shell .ui-help[open]>summary{opacity:1;background:var(--ui-surface-selected)}

/* Tables: lighter header, roomy rows, sticky header inside scroll boxes. */
.app-shell table thead th{background:var(--ui-surface-subtle);color:var(--ui-text-muted);font-size:12px;font-weight:600;letter-spacing:.2px;text-transform:none;border-bottom:1px solid var(--ui-border);position:sticky;top:0;z-index:1}
.app-shell table tbody tr{transition:background .1s}
.app-shell table tbody tr:hover{background:#f8fafc}
.app-shell table td{border-color:#f0f2f5}

/* Status pills: consistent soft chips. */
.app-shell .pill{border-radius:999px;font-weight:600;font-size:12px;padding:3px 10px;border:0}

/* Empty states: centred, friendly. */
.app-shell .empty-state{padding:36px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ui-text-muted)}
.app-shell .empty-state strong{color:var(--ui-text);font-size:15px}
.app-shell .empty-state:before{content:"";width:44px;height:44px;border-radius:12px;margin-bottom:6px;background:var(--ui-surface-selected) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E") center/22px no-repeat}

/* Tabs / segmented filters used by list pages. */
.app-shell [role="tablist"] [role="tab"][aria-selected="true"],.app-shell .tabs .active,.app-shell .segmented .active{color:var(--ui-brand)}

/* ── Home ────────────────────────────────────────────────── */
.home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 26px;padding:0;border:0}
.home-head>div:first-child{display:flex;flex-direction:column;gap:4px}
.home-date{font-size:13px;font-weight:500;color:var(--ui-text-muted)}
.app-shell .home-head h2{margin:0;font-size:30px}
.home-section{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home-section-head h3{margin:0;font-size:15px;font-weight:600;color:var(--ui-text)}
.home-section-head a,.home-link{font-size:13px;font-weight:600;color:#3b4655;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.home-section-head a:hover,.home-link:hover{color:var(--ui-brand);text-decoration:underline}

.home-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.home-tile{display:flex;align-items:center;gap:16px;width:100%;min-height:84px;padding:16px 18px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-card);background:var(--ui-surface);box-shadow:var(--ui-shadow-card);color:var(--ui-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.home-tile:hover{border-color:var(--ui-border-strong);box-shadow:0 4px 14px rgb(15 27 42 / 7%);transform:translateY(-1px)}
.home-tile:focus-visible{outline:2px solid var(--ui-info);outline-offset:2px}
.home-tile-icon{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ui-warn-soft);color:var(--ui-warn)}
.home-tile-icon .ui-icon{width:21px;height:21px;margin:0}
.home-tile.is-info .home-tile-icon{background:var(--ui-info-soft);color:var(--ui-info)}
.home-tile.is-calm .home-tile-icon{background:var(--ui-success-soft);color:var(--ui-success)}
.home-tile-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.home-tile-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.home-tile-line b{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.4px}
.home-tile-line strong{font-size:14px;font-weight:600}
.home-tile-copy small{font-size:13px;color:var(--ui-text-muted)}
.home-tile.is-calm .home-tile-line b{color:var(--ui-text-muted)}
.home-tile-arrow{flex:none;color:#8792a2;font-size:22px;line-height:1}
.workflow-case[data-order-open]{cursor:pointer}
.customer-phone-line{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.customer-phone-line .contact-actions{display:inline-flex;align-items:center;gap:4px;min-height:0}
.customer-phone-line .contact-actions .btn{display:inline-grid;place-items:center;width:32px;min-height:32px;padding:0}
.team-list-row [data-label="Company"],.team-list-manager{white-space:nowrap}
.cashflow-visual[data-live-cashflow]{overflow:clip;min-height:348px}
.cashflow-visual[data-live-cashflow] .cashflow-scale{min-height:348px}
.cashflow-visual[data-live-cashflow] .cashflow-chart{overflow:clip;min-height:348px;padding-bottom:28px}
.cashflow-visual[data-live-cashflow] .cashflow-month{height:auto;min-height:230px}
.cashflow-visual[data-live-cashflow] .cashflow-month>span{display:block;text-align:center;line-height:24px;white-space:nowrap}
.home-link,.app-shell .home-head .home-new-menu>summary{white-space:nowrap}
.notification-button{overflow:visible}
#notification-count{white-space:nowrap}

.home-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.home-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-card);background:var(--ui-surface);box-shadow:var(--ui-shadow-card);color:var(--ui-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.home-kpi:hover{border-color:var(--ui-border-strong)}
.home-kpi:focus-visible{outline:2px solid var(--ui-info);outline-offset:2px}
.home-kpi small{font-size:13px;font-weight:500;color:var(--ui-text-muted)}
.home-kpi strong{font-size:23px;line-height:1.2;font-weight:700;letter-spacing:-.3px}
.home-kpi span{font-size:12px;font-weight:600;color:var(--ui-text-muted)}
.home-kpi.is-negative strong{color:#b42318}

.home-split{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;margin:0 0 26px}
.home-split>.panel{margin:0;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.home-cash{flex:3 1 460px;min-width:0}
.home-next{flex:2 1 320px;min-width:0}
.home-cash .cashflow-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#3b4655}
.home-next-list{display:flex;flex-direction:column}
.home-next-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 4px;border:0;border-bottom:1px solid #f0f2f5;background:transparent;font:inherit;text-align:left;color:var(--ui-text);cursor:pointer;border-radius:8px}
.home-next-item:last-child{border-bottom:0}
.home-next-item:hover{background:var(--ui-surface-subtle)}
.home-next-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.home-next-copy strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-next-copy small{font-size:12px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-next-empty{display:flex;flex-direction:column;gap:4px;padding:28px 8px;text-align:center;color:var(--ui-text-muted)}
.home-next-empty strong{color:var(--ui-text)}
.home-renewals{padding:18px 20px;display:flex;flex-direction:column;gap:12px}

.home-new-menu{position:relative}
.home-new-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer}
.home-new-menu>summary::-webkit-details-marker{display:none}
.home-new-menu>summary .ui-icon{width:18px;height:18px;margin:0}
.home-new-caret{margin-left:4px;padding-left:10px;border-left:1px solid rgb(255 255 255 / 25%);line-height:1}
.home-new-options{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;padding:6px;border:1px solid var(--ui-border);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgb(15 27 42 / 14%);display:flex;flex-direction:column}
.home-new-options button{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--ui-text);text-align:left;cursor:pointer}
.home-new-options button:hover,.home-new-options button:focus-visible{background:var(--ui-surface-selected);outline:none}
.home-new-options .ui-icon{width:18px;height:18px;margin:0;color:var(--ui-text-muted)}

/* The setup reminder becomes a slim strip. */
.app-shell .onboarding-card.compact-setup{border-radius:12px;padding:8px 10px 8px 16px;margin-bottom:20px;background:var(--ui-accent-soft);border:1px solid #f1e2c2;box-shadow:none}

/* ── Login ───────────────────────────────────────────────── */
.auth .auth-visual{background:radial-gradient(1200px 600px at 80% 10%,#16395c 0%,#0c233b 55%,#081a2c 100%)}
.auth .auth-visual-copy{max-width:520px}
.auth .auth-visual h2{color:#f5f7fa;font-size:40px;line-height:1.15;letter-spacing:-.6px}
.auth .auth-visual p{color:#c4cfdb}
.auth .auth-mark{width:96px;height:96px;border-radius:22px;background:transparent;padding:0;object-fit:contain;box-shadow:0 10px 30px rgb(0 0 0 / 25%)}
.auth-highlights{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.auth-highlights li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid rgb(255 255 255 / 12%);border-radius:12px;background:rgb(255 255 255 / 5%)}
.auth-highlights span{color:#fff;font-weight:600;font-size:15px}
.auth-highlights small{color:#aebccb;font-size:13px}
.auth .auth-panel .brand img{background:transparent;border:0;border-radius:12px;object-fit:contain}

/* ── Company picker (single-company tools) ───────────────── */
.company-picker{padding:22px;display:flex;flex-direction:column;gap:16px;max-width:760px}
.company-picker-head{display:flex;flex-direction:column;gap:4px}
.company-picker-head strong{font-size:16px}
.company-picker-head span{color:var(--ui-text-muted);font-size:14px}
.company-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.company-picker-card{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1px solid var(--ui-border);border-radius:12px;background:#fff;font:inherit;text-align:left;color:var(--ui-text);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.company-picker-card:hover{border-color:var(--ui-border-strong);box-shadow:0 4px 14px rgb(15 27 42 / 7%)}
.company-picker-card:focus-visible{outline:2px solid var(--ui-info);outline-offset:2px}
.company-picker-mark{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--company-color) 14%,#fff);color:color-mix(in srgb,var(--company-color) 80%,#000);font-weight:700;font-size:13px}
.company-picker-name{flex:1;font-weight:600;font-size:14px}
.company-picker-arrow{color:#8792a2;font-size:20px}

/* ── Mobile ──────────────────────────────────────────────── */
.mobile-tabbar{display:none}
@media(max-width:799px){
  :root{--page-padding:16px;--header-height:60px}
  .app-shell .topbar{display:flex;grid-template-areas:none;height:var(--header-height);min-height:var(--header-height);padding:0 12px;gap:8px}
  .app-shell .topbar .menu{display:none}
  .app-shell .topbar .global-search{flex:1 1 auto;max-width:none}
  .app-shell .topbar .global-search input{padding-right:12px}
  .search-shortcut{display:none}
  .app-shell .content{padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
  .app-shell .home-head h2{font-size:24px}
  .home-tile-grid,.home-kpi-grid{gap:10px}
  .home-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-kpi{padding:12px 14px}
  .home-kpi strong{font-size:17px}
  .home-tile{min-height:68px;padding:12px 14px}
  .home-tile-line b{font-size:22px}
  .home-new-options{right:auto;left:0}
  .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-around;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:rgb(255 255 255 / 96%);backdrop-filter:blur(10px);border-top:1px solid var(--ui-border)}
  .mobile-tabbar a,.mobile-tabbar-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:60px;min-height:48px;padding:0;border:0;background:transparent;color:var(--ui-text-muted);font:500 11px/1.2 var(--ui-font);text-decoration:none;cursor:pointer}
  .mobile-tabbar a .ui-icon,.mobile-tabbar-more .ui-icon{width:22px;height:22px;margin:0}
  .mobile-tabbar a.active{color:var(--ui-brand);font-weight:700}
  .mobile-tabbar-new{width:52px;height:52px;margin-top:-20px;border:0;border-radius:16px;background:var(--ui-brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgb(12 35 59 / 28%);cursor:pointer}
  .mobile-tabbar-new .ui-icon{width:22px;height:22px;margin:0;stroke-width:2.2}
  .navigation-open .mobile-tabbar{display:none}
}
@media(min-width:800px){.app-shell .topbar .mobile-brand{display:none}}
@media print{.mobile-tabbar{display:none!important}}

/* ── Page headers: one strong action, quiet secondaries ───── */
.app-shell .content .page-head.home-head{border-bottom:0;padding-bottom:0}
.app-shell .content .ui-page-header>.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.app-shell .content .ui-page-header>.actions>.btn.primary,.app-shell .content .ui-page-header>.actions>.primary{order:10;margin-left:6px}
.app-shell .content .ui-page-header>.actions>details>summary.btn,.app-shell .content .ui-page-header>.actions>details>summary,.app-shell .content .ui-page-header>.actions>.btn:not(.primary):not(.danger){border-color:transparent;background:transparent;color:#3b4655}
.app-shell .content .ui-page-header>.actions>details>summary:hover,.app-shell .content .ui-page-header>.actions>.btn:not(.primary):not(.danger):hover,.app-shell .content .ui-page-header>.actions>details[open]>summary{background:var(--ui-surface-selected);border-color:var(--ui-border);color:var(--ui-text)}
.app-shell .home-head .home-new-menu>summary.btn.primary{background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}
.app-shell .home-head .home-new-menu>summary.btn.primary:hover{background:var(--ui-brand-hover)}
.home-cash .cashflow-visual{overflow:clip;min-width:0}
@media(max-width:799px){.app-shell .home-head{align-items:center;flex-wrap:nowrap}.app-shell .home-head .home-new-menu>summary{min-height:40px;padding:0 12px}.home-new-caret{display:none}.home-new-options{right:0;left:auto}}

/* ── OpsHQ 4.0: access guide, presets, preview ───────────── */
.access-guide{display:flex;flex-direction:column;gap:10px;padding:14px 16px;margin:0 0 12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-subtle)}
.access-guide-text{margin:0;font-size:14px;color:var(--ui-text)}
.access-scope{margin:0;font-size:13px;font-weight:600;color:var(--ui-info)}
.access-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.access-presets>span{font-size:12px;font-weight:600;color:var(--ui-text-muted);margin-right:4px}
.access-preset-note{color:var(--ui-success);font-weight:600;min-height:1em}
.access-preview{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dashed var(--ui-border)}
.access-preview strong{font-size:13px}
.access-preview [data-access-preview]{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#3b4655}
.attendance-hub-self{padding:16px 18px}
/* Error cards: message left, Try again on the right; stack on phones. */
.app-shell .panel.load-error{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:760px;margin:24px auto;padding:20px 22px;border-color:#f3d2c4;background:#fffaf7}
.app-shell .panel.load-error>div{flex:1 1 320px;min-width:0}
.app-shell .panel.load-error strong{display:block;font-size:15px;margin-bottom:4px}
.app-shell .panel.load-error p{margin:0;color:var(--ui-text-muted)}
.app-shell .panel.load-error>.btn{flex:none;width:auto}
.payslip-link{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--ui-info);text-decoration:underline;text-underline-offset:2px}
a.home-kpi.payslip-link{text-decoration:none;color:var(--ui-text);margin-top:0}
a.home-kpi.payslip-link strong{color:var(--ui-info)}
/* Orders: progress bar and WhatsApp menu */
.next-action-panel .order-progress{flex-basis:100%;height:6px;border-radius:999px;background:rgb(12 35 59 / 8%);overflow:hidden;margin-top:12px}
.next-action-panel .order-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ui-brand),#2a5a86)}
.next-action-panel .order-progress-label{flex-basis:100%;margin-top:6px;font-size:12px;font-weight:600;color:var(--ui-text-muted)}
.order-whatsapp>summary{color:#0b6b37!important;border-color:#bfe8cf!important;background:#f1fbf5!important}
.order-whatsapp .order-whatsapp-note{margin:4px 8px 6px;font-size:12px;color:var(--ui-text-muted)}
.order-whatsapp>div button{display:block;width:100%;text-align:left;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;cursor:pointer}
.order-whatsapp>div button:hover{background:var(--ui-surface-selected)}
.app-shell .next-action-panel{flex-wrap:wrap}
.order-profit-fact small{display:block;font-size:11px;font-weight:600;color:var(--ui-text-muted)}
.is-negative{color:#b42318!important}
.order-profit-report{margin-top:20px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.order-profit-report .home-section-head small{color:var(--ui-text-muted);font-size:13px}
.order-profit-note{margin:0;font-size:12px;color:var(--ui-text-muted)}
.weekly-summary-card{margin-top:20px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.weekly-summary-card .home-section-head small{display:block;color:var(--ui-text-muted);margin-top:2px}
.weekly-summary-frame{width:100%;height:360px;border:1px solid var(--ui-border);border-radius:10px;background:#fff}
/* Quick capture sheet (phone) */
.quick-sheet{position:fixed;inset:0;z-index:60;background:rgb(12 35 59 / 35%);display:flex;align-items:flex-end;justify-content:center;padding:0 12px calc(96px + env(safe-area-inset-bottom))}
.quick-sheet[hidden]{display:none}
.quick-sheet-panel{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:8px;box-shadow:0 18px 40px rgb(12 35 59 / 25%);display:flex;flex-direction:column}
.quick-sheet-panel>button,.quick-sheet-panel>label{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:0;border-radius:12px;background:transparent;font:600 15px/1.2 var(--ui-font);color:var(--ui-text);cursor:pointer;text-align:left}
.quick-sheet-panel>button:hover,.quick-sheet-panel>label:hover{background:var(--ui-surface-selected)}
.quick-sheet-panel .ui-icon{width:20px;height:20px;margin:0;color:var(--ui-brand)}
.quick-bill-attached{outline:2px solid var(--ui-success);outline-offset:4px;border-radius:8px}
a.home-kpi.payslip-link{display:flex}
@media(max-width:799px){.app-shell .home-head .home-new-menu>summary.btn.primary{background:var(--ui-brand)!important;color:#fff!important;border-color:var(--ui-brand)!important}}
/* 4.1 purchase form: essentials first */
.purchase-more{border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-subtle)}
.purchase-more>summary{display:flex;flex-direction:column;gap:2px;padding:14px 16px;cursor:pointer;list-style:none}
.purchase-more>summary::-webkit-details-marker{display:none}
.purchase-more>summary span{font-weight:600;font-size:14px}
.purchase-more>summary span:after{content:" ⌄";color:var(--ui-text-muted)}
.purchase-more[open]>summary span:after{content:" ⌃"}
.purchase-more>summary small{color:var(--ui-text-muted);font-size:12px}
.purchase-more-body{padding:0 16px 16px}

/* OpsHQ 4.1 — one Work tab on the order (materials, quality, costs & reports) */
.order-work-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.order-work-jump a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line,#e2e6ec);border-radius:999px;font-size:13px;font-weight:600;color:inherit;text-decoration:none;background:var(--surface,#fff)}
.order-work-jump a:hover{border-color:currentColor}
.order-work-jump b{font-weight:600;font-size:12px;padding:1px 7px;border-radius:999px;background:var(--soft,#eef2f7)}
#order-work-materials,#order-work-quality,#order-work-operations{scroll-margin-top:84px}
#order-work-quality,#order-work-operations{margin-top:16px}
.order-work-ops .order-operations>.page-head{display:none}

/* OpsHQ 4.2 — never show two back links: when the shared back bar is present, hide the page's own back controls */
#content:has([data-workspace-backbar]) [data-back-team],
#content:has([data-workspace-backbar]) .page-head > .btn.ui-superseded-back{display:none!important}
#content [data-workspace-backbar] ~ [data-workspace-backbar]{display:none!important}

/* OpsHQ 4.2 — laptop widths: keep sidebar labels (an older rule hid them but kept the full-width rail) */
@media(min-width:800px) and (max-width:1180px){
 .sidebar .brand-copy,.sidebar .nav-label,.sidebar .account-copy,.sidebar .logout-label{display:revert!important}
 .sidebar .nav-label{display:block!important}
}

/* OpsHQ 4.2 — "Views" opens as a small dropdown instead of pushing the page header apart */
.saved-views-menu{position:relative}
.saved-views-menu>summary{list-style:none}
.saved-views-menu>summary::-webkit-details-marker{display:none}
.saved-views-menu[open]>.saved-views-bar{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:240px;margin:0;padding:12px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#e2e6ec);border-radius:12px;box-shadow:0 12px 32px rgba(15,27,42,.14)}
.saved-views-menu[open]>.saved-views-bar label{display:grid;gap:6px;margin:0}
.saved-views-menu[open]>.saved-views-bar select{width:100%}
.saved-views-menu[open]>.saved-views-bar .btn{width:100%;justify-content:center}

/* OpsHQ 4.2 — empty messages span the whole card grid */
.order-cards>.empty-state,.order-cards>.empty-state.compact{grid-column:1/-1}

/* OpsHQ 4.2 — order view tabs wrap instead of hiding the last tab behind a scrollbar (desktop/laptop) */
@media(min-width:800px){.app-shell .view-tabs{flex-wrap:wrap;overflow-x:visible;row-gap:4px}}

/* OpsHQ 4.3 — one screen at a time: the new screen stays hidden behind one placeholder until it is complete */
.main{position:relative}
#content[data-pending]{visibility:hidden}
#content-pending{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:var(--ui-bg,#f5f7fa)}
#content-pending[hidden]{display:none}
/* Updating a screen you are already on: small spinner, the screen stays put */
.refresh-status{position:fixed;top:calc(var(--header-height,64px) + 10px);right:22px;z-index:70;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#e2e6ec);box-shadow:0 6px 18px rgba(15,27,42,.10);font-size:12px;font-weight:600;color:var(--ui-muted,#5b6675)}
.refresh-spinner{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:opshq-spin .7s linear infinite;opacity:.8}
@keyframes opshq-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.refresh-spinner{animation-duration:2s}}

/* OpsHQ 4.3 — menu items that do not apply to the selected company */
.scope-hidden{display:none!important}

/* OpsHQ 4.3 — Money sub-pages: one slim totals line instead of four big cards + commitments */
.money-mini-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--ui-border,#e2e6ec);border-radius:12px;background:var(--ui-surface,#fff)}
.money-mini-strip span{display:flex;align-items:baseline;gap:8px}
.money-mini-strip small{font-size:12px;color:var(--ui-muted,#5b6675)}
.money-mini-strip strong{font-size:14px;font-variant-numeric:tabular-nums}
.money-mini-strip .attention strong{color:#9a3412}
.money-mini-strip .btn{margin-left:auto}

/* OpsHQ 4.3 — Orders: cards / table switch and table */
.orders-display-toggle{display:inline-flex;margin:0 0 12px;padding:3px;border:1px solid var(--ui-border,#e2e6ec);border-radius:10px;background:var(--ui-surface,#fff)}
.orders-display-toggle button{appearance:none;border:0;background:transparent;padding:6px 14px;border-radius:7px;font:inherit;font-size:13px;font-weight:600;color:var(--ui-muted,#5b6675);cursor:pointer}
.orders-display-toggle button.active{background:var(--ui-brand,#0c233b);color:#fff}
.orders-table td small{display:block;margin-top:2px;font-size:12px;color:var(--ui-muted,#5b6675);font-weight:400}
.orders-table td,.orders-table th{word-break:normal;overflow-wrap:normal}
.orders-table td:nth-child(3){white-space:nowrap}
.orders-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.orders-table tr[data-order-row]{cursor:pointer}
.orders-table .sla-overdue{color:#9a3412;font-weight:600}
.orders-table .sla-at_risk{color:#92400e}
.saved-view-manager .saved-view-group{margin:18px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ui-muted,#5b6675)}
.saved-view-manager .saved-view-group:first-child{margin-top:0}
/* Page header actions: secondary actions first, the main action (e.g. New order) last */
.ui-page-header .actions>.saved-views-menu{order:-1}
.ui-page-header .actions>.btn.primary{order:10}

/* OpsHQ 4.3 — menu count badges and keyboard shortcut list */
.sidebar [data-route] .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#b45309;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sidebar [data-route].active .nav-badge,.sidebar [data-route][aria-current] .nav-badge{background:#fff;color:var(--ui-brand,#0c233b)}
.shortcut-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.shortcut-list div{display:flex;align-items:center;gap:6px;font-size:14px}
.shortcut-list span{margin-left:6px}
.shortcut-list kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--ui-border,#e2e6ec);border-bottom-width:2px;border-radius:6px;background:var(--ui-surface,#fff);font:600 12px/1 inherit}
@media(max-width:640px){.shortcut-list{grid-template-columns:1fr}}

/* OpsHQ 4.3 — quick row actions */
.quick-row-action{white-space:nowrap}
td[data-label="Actions"] .actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}

/* OpsHQ 4.3 — phone: Views opens as a sheet above the bottom bar instead of off the screen edge */
@media(max-width:700px){
 .saved-views-menu[open]>.saved-views-bar{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));min-width:0;z-index:90}
}

/* OpsHQ 4.3 — tables never split words ("Confi rm", "Activ e"). An older rule allowed breaks anywhere, which let
   the browser squeeze columns. Words now stay whole; a wide table scrolls sideways inside its card instead. */
.content table th,.content table td{overflow-wrap:break-word;word-break:normal;hyphens:manual}
#content :is(h2,h3,h4,strong,.pill){overflow-wrap:break-word}
.content .table-shell{overflow-x:auto;-webkit-overflow-scrolling:touch}
.content table td .pill,.content table td .btn,.content table td button,.content table th{white-space:nowrap}
.content table td{min-width:72px}
.content table td.select-column,.content table th.select-column,.content table td:has(> input[type=checkbox]:only-child){min-width:0}
.content table td:has(.customer-profile-link),.content table td:has(> strong){min-width:140px}
/* Money overview tiles: title and amount stack instead of squeezing each other ("Upco ming") */
.money-overview-actions>button{grid-template-columns:minmax(min-content,1fr) minmax(0,max-content)!important}
.money-overview-actions>button>strong{overflow-wrap:normal}
.money-overview-actions>button>span{overflow-wrap:break-word!important;min-width:0}
/* Notifications: filter inputs match the rest of the app */
.notification-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.notification-filters input[type=search],.notification-filters input[type=date],.notification-filters select{min-height:42px;padding:0 12px;border:1px solid var(--ui-border,#e2e6ec);border-radius:10px;background:var(--ui-surface,#fff);font:inherit;font-size:14px;color:inherit}
.notification-filters input[type=search]{flex:1 1 240px;min-width:0}
.content table td select{min-width:100px}
.content table td input[type=date]{min-width:140px}

/* OpsHQ 4.4 — AI Operations */
.ai-ops-tabs{margin:0 0 16px}
.ai-ops-tabs [data-ai-pending-count]:not(:empty){margin-left:6px;padding:1px 7px;border-radius:999px;background:#b45309;color:#fff;font-size:11px;font-weight:700}
.ai-ops-body>.panel{margin-bottom:16px}
.ai-ops-status{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:16px;align-items:center}
.ai-ops-status>div{display:grid;gap:4px}.ai-ops-status small{color:var(--ui-muted,#5b6675);font-size:12px}.ai-ops-status span{color:var(--ui-muted,#5b6675);font-size:13px}
.ai-ops-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;margin-bottom:16px}
.ai-ops-metric-link{text-align:left;cursor:pointer;font:inherit;color:inherit}
.ai-ops-attention .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--ui-border,#e2e6ec)}
.ai-ops-attention .row:first-of-type{border-top:0}.ai-ops-attention .grow{flex:1;min-width:0;display:grid;gap:2px}.ai-ops-attention small{color:var(--ui-muted,#5b6675)}
.ai-ops-bars{display:grid;gap:8px}
.ai-ops-bars>div{display:grid;grid-template-columns:minmax(120px,200px) 1fr 40px;gap:10px;align-items:center;font-size:13px}
.ai-ops-bars i{display:block;height:8px;border-radius:999px;background:var(--ui-soft,#eef2f7);position:relative;overflow:hidden}
.ai-ops-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ui-brand,#0c233b);border-radius:inherit}
.ai-ops-bars b{text-align:right;font-variant-numeric:tabular-nums}
.ai-ops-table td small{display:block;margin-top:2px;color:var(--ui-muted,#5b6675);font-size:12px;font-weight:400}
.ai-ops-table .ai-ops-error{color:#9a3412}
.ai-ops-table td .pill+.pill{margin-left:4px}
.ai-ops-table td:has(> .pill.blue){white-space:normal}
.ai-ops-row-actions{white-space:nowrap;text-align:right}.ai-ops-row-actions .btn+.btn{margin-left:6px}
.ai-ops-checks{display:flex;flex-wrap:wrap;gap:8px 18px;border:0;padding:0;margin:0}
.ai-ops-checks legend{width:100%;margin-bottom:6px;font-weight:600;font-size:13px}
.ai-ops-checks .check,.ai-ops-toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.ai-ops-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.ai-ops-approvals{display:grid;gap:12px}
.ai-ops-approval{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:14px 16px;border:1px solid var(--ui-border,#e2e6ec);border-left:4px solid #b45309;border-radius:12px;background:var(--ui-surface,#fff)}
.ai-ops-approval h4{margin:4px 0}.ai-ops-approval small,.ai-ops-approval p{color:var(--ui-muted,#5b6675);margin:0;font-size:13px}.ai-ops-approval .ai-ops-details{margin-top:6px;white-space:pre-wrap}
.ai-ops-approval .actions{display:flex;gap:8px;flex:none}
.ai-ops-copy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin:8px 0;padding:8px 10px;border:1px solid var(--ui-border,#e2e6ec);border-radius:10px;background:var(--ui-bg,#f5f7fa)}
.ai-ops-copy small{font-weight:600;color:var(--ui-muted,#5b6675)}.ai-ops-copy code{overflow-wrap:anywhere;font-size:13px}
.ai-ops-newkey{padding:14px 16px;margin-bottom:14px;border:1px solid #f0c36d;border-radius:12px;background:#fff8e8}
.ai-ops-newkey small{color:var(--ui-muted,#5b6675)}
.ai-ops-checklist{display:grid;gap:10px}
.ai-ops-checklist>div{display:flex;gap:10px;align-items:flex-start}
.ai-ops-checklist span{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700}
.ai-ops-checklist .ok span{background:#dcfce7;color:#166534}.ai-ops-checklist .todo span{background:#fef3c7;color:#92400e}
.ai-ops-checklist small{display:block;color:var(--ui-muted,#5b6675)}
.ai-ops-steps{margin:0;padding-left:20px;display:grid;gap:12px}.ai-ops-steps li{padding-left:4px}
@media(max-width:800px){.ai-ops-status{grid-template-columns:1fr}.ai-ops-approval{flex-direction:column}.ai-ops-bars>div{grid-template-columns:110px 1fr 32px}.ai-ops-copy{grid-template-columns:1fr auto}.ai-ops-copy small{grid-column:1/-1}}
.ai-ops-checks{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 18px}
.ai-ops-checks .check{width:auto!important;margin:0}

.ai-ops-preview{white-space:pre-wrap;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2,#f5f7fa);border:1px solid var(--line,#e2e6ec);border-radius:10px;padding:12px;margin-top:12px;max-height:420px;overflow:auto}
.ai-ops-inline{display:flex;gap:8px}.ai-ops-inline select{max-width:110px}

/* Task list: keep inline priority and status readable */
#content select.inline-control[data-task-inline="priority"]{min-width:104px}#content select.inline-control[data-task-inline="status"]{min-width:146px}#content input.inline-control[data-task-inline="due_date"]{min-width:142px}
.report-two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.report-two-col h4{margin:8px 0}
#content .report-two-col table{min-width:0;width:100%}#content .report-two-col .table-shell{overflow-x:auto}
/* UI67: tabs shared by screens that sit under one menu link (Inbox, Orders, Pricing, Contacts, Transactions, Purchasing, Team). */
.hub-tabs-wrap{width:100%;max-width:1320px;margin:0 auto;padding:20px var(--page-padding) 0}
.hub-tabs-wrap[hidden]{display:none}
.hub-tabs-wrap+#content-pending+.content,.hub-tabs-wrap+.content{padding-top:16px}
.hub-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-border,#e3e7ec);overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-tab{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:9px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--ui-text-muted,#5d6b7a);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.hub-tab:hover{color:var(--ui-text,#132b45)}
.hub-tab.active{color:var(--ui-brand,#132b45);border-bottom-color:currentColor}
.hub-tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#b5552b;color:#fff;font-size:11px;font-weight:700}
.hub-tab-badge[hidden]{display:none}
@media(max-width:760px){.hub-tabs-wrap{padding:12px 16px 0}.hub-tabs-wrap+#content-pending+.content,.hub-tabs-wrap+.content{padding-top:12px}}
/* Customer profile: business logo, previously bought, follow-ups (6 Nov 2026) */
.customer-workspace-header>.customer-header-logo{flex:0 0 64px;width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff;padding:4px;align-self:center}
.customer-workspace-header>.customer-header-logo+div{flex:1 1 auto;min-width:0}
.customer-workspace-header>.customer-header-logo+div>small{color:var(--muted);font-weight:800;text-transform:uppercase}
.customer-logo-row{display:flex;align-items:center;gap:14px;padding:4px 0 14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.customer-logo-row>div:last-child{display:grid;gap:3px;min-width:0}
.customer-logo-row small{color:var(--muted)}
.customer-logo-box{flex:0 0 72px;width:72px;height:72px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#fff}
.customer-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.customer-logo-box span{font-size:11px;color:var(--muted)}
.customer-logo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.customer-logo-actions label.btn{cursor:pointer}
.customer-bought-panel{margin-top:18px}
.customer-bought-list,.followup-list{display:grid}
.customer-bought-list>article,.followup-list>article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.followup-list>article{grid-template-columns:minmax(0,1fr) auto auto}
.customer-bought-list>article:last-child,.followup-list>article:last-child{border-bottom:0}
.customer-bought-list strong,.followup-list strong{display:block;overflow-wrap:anywhere}
.customer-bought-list small,.followup-list small{display:block;color:var(--muted);margin-top:3px}
.customer-bought-list p,.followup-list p{margin:5px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
[data-customer-followups]{margin-top:18px}
.followup-summary{margin-bottom:12px}
.followup-overdue{display:grid;gap:6px;margin-bottom:10px}
.followup-overdue p{margin:0}
[data-followup-editor]:not(:empty){margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:760px){.customer-workspace-header>.customer-header-logo{align-self:start}}
@media(max-width:640px){.followup-list>article{grid-template-columns:minmax(0,1fr) auto}.followup-list>article>.btn{grid-column:1/-1;justify-self:start}}
.renewal-month{min-width:170px;margin:0}
.vc-earlier{margin-bottom:10px}
.customer-bought-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Purchase form: the bill comes first and fills the form (7 Nov 2026) */
.bill-first{border:1px dashed var(--line);border-radius:14px;padding:14px 16px;background:color-mix(in srgb,var(--gold,#c8902f) 6%,transparent)}
.bill-first input[type=file]{margin-top:6px}
.bill-first.is-reading{opacity:.7}
.bill-first.is-reading small::after{content:" Reading…";font-weight:600}
/* Bill reader (7 Nov 2026): fields the bill did not give are outlined until filled. */
.needs-check input,.needs-check select,.needs-check textarea{border-color:#d98a1c!important;box-shadow:0 0 0 3px rgba(217,138,28,.18)!important}
.needs-check::after{content:attr(data-check);display:block;font-size:12px;font-weight:600;color:#a4600d;margin-top:4px}
:root[data-theme="dark"] .needs-check::after{color:#f0b35e}
/* Fleet control (7 Nov 2026) */
.fleet-actions{display:flex;gap:8px;flex-wrap:wrap}
.fleet-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
.fleet-tabs{display:flex;gap:4px;background:var(--ui-surface-muted,#eef2f6);padding:4px;border-radius:12px}
.fleet-tabs a{padding:8px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ui-text-muted,#55657b);text-decoration:none}
.fleet-tabs a.active{background:var(--ui-surface,#fff);color:var(--ui-text,#0f2340);box-shadow:0 1px 2px rgba(15,35,64,.12)}
.fleet-company{min-width:220px;margin:0}
.fleet-metrics{margin-bottom:14px}
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.fleet-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;align-content:start;gap:8px;padding:14px 16px;border:1px solid var(--ui-border,#e1e6ee);border-left:4px solid #1c6b3a;border-radius:14px;background:var(--ui-surface,#fff);color:var(--ui-text,#0f2340);transition:border-color .15s,box-shadow .15s}
.fleet-card:hover,.fleet-card:focus-visible{box-shadow:0 4px 14px rgba(15,35,64,.1)}
.fleet-card:focus-visible{outline:3px solid rgba(200,144,47,.45)}
.fleet-card.is-out{border-left-color:#c8902f}.fleet-card.is-maint{border-left-color:#a51d20}
.fleet-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fleet-card-head>span:first-child{display:grid;gap:2px;min-width:0}
.fleet-card-head strong{font-size:18px;letter-spacing:.02em}
.fleet-card-head small,.fleet-card-meta{font-size:12.5px;color:var(--ui-text-muted,#55657b)}
.fleet-card-line{font-size:14px}
.fleet-alerts{display:flex;flex-wrap:wrap;gap:6px}
.fleet-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;text-align:center}
.fleet-empty p{max-width:520px;color:var(--ui-text-muted,#55657b)}
.fleet-detail{display:grid;gap:14px;padding:4px 18px 18px}
.fleet-detail-top{display:flex;gap:16px;align-items:flex-start}
.fleet-detail-top .record-detail-grid{flex:1}
.fleet-qr{margin:0;display:grid;justify-items:center;gap:4px;font-size:12px;color:var(--ui-text-muted,#55657b)}
.fleet-qr img{background:#fff;border:1px solid var(--ui-border,#e1e6ee);border-radius:10px;padding:4px}
.fleet-detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.fleet-detail h4{margin:4px 0 0}
.fleet-table td small{display:block;font-size:12px;color:var(--ui-text-muted,#55657b)}
.fleet-table .num{text-align:right;font-variant-numeric:tabular-nums}
.fleet-row-flag td{background:rgba(165,29,32,.05)}
.fleet-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.fleet-total{margin:10px 0}
@media(max-width:640px){.fleet-detail-top{flex-direction:column-reverse}.fleet-company{min-width:0;width:100%}}
/* Pay bills in one transfer (7 Nov 2026) */
.pay-together-list{display:grid;gap:6px;max-height:300px;overflow:auto;border:1px solid var(--ui-border,#e1e6ee);border-radius:12px;padding:8px}
.pay-together-list .choice{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px}
.pay-together-list .choice:hover{background:var(--ui-surface-muted,#f4f6f9)}
.pay-together-list .choice span{flex:1;min-width:0;font-size:13.5px}
.pay-together-list .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.pay-together-total{margin:0}
.item-photos-optional summary{cursor:pointer;font-weight:600;color:var(--ui-text-muted,#55657b);padding:6px 0}
.pay-together-row{display:flex;justify-content:flex-end;margin:8px 0 4px}
/* Quick add supplier (7 Nov 2026) */
.vendor-quick-add{justify-self:start;align-self:end;margin-bottom:6px}
.vendor-quick-form{display:grid;gap:10px;padding:14px;border:1px solid var(--ui-border,#e1e6ee);border-radius:12px;background:var(--ui-surface-muted,#f7f9fb)}
.vendor-quick-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.vendor-quick-actions{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:700px){.vendor-quick-grid{grid-template-columns:1fr}}
/* Bank matching: match one line to several entries; record a line as an expense (7 Nov 2026) */
.bm-table tr.bm-ok td{background:rgba(28,107,58,.05)}
.bm-table tr.bm-done td{background:rgba(28,107,58,.08)}
.bm-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bm-group{font-weight:600;color:#1c6b3a}
.bm-panel td{background:var(--ui-surface-muted,#f7f9fb)}
.bm-picker,.bm-record{display:grid;gap:10px;padding:6px 4px}
.bm-list{display:grid;gap:4px;max-height:260px;overflow:auto}
.bm-list .choice{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#e1e6ee)}
.bm-list .choice span{flex:1;min-width:0}
.bm-record-grid{display:grid;grid-template-columns:2fr 2fr 1fr 2fr;gap:10px}
.bm-buttons{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:900px){.bm-record-grid{grid-template-columns:1fr 1fr}}
.vendor-also{border:0;padding:0;margin:0}.vendor-also>div{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0}
/* Purchase items from the price list (7 Nov 2026) */
.purchase-lines{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--ui-border,#e1e6ee);border-radius:12px;background:var(--ui-surface,#fff)}
.pl-head{display:grid;gap:2px}.pl-head small{color:var(--ui-text-muted,#55657b)}
.pl-row{display:grid;grid-template-columns:minmax(0,3fr) 80px 90px 110px 100px 36px;gap:8px;align-items:start;padding:4px 0}
.pl-labels{font-size:12px;font-weight:600;color:var(--ui-text-muted,#55657b);text-transform:uppercase;letter-spacing:.04em}
.pl-row input{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--ui-border-strong,#c7d0db);border-radius:8px;font:inherit;background:var(--ui-surface,#fff);color:inherit}
.pl-row em{display:block;font-style:normal;margin-top:4px;font-size:12px}
.pl-row .num{text-align:right;padding-top:9px;font-variant-numeric:tabular-nums;font-weight:600}
.pl-update{display:flex;gap:6px;align-items:center;font-size:12px;color:#8a5a12}
.pl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pl-empty{margin:4px 0}
@media(max-width:760px){.pl-row{grid-template-columns:1fr 1fr 1fr}.pl-row>span:first-child{grid-column:1/-1}.pl-labels{display:none}}
.pl-row .pl-update input{width:auto;min-height:0;padding:0;margin:0}
.pl-row .pl-update{display:inline-flex}
/* Bank matching layout (7 Nov 2026) */
.bm-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.bm-tile{background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#e1e6ee);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.bm-tile span{font-size:12px;color:var(--ui-text-muted,#55657b);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bm-tile b{font-size:20px}.bm-tile small{font-size:12px;color:var(--ui-text-muted,#55657b)}
.bm-tile.warn{border-color:#e7b86a;background:rgba(200,144,47,.07)}.bm-tile.ok{border-color:#a9d3b6;background:rgba(28,107,58,.05)}
.bm-balance p,.bm-bulk b{margin:0 0 8px}
.bm-section{margin-top:12px}.bm-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.bm-section-head h4{margin:0;display:flex;align-items:center;gap:8px}.bm-section-head p{margin:4px 0 0}
.bm-table td small{display:block;font-size:12px;color:var(--ui-text-muted,#55657b)}
.bm-table .bm-date{white-space:nowrap}
.bm-table .bm-out{color:#a51d20}.bm-table .bm-in{color:#1c6b3a}
.bm-done-wrap{margin-top:12px}.bm-done-wrap>summary{cursor:pointer;font-weight:700;padding:10px 4px}
/* Bank matching: part payment hint (7 Nov 2026) */
.bm-part{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface-2,#f6f3ec);border:1px solid var(--line,#e5e0d5);font-size:14px;line-height:1.45}
.bm-actions .btn.small{white-space:nowrap}
/* Bank matching: one compact action menu per line (7 Nov 2026) */
.bm-cell{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bm-cell>.muted{font-size:13px}
.bm-act{width:auto;min-height:34px;padding:4px 30px 4px 10px;border-radius:8px;font-size:13px;font-weight:600;max-width:220px;cursor:pointer}
.bm-cell select[data-choice]{max-width:100%}
/* Bank matching: match a proposed record in one click; transfer From/To; owner split (7 Nov 2026) */
.bm-pick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.bm-pick select{width:auto;max-width:320px}
.bm-transfer{align-items:end;grid-template-columns:2fr auto 2fr 2fr}
@media(max-width:900px){.bm-transfer{grid-template-columns:1fr auto 1fr}}
.bm-transfer [data-swap]{align-self:end;min-height:40px;margin-bottom:2px}
.bm-split-toggle{display:inline-flex;gap:8px;align-items:center;margin:8px 0 4px;font-weight:600}
.bm-split{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-items:end}
.bm-split p{margin:0}
/* Bank matching: possible duplicate prompt (7 Nov 2026) */
.bm-dup{margin:10px 0;padding:12px;border-radius:10px;border:1px solid var(--gold,#c9a227);background:var(--surface-2,#fbf7ec);display:grid;gap:8px}
.bm-dup p{margin:0}
.bm-dup-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line,#e5e0d5);font-size:14px}
/* UI/UX audit batch 1 (UX-005): toasts stay inside the viewport; errors are unmistakable. */
#toast{position:fixed;inset:auto 16px 16px auto;left:auto;top:auto;width:min(440px,calc(100vw - 32px));max-width:min(440px,calc(100vw - 32px));display:grid;gap:8px;justify-items:stretch;align-items:end;pointer-events:none;transform:none}
#toast .toast{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-wrap:anywhere}
#toast .toast-error{background:#7a1d24;border-color:#c2454d}
#toast .toast-error .toast-icon{background:#ffe4e5;color:#a82e35}
#toast .toast-success .toast-icon{background:#dff4e7;color:#1f7a49}
@media(max-width:720px){#toast{inset:auto 12px calc(84px + env(safe-area-inset-bottom)) 12px;width:auto;max-width:none}}
/* UX-006: No access state */
.panel.no-access{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;max-width:760px;margin:24px auto;padding:24px}
.panel.no-access>span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ui-surface-2,#eef2f6);font-size:20px}
.panel.no-access h2{margin:0 0 4px;font-size:22px}
.panel.no-access p{margin:0 0 4px}
@media(max-width:620px){.panel.no-access{grid-template-columns:1fr;text-align:center;justify-items:center}}
/* UX-012: one page-title style for every screen (h2 inside page headers). */
.app-shell .content :is(.page-head,.ui-page-header,.section-title.page-title,.att-heading)>div>h2,.app-shell .content :is(.page-head,.ui-page-header,.section-title.page-title)>h2{font-size:clamp(24px,2.1vw,28.8px);line-height:1.2;margin:0 0 4px;letter-spacing:-.02em;color:var(--ink,#14263a)}
.app-shell .content .section-title.page-title{margin-bottom:16px}
.app-shell .content .ui-page-header h2 .field-help-button,.app-shell .content .ui-page-header h2 [data-help]{vertical-align:middle;margin-left:6px}
.app-shell .content :is(.page-head,.ui-page-header) h2{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0}
/* UX-013: one filled primary action per header; secondary actions are outlined, not plain text. */
.app-shell .content .ui-page-header>.actions>.btn.primary,.app-shell .content .ui-page-header>.actions>details>summary.btn.primary,.app-shell .content .ui-page-header>.actions>details.primary>summary{background:var(--navy,#0c233b);border-color:var(--navy,#0c233b);color:#fff}
.app-shell .content .ui-page-header>.actions>details>summary.btn:not(.primary),.app-shell .content .ui-page-header>.actions>.btn:not(.primary):not(.danger){border:1px solid var(--line,#dce3ea);background:var(--panel,#fff);color:#2b3644}
.app-shell .content .ui-page-header>.actions :is(.btn,summary){min-height:40px;height:40px;padding-block:0;display:inline-flex;align-items:center}
@media(max-width:720px){.app-shell .content .ui-page-header>.actions :is(.btn,summary){min-height:44px;height:44px}}
:root[data-theme="dark"] .app-shell .content .ui-page-header>.actions>details>summary.btn:not(.primary),:root[data-theme="dark"] .app-shell .content .ui-page-header>.actions>.btn:not(.primary):not(.danger){background:transparent;border-color:rgba(255,255,255,.22);color:inherit}
/* UX-010: order key facts fit any width without a half-empty grey row; stage strip wraps instead of overflowing. */
.order-key-facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;gap:8px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.order-key-facts>div{border:1px solid var(--line,#dce3ea);border-radius:10px;min-width:0}
.order-key-facts strong{overflow-wrap:anywhere}
.flow-progress{flex-wrap:wrap!important;row-gap:12px;overflow-x:visible!important}
.flow-progress .flow-step{min-width:0}
/* UX-021: the Home cash chart stays inside its card on phones. */
.cashflow-chart,.cashflow-scale,.home-section{min-width:0}
.cashflow-chart{overflow:hidden;max-width:100%}
.cashflow-empty{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* UX-007: visible company scope on single-company screens. */
.company-scope-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;margin:0 0 12px;border:1px solid var(--line,#dce3ea);border-radius:10px;background:var(--ui-surface-2,#f5f7fa)}
.company-picker-card.last-used{border-color:var(--gold,#bd8a39)}
.company-picker-name small{display:block;font-size:12px;color:var(--muted,#596a7c);font-weight:600}
/* UX-031: accessibility — calendar rows keep the grid layout; text colours meet WCAG AA (4.5:1). */
.vc-grid>.vc-row{display:contents}
#content .vc-day.is-other .vc-num{color:#5f6b78}
#content .order-whatsapp>summary{color:#0b6b37}
#content :is(.att-tl-ticks>span,.att-tl-name>small,.att-tl-track>small),#content article>small{color:#5f6b78}
#content .received{color:#1f6e42}
#content .cash-out{color:#8a5f16}
:root[data-theme="dark"] #content :is(.vc-day.is-other .vc-num,.att-tl-ticks>span,.att-tl-name>small,.att-tl-track>small,article>small){color:#aab4bf}
:root[data-theme="dark"] #content :is(.order-whatsapp>summary,.received){color:#6fd39b}
:root[data-theme="dark"] #content .cash-out{color:#e2bd76}
.order-workspace-header h2 .order-status-badge{display:inline-flex;vertical-align:middle;margin-left:8px;font-size:12px;letter-spacing:0}
.order-workspace-header h2 .order-status-badge .pill{font-size:12px}
/* UX-025: forms end with one action row; HR letter settings are folded away from issuing. */
.form-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line,#dce3ea)}
/* UX-038: an empty-table message spans the whole table width. */
#content .table-shell td.empty[colspan],#content table td[colspan].empty{display:table-cell!important;width:auto!important;grid-column:1/-1;text-align:center;padding:24px 16px}
/* UX-027: the "?" help sits on the title line on every page header. */
.app-shell .content :is(.page-head,.ui-page-header)>div:has(>h2+details.ui-help){display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
.app-shell .content :is(.page-head,.ui-page-header)>div:has(>h2+details.ui-help)>:not(h2):not(details.ui-help){flex-basis:100%}
/* UX-021 (mobile): with data the chart scrolls sideways inside its card; when empty it fits the card. */
@media(max-width:700px){
.home-cash .cashflow-visual[data-live-cashflow]{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.home-cash .cashflow-visual[data-live-cashflow]:has(.cashflow-chart.is-empty){grid-template-columns:54px minmax(0,1fr);overflow:hidden}
.home-cash .cashflow-chart.is-empty .cashflow-empty{left:8px;right:8px;width:auto}
}
/* UX-002 / UX-003: provisional value and the order's invoice action. */
.order-key-facts small{display:block;font-size:12px;color:var(--muted,#596a7c);font-weight:500}
.order-value-provisional strong{color:#8a5f16}
.order-commercial-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.order-commercial-actions small{flex-basis:100%;text-align:right;color:var(--muted,#596a7c)}
/* UX-016 / UX-017: task actions in the header; related records as links. */
.task-detail-head{display:flex;align-items:flex-start;gap:12px}
.task-detail-head>div:first-child{flex:1 1 auto;min-width:0}
.task-head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.task-head-actions .btn{min-height:40px}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-link{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line,#dce3ea);border-radius:10px;text-decoration:none;color:inherit;min-width:180px}
.related-link small{font-size:12px;color:var(--muted,#596a7c);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.related-link span{font-size:13px;color:var(--muted,#596a7c)}
@media(max-width:720px){.task-detail-head{flex-wrap:wrap}.task-head-actions{width:100%;justify-content:flex-start}}
/* UX-019: one way to enter purchase items. */
.purchase-entry-mode{display:grid;gap:6px;border:1px solid var(--line,#dce3ea);border-radius:10px;padding:10px 14px}
.purchase-entry-mode legend{font-weight:700;padding:0 4px}
.purchase-entry-mode .choice{display:flex;gap:8px;align-items:flex-start}
/* UX-029: tab strips that do not fit scroll sideways with a visible fade; the active tab is scrolled into view. */
@media(max-width:720px){
.app-shell :is(.view-tabs,.hub-tabs,.order-workspace-tabs,.customer-workspace-tabs){display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;scroll-snap-type:x proximity}
.app-shell :is(.view-tabs,.hub-tabs,.order-workspace-tabs,.customer-workspace-tabs)::-webkit-scrollbar{display:none}
.app-shell :is(.view-tabs,.hub-tabs,.order-workspace-tabs,.customer-workspace-tabs)>*{flex:0 0 auto;scroll-snap-align:start}
.app-shell :is(.view-tabs,.hub-tabs,.order-workspace-tabs,.customer-workspace-tabs)[data-overflow="more"]{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent)}
}
/* UX-008: the menu scrolls between the company switcher and the account; Settings stays pinned above the account. */
@media(min-width:800px){
.app-shell .sidebar{overflow:hidden}
.app-shell .sidebar>.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.app-shell .sidebar .nav-group-settings{position:sticky;bottom:0;z-index:1;background:var(--ui-surface,#fff);border-top:1px solid var(--ui-border,#dce3ea);padding-top:4px;margin-top:auto}
.app-shell .sidebar .nav-group-settings .nav-group-links:not([hidden]){max-height:45vh;overflow-y:auto}
.app-shell .sidebar>.account{flex:0 0 auto}
.app-shell .nav a{min-height:38px;padding-block:7px}
.app-shell .nav-section-label{margin:10px 12px 2px}
}
@media(min-width:800px){body:has(.demo-banner) .app-shell .sidebar{height:calc(100dvh - 35px)}}
/* UX-026: Approve filled, Reject outlined in red, Details and Open record as links. */
.approval-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.approval-actions>.btn{flex:0 0 auto;width:auto}
.btn.danger-outline{background:transparent;border:1px solid #b63a3f;color:#a12f35}
.btn.danger-outline:hover{background:#fdecec}
.link-button{background:none;border:0;padding:6px 4px;color:var(--blue,#315f98);font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:root[data-theme="dark"] .btn.danger-outline{color:#ff9aa0;border-color:#ff9aa0}
:root[data-theme="dark"] .link-button{color:#9cc3ff}
/* UX-036: required markers. */
.required-mark{color:#a12f35;font-weight:800}
:root[data-theme="dark"] .required-mark{color:#ff9aa0}
/* UX-036: New Order section jumps look like an outline navigation, not tabs. */
.order-section-nav{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;background:none}
.order-section-nav>button,.order-section-nav>a{border:1px solid var(--line,#dce3ea);border-radius:999px;background:transparent;padding:6px 14px;font-weight:600;min-height:36px}
.order-section-nav>button::before,.order-section-nav>a::before{content:"↓ ";color:var(--muted,#596a7c)}
/* UX-015: the Tasks list fits — related records shown, status not truncated, the last column never cut off. */
#content .table-shell:has(tr[data-record-type="tasks"]){overflow-x:auto}
#content tr[data-record-type="tasks"] td[data-col="status"] .pill{white-space:nowrap;max-width:none;overflow:visible;text-overflow:clip}
#content tr[data-record-type="tasks"] td[data-col="related"]{min-width:140px}
.task-related-cell{display:grid;gap:2px}
.task-related-cell a{font-weight:600}
#content tr[data-record-type="tasks"] td:last-child{white-space:nowrap}
#content tr[data-record-type="tasks"] td[data-col="priority"] select{width:auto;min-width:96px;max-width:120px}
#content tr[data-record-type="tasks"] td[data-col="due_date"] input[type="date"]{width:auto;max-width:150px}
#content tr[data-record-type="tasks"] td[data-col="status"] select{width:auto;max-width:150px}
/* UX-012 (Batch 4): one tab style everywhere — the underline tabs used by hubs. Applies to order, customer, supplier,
   employee-profile, Fleet, Kaka, report and Orders view tabs; KPI cards stay cards. */
#content :is(.order-workspace-tabs,.customer-workspace-tabs,.employee-profile-tabs,.fleet-tabs,.view-tabs,.report-view-tabs){display:flex;flex-wrap:wrap;gap:2px;padding:0;margin:0 0 16px;border:0;border-bottom:1px solid var(--ui-border,#dce3ea);border-radius:0;background:transparent;box-shadow:none}
#content :is(.order-workspace-tabs,.customer-workspace-tabs,.employee-profile-tabs,.fleet-tabs,.view-tabs,.report-view-tabs)>:is(button,a){display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:9px 14px;margin:0 0 -1px;border:0;border-bottom:2px solid transparent;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ui-text-muted,#5d6b7a);font-weight:650;font-size:14px;width:auto}
#content :is(.order-workspace-tabs,.customer-workspace-tabs,.employee-profile-tabs,.fleet-tabs,.view-tabs,.report-view-tabs)>:is(button,a):is(.active,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]){color:var(--ui-brand,#132b45);border-bottom-color:currentColor;background:transparent}
:root[data-theme="dark"] #content :is(.order-workspace-tabs,.customer-workspace-tabs,.employee-profile-tabs,.fleet-tabs,.view-tabs,.report-view-tabs)>:is(button,a):is(.active,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]){color:#e8eef5}
/* UX-012: buttons come in two heights — 40 px (44 px on phones); small buttons 32 px. */
.app-shell .content .btn:not(.small){min-height:40px}
.app-shell .content .btn.small{min-height:32px}
@media(max-width:720px){.app-shell .content .btn:not(.small){min-height:44px}}
/* UX-COMPANY-001 (10 Nov 2026): compact inline company dropdown replaces the full-page "Which company?" cards. */
.company-scope-bar{flex-wrap:wrap}
.company-inline-select{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600}
.company-inline-select select{min-height:36px;min-width:200px;max-width:100%;padding:6px 10px;border:1px solid var(--line,#dce3ea);border-radius:8px;background:var(--ui-surface,#fff);color:inherit;font:inherit;font-weight:500}
.company-inline-gate .muted{font-size:.9rem}
@media(max-width:600px){.company-inline-select{width:100%}.company-inline-select select{flex:1;min-width:0}}
/* Unified Calendar (10 Nov 2026): installations get their own colour; missing-date orders sit under the calendar. */
.vc-installation,.vc-dot.vc-installation{background:#efe9fb;color:#5b3fa3}
.vc-unscheduled{margin-top:14px}
/* MONEY-001 (10 Nov 2026): Money In / Money Out choice at the top of the New Money Entry form. */
.money-direction{border:0;padding:0;margin:0}
.money-direction-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.money-direction-option{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line,#dce3ea);border-radius:10px;cursor:pointer;background:var(--ui-surface,#fff)}
.money-direction-option:has(input:checked){border-color:var(--accent,#B8892E);box-shadow:0 0 0 1px var(--accent,#B8892E)}
.money-direction-option span{display:flex;flex-direction:column;gap:2px}
.money-direction-option small{color:var(--muted,#5d6d7f);font-weight:400}
@media(max-width:600px){.money-direction-options{grid-template-columns:1fr}}

/* ---- Shared loading feedback (11 Nov 2026): one spinner, one loading block, one skeleton, one busy-button rule. ---- */
.ui-spinner{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:opshq-spin .7s linear infinite;opacity:.75;vertical-align:-3px}
.ui-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:24px 16px;color:var(--ui-text-muted,#52657b);font-size:14px;font-weight:500}
.ui-loading.compact{min-height:0;padding:10px 0;justify-content:flex-start}
.ui-skeleton{display:grid;gap:10px;padding:4px 0}
.ui-skeleton-row{display:block;height:44px;border-radius:var(--ui-radius-control,10px);background:var(--ui-surface-subtle,#f8fafc);border:1px solid var(--ui-border,#dce4ed);animation:ui-skeleton-pulse 1.4s ease-in-out infinite}
.ui-skeleton-row:nth-child(odd){opacity:.8}
.ui-skeleton-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.ui-skeleton-card{display:block;height:84px;border-radius:var(--ui-radius-card,14px);background:var(--ui-surface-subtle,#f8fafc);border:1px solid var(--ui-border,#dce4ed);animation:ui-skeleton-pulse 1.4s ease-in-out infinite}
@keyframes ui-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.55}}
[data-busy-guard="1"]{cursor:progress}
.btn[data-busy-guard="1"],button[data-busy-guard="1"]{opacity:.78}
.ui-button-spinner{width:14px;height:14px;margin-right:8px;vertical-align:-2px}
.live-update-notice{position:fixed;top:calc(var(--header-height,64px) + 10px);left:50%;transform:translateX(-50%);z-index:71;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--ui-border-strong,#bdcad9);background:var(--ui-surface,#fff);color:var(--ui-text,#15283e);font:inherit;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(15,27,42,.12);cursor:pointer}
.live-update-notice:hover{background:var(--ui-surface-selected,#edf3fa)}
.live-update-notice:focus-visible{outline:2px solid var(--ui-info,#275a91);outline-offset:2px}
.live-update-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-info,#275a91)}
@media(max-width:600px){.live-update-notice{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}}
@media(prefers-reduced-motion:reduce){.ui-skeleton-row,.ui-skeleton-card{animation:none}.ui-spinner{animation-duration:2s}}

/* ---- Renewals & compliance (11 Nov 2026): Home summary cards and the Renewals workspace tabs. ---- */
a.home-kpi.home-renewal-card{text-decoration:none;color:var(--ui-text,#15283e);min-height:0;padding:14px 18px}
.home-renewal-card.is-warning strong{color:#b25e09}
.home-renewals-grid .ui-skeleton-card{height:78px}
.renewals-tabs{margin:0 0 16px}
.renewals-tab-intro{margin:0 0 12px;color:var(--ui-text-muted,#52657b)}
.renewals-workspace .renewal-row .renewal-actions .btn{white-space:nowrap}

/* ---- HR letters and order production summary (11 Nov 2026) ---- */
.hr-letter-actions{display:flex;justify-content:flex-end;gap:8px;margin:0 0 12px}
.field-note{display:block;margin-top:6px;font-weight:500;color:var(--ui-text-muted,#52657b)}
.production-summary{margin-bottom:16px}
[data-hr-body]>.panel+.panel,[data-hr-body]>form.panel+.panel,[data-hr-body]>.panel+form.panel{margin-top:16px}