/* ====== DESIGN TOKENS (ported from the Freedom 360 visual reference, single fixed theme) ====== */
:root{
  --accent:#d8641d; --accent-dark:#b85012;
  --bg:#f4f7fa; --surface:#fff; --surface-2:#eef3f8; --text:#1c2b39; --text-muted:#5d7184; --border:#d7e2ea; --primary:#1c6e8c; --brand-blue:#2f6fed; --brand-navy:#13294b;
  --font-display:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  --radius:16px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 20px rgba(0,0,0,.07); --shadow-lg:0 16px 40px rgba(0,0,0,.16);
  --sidebar-w:236px; --topbar-h:56px;
  --tap:44px;
  /* 8px spacing system */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
}

/* ====== DARK THEME (item 21) — overrides the tokens; toggled via data-theme on <html> ====== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1720; --surface:#161f2b; --surface-2:#1e2a38; --text:#e6edf3; --text-muted:#9fb0c0; --border:#2b3a4b;
  --primary:#57a9c9; --brand-blue:#5b8def; --brand-navy:#dbe6f5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 22px rgba(0,0,0,.55); --shadow-lg:0 18px 44px rgba(0,0,0,.65);
}
/* Dark-mode fixes for the few hardcoded light surfaces */
:root[data-theme="dark"] .info-banner{background:#16283a;color:#a9c7e6;}
:root[data-theme="dark"] .activity-card.blue{background:#16283a;}
:root[data-theme="dark"] .activity-card.green{background:#16301f;}
:root[data-theme="dark"] .activity-card.amber{background:#33260f;}
:root[data-theme="dark"] .activity-card .info-row-ico{background:rgba(255,255,255,.08);}
:root[data-theme="dark"] .dropzone:hover{background:var(--surface-2);}
/* Tier chips (item 2): keep them coloured and legible on the dark surface. */
:root[data-theme="dark"] .tier-badge.A{background:#3a2c12;color:#f2c877;}
:root[data-theme="dark"] .tier-badge.B{background:#132c42;color:#8fc2ef;}
:root[data-theme="dark"] .tier-badge.C{background:#123425;color:#84d3a3;}

/* ====== LOGIN PAGE — always light (item 3) ======
   The login screen is a separate layout with no theme toggle. Redeclaring the theme tokens on the
   page's root element pins them to the light palette for its whole subtree, so a dark theme stored
   from inside the app never bleeds onto the login screen (the artwork background is light). */
.login-screen{
  color-scheme:light;
  --bg:#f4f7fa; --surface:#fff; --surface-2:#eef3f8; --text:#1c2b39; --text-muted:#5d7184; --border:#d7e2ea;
  --primary:#1c6e8c; --brand-blue:#2f6fed; --brand-navy:#13294b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 20px rgba(0,0,0,.07); --shadow-lg:0 16px 40px rgba(0,0,0,.16);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:var(--font-display);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
a{color:var(--primary);text-decoration:none;}
.mono{font-family:var(--font-mono);}

/* ====== LOGIN SCREEN — full-bleed brand background image (place the artwork at
   wwwroot/img/login-bg.png). A gradient fallback keeps it presentable if the file is absent. ====== */
.login-screen{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff 0%,#f7f8fb 55%,#f2f4f8 100%);
  background-image:url('/img/login-bg.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.login-card{position:relative;z-index:2;width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:34px 28px;backdrop-filter:saturate(1.1);}
.login-mark{width:48px;height:48px;border-radius:11px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;margin:0 auto 16px;}
.login-title{text-align:center;font-size:18px;font-weight:700;margin-bottom:2px;}
.login-sub{text-align:center;font-size:12.5px;color:var(--text-muted);margin-bottom:24px;}
.login-error{background:#fdecea;color:#a3372a;border:1px solid #f3cdc8;border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;margin-bottom:14px;}
/* Copyright + version, under the login form. */
.login-footer{margin-top:22px;padding-top:15px;border-top:1px solid var(--border);text-align:center;font-size:11px;color:var(--text-muted);line-height:1.5;}
.login-version{margin-top:3px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;}

/* ====== APP SHELL ====== */
.app-shell{display:flex;min-height:100vh;}

.sidebar{display:flex;flex-direction:column;width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-brand{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sidebar-brand .mark{width:30px;height:30px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;}
.sidebar-brand .name{font-weight:600;font-size:14.5px;}
.sidebar-brand .sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
.nav-section{padding:14px 12px 4px;}
.nav-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:6px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:1px;text-decoration:none;}
.nav-item:hover{background:var(--surface-2);}
.nav-item.active{background:var(--accent);color:#fff;}
.badge{margin-left:auto;font-size:10.5px;font-weight:600;background:var(--surface-2);color:var(--text-muted);padding:1px 7px;border-radius:20px;}
.nav-item.active .badge{background:rgba(255,255,255,.25);color:#fff;}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid var(--border);}
.sidebar-footer form{margin-top:10px;}
.user-chip{display:flex;align-items:center;gap:10px;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text);flex-shrink:0;}
.user-name{font-size:13px;font-weight:600;}
.user-role{font-size:11px;color:var(--text-muted);}

.topbar{display:flex;background:var(--surface);border-bottom:1px solid var(--border);padding:16px var(--space-2);align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:20;margin-bottom:var(--space-4);}
.topbar h1{font-size:18px;font-weight:600;margin:0;}
.topbar .sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
.topbar-actions{display:flex;gap:10px;align-items:center;}
/* Desktop shows the full page title; .t-short is swapped in at the mobile breakpoint. */
.topbar h1 .t-short{display:none;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.content{padding:var(--space-4) var(--space-2) var(--space-3);flex:1;}

/* ---- Buttons ---- */
.btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:var(--tap);}
.btn:hover{background:var(--surface-2);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-block{width:100%;justify-content:center;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
/* Amber outline for cautionary, non-destructive actions (e.g. Report a bug). Outlined rather than
   filled so it reads as secondary to Save/Upload and doesn't compete with .btn-primary. */
.btn-warning-outline{border-color:#e0a417;color:#8a6410;background:var(--surface);}
.btn-warning-outline:hover{background:#fdf6e6;}
:root[data-theme="dark"] .btn-warning-outline{color:#e8b84b;border-color:#8a6410;}
:root[data-theme="dark"] .btn-warning-outline:hover{background:#33260f;}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.card-pad{padding:var(--space-3);}
.panel-title{font-size:14px;font-weight:600;margin:0 0 2px;}
.panel-sub{font-size:12px;color:var(--text-muted);margin:0 0 14px;}

/* ---- KPI cards ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-2);margin-bottom:var(--space-3);}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.kpi-label{font-size:10.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.kpi-value{font-size:26px;font-weight:700;margin-top:5px;font-family:var(--font-mono);}
.kpi-delta{font-size:11px;margin-top:4px;font-weight:600;}
.kpi-delta.up{color:#3f7d3a;} .kpi-delta.down{color:#b5495f;} .kpi-delta.flat{color:var(--text-muted);}

/* ---- Forms ---- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:5px;}
.field{margin-bottom:15px;}
/* `input:not([type])` covers bare <input>/<InputText> elements (no explicit type) so they get the
   same rounded, padded box as the typed inputs instead of the browser's sharp default. */
input:not([type]),input[type=text],input[type=password],input[type=email],input[type=date],input[type=tel],input[type=search],input[type=number],input[type=time],select,textarea{
  width:100%;font-family:inherit;font-size:13.5px;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);min-height:var(--tap);
}
/* Item 20: standardize the dropdown chevron on every <select> so it sits at a consistent
   right-aligned position with room for the text, instead of the inconsistent native arrow. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;
}
textarea{min-height:80px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;}
.btn-sm{padding:7px 12px;font-size:12.5px;min-height:36px;}
.btn-ghost{border-color:transparent;background:transparent;}
.filter-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.filter-group select{width:auto;min-width:160px;}

/* ---- Status / sentiment badges ---- */
.status{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.status.on-time{background:#e7f3e6;color:#2e6b2a;}
.status.delayed{background:#fdecea;color:#a3372a;}
.status.pending{background:#fff4e0;color:#9a6300;}
.status.missed{background:#fdecea;color:#7a2218;}
.sentiment{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.sentiment.positive{background:#e7f3e6;color:#2e6b2a;}
.sentiment.neutral{background:var(--surface-2);color:var(--text-muted);}
.sentiment.negative{background:#fdecea;color:#a3372a;}
/* Dark-mode variants for the status/sentiment pills. Without these they kept their light backgrounds
   on the dark theme (their .tstatus/.pstate siblings already had dark variants — these were missed),
   so the pill washed out and the wording read grey/low-contrast (item 5). */
:root[data-theme="dark"] .status.on-time,
:root[data-theme="dark"] .sentiment.positive{background:#16301f;color:#84d3a3;}
:root[data-theme="dark"] .status.delayed,
:root[data-theme="dark"] .status.missed,
:root[data-theme="dark"] .sentiment.negative{background:#3a1a1a;color:#e59a90;}
:root[data-theme="dark"] .status.pending{background:#33260f;color:#e8b84b;}
:root[data-theme="dark"] .sentiment.neutral{background:var(--surface-2);color:var(--text-muted);}

/* ---- Planner priority coding (item 4, redesigned) ----
   Priority is shown as a slim colored left-accent bar + a colored pill (not a full-row wash,
   which read as muddy). Completion is a separate Status badge so the two dimensions don't blend. */
tbody tr.pr-high td:first-child{box-shadow:inset 3px 0 0 #d9534f;}
tbody tr.pr-medium td:first-child{box-shadow:inset 3px 0 0 #e08b2c;}
tbody tr.pr-low td:first-child{box-shadow:inset 3px 0 0 #d9b420;}
tbody tr.is-logged{color:var(--text-muted);}
tbody tr.is-logged .cell-name{color:var(--text);}
.pill.prio-tag-high{background:#fdecea;color:#a3372a;border-color:#f3cdc8;}
.pill.prio-tag-medium{background:#fef1e3;color:#a9611b;border-color:#f4dcc0;}
.pill.prio-tag-low{background:#fbf6da;color:#8a7317;border-color:#efe6b8;}
.pstate{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pstate.logged{background:#e7f3e6;color:#2e6b2a;}
.pstate.logged::before{content:'✓';font-weight:700;}
.pstate.pending{background:#fff4e0;color:#9a6300;}
/* Planned = scheduled/not yet done (amber, same as the old pending); On-hold = deferred (slate). */
.pstate.planned{background:#fff4e0;color:#9a6300;}
.pstate.on-hold{background:#eceff3;color:#566472;}
.pstate.on-hold::before{content:'❚❚';font-size:8px;letter-spacing:-1px;}
:root[data-theme="dark"] .pstate.logged{background:#16301f;color:#84d3a3;}
:root[data-theme="dark"] .pstate.pending,
:root[data-theme="dark"] .pstate.planned{background:#33260f;color:#e8b84b;}
:root[data-theme="dark"] .pstate.on-hold{background:#1e2a38;color:#9fb0c0;}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.text-muted{color:var(--text-muted);}
.cell-name{font-weight:600;}

/* ---- Tabs ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;}
.tab{padding:9px 4px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-right:18px;white-space:nowrap;background:none;border-left:none;border-right:none;border-top:none;}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}
/* Red "popper" badge on a tab (e.g. open escalations count). */
.tab-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;vertical-align:middle;}

/* ---- Dashboard grids ---- */
.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-2);margin-bottom:var(--space-3);}
.dash-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-3);}
canvas{max-width:100%;}

.flex-between{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.gap-8{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.divider{height:1px;background:var(--border);margin:16px 0;}
.pill{font-size:11px;padding:3px 8px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);white-space:nowrap;display:inline-block;}
.tier-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--text-muted);}
/* Each tier gets its own readable colour chip (item 2) — B and C previously fell back to the muted
   grey surface, which disappeared in dark mode. Dark-theme variants follow below. */
.tier-badge.A{background:#fff4e0;color:#9a6300;}
.tier-badge.B{background:#e6f0fb;color:#1f5c8b;}
.tier-badge.C{background:#e9f7ee;color:#256b40;}

/* ---- Empty state ---- */
.empty-state{padding:40px 16px;text-align:center;color:var(--text-muted);}
.empty-state .et{font-weight:600;color:var(--text);margin-bottom:4px;font-size:14px;}

/* ---- Timeline ---- */
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border);}
.tl-item{position:relative;margin-bottom:18px;}
.tl-item::before{content:'';position:absolute;left:-24px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:3px solid var(--primary);}
.tl-item.delayed::before,.tl-item.missed::before{border-color:#b5495f;}
.tl-date{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.tl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;margin-top:6px;}

/* ---- Project tasks ---- */
.tstatus{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap;}
.tstatus.not_started{background:var(--surface-2);color:var(--text-muted);}
.tstatus.in_progress{background:#eef0fb;color:#3f4ea0;}
.tstatus.completed{background:#e7f3e6;color:#2e6b2a;}
.tstatus.on_hold{background:#fff4e0;color:#9a6300;}
.tstatus.failed{background:#fdecea;color:#a3372a;}
/* Escalation lifecycle statuses. */
.tstatus.open{background:#fdecea;color:#a3372a;}
.tstatus.assigned{background:#eaf1fb;color:#2f5aa8;}
.tstatus.in_review{background:#f3edfb;color:#6b4ba0;}
.tstatus.resolved{background:#e7f3e6;color:#2e6b2a;}
/* Closed = admin ended the escalation (terminal, like resolved but neutral rather than "success"). */
.tstatus.closed{background:#eceff3;color:#566472;}
:root[data-theme="dark"] .tstatus.closed{background:#1e2a38;color:#9fb0c0;}
:root[data-theme="dark"] .tstatus.not_started{background:var(--surface-2);color:var(--text-muted);}
:root[data-theme="dark"] .tstatus.in_progress{background:#1c2740;color:#9fb0f0;}
:root[data-theme="dark"] .tstatus.assigned{background:#152740;color:#8fbaf0;}
:root[data-theme="dark"] .tstatus.in_review{background:#241a3a;color:#c0a6ec;}
:root[data-theme="dark"] .tstatus.on_hold{background:#33260f;color:#e8b84b;}
:root[data-theme="dark"] .tstatus.open,
:root[data-theme="dark"] .tstatus.failed{background:#3a1a1a;color:#e59a90;}
:root[data-theme="dark"] .tstatus.completed,
:root[data-theme="dark"] .tstatus.resolved{background:#16301f;color:#84d3a3;}
.esc-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:#fdecea;color:#a3372a;margin-left:4px;display:inline-block;}
/* Highlight the escalation opened from a notification (item N10). */
tbody tr.esc-highlight{animation:escPulse 2.4s ease;}
@keyframes escPulse{0%,100%{background:transparent;}15%,55%{background:rgba(216,100,29,.18);}}
/* Pulse the escalated task card when opened from an escalation (ring, so its surface bg is undisturbed). */
.ptask.esc-highlight{animation:ptaskPulse 2.4s ease;}
@keyframes ptaskPulse{0%,100%{box-shadow:var(--shadow-sm);}18%,58%{box-shadow:0 0 0 3px rgba(216,100,29,.55);}}
.task-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;background:var(--surface);}
.task-row .trow-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start;}
.task-row .trow-name{font-weight:600;font-size:13px;}
.task-row .trow-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.phase-header{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--border);margin-top:18px;}
.phase-header:first-child{margin-top:0;}
/* Collapsible phase (item 11): the header is now the expand control, so it needs to look clickable. */
.phase-toggle{cursor:pointer;gap:8px;padding:11px 10px;border-radius:var(--radius-sm);background:var(--surface);user-select:none;}
.phase-toggle:hover{background:var(--surface-2);}
.phase-toggle.open{background:var(--surface-2);}
.phase-chevron{display:inline-flex;align-items:center;color:var(--text-muted);flex-shrink:0;}
.phase-name{flex:1;text-align:left;}
.progress-bar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden;}
.progress-bar-fill{height:100%;background:var(--accent);transition:width .2s;}

/* ---- Project detail (redesigned task cards) ---- */
.proj-back{margin-bottom:14px;}
.proj-head{margin-bottom:18px;}
.proj-head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.proj-title{font-size:18px;font-weight:700;line-height:1.25;}
.proj-sub{font-size:12.5px;color:var(--text-muted);margin-top:4px;}
.proj-sub .proj-dot{margin:0 5px;opacity:.6;}
.proj-progress{margin-top:14px;height:8px;}
.proj-head-stats{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;font-weight:600;}
.phase-count{font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--text-muted);}
.ptask{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;background:var(--surface);box-shadow:var(--shadow-sm);}
.ptask-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.ptask-title{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ptask-meta{font-size:12px;color:var(--text-muted);margin-top:3px;}
/* Escalation summary shown inside a task card when the task is escalated. */
.ptask-escalation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:7px 10px;border-radius:8px;background:var(--surface-2);font-size:12.5px;color:var(--text);}
.ptask-escalation .ico-wrap{color:#d9663f;flex-shrink:0;}
/* Admin's note under the escalation summary — full width, muted, wraps under the status/type pills. */
.ptask-escalation-note{flex-basis:100%;display:flex;align-items:flex-start;gap:6px;margin-top:2px;font-size:12px;color:var(--text-muted);}
.ptask-escalation-note .ico-wrap{color:var(--text-muted);margin-top:2px;}

/* Mandatory-field asterisk on modal labels (escalate / resolve / close notes). */
.fm-req{color:#c0392b;margin-left:2px;font-weight:700;}

/* Escalation history timeline (in the history modal). */
.esc-history{display:flex;flex-direction:column;}
.esc-history-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.esc-history-row:last-child{border-bottom:none;}
.esc-history-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:5px;}
.esc-history-body{min-width:0;flex:1;}
.esc-history-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.esc-history-note{font-size:12.5px;margin-top:5px;font-style:italic;color:var(--text);}
.esc-history-meta{font-size:11.5px;color:var(--text-muted);margin-top:4px;}
.ptask-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.ptask-field{display:flex;flex-direction:column;gap:4px;margin:0;}
.ptask-field>span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
.ptask-field select{min-height:40px;}
/* Read-only assignee for engineers — reads as static text, not an editable field. */
.ptask-readonly{min-height:40px;display:flex;align-items:center;padding:0 2px;font-size:13.5px;color:var(--text);}
.ptask-history-toggle{margin-top:12px;border:none;background:none;color:var(--primary);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;padding:2px 0;}
.ptask-history{margin-top:8px;padding:10px 12px;background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border);}
.ptask-history-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;}
.ptask-history-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;}
.ptask-history-note{font-size:11px;color:var(--text-muted);margin-top:6px;font-style:italic;}
.ptask-wa{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.ptask-wa-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;text-transform:capitalize;padding:6px 11px;border-radius:20px;border:1px solid #25D366;color:#128c3f;background:#eafaf0;transition:background .12s ease,color .12s ease;}
.ptask-wa-btn:hover{background:#25D366;color:#fff;}
.ptask-wa-btn .ico-wrap{width:13px;height:13px;}

/* ---- Notifications ---- */
.notif-item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0;}
.notif-dot.read{background:var(--border);}
.notif-text{font-size:13px;}
.notif-time{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ---- OCR / dropzone ---- */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:28px 16px;text-align:center;cursor:pointer;background:var(--surface-2);}
.dropzone:hover{border-color:var(--primary);background:var(--surface);}
.dropzone .dz-title{font-weight:600;font-size:13.5px;}
.dropzone .dz-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;}
.ocr-progress{margin-top:14px;}
.progress-label{font-size:12px;color:var(--text-muted);margin-top:6px;display:flex;justify-content:space-between;}
.confidence-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;}
.confidence-tag.high{background:#e7f3e6;color:#2e6b2a;}
.confidence-tag.medium{background:#fff4e0;color:#9a6300;}
.confidence-tag.low{background:#fdecea;color:#a3372a;}
.match-suggestion{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);margin-top:6px;font-size:12.5px;flex-wrap:wrap;}

/* ---- OCR extracted-fields result (per-field Detected / Missing) ---- */
.ocr-result{margin-top:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);}
.ocr-field{padding:9px 0;border-bottom:1px solid var(--border);}
.ocr-field:last-of-type{border-bottom:none;}
.ocr-field-head{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
.ocr-field-label{font-size:13px;font-weight:600;}
.ocr-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:20px;}
.ocr-badge.detected{background:#e7f3e6;color:#2e6b2a;}
.ocr-badge.missing{background:#fdecea;color:#a3372a;}
.ocr-field-value{font-size:13px;}
.ocr-field-value.muted{color:var(--text-muted);font-family:var(--font-mono);font-size:12.5px;}

/* ====== Mobile navigation (off-canvas sidebar) — hidden on desktop, activated in the media queries below ====== */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:none;background:transparent;border-radius:9px;cursor:pointer;color:var(--text);padding:0;}
.nav-toggle:hover{background:var(--surface-2);}
.nav-toggle svg{width:22px;height:22px;}
.nav-backdrop{display:none;}

@media (max-width: 960px){
  .dash-grid,.dash-grid-3{grid-template-columns:1fr;}
}

/* ====== Brand + sidebar icons ====== */
.brand-mark{display:block;flex-shrink:0;}
.sidebar-brand{gap:11px;}
.login-mark-wrap{display:flex;justify-content:center;margin-bottom:16px;}
.nav-item{transition:background .15s ease,color .15s ease;}
.nav-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-ico svg{width:17px;height:17px;stroke:var(--text-muted);}
.nav-item:hover .nav-ico svg{stroke:var(--text);}
.nav-item.active .nav-ico svg{stroke:#fff;}

/* ====== Topbar utility cluster ====== */
.topbar-utility{display:flex;align-items:center;gap:4px;margin-left:4px;padding-left:12px;border-left:1px solid var(--border);}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:50%;cursor:pointer;color:var(--text);position:relative;transition:background .15s ease;}
.icon-btn:hover{background:var(--surface-2);}
/* display:block kills the baseline descender gap a raw inline <svg> (the bell) otherwise carries,
   which left it a couple of px lower than the theme icon that renders inside an inline-flex .ico-wrap. */
.icon-btn svg{width:20px;height:20px;display:block;}
.icon-btn .ico-wrap{width:20px;height:20px;}

/* ====== Notification bell ====== */
/* inline-flex (not the default block) so the bell wrapper is a clean flex item sitting at the same
   cross-axis centre as the bare theme-toggle button beside it in .topbar-utility. */
.notif-bell-wrap{position:relative;display:inline-flex;align-items:center;}
/* The bell glyph is top-heavy (body up top, small clapper below), so even when its box is perfectly
   centred it reads a touch high next to the sun/moon. Nudge it down 1.5px to match by eye. */
.notif-bell-wrap .icon-btn svg{transform:translateY(1.5px);}
.notif-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--surface);}
.notif-backdrop{position:fixed;inset:0;z-index:60;}
.notif-panel{position:absolute;top:48px;right:0;width:344px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:61;overflow:hidden;animation:pop .14s ease;}
.notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;}
.notif-panel-body{max-height:380px;overflow-y:auto;padding:2px 14px;}
.notif-empty{padding:26px 6px;text-align:center;color:var(--text-muted);font-size:12.5px;}
.notif-item{cursor:pointer;border-radius:var(--radius-sm);transition:background .12s ease;padding-left:6px;padding-right:6px;}
.notif-item:hover{background:var(--surface-2);}
.notif-item.is-read{opacity:.65;}
/* A borderless 12px text button read as static caption text in a dense table — people didn't see it
   was clickable. Give it a real outline, a hover state and room to breathe so it looks like a control. */
.btn-ghost-link{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface);color:var(--primary);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit;padding:4px 9px;border-radius:var(--radius-sm);transition:background .15s,border-color .15s,color .15s;}
.btn-ghost-link:hover{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-ghost-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
:root[data-theme="dark"] .btn-ghost-link:hover{color:#0f1720;}

/* ====== Profile avatar ====== */
.profile-avatar-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);border-radius:var(--radius-sm);transition:background .14s ease,box-shadow .14s ease;}
.profile-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:var(--surface-2);flex-shrink:0;border:1px solid var(--border);}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-avatar-initial{font-weight:700;font-size:13px;color:var(--text);}
.profile-avatar-meta{display:flex;flex-direction:column;line-height:1.25;}
.profile-avatar-name{font-size:13px;font-weight:600;}
.profile-avatar-role{font-size:11px;color:var(--text-muted);}
.sidebar-footer .profile-avatar-link{padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);}
.sidebar-footer .profile-avatar-link:hover{background:var(--surface-2);box-shadow:var(--shadow-sm);}
.sidebar-footer .profile-avatar-link::after{
  content:'';margin-left:auto;flex-shrink:0;width:14px;height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;opacity:.6;
}

/* ====== Toasts ====== */
.toast-stack{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
/* Toasts follow the page theme rather than inverting it. Using var(--text) as the background made
   the popup near-black on a light page and near-white on a dark one — correct contrast, but it read
   as a foreign element both times. A surface card + border + left accent stripe stays legible in
   both themes and matches the rest of the UI. */
/* align-items:flex-start, not center: a message long enough to wrap (e.g. the report-bug notice) had
   its icon centred against the whole two-line block, floating between the lines instead of sitting
   with the first word. Matching line-heights lines the glyph up with the first line at any length. */
.toast{background:var(--surface);color:var(--text);padding:11px 16px 11px 14px;border:1px solid var(--border);border-left:4px solid var(--text-muted);border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:10px;animation:toastin .2s ease;max-width:360px;}
.toast::before{font-weight:700;font-size:14px;line-height:1.45;flex-shrink:0;}
.toast-msg{line-height:1.45;}
.toast.success{border-left-color:#3f9142;}
.toast.success::before{content:'✓';color:#3f9142;}
.toast.error{border-left-color:#d9663f;}
.toast.error::before{content:'✕';color:#d9663f;}
.toast.info{border-left-color:var(--primary);}
.toast.info::before{content:'ℹ';color:var(--primary);}
/* Dark mode: --surface (#161f2b) is close to --bg, so lift the card and brighten the status colours
   which are too dim to read against it. */
:root[data-theme="dark"] .toast{background:var(--surface-2);border-color:#3a4d61;}
:root[data-theme="dark"] .toast.success{border-left-color:#5fb85a;}
:root[data-theme="dark"] .toast.success::before{color:#5fb85a;}
:root[data-theme="dark"] .toast.error{border-left-color:#e07a73;}
:root[data-theme="dark"] .toast.error::before{color:#e07a73;}
@keyframes toastin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ====== Modal / overlay ====== */
.overlay{position:fixed;inset:0;background:rgba(10,14,20,.45);display:none;align-items:flex-start;justify-content:center;z-index:100;overflow-y:auto;padding:40px 20px;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:640px;margin:auto;animation:modalin .16s ease;max-height:88vh;display:flex;flex-direction:column;}
.modal.modal-lg{max-width:920px;}
@keyframes modalin{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}
.modal-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.modal-header h2{font-size:15.5px;margin:0;font-weight:600;}
.modal-header-title{display:flex;align-items:center;gap:12px;min-width:0;}
.modal-header-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-header-ico.blue{background:#e8f0fe;color:#2563eb;}
.modal-header-ico.purple{background:#f1ebfd;color:#8b5cf6;}
.modal-header-ico.green{background:#e7f7ec;color:#16a34a;}
.modal-header-ico.amber{background:#fef3e0;color:#d97706;}
.modal-header-ico.gray{background:var(--surface-2);color:var(--text-muted);}
/* Subtle inner card that groups a modal's detail rows (matches the reference layout). */
.modal-section{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--surface);}
.modal-body{padding:18px;overflow-y:auto;flex:1;}
.modal-footer{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;flex-wrap:wrap;}
.modal-close{border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:22px;line-height:1;padding:2px 8px;border-radius:6px;}
.modal-close:hover{background:var(--surface-2);}

/* ====== Motion & interactivity (item 3) ====== */
/* Animation is toggled via JS (nav-fade.js) on navigation, not on every DOM mount —
   this way the page content itself (charts, etc.) is never destroyed/recreated just to replay it. */
.content.viewenter-play{animation:viewenter .22s ease;}
@keyframes viewenter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
.card{transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;}
.kpi-card{transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;}
.btn{transition:background .15s ease,border-color .15s ease,transform .05s ease;}
.btn:active{transform:translateY(1px);}
.clickable{cursor:pointer;}
.card.clickable:hover,.kpi-card.clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--accent);}
.whatsapp-btn{background:#25D366;border-color:#25D366;color:#fff;}
.whatsapp-btn:hover{background:#1ea952;border-color:#1ea952;}

/* ====== Shared filter toolbar + row actions (used across pages) ====== */
.filter-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.filter-toolbar input,.filter-toolbar select{width:auto;min-width:150px;min-height:38px;}
.filter-toolbar .grow{flex:1;min-width:180px;}
.spacer{flex:1;}
.icon-action{width:32px;height:32px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background .12s ease,color .12s ease;}
.icon-action:hover{background:var(--surface-2);color:var(--text);}
.icon-action svg{width:15px;height:15px;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;}
.detail-grid .full{grid-column:1/-1;}
.detail-item .dl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:2px;}
.detail-item .dv{font-size:13.5px;}

/* ====== Ranking list (replaces horizontal bar charts for engineer performance etc.) ====== */
.ranking-list{display:flex;flex-direction:column;}
.ranking-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.ranking-row:last-child{border-bottom:none;}
.ranking-avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
.ranking-body{flex:1;min-width:0;}
.ranking-name{font-size:13px;font-weight:600;margin-bottom:5px;}
.ranking-bar{height:7px;border-radius:20px;background:var(--surface-2);overflow:hidden;}
.ranking-bar-fill{height:100%;background:var(--primary);border-radius:20px;transition:width .4s ease;}
.ranking-meta{text-align:right;flex-shrink:0;min-width:64px;}
.ranking-pct{font-size:13px;font-weight:700;font-family:var(--font-mono);}
.ranking-frac{font-size:11px;color:var(--text-muted);}

/* ====== Engineer performance (completed-vs-planned bars with inline %) ====== */
.eng-perf{display:flex;flex-direction:column;}
.eng-perf-head,.eng-row{display:grid;grid-template-columns:34px minmax(84px,1.1fr) 2fr auto;align-items:center;gap:12px;}
.eng-perf-head{margin-bottom:6px;}
.eng-head-completed{grid-column:3;font-size:11px;font-weight:600;color:var(--text-muted);}
.eng-head-planned{grid-column:4;font-size:11px;font-weight:600;color:var(--text-muted);text-align:right;min-width:56px;}
.eng-row{padding:9px 0;border-bottom:1px solid var(--border);}
.eng-row:last-of-type{border-bottom:none;}
.eng-avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;}
.eng-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eng-bar{height:20px;border-radius:20px;background:var(--surface-2);overflow:hidden;}
.eng-bar-fill{height:100%;min-width:34px;background:var(--brand-blue);border-radius:20px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;transition:width .4s ease;}
.eng-bar-pct{font-size:11px;font-weight:700;color:#fff;}
.eng-frac{font-size:12px;font-weight:600;color:var(--text-muted);text-align:right;min-width:56px;font-family:var(--font-mono);}
.eng-legend{display:flex;justify-content:center;gap:20px;margin-top:14px;}
.eng-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);}
.eng-legend-dot{width:10px;height:10px;border-radius:3px;}
.eng-legend-dot.completed{background:var(--brand-blue);}
.eng-legend-dot.remaining{background:var(--surface-2);}

/* ====== Mini KPI row (Planned/Actual above the volume chart) ====== */
.vol-mini-kpis{display:flex;gap:28px;margin-bottom:14px;flex-wrap:wrap;}
.vol-mini-kpi{display:flex;align-items:center;gap:8px;}
.vol-mini-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.vol-mini-dot.planned{background:var(--brand-blue);}
.vol-mini-dot.actual{background:var(--accent);}
.vol-mini-label{font-size:12px;color:var(--text-muted);}
.vol-mini-value{font-size:20px;font-weight:700;font-family:var(--font-mono);margin-left:4px;}
.vol-delta-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:6px;}
.vol-delta-badge.down{background:#fdecea;color:#a3372a;}
.vol-delta-badge.up{background:#e7f3e6;color:#2e6b2a;}

/* ====== Visit Volume custom legend (dashed/solid line + centered dot, matches the reference) ====== */
.vol-legend{display:flex;justify-content:center;gap:30px;margin-bottom:10px;flex-wrap:wrap;}
.vol-legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted);}
.vol-legend-line{position:relative;display:inline-block;width:34px;height:10px;flex-shrink:0;}
.vol-legend-line::before{content:'';position:absolute;top:50%;left:0;right:0;border-top:2px solid currentColor;}
.vol-legend-line::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:currentColor;}
.vol-legend-line.planned{color:var(--brand-blue);}
.vol-legend-line.planned::before{border-top-style:dashed;}
.vol-legend-line.actual{color:var(--accent);}

/* ====== Donut custom legend (dashboard status / sentiment) ====== */
.donut-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:14px;}
.donut-legend-item{display:flex;align-items:center;gap:8px;min-width:0;}
.donut-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-legend-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.donut-legend-text .ll{font-size:11.5px;color:var(--text-muted);}
.donut-legend-text .lv{font-size:12.5px;font-weight:700;}

/* ====== Info banner ====== */
.info-banner{display:flex;align-items:center;gap:10px;background:#eaf2fb;color:#1c4d80;border-radius:var(--radius-sm);padding:11px 14px;font-size:12.5px;margin-top:14px;}
.info-banner .ico-wrap{color:#2563eb;}

/* ====== Overview header (customer analytics, etc.) ====== */
.overview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.overview-header-left{display:flex;align-items:center;gap:12px;}
.overview-avatar{width:44px;height:44px;border-radius:50%;background:#f1ebfd;color:#8b5cf6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;}
.overview-title{font-size:16px;font-weight:700;}
.overview-header .divider{margin:16px 0;}

/* ====== Icon-forward info rows (visit modal, customer overview, etc.) ====== */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
.info-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.info-grid .full{grid-column:1/-1;}
.info-row{display:flex;gap:10px;align-items:flex-start;}
.info-row-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-row-ico.blue{background:#e8f0fe;color:#2563eb;}
.info-row-ico.purple{background:#f1ebfd;color:#8b5cf6;}
.info-row-ico.green{background:#e7f7ec;color:#16a34a;}
.info-row-ico.amber{background:#fef3e0;color:#d97706;}
.info-row-ico.gray{background:var(--surface-2);color:var(--text-muted);}
.info-row-body{min-width:0;}

/* ====== Icon component ====== */
.ico-wrap{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;}
.ico-wrap svg{width:100%;height:100%;}

/* ====== Date range picker ====== */
.range-picker{position:relative;display:inline-block;}
.range-picker-full{display:block;width:100%;}
.range-picker-full .range-picker-btn{width:100%;justify-content:flex-start;font-weight:500;}
.range-picker-btn{gap:8px;}
.range-picker-backdrop{position:fixed;inset:0;z-index:60;}
.range-picker-popover{position:absolute;top:calc(100% + 6px);right:0;width:300px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:61;padding:16px;animation:pop .14s ease;}
.range-picker-popover .cal-grid{margin-bottom:12px;}
.range-picker-popover .cal-cell{min-height:32px;padding:2px;cursor:pointer;transition:background .1s ease;}
.range-picker-popover .cal-daynum{text-align:center;font-size:11px;margin:0;}
.range-picker-popover .cal-cell:hover{background:var(--surface-2);}
.range-picker-popover .cal-cell.in-range{background:var(--surface-2);}
.range-picker-popover .cal-cell.range-start,.range-picker-popover .cal-cell.range-end{background:var(--accent);border-radius:6px;}
.range-picker-popover .cal-cell.range-start .cal-daynum,.range-picker-popover .cal-cell.range-end .cal-daynum{color:#fff;font-weight:700;}
.range-picker-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;padding-top:10px;border-top:1px solid var(--border);}
.range-picker-presets .btn{flex:1;padding:6px 8px;font-size:11.5px;}
.range-picker-footer{display:flex;justify-content:flex-end;gap:8px;}

/* ====== List toolbar: search + primary action on one row ====== */
.list-toolbar{display:flex;gap:10px;align-items:stretch;margin-bottom:12px;flex-wrap:wrap;}
.list-toolbar .btn{white-space:nowrap;}

/* ====== Page search bar (filter tables) ====== */
.search-bar{display:flex;align-items:center;gap:9px;padding:0 12px;margin-bottom:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);}
.search-bar .ico-wrap{flex-shrink:0;}
.search-bar input{border:none;background:none;padding:10px 0;min-height:40px;box-shadow:none;}
.search-bar input:focus{outline:none;border:none;}

/* ====== Pagination + scrollable tables (item N14) ====== */
.table-scroll{max-height:620px;overflow-y:auto;}
/* Keep the column headers visible while the body scrolls. Only inside .table-scroll, so non-scrolling
   tables are unaffected. thead th already carries a solid background, so rows won't show through. */
.table-scroll thead th{position:sticky;top:0;z-index:1;}
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--text-muted);}
.pager-size{display:flex;align-items:center;gap:7px;}
.pager-size select{width:auto;min-width:74px;min-height:34px;padding:6px 30px 6px 10px;background-position:right 8px center;}
.pager-info{font-weight:600;}
.pager-nav{display:flex;align-items:center;gap:8px;}
.pager-page{font-weight:600;min-width:96px;text-align:center;}

/* ====== Modern sectioned forms (items N11 / N12) ====== */
.form-modern{display:flex;flex-direction:column;gap:20px;}
.fm-section{display:flex;flex-direction:column;}
.fm-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;}
.fm-section-title .ico-wrap{color:var(--primary);}
.fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.fm-grid .fm-full{grid-column:1/-1;}
.fm-field{display:flex;flex-direction:column;gap:6px;margin-bottom:0;}
.fm-field>label{margin-bottom:0;}
.fm-field .req{color:#c0392b;margin-left:2px;}
.fm-hint{font-size:11px;color:var(--text-muted);}
@media (max-width:640px){.fm-grid{grid-template-columns:1fr;}}

/* ====== Master Data row actions, delete & duplicate merge (items 3 / 8) ====== */
.text-right{text-align:right;}
.row-actions{display:inline-flex;gap:6px;justify-content:flex-end;}
.icon-action.danger{color:#c0392b;}
.icon-action.danger:hover{background:#fdecea;color:#a3372a;border-color:#f3cdc8;}
.dup-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.dup-head{min-width:0;}
.dup-actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ====== Searchable select (SearchSelect.razor) — items 13/14 ====== */
.ss-wrap{position:relative;display:inline-block;}
.ss-wrap-full{display:block;width:100%;}
.ss-btn{justify-content:space-between;gap:8px;min-width:200px;font-weight:500;background:var(--surface);}
.ss-wrap-full .ss-btn{width:100%;}
.ss-btn .ss-chevron{margin-left:auto;color:var(--text-muted);flex-shrink:0;}
.ss-backdrop{position:fixed;inset:0;z-index:60;}
.ss-popover{position:absolute;top:calc(100% + 6px);left:0;width:min(340px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:61;overflow:hidden;animation:pop .14s ease;}
.ss-wrap-full .ss-popover{width:100%;}
.ss-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-muted);}
.ss-search input{border:none;padding:0;min-height:auto;background:none;font-size:13.5px;color:var(--text);}
.ss-search input:focus{outline:none;border:none;}
.ss-list{max-height:260px;overflow-y:auto;padding:6px;}
.ss-option{display:block;width:100%;text-align:left;padding:9px 10px;border:none;background:none;font-family:inherit;font-size:13.5px;color:var(--text);cursor:pointer;border-radius:var(--radius-sm);}
.ss-option:hover{background:var(--surface-2);}
.ss-option.active{background:var(--surface-2);font-weight:600;}
.ss-clear{color:var(--text-muted);}
.ss-custom{display:flex;align-items:center;gap:7px;color:var(--primary);font-weight:600;border-top:1px solid var(--border);margin-top:4px;}
.ss-custom .ico-wrap{color:var(--primary);}
.ss-empty{padding:14px 10px;text-align:center;color:var(--text-muted);font-size:12.5px;}

/* ====== Calendar (timeline / planner month view) ====== */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;}
.cal-nav h3{margin:0;font-size:15px;font-weight:600;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.cal-dow{background:var(--surface-2);padding:6px 2px;text-align:center;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;}
.cal-cell{background:var(--surface);min-height:84px;padding:6px;font-size:11px;position:relative;}
.cal-cell.other-month{background:var(--bg);color:var(--text-muted);}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-daynum{font-weight:600;font-size:11px;margin-bottom:3px;}
.cal-event{background:var(--surface-2);border-left:3px solid var(--primary);border-radius:3px;padding:2px 5px;margin-bottom:2px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background .12s ease;}
.cal-event:hover{background:var(--border);}
.cal-event.delayed,.cal-event.missed{border-color:#b5495f;}
.cal-event.pending{border-color:#c98a13;}
.cal-event.on-time{border-color:#3f9142;}

/* ====== Detail modal WhatsApp row + edit forms ====== */
.wa-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.wa-menu{display:flex;gap:4px;flex-wrap:wrap;}
.wa-menu .btn{padding:6px 9px;font-size:11.5px;text-transform:capitalize;}
.modal-danger-confirm{color:#b5495f;font-size:12.5px;margin-right:auto;align-self:center;}

/* ====== Outline buttons (modal footers) ====== */
/* Use the theme surface (not hardcoded #fff) so these read correctly on the dark card too (item 5). */
.btn-outline-danger{background:var(--surface);border-color:#ef4444;color:#ef4444;}
.btn-outline-danger:hover{background:#fef2f2;}
.btn-outline-primary{background:var(--surface);border-color:var(--primary);color:var(--primary);}
.btn-outline-primary:hover{background:#eaf2fb;}
:root[data-theme="dark"] .btn-outline-danger:hover{background:#3a1a1a;}
:root[data-theme="dark"] .btn-outline-primary:hover{background:#152740;}

/* ====== Activity cards (planned vs actual, in visit detail modal) ====== */
.activity-cards{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.activity-card{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-sm);padding:12px 14px;}
.activity-card.blue{background:#eaf2fb;}
.activity-card.green{background:#eafaf0;}
.activity-card.amber{background:#fef4e6;}
.activity-card .info-row-ico{background:rgba(255,255,255,.6);}
.activity-card-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:3px;}
.activity-card-text{font-size:13.5px;}

/* ====== Log Visit: time range + file picker (item 27) ====== */
.time-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.time-range .time-input{width:auto;min-width:130px;flex:0 0 auto;}
.time-range .time-sep{color:var(--text-muted);display:inline-flex;}
.time-range .time-duration{font-size:12px;font-weight:600;color:var(--primary);background:var(--surface-2);border-radius:20px;padding:4px 11px;}
.file-picker{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;transition:border-color .12s ease,background .12s ease;margin-bottom:0;}
.file-picker:hover{border-color:var(--primary);background:var(--surface);}
.file-picker .ico-wrap{color:var(--primary);flex-shrink:0;}
.file-picker-text{display:flex;flex-direction:column;line-height:1.3;}
.file-picker-text strong{font-size:13.5px;}
.file-picker-hint{font-size:11.5px;color:var(--text-muted);font-weight:500;}
.file-picker input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

/* ====== Log Visit: time-segment + pending-item row editors ====== */
.label-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:11.5px;}
.row-editor{display:flex;flex-direction:column;gap:8px;}
.segment-row,.pending-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.segment-row .time-input{width:auto;min-width:110px;flex:0 0 auto;}
.segment-row .time-sep{color:var(--text-muted);display:inline-flex;flex:0 0 auto;}
.row-editor .row-grow{flex:1 1 200px;min-width:150px;min-height:auto;}
.pending-row .date-input{width:auto;min-width:150px;flex:0 0 auto;}
.row-remove{border:none;background:var(--surface-2);color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;width:30px;height:30px;border-radius:7px;flex:0 0 auto;transition:background .12s ease,color .12s ease;}
.row-remove:hover{background:#fde8e8;color:#d64545;}
.add-row-btn{margin-top:8px;width:fit-content;}
/* Segment list in the visit detail view */
.segment-list{display:flex;flex-direction:column;gap:5px;}
.segment-list-row{display:flex;gap:8px;align-items:baseline;font-size:13.5px;flex-wrap:wrap;}
.segment-time{font-weight:700;color:var(--primary);white-space:nowrap;font-variant-numeric:tabular-nums;}
.segment-note{min-width:0;}
.segment-target{font-size:11.5px;font-weight:600;color:var(--text-muted);background:rgba(255,255,255,.6);border-radius:20px;padding:1px 9px;white-space:nowrap;}

/* ====== Manual entry: proof photo chips ====== */
.file-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.file-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;}
.file-chip button{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;padding:2px;}

/* ====== Plan template editor (item 17, redesigned) ====== */
.tmpl-edit-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.tmpl-input{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;min-width:0;min-height:auto;}
.tmpl-toolbar{position:sticky;top:0;z-index:15;background:var(--bg);display:flex;align-items:center;gap:12px;padding:10px 0;margin-bottom:10px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.tmpl-toolbar-title{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.tmpl-toolbar-title strong{font-size:15px;}
.tmpl-toolbar-title span{font-size:11.5px;}
.tmpl-jump{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.tmpl-jump-chip{font-size:12px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;transition:background .12s ease,border-color .12s ease;}
.tmpl-jump-chip:hover{background:var(--surface-2);border-color:var(--primary);}
.tmpl-phase{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:10px;overflow:hidden;}
.tmpl-phase-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;background:var(--surface-2);flex-wrap:wrap;}
.tmpl-phase-head:hover{background:var(--border);}
.tmpl-collapse-btn{color:var(--text-muted);display:inline-flex;flex-shrink:0;}
.tmpl-phase-num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.tmpl-phase-name{flex:1;min-width:140px;font-weight:600;}
.tmpl-phase-count{font-size:11.5px;color:var(--text-muted);font-weight:600;white-space:nowrap;}
.tmpl-phase-body{padding:12px 14px 14px;}
.tmpl-task{border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;margin-bottom:8px;background:var(--surface);}
.tmpl-task:last-child{margin-bottom:0;}
.tmpl-task-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tmpl-task-ico{color:var(--primary);flex-shrink:0;}
.tmpl-subtasks{margin-top:8px;padding-left:16px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:6px;}
.tmpl-subtask-row{display:flex;align-items:center;gap:8px;}
.tmpl-sub-bullet{width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0;}

/* ========================================================================================
   RESPONSIVE LAYOUT — tablet, mobile and small screens.
   Strategy: fluid multi-column grids collapse progressively; below 900px the fixed sidebar
   becomes an off-canvas drawer reachable via the topbar hamburger; wide tables keep their
   horizontal scroll wrappers so nothing is clipped.
   ======================================================================================== */

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px){
  :root{ --sidebar-w:200px; }
  .content{ padding:var(--space-3) var(--space-2) var(--space-3); }
  .kpi-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  .dash-grid{ grid-template-columns:1fr; }
  .dash-grid-3{ grid-template-columns:1fr 1fr; }
  .info-grid.cols-3{ grid-template-columns:1fr 1fr; }
}

/* ---- Mobile shell: off-canvas sidebar below 900px ---- */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }

  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:min(84vw, 300px);
    transform:translateX(-100%); transition:transform .24s ease;
    z-index:120; box-shadow:var(--shadow-lg);
  }
  :root.nav-open .sidebar{ transform:translateX(0); }

  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(10,14,20,.5); opacity:0; pointer-events:none; transition:opacity .24s ease;
  }
  :root.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

  .main{ width:100%; min-width:0; }
  .content{ padding:var(--space-2) var(--space-2) var(--space-3); }

  /* The hamburger sits left of the title; keep the utility cluster on the right. */
  .topbar{ padding:12px var(--space-2); gap:10px; }
  .topbar-heading{ min-width:0; flex:1; }
  .topbar-heading h1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .dash-grid-3{ grid-template-columns:1fr; }
  .detail-grid,.info-grid,.info-grid.cols-3{ grid-template-columns:1fr 1fr; }
}

/* ---- Phones ---- */
@media (max-width: 640px){
  .content{ padding:14px 12px 22px; }

  /* ---- Mobile header (item 6) ----
     Reads as an app screen header rather than a shrunken desktop bar: one strong title line, no
     descriptive prose. The subtitles ("Planner, visit log, timeline and logging a visit") are
     desktop copy — under a narrow title they wrapped to two or three lines and pushed the content
     down the page, which is what made it look cluttered. */
  .topbar{ margin-bottom:var(--space-3); flex-wrap:wrap; padding:12px var(--space-2); gap:10px; }
  .topbar-heading{ flex:1; min-width:0; }              /* min-width:0 lets the title ellipsis engage */
  .topbar-heading h1{ font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.25;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar h1 .t-full{ display:none; }
  .topbar h1 .t-short{ display:inline; }
  .topbar-heading .sub{ display:none; }
  /* Page action buttons wrap to their own row; the theme/bell cluster stays beside the title. */
  .topbar-actions{ flex-wrap:wrap; gap:6px; }
  .topbar-utility{ padding-left:8px; margin-left:0; }

  /* ---- Mobile type scale ----
     Desktop sizes are tuned for a 1400px canvas; on a phone the labels read small and the numbers
     read oversized. Nudge them toward a native-app hierarchy. */
  .tab{ font-size:13px; }
  .panel-title{ font-size:14.5px; }
  .panel-sub{ font-size:12px; }
  .kpi-label{ font-size:11px; letter-spacing:.04em; }
  .cell-name{ font-size:13.5px; }
  table{ font-size:13px; }

  /* Everything multi-column becomes a single column. `!important` overrides the inline
     `grid-template-columns` set on some forms (Visits/Projects log & plan forms). */
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .dash-grid,.dash-grid-3,
  .detail-grid,.info-grid,.info-grid.cols-3,
  .fm-grid,.ptask-controls,.donut-legend,
  .form-grid{ grid-template-columns:1fr !important; }

  /* Filter toolbars: each control takes the full row so nothing is squeezed. */
  .filter-toolbar,.filter-group{ gap:8px; }
  .filter-toolbar > input,.filter-toolbar > select,.filter-toolbar .grow,
  .filter-group select,.list-toolbar .btn,
  .filter-toolbar .ss-wrap,.filter-toolbar .range-picker{ width:100%; min-width:0; flex:1 1 100%; }
  .filter-toolbar .ss-btn,.filter-toolbar .range-picker-btn{ width:100%; min-width:0; }
  .filter-toolbar .spacer{ display:none; }

  /* Modals fill the small screen. */
  .overlay{ padding:14px 10px; align-items:flex-start; }
  .modal,.modal.modal-lg{ max-width:100%; max-height:calc(100vh - 28px); }
  .modal-footer{ flex-direction:column-reverse; }
  .modal-footer > .btn,.modal-footer > a.btn{ width:100%; justify-content:center; }
  .modal-danger-confirm{ margin-right:0; text-align:center; }

  /* Project detail heads / overview headers stack cleanly. */
  .proj-head-top,.overview-header{ flex-direction:column; align-items:flex-start; }

  /* Ranking / engineer rows already grid — keep their labels from clipping. */
  .kpi-value{ font-size:22px; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px){
  .kpi-grid{ grid-template-columns:1fr; }
  .content{ padding:12px 10px 20px; }
}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

/* ====== Blazor framework ====== */
h1:focus{outline:none;}
.validation-message{color:#a3372a;font-size:12px;margin-top:4px;}

.blazor-error-boundary{
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after{content:"An error has occurred.";}

#blazor-error-ui{
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:0.75rem;top:0.5rem;}