/* WHS One operations design. Presentation only: the existing DOM, access
   classes, workflow layouts and status semantics remain owned by app.js. */
:root {
  --bg: #f4f6f9;
  --band: #edf2f8;
  --surface: #fff;
  --ink: #172c3c;
  --muted: #657789;
  --line: #e4eaf0;
  --accent: #2368ed;
  --accent-soft: #e8f0ff;
  --ring: 0 0 0 3.5px #2368ed40;
  --shadow-sm: 0 1px 2px #102c3c08;
  --shadow-md: 0 6px 24px #102c3c0a;
  --shadow-lg: 0 24px 70px #102c3c30;
  --operations-nav: #112d3c;
}
body { background: var(--bg); }
h1, h2, h3 { color: var(--ink); font-weight: 650; }
strong, b { font-weight: 600; }
.panel { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.panel-heading { gap: 16px; }
.panel-heading h2 { letter-spacing: -.025em; }
.panel-heading p, .muted-line { color: var(--muted); }
.operations-context { margin: 0; color: var(--muted); font-size: .85rem; flex: 1; }
.app-shell:not(.has-workspace) .operations-context { display: none; }
.tabbar {
  background: var(--operations-nav);
  border-color: var(--operations-nav);
  box-shadow: none;
  padding: 16px 12px;
  border-radius: 14px;
}
.tabbar .nav-brand { color: #fff; font-weight: 650; letter-spacing: -.025em; }
.tabbar .nav-head, .tabbar .nav-foot, .tabbar .nav-divider { border-color: #35515f; }
.tabbar .tab-button, .tabbar .nav-foot-btn { color: #bfd1db; background: transparent; }
.tabbar .tab-button:hover, .tabbar .nav-foot-btn:hover { color: #fff; background: #203f50; filter: none; }
.tabbar .tab-button.active { color: #fff; background: #274957; border-color: #355b6c; }
.tabbar .nav-toggle { color: #bfd1db; background: #203f50; border-color: #35515f; }
.tabbar .nav-toggle:hover { color: #fff; background: #274957; border-color: #527389; }
.tabbar :where(button):focus-visible { outline: 2px solid #92baff; outline-offset: 2px; box-shadow: none; }
input:not([type=checkbox]):not([type=radio]), select, textarea { border-color: #dce4ed; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--accent); }
.ghost-button { border-color: var(--line); }
.badge { border-radius: 6px; }
/* Success is still green; changing the action accent must not recolor paid
   records or imply that an unapproved allocation has been approved. */
.badge.good, .status-badge.status-matched, .status-badge.status-paid,
.report-good { color: #227b60; background-color: #e4f5ee; }
.badge.warn { color: #966116; background-color: #fff2d8; }
.badge.danger { color: var(--danger); background-color: var(--danger-soft); }
.invoice-stat, .report-kpi { border-color: var(--line); }
.invoice-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; background: transparent; border: 0; }
.invoice-stat { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.invoice-stat:nth-child(n) { border: 1px solid var(--line); }
.invoice-stat-label { font-size: .8rem; }
.invoice-stat-value { font-size: 1.8rem; font-weight: 650; letter-spacing: -.04em; }
.report-kpi { background: var(--surface); border-radius: 12px; }
.report-tabs button.active { background: var(--accent-soft); color: var(--accent); }
.report-table th { background: #fafbfd; color: var(--muted); }
.report-table td, .report-table th { border-color: var(--line); }
.report-trend-chart { background: var(--surface); }
.dt-tile, .service-workbench-row, .invoice-row { border-color: var(--line); }
.service-status-group { padding: 0; border-radius: 10px; overflow: visible; }
.service-status-group > summary { background: #fafbfd; padding: 12px 16px; }
.service-workbench-row { border-radius: 0; padding: 14px 16px; box-shadow: none; border-width: 0 0 1px; background: var(--surface); }
.service-workbench-row:last-child { border-bottom: 0; }
.service-info-pill { border-radius: 6px; }
.services-workbench-panel > .panel-heading { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.services-workbench-panel .workbench-filterbar { background: #fafbfd; }
.services-workbench-panel #newServiceButton { background: var(--accent); color: #fff; border-color: var(--accent); }
dialog { border-color: var(--line); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: #102c3e66; backdrop-filter: blur(3px); }
.app-dialog::backdrop { background: #102c3e66; backdrop-filter: blur(3px); }
.dialog-card { padding: 24px; gap: 20px; }
.dialog-actions { border-top: 1px solid var(--line); padding-top: 18px; }
.login-hero { background: var(--operations-nav); color: #fff; }
.login-hero h1 { color: #fff; }
.login-hero p { color: #bfd1db; }
@media (min-width: 781px) {
  .app-shell { padding: 20px 28px 32px; }
  .workspace { gap: 24px; }
  .app-shell.has-workspace .topbar {
    position: relative;
    top: auto; left: auto; right: auto;
    align-items: center;
    min-height: 64px;
    margin: -20px -28px 24px;
    padding: 12px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    pointer-events: auto;
  }
  .app-shell.has-workspace .brand-block {
    display: flex; flex-direction: row; align-items: center;
    gap: 20px; width: auto; text-align: left;
  }
  .app-shell.has-workspace .brand-logo { width: 142px; height: 38px; object-fit: contain; }
  .app-shell.has-workspace .operations-context { padding-left: 24px; border-left: 1px solid var(--line); }
  .app-shell.nav-collapsed .brand-logo { content: normal; width: 142px; height: 38px; }
  .app-shell.has-workspace .tabbar { margin-top: 0; top: 20px; max-height: calc(100dvh - 40px); }
  .tabbar { max-width: 280px; }
  .tabbar .tab-label { white-space: normal; line-height: 1.35; }
  .tabbar .tab-button { padding: 11px 12px; min-height: 44px; }
  .app-shell.nav-collapsed .tabbar { max-width: none; padding: 8px; }
  .app-shell.nav-collapsed .tabbar .tab-button { padding: 8px; }
  .app-dialog.service-dialog {
    margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
    width: min(920px, calc(100vw - 80px));
    border-radius: 16px 0 0 16px;
  }
  .service-dialog .service-dialog-card { max-height: 100dvh; }
}
@media (max-width: 780px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
  .app-shell.has-workspace .topbar { display: flex; align-items: center; flex-wrap: wrap; padding: 12px; gap: 12px; }
  .app-shell.has-workspace .brand-block { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .app-shell.has-workspace .brand-logo { width: 110px; height: 32px; margin-top: 0; object-fit: contain; object-position: left; }
  .app-shell.has-workspace .nav-hamburger { align-self: center; min-height: 44px; height: 44px; width: 44px; }
  .app-shell.has-workspace .user-name-pill { font-size: .7rem; }
  .tabbar { border-radius: 0; padding: 16px 12px; }
  .tabbar .tab-button.active { background: #274957; color: #fff; }
  .tabbar .nav-head { border-color: #35515f; }
  .tabbar .tab-label { white-space: normal; line-height: 1.35; }
  .panel-heading h2 { font-size: 1.15rem; }
  .operations-context { display: none; }
  .invoice-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .invoice-stat { padding: 14px; }
  .invoice-stat-value { font-size: 1.5rem; }
  .report-tabs { flex-wrap: wrap; overflow: visible; border-radius: 10px; mask-image: none; -webkit-mask-image: none; }
  .report-trend-svg { height: auto; aspect-ratio: 3 / 1; overflow: visible; }
  .report-trend-axis { font-size: 18px; }
  .dialog-card { padding: 16px; gap: 14px; }
  .service-workbench-row { padding: 12px; border-radius: 8px; }
  .service-workbench-row .badge-stack { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .service-workbench-row .payment-type-chip { max-width: 130px; }
  dialog { max-width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  dialog::backdrop { backdrop-filter: none; }
}