/* Calm workspace theme: warm neutral surfaces, deep ink, hairline borders; the organisation's accent colour stays the accent.
   Loaded last so it settles the layered rules in style.css and design-system.css. */
:root{--ink:#1c2420;--ink-2:#4b5650;--muted:#7f8983;--line:#e5e5de;--line-2:#d8d8cf;--surface:#fff;--surface-2:#fafaf6;--chip:#efefe8;
--accent:var(--workspace-accent);--accent-ink:var(--workspace-accent-ink,var(--workspace-accent));--accent-soft:color-mix(in srgb,var(--workspace-accent) 9%,#fff);--accent-ring:color-mix(in srgb,var(--workspace-accent) 18%,transparent);
--canvas:color-mix(in srgb,var(--workspace-background,#f4f3ef) 9%,#f6f5f1);--text:var(--ink);--border:var(--line);--panel:var(--surface);--radius:16px;--radius-sm:10px;--shadow:0 1px 2px rgba(28,36,32,.04),0 1px 1px rgba(28,36,32,.02);
color:var(--ink);background:var(--canvas)}
html body{background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body a{color:var(--accent-ink)}
body ::selection{background:var(--accent-ring)}

/* Header bar: the deep navy of the ASCO logo, white text, outlined controls. */
:root{--brand-dark:#0e1040;--brand-dark-2:#1b1e55;--on-dark:#fff;--on-dark-muted:#b8bcd8;--on-dark-line:rgba(255,255,255,.22)}
body .main>.topbar{background:var(--brand-dark);color:var(--on-dark);border:0;box-shadow:none}
body .topbar .breadcrumb,body .topbar .breadcrumb span,body .topbar .app-build{color:var(--on-dark-muted)}
body .topbar .breadcrumb strong,body .topbar .header-company-name{color:var(--on-dark)!important}
body .topbar .header-company-name{font-weight:700;letter-spacing:-.01em}
body .topbar .top-right,body .topbar .secure,body .topbar .workspace-appearance{color:var(--on-dark-muted)}
body .topbar .secure svg{color:var(--on-dark-muted)}
body .topbar .top-right>button:not(.avatar){border:1px solid var(--on-dark-line);background:transparent;color:var(--on-dark);border-radius:999px;min-height:36px;min-width:36px;padding:6px 12px;box-shadow:none}
body .topbar .top-right>button:not(.avatar):hover{background:rgba(255,255,255,.08)}
body .topbar .top-right>button[data-page="Tasks & notifications"]{padding:0;width:38px;height:38px;display:grid;place-items:center;color:var(--on-dark)}
body .topbar .top-right>button[data-page="Tasks & notifications"] svg{width:18px;height:18px}
body .topbar .notification-dot{border-color:var(--brand-dark)}
body .topbar .avatar{background:rgba(255,255,255,.12);color:var(--on-dark)}
body .topbar .workspace-menu-toggle{border:1px solid var(--on-dark-line);background:transparent;color:var(--on-dark);border-radius:10px}
body .topbar button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Main menu. */
body .sidebar{color:var(--ink)}
body .sidebar .module-heading,body .sidebar .nav{color:var(--ink-2);font-weight:550;border-radius:10px}
body .sidebar .module-heading:hover,body .sidebar .nav:hover{background:var(--chip);color:var(--ink)}
body .sidebar .module-heading.module-current,body .sidebar .nav.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}
@media(min-width:801px){body .sidebar{background:color-mix(in srgb,var(--canvas) 45%,#fff);border-bottom:1px solid var(--line);box-shadow:none}}

/* Page tabs: underline, not boxes. */
body .workspace-context-tabs{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:0!important;gap:26px!important}
body .workspace-context-tabs .workspace-page-tab{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--muted);font-size:13px;font-weight:550;padding:12px 0!important;margin-bottom:-1px}
body .workspace-context-tabs .workspace-page-tab:hover{color:var(--ink)}
body .workspace-context-tabs .workspace-page-tab.active,body .workspace-context-tabs .workspace-page-tab[aria-selected=true]{background:transparent!important;border:0!important;color:var(--ink)!important;font-weight:650;box-shadow:inset 0 -2px 0 var(--accent)!important}
body .workspace-tabs-shell{margin-bottom:26px}

/* Page heading: small section label, large tight title. */
body .heading{align-items:flex-end;margin-bottom:26px;gap:20px}
body .heading .eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
body .heading .eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2)}
body h1{font-size:34px;font-weight:720;letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin:0 0 8px}
body .heading .muted{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:760px}
body h2,body h3{color:var(--ink);letter-spacing:-.015em}
body h3{font-size:16px;font-weight:650}

/* Buttons. */
body .btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:9px 15px;font-size:13px;font-weight:600;box-shadow:var(--shadow);transition:background .12s,border-color .12s,box-shadow .12s}
body .btn:hover{filter:none;background:var(--surface-2);border-color:#c9c9bf}
body .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--workspace-accent-text)}
body .btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:color-mix(in srgb,var(--accent) 88%,#000)}
body .btn:focus-visible,body .text-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
body .btn:disabled{opacity:.45}
body .text-btn{color:var(--accent-ink);font-weight:600}

/* Inputs. */
body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),body select,body textarea{border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]):focus,body select:focus,body textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
body input::placeholder,body textarea::placeholder{color:#a2aaa5}
body input[type=checkbox],body input[type=radio]{accent-color:var(--accent)}
body .modal label,body .table-tools label,body .module-filter label{color:var(--ink-2);font-weight:600}

/* Cards and panels. */
body .panel,body .department-card,body .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
body .panel-head{color:var(--ink)}
body .panel.empty,body .empty{color:var(--muted)}
body .stat-top{font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
body .stat-icon{background:var(--chip);color:var(--ink-2);border-radius:10px}
body .stat-value{font-size:30px;font-weight:720;letter-spacing:-.03em;color:var(--ink)}
body .stat-foot{font-size:12px;color:var(--muted)}

/* Tables. */
body table{color:var(--ink)}
body th{background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;border-block:0;border-bottom:1px solid var(--line)}
body td{border-color:#efefe8;font-size:13px}
body tbody tr:hover>td{background:#fbfbf8}
body td small{color:var(--muted)}
body .table-view-toggle button{border-color:var(--line-2);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;min-height:32px}
body .table-view-toggle button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Status chips. */
body .badge{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.01em;background:var(--chip);color:var(--ink-2)}
body .badge.green{background:#e7f1eb;color:#2c6a4c}
body .badge.orange{background:#f7eedf;color:#8a621d}
body .badge.red{background:#f8e5e3;color:#a1413a}
body .badge.purple{background:var(--accent-soft);color:var(--accent-ink)}

/* Notices, modals, toast. */
body .notice{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;color:var(--ink-2);font-size:13px}
body .hint{color:var(--muted)}
body .modal-backdrop{background:rgba(28,36,32,.32);backdrop-filter:blur(4px)}
body .modal{border-radius:20px;border:1px solid var(--line);box-shadow:0 24px 80px rgba(28,36,32,.18)}
body .modal header{border-bottom:1px solid var(--line)}
body .modal h2{font-size:20px;font-weight:700;letter-spacing:-.025em}
body .modal input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),body .modal select{border-radius:var(--radius-sm);color:var(--ink);font-size:13.5px}
body #toast{background:var(--ink);border-radius:12px;font-size:13px}
@media(max-width:800px){body h1{font-size:27px}body .heading{align-items:flex-start}body .workspace-context-tabs{gap:18px!important}}
/* Dashboard period bar and section labels. */
body .dashboard-period-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
body .dashboard-period-bar label,body .dashboard-period-bar small{color:var(--muted)}
body .dashboard-period-bar strong{color:var(--ink)}
body .dashboard-period-bar input,body .dashboard-period-bar select{border-color:var(--line-2);color:var(--ink)}
body .management-eyebrow{color:var(--muted);letter-spacing:.14em;font-size:11px}
/* Filter chips (status filters above tables). */
body .patrol-report-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
body .patrol-report-tabs .btn{border-radius:999px;padding:6px 14px;font-size:12.5px;min-height:0;box-shadow:none;background:var(--surface);color:var(--ink-2)}
body .patrol-report-tabs .btn.primary,body .patrol-report-tabs .btn[aria-selected=true]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,#fff);color:var(--accent-ink)}
/* Phones: filter fields in stacked labels keep their natural height. */
@media(max-width:800px){body .table-tools label>input,body .table-tools label>select,body .module-filter label>input,body .module-filter label>select{flex:none;max-width:100%}}
/* Phones: page tabs are one swipeable row, underline under the text only. */
@media(max-width:800px){body .workspace-tabs-shell .workspace-context-tabs{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;gap:20px!important;white-space:nowrap!important}body .workspace-tabs-shell .workspace-context-tabs::-webkit-scrollbar{display:none}body .workspace-tabs-shell .workspace-context-tabs .workspace-page-tab{flex:0 0 auto!important;width:auto!important;white-space:nowrap}}
/* Built-in process guides. */
body .how-it-works{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:-6px 0 22px;padding:2px 18px;box-shadow:var(--shadow)}
body .how-it-works summary{cursor:pointer;padding:12px 0;font-weight:650;color:var(--ink);list-style-position:inside}
body .how-it-works ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px;padding:0}
body .how-it-works li{display:flex;gap:10px;align-items:flex-start}
body .how-it-works .how-step{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:12.5px}
body .how-it-works strong{display:block;font-size:13.5px}body .how-it-works small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.45;margin-top:2px}
body .progress-tracker{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 14px;background:var(--surface-2)}
body .progress-tracker ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 4px;margin:0;padding:0;counter-reset:none}
body .progress-tracker li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding-right:14px;position:relative}
body .progress-tracker li:not(:last-child)::after{content:"";position:absolute;right:2px;top:50%;width:8px;height:1px;background:var(--line-2)}
body .progress-tracker li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);background:#fff;font-size:11px;font-weight:700}
body .progress-tracker li.done{color:var(--ink-2)}body .progress-tracker li.done span{background:#e7f1eb;border-color:#cfe3d6;color:#2c6a4c}
body .progress-tracker li.current{color:var(--ink);font-weight:650}body .progress-tracker li.current span{background:var(--accent);border-color:var(--accent);color:var(--workspace-accent-text)}
body .progress-tracker .next-step{margin:10px 0 0;font-size:13px;color:var(--ink-2)}body .progress-tracker.stopped .next-step strong{color:#a1413a}
body .topbar .top-right>.app-download-control{display:inline-block;line-height:22px;box-sizing:border-box;border:1px solid var(--on-dark-line);color:var(--on-dark);border-radius:999px;min-height:36px;padding:6px 12px;text-decoration:none;white-space:nowrap}body .topbar .top-right>.app-download-control:hover{background:rgba(255,255,255,.08)}
@media(max-width:600px){body .topbar .top-right>.app-download-control{padding:6px 10px}body .topbar .app-download-long{display:none}}
/* The sign-in story sits on dark navy; the general heading ink would make its headline unreadable. */
body .login-story h1{color:#fff}
/* Phone menu drawer: light like the desktop menu, so its text stays readable whatever accent or background is chosen. */
@media(max-width:800px){body .sidebar{background:var(--surface);color:var(--ink)}
body .sidebar .workspace-switch{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
body .sidebar .brand small,body .sidebar .workspace-switch span,body .sidebar .nav-section-caption,body .sidebar .profile small{color:var(--muted);opacity:1}
body .sidebar .nav,body .sidebar .module-heading,body .sidebar .workspace-module-tab,body .sidebar .workspace-module-children button{color:var(--ink-2)!important}
body .sidebar .nav.active,body .sidebar .nav.module-current,body .sidebar .module-heading.module-current,body .sidebar .workspace-module-tab.active,body .sidebar .workspace-module-children button.active{background:var(--accent-soft)!important;color:var(--accent-ink)!important}
body .sidebar .workspace-menu-close,body .sidebar .module-chevron,body .sidebar .profile,body .sidebar .profile button{color:var(--ink-2)}
body .sidebar .profile{border-color:var(--line)}body .sidebar nav{scrollbar-color:var(--line-2) transparent}}
/* Installed-app bottom bar (phones only). */
.app-tab-bar{display:none}
@media(max-width:800px){html.app-standalone .app-tab-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(28,36,32,.06)}
html.app-standalone .app-tab-bar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;border-radius:12px;color:var(--muted);font-size:11px;font-weight:600}
html.app-standalone .app-tab-bar button svg{width:22px;height:22px}
html.app-standalone .app-tab-bar button[aria-current=page]{color:var(--accent-ink);background:var(--accent-soft)}
html.app-standalone body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
html.app-standalone .pwa-install{display:none!important}