/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  color-scheme: light;
  --brand-maroon:#A80E4C;--brand-maroon-hover:#8a0b3e;--brand-maroon-light:#f4e7ed;--green:#239969;--green-light:#e0fbed;--green-bg:#F0F9F7;
  --yellow-bg:#fef2ca;--yellow-text:#a15e00;--gray-bg:#f1f5f9;--gray-text-status:#808080;
  --text-primary:#1C1C1C;--text-dark:#000;--text-secondary:#696969;--text-gray:#757575;--text-light-gray:#8d8d8d;--text-medium:#303030;--text-muted:#969696;--text-sidebar:#373a3f;
  --bg-page:#F8F8FB;--bg-card:#FFFFFF;--border-color:#E6E6E6;--border-sidebar:#EEEEF3;--border-input:#D4CEDA;
  --radius-card:7px;--radius-pill:100px;
  --font-family:'Poppins',sans-serif;--mono:'JetBrains Mono','SF Mono',monospace;
  --sidebar-width:240px;--worklist-width:min(400px, 30vw);
  --blue:#2563eb;--blue-bg:#eff6ff;--blue-border:#bfdbfe;
  --red:#dc2626;--red-bg:#fef2f2;--red-border:#fecaca;
  --accent:#d97706;--accent-bg:#fffbeb;--accent-border:#fde68a;--accent-dark:#92400e;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 2px 6px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.06);
}
:root {
  --green-done: #00ba00;
  --green-done-dark: #009900;
  --green-done-bg: #f0fff5;
}
[data-theme="dark"] { --green-done-bg: rgba(0,186,0,0.08); }
[data-theme="dark"]{color-scheme: dark; --bg-page:#111318;--bg-card:#1a1d24;--border-color:#2e323b;--border-sidebar:#272b34;--border-input:#3a3f4a;--text-primary:#e4e7ec;--text-dark:#e4e7ec;--text-secondary:#9ca3b0;--text-gray:#9ca3b0;--text-light-gray:#6b7280;--text-medium:#d1d5db;--text-muted:#6b7280;--text-sidebar:#d1d5db;--brand-maroon-light:rgba(168,14,76,0.15);--green-light:rgba(9,130,67,0.15);--yellow-bg:rgba(245,158,11,0.1);--yellow-text:#fbbf24;--gray-bg:rgba(255,255,255,0.06);--gray-text-status:#9ca3b0;--blue-bg:rgba(96,165,250,0.1);--blue-border:rgba(96,165,250,0.2);--red-bg:rgba(248,113,113,0.1);--red-border:rgba(248,113,113,0.2);--accent-bg:rgba(245,158,11,0.1);--accent-border:rgba(245,158,11,0.25);--accent-dark:#fbbf24;--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 2px 8px rgba(0,0,0,0.35);}
html{font-size:14px;-webkit-font-smoothing:antialiased;caret-color:transparent;}
body{font-family:var(--font-family);background:var(--bg-page);color:var(--text-primary);line-height:1.55;height:100vh;height:100dvh;overflow:hidden;cursor:default;caret-color:transparent;}
ul,ol{list-style:none;}a{text-decoration:none;color:inherit;}img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none;}
button:focus-visible{outline:2px solid var(--brand-maroon);outline-offset:2px;}
/* Restore caret and pointer behaviour only in actual editable fields */
input,textarea{caret-color:auto;cursor:text;}

/* ── App Shell (3-col) ── */
.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;height:100vh;height:100dvh;overflow:hidden;transition:grid-template-columns 0.3s ease; background: var(--bg-page);}
.app-shell.sidebar-collapsed{grid-template-columns:0px 1fr;}
.app-shell.sidebar-collapsed .sidebar{width:0;padding:0;overflow:hidden;border:none;opacity:0;pointer-events:none;}
.app-shell.sidebar-collapsed #homeView{align-items:center;}

/* ── Sidebar ── */
.sidebar{background:var(--bg-card);border-right:1px solid var(--border-sidebar);display:flex;flex-direction:column;padding:16px 14px;overflow-y:auto;transition:width 0.3s ease,padding 0.3s ease,opacity 0.2s ease;}
.sidebar-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.sidebar-logo img{width:36px;height:38px;object-fit:cover;}
.sidebar-logo-text{font-size:18px;font-weight:600;color:var(--text-sidebar);white-space:nowrap;}
.sidebar-collapse-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;font-size:14px;margin-left:auto;}
.sidebar-collapse-btn:hover{background:var(--brand-maroon-light);color:var(--brand-maroon);}
.sidebar-expand-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:none;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.19, 1, 0.22, 1);flex-shrink:0;box-shadow: var(--shadow-sm); padding: 4px; transform-origin: center;}
.sidebar-expand-btn:hover{transform: scale(1.08); background: var(--bg-page); border-color: var(--brand-maroon);}
.sidebar-expand-btn svg { width: 100%; height: 100%; transition: transform 0.3s; }
.sidebar-expand-btn:active { transform: scale(0.95); transition: transform 0.1s; }
.app-shell.sidebar-collapsed .sidebar-expand-btn{display:flex;}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;}
.sidebar-nav-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-card);font-size:14px;font-weight:500;color:var(--text-primary);transition:background 0.2s,color 0.2s;}
.sidebar-nav-item:hover{background:var(--brand-maroon-light);}
.sidebar-nav-item.active{background:var(--brand-maroon);color:#fff;}
.sidebar-nav-item .icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.sidebar-bottom{margin-top:auto;padding-top:16px;border-top:1px solid var(--border-sidebar);display:flex;flex-direction:column;gap:8px;}
.theme-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-card);font-size:13px;font-weight:500;color:var(--text-secondary);transition:background 0.15s;}
.theme-toggle:hover{background:var(--brand-maroon-light);}

/* ── Bottom Nav — base rule moved to mobile road section below ── */

/* ── Jobs View Container ── */
#jobsView { 
  display: flex; 
  flex: 1; 
  height: 100%; 
  overflow: hidden; 
}

/* ── Work Order List ── */
.worklist-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-card) 0 0 var(--radius-card);display:flex;flex-direction:column;overflow-y:auto; width: var(--worklist-width); flex-shrink: 0; border-right: none;}
.worklist-header{padding:28px 24px;border-bottom:1px solid var(--border-color);background:linear-gradient(to bottom, var(--bg-card), var(--bg-page));}
.worklist-title-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.worklist-title{font-size:18px;font-weight:700;color:var(--text-dark);letter-spacing:-0.2px;margin-left:0;}
.app-shell.sidebar-collapsed .worklist-title-row{gap:8px;}
#themeHostWorklist{display:none;}
.worklist-badge{margin-left:auto; display:inline-flex;align-items:center;gap:4px;background:var(--brand-maroon-light);color:var(--brand-maroon);font-size:13px;font-weight:500;padding:2px 12px;border-radius:var(--radius-pill);}
.worklist-refresh-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);transition:all 0.15s;flex-shrink:0;}
.worklist-refresh-btn:hover{background:var(--brand-maroon-light);color:var(--brand-maroon);border-color:var(--brand-maroon);}
.worklist-refresh-btn:disabled{opacity:0.6;cursor:wait;}
.worklist-filter input{width:100%;padding:8px 12px;border:1px solid var(--border-input);border-radius:var(--radius-card);font-family:var(--font-family);font-size:13px;color:var(--text-primary);background:var(--bg-card);outline:none;transition:border-color 0.2s;}
.worklist-filter input::placeholder{color:var(--text-muted);}
.worklist-filter input:focus{border-color:var(--brand-maroon);}
.wo-cards-container{flex:1;overflow-y:auto;}
.wo-card{padding:14px 16px;border-top:1px solid var(--border-color);cursor:pointer;transition:background 0.15s;border-left:4px solid transparent;}
.wo-card:hover{background:rgba(0,0,0,0.02);}
.wo-card:focus-visible{outline:2px solid var(--brand-maroon);outline-offset:-2px;}
[data-theme="dark"] .wo-card:hover{background:rgba(255,255,255,0.03);}
.wo-card.active{background:var(--brand-maroon-light);border-left-color:var(--brand-maroon);}
.wo-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.wo-id{font-size:12px;color:var(--text-secondary);}
.wo-urgent{font-size:11px;font-weight:600;color:var(--brand-maroon);}
.wo-card-title{font-size:15px;font-weight:500;color:var(--text-dark);margin-bottom:4px;line-height:24px;}
.wo-card-subtitle{font-size:12px;color:var(--text-secondary);line-height:24px;margin-bottom:6px;}
.wo-card-footer{display:flex;align-items:center;justify-content:space-between;}
.wo-status-pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 10px;border-radius:var(--radius-pill);line-height:16px;}
.wo-status-pill.s-red{background:var(--brand-maroon);color:#fff;}
.wo-status-pill.s-yellow{background:var(--yellow-bg);color:var(--yellow-text);}
.wo-status-pill.s-gray{background:var(--gray-bg);color:var(--gray-text-status);}
.wo-status-pill.s-green{background:var(--green-light);color:#098243;}
.wo-card-time{font-size:11px;color:var(--text-light-gray);text-align:right;}
.wo-loading-msg{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:13px;}

/* ── Main Content ── */
.main-content{display:flex;flex-direction:column;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-color);border-left:none;border-radius:0 var(--radius-card) var(--radius-card) 0; flex: 1;}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;border-bottom:1px solid var(--border-color);flex-shrink:0;}
.top-bar-left{font-size:16px;font-weight:600;color:var(--text-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border-color);border-radius:var(--radius-card);font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--bg-card);transition:all 0.15s;white-space:nowrap;}
.btn-outline:hover{background:rgba(0,0,0,0.02);color:var(--text-primary);border-color:var(--text-light-gray);}
.btn-customer{color:var(--brand-maroon);border-color:var(--brand-maroon);background:var(--brand-maroon-light);}
.btn-customer:hover{background:var(--brand-maroon);color:#fff;border-color:var(--brand-maroon);}
.btn-customer:disabled{opacity:0.45;color:var(--brand-maroon);border-color:var(--brand-maroon);}
#btnCustomer{visibility:hidden;display:inline-flex;align-items:center;justify-content:center;min-width:140px;flex-shrink:0;}
#btnCustomer.is-visible{visibility:visible;}
.detail-content{padding:0 24px 32px;flex:1;width:100%;max-width:1000px;margin:0 auto;}

/* ── Detail Header ── */
.detail-header{padding:24px 0 16px;}
.live-work-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.live-work-badge{display:inline-flex;align-items:center;padding:2px 12px;background:var(--brand-maroon);color:#fff;font-size:12px;font-weight:500;border-radius:var(--radius-pill);line-height:18px;}
.live-work-id{font-size:14px;color:var(--text-secondary);}
.detail-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.detail-title-row > div{flex:1;min-width:0;}
.detail-title{font-size:22px;font-weight:600;color:var(--text-dark);line-height:28px;margin-bottom:0px;}
.detail-subtitle{font-size:13px;color:var(--text-secondary);margin-bottom:0;text-align:center;}

/* ── Tab Bar (from original app) ── */
.tab-bar{display:flex;gap:4px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-card);padding:4px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.tab-btn{flex:1;padding:11px 20px;border:none;border-radius:6px;font-family:var(--font-family);font-size:14px;font-weight:600;color:var(--text-secondary);background:transparent;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.tab-btn:hover{color:var(--text-primary);background:var(--brand-maroon-light);}
.tab-btn.active{background:var(--brand-maroon);color:#fff;box-shadow:var(--shadow-sm);}
.tab-btn .tab-icon{font-size:16px;line-height:1;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ── Detail Rows (Sync with FieldOpsMockup) ── */
.d-row{display:grid;grid-template-columns:140px 1fr;padding:10px 0;border-bottom:1px solid var(--border-color);font-size:13.5px;align-items:baseline;min-height:38px;gap:12px;}
.d-row:last-child{border-bottom:none;}
.d-row-label{color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-row-value{color:var(--text-primary);font-weight:600;word-break:break-word;text-align:left;}
.d-row-value.mono{font-family:var(--mono);font-size:12.5px;}
.d-row-value.issue-val{color:var(--brand-maroon);}

/* Priority Badge Styles */
.pri-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);text-transform:uppercase;}
.pri-p1{background:rgba(220,38,38,0.1);color:#dc2626;}
.pri-p2{background:rgba(217,119,6,0.1);color:#d97706;}
.pri-p3{background:rgba(37,99,235,0.1);color:#2563eb;}
.pri-p4{background:rgba(5,150,105,0.1);color:#059669;}

/* Helper for Date/Duration */
.d-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(0,0,0,0.04);border-radius:4px;font-size:12px;font-weight:600;}
[data-theme="dark"] .d-badge{background:rgba(255,255,255,0.06);}

/* ── Section Cards — collapsible ── */
.section-card{border:1px solid var(--border-color);border-radius:var(--radius-card);padding:14px 20px 16px;margin-bottom:16px;background:var(--bg-card);position:relative;}
.section-card.sc-collapsed{padding-bottom:14px;}
.section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.section-card.sc-collapsed .section-header{margin-bottom:0;}
.section-title{font-size:11.5px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:6px;flex:1;}
/* Chevron indicator — rotates on open/close */
.sc-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;color:var(--brand-maroon);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);width:18px;height:18px;}
.section-card.sc-collapsed .sc-chevron{transform:rotate(-90deg);}
/* Section body — animates height */
.section-body{overflow:hidden;transition:max-height 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease;max-height:2000px;opacity:1;}
.section-card.sc-collapsed .section-body{max-height:0;opacity:0;}
/* Brief footer — speaker + read btn always visible even when collapsed */
.sc-brief-footer{display:flex;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--border-color);margin-top:2px;}
.section-card.sc-collapsed .sc-brief-footer{padding-top:8px;margin-top:8px;border-top:1px solid var(--border-color);}
/* Info cards row collapsible */
.info-card{flex:1;border:1px solid var(--border-color);border-radius:var(--radius-card);padding:14px 20px;background:var(--bg-card);}
.info-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.info-card.ic-collapsed .info-card-header{margin-bottom:0;}
.info-card-title{font-size:11.5px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:6px;flex:1;}
.ic-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;color:var(--brand-maroon);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);width:16px;height:16px;}
.info-card.ic-collapsed .ic-chevron{transform:rotate(-90deg);}
.ic-body{overflow:hidden;transition:max-height 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.22s ease;max-height:1000px;opacity:1;}
.info-card.ic-collapsed .ic-body{max-height:0;opacity:0;}

/* ── Info Cards Row ── */
.info-cards-row{display:flex;gap:16px;margin-bottom:20px;}
@media (max-width:768px){.info-cards-row{flex-direction:column;gap:12px;}}

/* ── Panel header with buttons ── */
.panel-header{padding:16px 22px;border:1px solid var(--border-color);border-radius:var(--radius-card);margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg-card);}
.panel-title{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;}
.panel-title .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot-amber{background:var(--accent);}
.dot-blue{background:var(--blue);}
.dot-green{background:var(--green);}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border:none;border-radius:var(--radius-card);font-family:var(--font-family);font-size:13.5px;font-weight:600;cursor:pointer;transition:all 0.18s;white-space:nowrap;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}
.btn-primary{background:var(--brand-maroon);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--brand-maroon-hover);box-shadow:var(--shadow-md);}
.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color);}
.btn-secondary:hover:not(:disabled){background:rgba(0,0,0,0.02);}

/* ── Job Brief ── */
.job-brief-text{font-size:14px;line-height:22px;color:var(--text-dark);margin-bottom:16px;}
.job-brief-list{list-style:disc;padding-left:24px;font-size:14px;line-height:28px;color:var(--text-dark);}
.job-brief-list li{margin-bottom:0;}

/* ── NBA List (FieldBrief.ai design) ── */
.nba-list{display:flex;flex-direction:column;gap:8px;}
.nba-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:8px 10px;margin:0 -10px;border-radius:8px;transition:background 0.15s;}
.nba-item:hover{background:rgba(0,0,0,0.025);}
[data-theme="dark"] .nba-item:hover{background:rgba(255,255,255,0.04);}
.nba-circle{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid var(--text-secondary);background:var(--bg-card);margin-top:2px;position:relative;display:flex;align-items:center;justify-content:center;transition:all 0.2s;cursor:pointer;}
.nba-circle.checked{background:var(--green);border-color:var(--green);}
.nba-circle.checked::after{content:'';display:block;width:10px;height:10px;background:transparent;border-radius:0;}
.nba-circle.checked svg.check-icon{display:block;}
.nba-circle svg.check-icon{display:none;position:absolute;width:12px;height:12px;}
[data-theme="dark"] .nba-circle{background:rgba(255,255,255,0.06);border-color:var(--border-color);}
.nba-action{font-size:14px;font-weight:500;color:var(--text-dark);transition:all 0.25s;flex:1;line-height:22px;}
.nba-item.checked .nba-action{text-decoration:line-through;color:var(--text-secondary);opacity:0.6;}
.nba-item.checked .nba-circle{background:var(--green);border-color:var(--green);}
.nba-toolbar{display:flex;gap:4px;margin-top:4px;}
.nba-toggle-btn,.nba-notes-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-family);font-size:11.5px;font-weight:500;cursor:pointer;transition:all 0.15s;}
.nba-toggle-btn:hover,.nba-notes-btn:hover{background:rgba(0,0,0,0.03);color:var(--text-primary);}
.nba-toggle-btn .toggle-arrow{font-size:9px;transition:transform 0.2s;}
.nba-toggle-btn.expanded .toggle-arrow{transform:rotate(90deg);}
.nba-notes-btn.has-note{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent-dark);}
.nba-detail{font-size:12.5px;color:var(--text-secondary);padding:0 12px;background:rgba(0,0,0,0.02);border:1px solid transparent;border-radius:8px;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height 0.35s ease,opacity 0.25s ease,margin 0.3s ease,padding 0.3s ease,border-color 0.25s;}
.nba-detail.expanded{max-height:300px;opacity:1;margin-top:4px;padding:8px 12px;border-color:var(--border-color);}
.nba-detail span{display:block;margin-bottom:4px;}.nba-detail span:last-child{margin-bottom:0;}
.nba-notes-editor{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height 0.3s ease,opacity 0.25s ease,margin 0.25s ease;}
.nba-notes-editor.open{max-height:200px;opacity:1;margin-top:6px;}
.nba-notes-inner{display:flex;gap:8px;align-items:flex-start;}
.nba-notes-textarea{flex:1;padding:8px 10px;border:1px solid var(--border-color);border-radius:7px;font-family:var(--font-family);font-size:13px;color:var(--text-primary);background:var(--bg-card);resize:none;min-height:56px;max-height:100px;line-height:1.45;transition:border-color 0.15s;}
.nba-notes-textarea:focus{outline:none;border-color:var(--brand-maroon);box-shadow:0 0 0 2px rgba(168,14,76,0.1);}
[data-theme="dark"] .nba-notes-textarea{background:rgba(255,255,255,0.06);border-color:var(--border-color);color:var(--text-primary);}
.nba-notes-save{padding:8px 14px;border:none;border-radius:7px;background:var(--brand-maroon);color:#fff;font-family:var(--font-family);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.15s;}
.nba-notes-save:hover{background:var(--brand-maroon-hover);}
.nba-saved-note{margin-top:4px;padding:6px 10px;background:var(--brand-maroon-light);border:1px solid rgba(168,14,76,0.2);border-radius:6px;font-size:12.5px;color:var(--brand-maroon);line-height:1.45;display:none;}
.nba-saved-note.visible{display:block;}
.nba-progress-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.nba-progress-track{flex:1;height:6px;background:var(--border-color);border-radius:3px;overflow:hidden;}
.nba-progress-fill{height:100%;background:var(--green);border-radius:3px;width:0%;transition:width 0.4s ease;}
.nba-progress-label{font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap;min-width:42px;text-align:right;font-family:var(--mono);}

/* ── Carry List (3-col) ── */
.carry-list-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px;font-size:14px;line-height:22px;}
.carry-col-title{font-weight:600;margin-bottom:8px;font-size:14px;color:var(--text-dark);}
.carry-col ul{list-style:disc;padding-left:22px;line-height:30px;color:var(--text-dark);}
.carry-col .optional-label{font-size:14px;color:var(--text-dark);margin-top:8px;margin-bottom:4px;line-height:30px;}
.carry-col .none-listed{font-style:italic;color:var(--text-muted);line-height:30px;margin-bottom:4px;}
.carry-list-grid .carry-col:not(:last-child){border-right:1px solid var(--border-color);padding-right:24px;}

/* ── Outcome / End Pack ── */
.outcome-badge{display:inline-block;padding:3px 10px;border-radius:5px;font-size:12.5px;font-weight:600;}
.outcome-resolved{background:var(--green-light);color:var(--green);border:1px solid rgba(9,130,67,0.3);}
.outcome-temp{background:var(--accent-bg);color:var(--accent-dark);border:1px solid var(--accent-border);}
.outcome-unresolved{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.outcome-noaccess,.outcome-unknown{background:rgba(0,0,0,0.04);color:var(--text-secondary);border:1px solid var(--border-color);}
.repeat-callout{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--radius-card);padding:14px 18px;margin-top:16px;}
.repeat-callout-title{font-size:13px;font-weight:700;color:var(--accent-dark);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.repeat-callout-body{font-size:13.5px;color:var(--accent-dark);}

/* ── Closure Textarea ── */
.closure-textarea{width:100%;min-height:120px;padding:14px 16px;border:1px solid var(--border-color);border-radius:var(--radius-card);font-family:var(--font-family);font-size:14px;color:var(--text-primary);background:var(--bg-card);resize:none;overflow-y:hidden;line-height:1.55;transition:border-color 0.15s;}
.closure-textarea::placeholder{color:var(--text-muted);}
.closure-textarea:focus{outline:none;border-color:var(--brand-maroon);box-shadow:0 0 0 3px rgba(168,14,76,0.1);}
[data-theme="dark"] .closure-textarea{background:rgba(255,255,255,0.06);color:var(--text-primary);border-color:var(--border-color);}

/* ── Voice Buttons (TTS + STT) ── */
.btn-icon.voice-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border-color);border-radius:var(--radius-card);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-family);transition:all 0.2s;white-space:nowrap;}
.btn-icon.voice-btn:hover:not(:disabled){border-color:var(--brand-maroon);background:var(--brand-maroon-light);}
.btn-icon.voice-btn:disabled{opacity:0.4;cursor:not-allowed;}
.btn-icon.voice-btn.active{border-color:var(--brand-maroon);background:var(--brand-maroon);color:#fff;}
.btn-icon.voice-btn.active .voice-icon{filter:brightness(0) invert(1);}
.voice-icon{width:20px;height:20px;display:block;flex-shrink:0;transition:filter 0.15s;}
[data-theme="dark"] .voice-icon{filter:invert(1);}
[data-theme="dark"] .btn-icon.voice-btn.active .voice-icon{filter:brightness(0) invert(1);}
.voice-label{line-height:1;}

/* STT recording pulse */
.btn-icon.voice-btn.recording{border-color:#d93025;background:rgba(217,48,37,0.1);animation:stt-pulse 1.5s ease-in-out infinite;}
.btn-icon.voice-btn.recording .voice-icon{filter:none;}
[data-theme="dark"] .btn-icon.voice-btn.recording{background:rgba(217,48,37,0.2);}
[data-theme="dark"] .btn-icon.voice-btn.recording .voice-icon{filter:invert(1);}
@keyframes stt-pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,48,37,0.3);}50%{box-shadow:0 0 0 8px rgba(217,48,37,0);}}

/* STT controls row */
.stt-controls{display:flex;align-items:center;gap:10px;margin-top:8px;}
.stt-status{font-size:12px;color:var(--text-secondary);font-style:italic;min-height:18px;transition:color 0.2s;}
.stt-status.listening{color:#d93025;font-weight:600;font-style:normal;}
.stt-status.error{color:#d93025;}
.stt-live-indicator{display:none;align-items:center;gap:6px;border:1px solid var(--border-color);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--bg-card);min-height:26px;}
.stt-live-indicator.listening{display:inline-flex;color:#d93025;border-color:rgba(217,48,37,0.45);background:rgba(217,48,37,0.08);}
.stt-live-indicator.done{display:inline-flex;color:var(--brand-maroon);border-color:var(--brand-maroon);background:var(--brand-maroon-light);}
.stt-live-indicator.error{display:inline-flex;color:#d93025;border-color:rgba(217,48,37,0.3);background:rgba(217,48,37,0.06);}
.stt-spinner{display:flex;align-items:center;gap:2px;height:14px;opacity:0;}
.stt-spinner span{display:block;width:3px;border-radius:2px;background:#d93025;animation:none;}
.stt-live-indicator.listening .stt-spinner{opacity:1;}
.stt-live-indicator.listening .stt-spinner span{animation:stt-wave 1s ease-in-out infinite;}
.stt-live-indicator.listening .stt-spinner span:nth-child(1){height:4px;animation-delay:0s;}
.stt-live-indicator.listening .stt-spinner span:nth-child(2){height:8px;animation-delay:0.15s;}
.stt-live-indicator.listening .stt-spinner span:nth-child(3){height:12px;animation-delay:0.3s;}
.stt-live-indicator.listening .stt-spinner span:nth-child(4){height:6px;animation-delay:0.45s;}
@keyframes stt-wave{0%,100%{height:4px;opacity:0.5;}50%{height:14px;opacity:1;}}

/* ── Custom Calendar Picker ── */
.cal-wrapper{position:relative;}
.cal-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:1px solid var(--border-input);border-radius:8px;background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:var(--font-family);cursor:pointer;transition:border-color 0.15s;}
.cal-trigger:hover{border-color:var(--brand-maroon);}
.cal-trigger svg{flex-shrink:0;opacity:0.5;}
#calLabel{flex:1;text-align:left;}
.cal-clear{font-size:16px;line-height:1;color:var(--text-secondary);cursor:pointer;padding:0 2px;}
.cal-clear:hover{color:var(--text-primary);}
.cal-popup{display:none;position:absolute;top:calc(100% + 6px);left:0;width:260px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);z-index:200;padding:12px;user-select:none;}
.cal-popup.open{display:block;}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-month-year{font-size:13px;font-weight:600;color:var(--text-dark);}
.cal-nav{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-secondary);font-size:18px;cursor:pointer;border-radius:6px;transition:all 0.12s;}
.cal-nav:hover{background:var(--brand-maroon-light);color:var(--brand-maroon);}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:8px;cursor:pointer;border:none;background:transparent;color:var(--text-primary);transition:all 0.12s;font-family:var(--font-family);}
.cal-day:hover{background:var(--brand-maroon-light);color:var(--brand-maroon);}
.cal-day.outside{color:var(--text-muted);opacity:0.4;}
.cal-day.today{font-weight:700;position:relative;}
.cal-day.today::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--brand-maroon);}
.cal-day.selected{background:var(--brand-maroon);color:#fff;font-weight:600;}
.cal-day.selected::after{background:#fff;}
.cal-footer{display:flex;justify-content:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color);}
.cal-today-btn{font-size:12px;font-weight:600;color:var(--brand-maroon);background:none;border:none;cursor:pointer;font-family:var(--font-family);padding:4px 12px;border-radius:6px;transition:background 0.12s;}
.cal-today-btn:hover{background:var(--brand-maroon-light);}

/* TTS playing state */
.btn-icon.voice-btn.speaking{border-color:var(--brand-maroon);background:var(--brand-maroon);color:#fff;animation:tts-speaking 1.2s ease-in-out infinite;}
.btn-icon.voice-btn.speaking .voice-icon{filter:brightness(0) invert(1);}
@keyframes tts-speaking{0%,100%{opacity:1;}50%{opacity:0.75;}}

/* TTS Section Player (shown below start pack content) */
.tts-section-speak{margin-left:auto;padding:5px 8px !important;gap:4px !important;border-color:transparent !important;background:transparent !important;opacity:0.6;transition:all 0.15s !important;}
.tts-section-speak:hover:not(:disabled){opacity:1 !important;background:var(--brand-maroon-light) !important;border-color:var(--brand-maroon) !important;}
.tts-section-speak.speaking{opacity:1 !important;background:var(--brand-maroon) !important;border-color:var(--brand-maroon) !important;}
.tts-section-speak .voice-icon{width:18px;height:18px;}

/* Mobile adjustments */
@media(max-width:768px){
  .voice-label{display:none;}
  .btn-icon.voice-btn{padding:8px 10px;}
  .stt-controls{margin-top:6px;}
  .stt-live-indicator{padding:4px 8px;font-size:10px;}
}

/* ── Info tips ── */
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--border-color);color:var(--text-secondary);font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:help;margin-left:6px;flex-shrink:0;transition:background 0.15s;line-height:1;}
.info-tip i{text-transform:none;font-variant:normal;}
.info-tip:hover{background:var(--blue-bg);color:var(--blue);}
.info-tip:focus-visible{outline:2px solid var(--brand-maroon);outline-offset:2px;}
.info-tip .info-bubble{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:260px;padding:10px 13px;background:var(--text-dark);color:#fff;font-family:var(--font-family);font-size:12.5px;font-weight:400;font-style:normal;line-height:1.5;border-radius:9px;box-shadow:var(--shadow-md);z-index:50;pointer-events:none;text-transform:none;letter-spacing:0;}
.info-tip .info-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--text-dark);}
[data-theme="dark"] .info-tip .info-bubble{background:#e4e7ec;color:#111318;}
[data-theme="dark"] .info-tip .info-bubble::after{border-top-color:#e4e7ec;}
.info-tip:hover .info-bubble,.info-tip:focus .info-bubble,.info-tip:focus-within .info-bubble,.info-tip.open .info-bubble{display:block;}

/* ── JSON toggle ── */
.json-toggle{display:flex;align-items:center;gap:6px;padding:10px 22px;border:none;border-top:1px solid var(--border-color);background:rgba(0,0,0,0.02);font-family:var(--mono);font-size:12px;color:var(--text-secondary);cursor:pointer;width:100%;text-align:left;transition:background 0.15s;border-radius:0 0 var(--radius-card) var(--radius-card);}
.json-toggle:hover{background:rgba(0,0,0,0.04);}
.json-toggle .arrow{transition:transform 0.2s;font-size:10px;}
.json-toggle.open .arrow{transform:rotate(90deg);}
.json-body{display:none;}
.json-body.open{display:block;}
.json-body pre{margin:0;padding:16px 22px;background:#f6f8fa;color:#24292f;font-family:var(--mono);font-size:12.5px;line-height:1.55;overflow-x:auto;max-height:400px;border-radius:0 0 var(--radius-card) var(--radius-card);}
[data-theme="dark"] .json-body pre{background:#0e1117;color:#c9d1d9;}

/* ── Audit bar ── */
.audit-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 22px;background:rgba(0,0,0,0.02);border-top:1px solid var(--border-color);font-size:12px;color:var(--text-secondary);font-family:var(--mono);}
.audit-bar strong{color:var(--text-primary);font-weight:500;}

/* ── Misc ── */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;}
.spinner.dark{border-color:rgba(0,0,0,0.1);border-top-color:var(--text-primary);width:24px;height:24px;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay{display:none;padding:48px 20px;text-align:center;color:var(--text-secondary);font-size:14px;}
.loading-overlay.active{display:block;}
.error-banner{padding:14px 18px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--radius-card);color:var(--red);font-size:13.5px;display:none;margin-bottom:16px;}
.error-banner.active{display:block;}
.pack-empty{text-align:center;padding:48px 20px;color:var(--text-muted);font-size:14px;}
.pack-empty .empty-icon{font-size:32px;margin-bottom:10px;opacity:0.4;}

/* ── Custom Theme Picker ── */
.theme-picker-container{position:relative;display:flex;align-items:center;}
.theme-picker-btn{width:20px;height:20px;border-radius:50%;cursor:pointer;background:var(--brand-maroon);transition:transform 0.15s;border:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);}
.theme-picker-btn:hover{transform:scale(1.1);}
.theme-picker-popup{position:absolute;top:calc(100% + 12px);right:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:12px;box-shadow:var(--shadow-md);display:none;z-index:100;flex-direction:row;gap:10px;animation:fadeIn 0.15s ease;}
.theme-picker-popup.open{display:flex;}
.theme-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform 0.15s, border-color 0.15s;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);}
.theme-swatch:hover{transform:scale(1.15);}
.theme-swatch.active{border-color:var(--text-primary);transform:scale(1.15);}

/* ── Customer Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease;backdrop-filter: blur(2px);}
.modal-overlay.open{display:flex;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,0.2);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);position:relative;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px;position:sticky;top:0;background:var(--bg-card);z-index:1;}
.modal-header-title{font-size:15px;font-weight:700;color:var(--text-dark);font-family:var(--font-family);}
[data-theme="dark"] .modal-header-title{color:var(--text-primary);}
.modal-close{width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.modal-close:hover{background:var(--gray-bg);color:var(--text-primary);}
.modal-body{padding:4px 20px 24px;}

.cust-profile-row { display: flex; align-items: center; gap: 0; margin-bottom: 14px; }
.cust-profile-info { flex: 1; }
.cust-name-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 2px; }
.cust-name { font-size: 18px; font-weight: 700; color: var(--text-dark); min-width: 0; }
[data-theme="dark"] .cust-name { color: var(--text-primary); }
.cust-id { font-size: 12px; color: var(--text-secondary); font-family: var(--font-family); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; }
.cust-type-badge{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;min-height:20px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;flex-shrink:0;}
.cust-type-residential{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-border);}
.cust-type-enterprise{background:var(--brand-maroon-light);color:var(--brand-maroon);border-color:rgba(168,14,76,0.28);}
.cust-type-smb{background:var(--green-light);color:var(--green);border-color:rgba(35,153,105,0.28);}
.cust-type-infra{background:var(--gray-bg);color:var(--text-secondary);border-color:var(--border-color);}
.cust-type-unknown{background:var(--gray-bg);color:var(--text-secondary);border-color:var(--border-color);}
[data-theme="dark"] .cust-type-residential{background:rgba(96,165,250,0.14);color:#8bc0ff;border-color:rgba(96,165,250,0.28);}
[data-theme="dark"] .cust-type-enterprise{background:rgba(168,14,76,0.22);color:#ff79ac;border-color:rgba(168,14,76,0.36);}
[data-theme="dark"] .cust-type-smb{background:rgba(35,153,105,0.18);color:#52d39d;border-color:rgba(35,153,105,0.32);}
[data-theme="dark"] .cust-type-infra,[data-theme="dark"] .cust-type-unknown{background:rgba(255,255,255,0.06);color:var(--text-secondary);border-color:var(--border-color);}

.cust-divider { height: 1px; background: rgba(151, 136, 234, 0.12); border: none; margin: 10px 0; border-radius: 1px; }

.cust-timeline-info { font-size: 14px; font-weight: 500; color: var(--text-dark); margin-bottom: 4px; font-family: var(--font-family); }
[data-theme="dark"] .cust-timeline-info { color: var(--text-primary); }
.cust-countdown { color: var(--green); font-weight: 600; font-size: 13px; }
.cust-countdown.warn { color: var(--red); }

.cust-section-header { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 11px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8;}
[data-theme="dark"] .cust-section-header { color: var(--text-primary); }
.cust-section-icon { width: 16px; height: 16px; color: var(--brand-maroon); flex-shrink: 0; }
[data-theme="dark"] .cust-section-icon { color: var(--brand-maroon); }

.cust-data-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cust-data-full { grid-column: 1 / -1; }
.cust-data-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cust-data-label { font-size: 13.5px; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 6px; }
[data-theme="dark"] .cust-data-label { color: var(--text-secondary); }
.cust-data-value { font-size: 13.5px; color: var(--text-dark); font-weight: 600; text-align: right; }
[data-theme="dark"] .cust-data-value { color: var(--text-primary); }

@media (max-width: 600px) {
  .modal { max-height: 100vh; border-radius: 0; }
}

/* ── Scrollbars ── */
.main-content::-webkit-scrollbar,.worklist-panel::-webkit-scrollbar,.wo-cards-container::-webkit-scrollbar{width:6px;}
.main-content::-webkit-scrollbar-track,.worklist-panel::-webkit-scrollbar-track,.wo-cards-container::-webkit-scrollbar-track{background:transparent;}
.main-content::-webkit-scrollbar-thumb,.worklist-panel::-webkit-scrollbar-thumb,.wo-cards-container::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:3px;}
[data-theme="dark"] .main-content::-webkit-scrollbar-thumb,[data-theme="dark"] .worklist-panel::-webkit-scrollbar-thumb,[data-theme="dark"] .wo-cards-container::-webkit-scrollbar-thumb{background:#3a3f4a;}

/* ── Theme Toggle Pill (Sun/Moon slider) ── */
.theme-toggle-pill {
  width: 56px;
  height: 28px;
  border-radius: 100px;
  padding: 3px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-pill.is-dark {
  background: #09090b;
  border: 1px solid #27272a;
}
.theme-toggle-pill.is-light {
  background: #ffffff;
  border: 1px solid #e4e4e7;
}
.ttp-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
}
.ttp-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.theme-toggle-pill.is-dark .ttp-thumb {
  transform: translateX(0);
  background: #27272a;
}
.theme-toggle-pill.is-light .ttp-thumb {
  transform: translateX(26px);
  background: #e5e5e5;
}
.ttp-ghost {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 1;
}
.theme-toggle-pill.is-dark .ttp-ghost {
  right: 0;
  left: auto;
}
.theme-toggle-pill.is-light .ttp-ghost {
  left: 0;
  right: auto;
}
/* Icon visibility */
.ttp-icon { display: none; }
.theme-toggle-pill.is-dark .ttp-thumb .ttp-moon { display: block; color: #fff; }
.theme-toggle-pill.is-dark .ttp-ghost .ttp-sun-g { display: block; color: #71717a; }
.theme-toggle-pill.is-light .ttp-thumb .ttp-sun { display: block; color: #374151; }
.theme-toggle-pill.is-light .ttp-ghost .ttp-moon-g { display: block; color: #09090b; }
/* Focus */
.theme-toggle-pill:focus-visible {
  outline: 2px solid var(--brand-maroon);
  outline-offset: 2px;
}
/* Hover feedback */
.theme-toggle-pill:hover .ttp-thumb {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.theme-toggle-pill.is-light:hover .ttp-thumb {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

/* ── Bottom Nav & Mobile Back Button ── */
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0;border:none;background:transparent;font-family:var(--font-family);font-size:11px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);position:relative;}
.nav-item.active{color:var(--brand-maroon);}
.nav-icon{width:22px;height:22px;margin-bottom:2px;transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); stroke-width: 2;}
.nav-item.active .nav-icon{transform:scale(1.15) translateY(-2px); stroke-width: 2.5;}
.nav-item::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:3px;background:var(--brand-maroon);border-radius:2px;transition: transform 0.2s;}
.nav-item.active::after{transform:translateX(-50%) scaleX(1);}
.mobile-back-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);font-size:16px;color:var(--text-primary);cursor:pointer;margin-right:12px;transition:0.15s;}
.mobile-back-btn:active{transform:scale(0.92);background:rgba(0,0,0,0.04);}

#homeView { display: flex; }
#jobsView { display: flex; }


/* ── Home View ── */
/* ══ ROAD DASHBOARD (Desktop Home) ══ */
.home-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-page);
  overflow: hidden;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
#homeView .home-container {
  max-width: 100%;
  width: 100%;
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: visible;
  scroll-behavior: smooth;
}

/* Home-specific expand button — positioned in top-left of home container */
.home-sidebar-expand-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* Dashboard header */
.rd-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 40px 0;
  position: relative;
}
.rd-header-center { text-align: center; }
.rd-headline {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
  user-select: none;
  -webkit-user-select: none;
}
.rd-task-count {
  color: var(--brand-maroon);
  font-weight: 700;
}
.rd-date {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
  user-select: none;
  -webkit-user-select: none;
}
.rd-header-right {
  position: absolute;
  right: 32px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-color);
  background: var(--bg-card);
}
.rd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Timeline container */
.rd-timeline {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Bug 4 web fix: 72px top padding gives the 60px agent image + drop shadow
     clearance above the first task node so it isn't clipped at the scroll top */
  padding: 72px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Tasks container - the main layout */
.rd-tasks-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  position: relative;
}

/* Dynamic SVG road — generated per-task in JS */
.rd-road-svg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.rd-road-svg-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
[data-theme="dark"] .rd-road-svg-wrap {
  /* Colors handled in JS via getRoadColors() — no CSS filter needed */
}

/* Task row — all children are absolute; row just provides height + relative context */
.rd-task-row {
  display: block;
  min-height: 170px;
  position: relative;
  z-index: 2;
}

/* Center column — absolute on the road */
.rd-task-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
  top: 50%;
  transform: translate(-50%, -50%);
  /* left is set by JS */
}

/* Numbered step circle */
.rd-step-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: linear-gradient(135deg, #444 0%, #333 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  position: relative;
}
.rd-step-circle.completed {
  background: linear-gradient(135deg, var(--green-done) 0%, var(--green-done-dark) 100%);
}

/* Distance badge between tasks */
.rd-distance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  position: relative;
  z-index: 2;
}
.rd-distance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-maroon);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  /* left is set by JS */
}
.rd-distance .rd-dist-unit {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.3px;
  margin-top: -2px;
}

/* Time slot pill — absolutely positioned to the left of the step circle */
.rd-col-left {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  /* right edge is set by JS to sit just left of the step circle */
}
.rd-time-slot {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
}

/* WO Card — absolutely positioned by JS to sit right of step circle */
.rd-col-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  z-index: 3;
  /* left is set by JS */
}
.rd-wo-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  width: 300px;
  flex-shrink: 0;
}
.rd-wo-card:hover {
  border-color: var(--brand-maroon);
  box-shadow: 0px 5px 28px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.rd-wo-card.is-done {
  border-color: var(--green-done);
  background: var(--green-done-bg);
}
.rd-wo-card .rd-wo-id {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: 4px;
}
.rd-wo-card .rd-wo-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.rd-wo-card .rd-wo-loc {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  font-weight: 400;
}
.rd-wo-loc-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rd-wo-done-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-done);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-wo-done-check svg {
  width: 13px;
  height: 13px;
}

/* ── Hover Callout ── */
.rd-callout {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 10px 14px;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 190px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.rd-callout.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Callout items */
.rd-callout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
}
.rd-callout-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.rd-callout-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.rd-callout-label {
  flex: 1;
}
/* (callout status indicators - styles moved to rd-callout-status above) */



/* ── Road Agent (scrolling technician PNG) ── */

/* Idle: gentle float bob */
@keyframes agent-idle-bob {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-4px); }
}

/* Walking: march bounce + slight lean into stride */
@keyframes agent-walk {
  0%   { transform: translateY(0px)  rotate(-1.5deg); }
  25%  { transform: translateY(-5px) rotate(0deg);    }
  50%  { transform: translateY(0px)  rotate(1.5deg);  }
  75%  { transform: translateY(-5px) rotate(0deg);    }
  100% { transform: translateY(0px)  rotate(-1.5deg); }
}

.rd-agent {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transition: top 0.85s cubic-bezier(0.4, 0, 0.2, 1), left 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.32));
}

/* Agent PNG image */
.agent-img {
  display: block;
  width: 46px;
  height: auto;
  animation: agent-idle-bob 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Walking: replace idle with march */
.rd-agent.is-walking .agent-img {
  animation: agent-walk 0.42s ease-in-out infinite;
}

.rd-agent-img {
  width: 64px;
  height: 80px;
  object-fit: contain;
  display: block;
}

/* ── Empty state ── */
.rd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.rd-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}
.rd-empty-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.rd-empty-hint {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Home Date Picker ── */
.rd-cal-wrapper {
  position: relative;
}
.rd-cal-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.rd-cal-trigger:hover {
  border-color: var(--brand-maroon);
  color: var(--brand-maroon);
}
.rd-cal-wrapper .cal-popup {
  right: 0;
  left: auto;
  top: calc(100% + 8px);
}

/* ── Callout display-only status (not clickable from home) ── */
.rd-callout-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.rd-callout-status.is-read {
  background: var(--brand-maroon);
  border-color: var(--brand-maroon);
}
.rd-callout-status.is-read svg {
  stroke: #fff;
}
.rd-callout-status svg {
  width: 12px;
  height: 12px;
  stroke: transparent;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Section-level Read button (in work order detail) ── */
.section-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  /* position is now flow (inside sc-brief-footer), not absolute */
}
.section-read-btn:hover {
  border-color: var(--brand-maroon);
  color: var(--brand-maroon);
}
.section-read-btn.is-read {
  background: var(--brand-maroon);
  border-color: var(--brand-maroon);
  color: #fff;
}
.section-read-btn.is-read:hover {
  background: var(--brand-maroon-hover);
  border-color: var(--brand-maroon-hover);
  color: #fff;
}

@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  .home-view { padding: 0; margin-bottom: 0; background: var(--bg-page); }

  /* ── Show the road dashboard on mobile (replaces .mh) ── */
  .home-desktop-only { display: block !important; }

  /* Header: tighten padding, shrink text */
  .rd-header { padding: 16px 16px 0; justify-content: space-between; }
  .rd-header-center { text-align: left; }
  .rd-headline { font-size: 17px; }
  .rd-date { font-size: 12px; }
  .rd-header-right { position: static; gap: 8px; }
  .rd-avatar { width: 34px; height: 34px; }

  /* Timeline: tighter padding, bottom clearance for nav bar */
  .rd-timeline {
    padding: 8px 12px calc(80px + env(safe-area-inset-bottom, 0px)) 12px;
    max-width: 100%;
  }

  /* Hide the SVG winding road — replaced by a CSS centre line */
  .rd-road-svg-wrap { display: none; }

  /* Centre line drawn as ::before on the tasks container */
  .rd-tasks-container {
    --road-center: 50%;
  }
  .rd-tasks-container::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--road-center) - 14px);
    width: 28px;
    background: var(--border-color);
    border-left: 3px solid var(--bg-page);
    border-right: 3px solid var(--bg-page);
    z-index: 0;
  }
  .rd-tasks-container::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    background: repeating-linear-gradient(
      to bottom,
      var(--brand-maroon) 0px,
      var(--brand-maroon) 7px,
      transparent 7px,
      transparent 12px
    );
    opacity: 0.5;
    z-index: 1;
  }

  /* Task row: CSS grid — time | circle | card */
  .rd-task-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    min-height: 110px;
    position: relative;
  }

  /* Reset all absolute JS-set positions */
  .rd-col-left {
    position: static !important;
    transform: none !important;
    display: flex;
    justify-content: flex-end;
    padding-right: 6px;
  }
  .rd-task-center {
    position: static !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
  .rd-col-right {
    position: static !important;
    transform: none !important;
    padding-left: 6px;
  }

  /* Shrink time pill for narrow screens */
  .rd-time-slot {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* WO card: full width of its column, no fixed 300px */
  .rd-wo-card {
    width: auto;
    padding: 10px 12px;
  }
  .rd-wo-card .rd-wo-title { font-size: 13px; margin-bottom: 6px; }
  .rd-wo-card .rd-wo-id { font-size: 10px; }
  .rd-wo-card .rd-wo-loc { font-size: 11px; }

  /* Distance row: grid too — empty | badge | empty */
  .rd-distance-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    min-height: 52px;
    position: relative;
  }
  .rd-distance {
    position: static !important;
    transform: none !important;
    width: 36px;
    height: 36px;
    font-size: 13px;
    grid-column: 2;
  }

  /* Callout: on mobile show below the card instead of to the right */
  .rd-callout {
    left: auto;
    right: 0;
    top: calc(100% + 6px);
    transform: translateX(0) translateY(4px);
    min-width: 160px;
    width: max-content;
  }
  .rd-callout.visible {
    transform: translateX(0) translateY(0);
  }

  /* Agent: hide on mobile (no room alongside the straight road) */
  .rd-agent { display: none !important; }
}

@media(max-width:480px){
  .home-view { padding: 18px 12px; }
  .home-header { gap: 14px; }
  .home-card { min-width: 0; }
  .card-content { padding: 18px 16px; }
  .stats-row { justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
  .stat-item { flex: 1 1 0; min-width: 0; }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 10px; }
  .priority-card .btn { margin-top: 16px !important; }
}

@media (min-width: 1181px) and (hover:hover) {
  .sidebar { display: flex !important; }
  .bottom-nav { display: none !important; }
  /* Collapsible sections are mobile-only — hide chevrons and restore pointer on desktop */
  .sc-chevron, .ic-chevron { display: none !important; }
  .section-header { cursor: default !important; user-select: auto !important; }
  .info-card-header { cursor: default !important; user-select: auto !important; }
  .section-card.sc-collapsed .section-body,
  .info-card.ic-collapsed .ic-body { max-height: 2000px !important; opacity: 1 !important; }
}

/* ── Responsive Mobile (Single Screen Toggle) ── */
@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px){
  .app-shell{display: flex; flex-direction: column; height:100vh; height:100dvh; overflow:hidden; position: relative;}
  .sidebar{display:none;}
  /* By default on mobile, show worklist, hide main content */
  .worklist-panel{display:flex;flex-direction:column;flex:1;height:100%;max-height:none;border-radius:0;border:none;padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .main-content{display:none;flex-direction:column;flex:1;height:100%;border-radius:0;border:none;margin-top:0;padding-bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* When detail is open */
  .app-shell.mobile-detail-open .worklist-panel{display:none;}
  .app-shell.mobile-detail-open .main-content{display:flex;}
  /* Show mobile-specific elements */
  .bottom-nav{display:flex;}
  .mobile-back-btn{display:flex;}
  /* Stack info cards */
  .info-cards-row{flex-direction:column;gap:12px;}
  .carry-list-grid{grid-template-columns:1fr;}
  .carry-list-grid .carry-col:not(:last-child){border-right:none;padding-right:0;border-bottom:1px solid var(--border-color);padding-bottom:12px;margin-bottom:12px;}
  .detail-title{font-size:18px;}
  .top-bar{padding:12px 16px;}
  .detail-content{padding:0 16px calc(24px + 70px + env(safe-area-inset-bottom, 0px));max-width:none;margin:0;flex:1 0 auto;}
  .tab-btn{padding:10px 12px;font-size:13px;}
  .issue-grid{grid-template-columns:1fr;}
  .d-row{grid-template-columns:110px 1fr;gap:8px;min-height:auto;padding:8px 0;}
  .nba-item{margin:0;padding:8px 4px;}
  
  /* UI Refinements */
  .top-bar-left { font-size: 13px; min-width: 0; flex: 1; }
  .top-bar-right { flex-shrink: 0; margin-left: 8px; }
  .top-bar-right .theme-label { display: none; }
  .top-bar-right .theme-picker-wrapper { padding: 4px 6px !important; }
  
  /* Hide top bar theme picker on mobile, show it in worklist instead */
  .main-content .top-bar-right { display: none !important; }
  .worklist-header .theme-picker-wrapper { display: flex !important; }
  
  .panel-header { flex-direction: column; align-items: stretch; padding: 16px; }
  .btn-group { width: 100%; gap: 8px; }
  .btn-group .btn { flex: 1; padding: 12px 10px; font-size: 13px; }
  
  .worklist-mobile-logo { display: flex; }
  .worklist-header { padding: 16px 20px; border-bottom: 2px solid var(--brand-maroon-light); }
  .worklist-title-row { flex-wrap: nowrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .worklist-title { font-size: 18px; flex: 1; }
  .worklist-badge { margin-left: 0; font-size: 12px; padding: 1px 8px; }
  .worklist-refresh-btn { display:inline-flex; }
  #themeHostWorklist { display:block; margin-left:auto; }
  
  .worklist-header .theme-picker-wrapper { 
    display: flex !important; 
    width: auto; 
    margin-top: 0; 
    padding: 2px 6px !important; 
    gap: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .worklist-header .theme-picker-wrapper span { display: none; }
  .worklist-header .theme-picker-wrapper div[style*="width:1px"] { display: none; }
  .theme-picker-popup{
    right:0;
    left:auto;
    max-width:calc(100vw - 24px);
  }
}

@media (min-width:768px) and (max-width:1180px), (hover:none) and (pointer:coarse) and (min-width:768px) and (max-width:1366px){
  .carry-list-grid{grid-template-columns:1fr 1fr;gap:20px 24px;}
  .carry-list-grid .carry-col:not(:last-child){border-right:none;padding-right:0;border-bottom:none;padding-bottom:0;margin-bottom:0;}
  .carry-list-grid .carry-col:nth-child(1){border-right:1px solid var(--border-color);padding-right:16px;}
  .carry-list-grid .carry-col:nth-child(2){padding-left:16px;}
  .carry-list-grid .carry-col:nth-child(3){grid-column:1 / -1;border-top:1px solid var(--border-color);padding-top:16px;margin-top:4px;}

  /* ── Tablet Jobs View: side-by-side worklist + detail ── */
  #jobsView { flex-direction: row; }
  .worklist-panel {
    display: flex !important;
    width: 320px;
    min-width: 280px;
    max-width: 360px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    height: 100%;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  .main-content {
    display: flex !important;
    flex: 1;
    border-radius: 0;
    border: none;
    height: 100%;
    padding-bottom: 0;
  }
  .app-shell.mobile-detail-open .worklist-panel { display: flex !important; }
  .app-shell.mobile-detail-open .main-content { display: flex !important; }
  .mobile-back-btn { display: none !important; }
  .main-content .top-bar-right { display: flex !important; }

  /* Worklist refinements for tablet */
  .worklist-header { padding: 18px 20px; }
  .worklist-title { font-size: 20px; }
  .wo-card { padding: 14px 16px; }

  /* Detail panel refinements */
  .detail-content { padding: 0 24px 24px; max-width: none; }
  .top-bar { padding: 14px 20px; }
  .panel-header { flex-direction: row; align-items: center; }
  .btn-group { width: auto; }
  .btn-group .btn { flex: none; padding: 10px 18px; }
  .info-cards-row { flex-direction: row; gap: 16px; }
  .issue-grid { grid-template-columns: 1fr 1fr; }
  .d-row { grid-template-columns: 130px 1fr; }

  /* ── Tablet Mobile Home: two-column grid layout ── */
  .mh {
    padding: 32px 48px calc(80px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 0 40px;
    align-content: start;
  }
  /* Topbar spans full width */
  .mh-topbar { grid-column: 1 / -1; margin-bottom: 36px; }
  /* Counter section → left col */
  .mh-section.mh-anim[style*="--d:0"] { grid-column: 1; grid-row: 2; }
  /* Editorial → left col */
  .mh-section.mh-anim[style*="--d:1"] { grid-column: 1; grid-row: 3; }
  /* Stats row → left col */
  .mh-stats-row { grid-column: 1; grid-row: 4; }
  /* Job card → right col, spanning rows 2-4 */
  .mh-section.mh-anim[style*="--d:3"] {
    grid-column: 2;
    grid-row: 2 / 5;
    display: flex;
    align-items: stretch;
  }
  .mh-section.mh-anim[style*="--d:3"] .mh-job-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .mh-section.mh-anim[style*="--d:3"] .mh-jc-body {
    flex: 1;
    min-height: 0;
  }
  .mh-section.mh-anim[style*="--d:3"] .mh-jc-nav {
    margin-top: auto;
  }
  /* Glow blob → reposition for wider layout */
  .mh-glow { grid-column: 1 / -1; grid-row: 1 / -1; top: -80px; right: 30%; width: 360px; height: 360px; }

  /* Scale up typography */
  .mh-big-num { font-size: 88px; letter-spacing: -4px; }
  .mh-slash { font-size: 36px; }
  .mh-editorial { font-size: 34px; margin-bottom: 24px; }
  .mh-date { font-size: 14px; }
  .mh-shift-label { font-size: 12px; letter-spacing: 2px; }
  .mh-assigned { font-size: 12px; letter-spacing: 1.5px; }

  /* Ring — larger on tablet */
  .mh-counter-row { margin-bottom: 24px; }
  .mh-ring-wrap { width: 80px; height: 80px; }
  .mh-ring-pct { font-size: 15px; }

  /* Stats */
  .mh-stats-row { gap: 20px; margin-bottom: 0; }
  .mh-stat-chip { padding: 10px 18px; border-radius: 14px; }
  .mh-stat-num { font-size: 18px; }
  .mh-stat-lbl { font-size: 11px; }

  /* Job card fills right column */
  .mh-job-card { padding: 28px 26px 20px; border-radius: 24px; }
  .mh-jc-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 24px; }
  .mh-jc-icon svg { width: 24px; height: 24px; }
  .mh-jc-title { font-size: 26px; margin-bottom: 12px; }
  .mh-jc-desc { font-size: 15px; line-height: 1.6; }
  .mh-jc-id { font-size: 12px; }
  .mh-jc-arrow { width: 44px; height: 44px; }
  .mh-jc-counter { font-size: 13px; }

  /* Bottom nav wider spacing on tablet */
  .bottom-nav { padding: 8px 24px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .nav-item { gap: 5px; font-size: 12px; }
  .nav-icon { width: 24px; height: 24px; }
}

@media (max-width:380px){
  .tab-btn{padding:8px 8px;font-size:12px;gap:4px;}
  .tab-btn .tab-icon{font-size:14px;}
}

/* ── Touch device overrides (prevent sticky hover on iOS) ── */
@media (hover:none) and (pointer:coarse) {
  .wo-card:hover{background:transparent;}
  .wo-card.active:hover{background:var(--brand-maroon-light);}
  .nba-item:hover{background:transparent;}
  .btn-outline:hover{background:var(--bg-card);color:var(--text-secondary);border-color:var(--border-color);}
  .sidebar-nav-item:hover{background:transparent;}
  .nba-toggle-btn:hover,.nba-notes-btn:hover{background:var(--bg-card);color:var(--text-secondary);}
  .wo-card:active{background:rgba(0,0,0,0.03);}
  [data-theme="dark"] .wo-card:active{background:rgba(255,255,255,0.04);}
  .nba-item:active{background:rgba(0,0,0,0.03);}
  .btn:active,.tab-btn:active{transform:scale(0.98);}
}

.hidden { display: none !important; }

/* ═══ MOBILE HOME (legacy .mh removed — replaced by .mr mobile road) ═══ */
.home-desktop-only { display: block; }
.mh { display: none !important; }
@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px) {
  .home-desktop-only { display: none !important; }
}
.mh-glow{position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--brand-maroon) 0%,transparent 70%);opacity:0.08;filter:blur(60px);pointer-events:none;z-index:0;animation:mhGlowPulse 6s ease-in-out infinite alternate;}
[data-theme="dark"] .mh-glow{opacity:0.12;}
@keyframes mhGlowPulse{0%{transform:scale(1) translate(0,0);opacity:0.08;}100%{transform:scale(1.15) translate(-10px,10px);opacity:0.12;}}
.mh-anim{opacity:0;transform:translateY(18px);animation:mhFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) forwards;animation-delay:calc(var(--d,0)*0.1s + 0.1s);}
@keyframes mhFadeUp{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.mh-anim{animation:none;opacity:1;transform:none;}}
.mh-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;position:relative;z-index:1;}
.mh-app-icon{width:40px;height:40px;border-radius:12px;background:var(--brand-maroon-light);display:flex;align-items:center;justify-content:center;}
.mh-section{position:relative;z-index:1;}
.mh-shift-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:8px;}
.mh-counter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.mh-counter{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;}
.mh-big-num{font-size:64px;font-weight:800;line-height:1;color:var(--text-dark);letter-spacing:-3px;font-variant-numeric:tabular-nums;}
.mh-slash{font-size:28px;font-weight:400;color:var(--text-secondary);margin-left:2px;}
.mh-slash span{font-weight:600;color:var(--text-secondary);}
.mh-assigned{display:block;width:100%;font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--text-secondary);margin-top:2px;}
.mh-ring-wrap{position:relative;width:52px;height:52px;flex-shrink:0;}
.mh-ring{width:100%;height:100%;}
.mh-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--brand-maroon);font-variant-numeric:tabular-nums;}
.mh-date{font-size:13px;color:var(--text-secondary);font-weight:500;margin-bottom:6px;}
.mh-editorial{font-size:26px;font-weight:400;color:var(--text-secondary);line-height:1.25;margin-bottom:24px;}
.mh-editorial strong{color:var(--text-dark);font-weight:700;}
.mh-stats-row{display:flex;align-items:center;gap:16px;margin-bottom:28px;position:relative;z-index:1;}
.mh-stat-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-sm);}
.mh-stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mh-stat-num{font-size:16px;font-weight:700;color:var(--text-dark);font-variant-numeric:tabular-nums;}
.mh-stat-lbl{font-size:10px;font-weight:700;letter-spacing:0.8px;color:var(--text-secondary);}
.mh-stat-divider{width:1px;height:20px;background:var(--border-color);flex-shrink:0;}
.mh-job-card{background:#2c2f36;border-radius:22px;padding:24px 22px 18px;box-shadow:0 6px 28px rgba(0,0,0,0.12);position:relative;overflow:hidden;}
[data-theme="dark"] .mh-job-card{background:#22252c;box-shadow:0 6px 28px rgba(0,0,0,0.4);}
.mh-jc-body{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity 0.15s;min-height:200px;display:flex;flex-direction:column;}
.mh-jc-body:active{opacity:0.85;}
.mh-jc-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;}
[data-theme="dark"] .mh-jc-icon{background:rgba(255,255,255,0.08);}
.mh-jc-title{font-size:22px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px;word-break:break-word;}
.mh-jc-desc{font-size:14px;font-weight:400;color:rgba(255,255,255,0.5);line-height:1.5;margin-bottom:12px;flex:1;}
.mh-jc-id{font-size:11px;font-weight:600;color:var(--brand-maroon);letter-spacing:0.4px;}
.mh-jc-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);}
.mh-jc-arrow{width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s,transform 0.15s;-webkit-tap-highlight-color:transparent;}
.mh-jc-prev{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);}
.mh-jc-prev:active{transform:scale(0.92);background:rgba(255,255,255,0.12);}
.mh-jc-next{background:var(--brand-maroon);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.mh-jc-next:active{transform:scale(0.92);}
.mh-jc-counter{font-size:12px;font-weight:600;color:rgba(255,255,255,0.35);font-variant-numeric:tabular-nums;letter-spacing:0.5px;}
@media(max-width:380px){.mh{padding:16px 18px calc(74px + env(safe-area-inset-bottom,0px));}.mh-big-num{font-size:52px;}.mh-editorial{font-size:22px;}.mh-job-card{padding:20px 18px 14px;border-radius:18px;}.mh-jc-title{font-size:19px;}.mh-jc-body{min-height:175px;}}
/* ═══════════════════════════════════════════════════════
   MOBILE ROAD — PWA home screen (completely independent
   from desktop .rd-* and legacy .mh-* blocks)
   ═══════════════════════════════════════════════════════ */

/* Show/hide gate — mirrors the .mh breakpoint exactly */
.mr { display: none; }
@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px) {
  .home-desktop-only { display: none !important; }
  .mr {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-page);
    overflow: hidden;
  }
}

/* ── Header ── */
.mr-header {
  flex-shrink: 0;
  padding: 20px 20px 8px;
  background: var(--bg-page);
}
.mr-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mr-headline {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0 0 3px;
  user-select: none;
  -webkit-user-select: none;
}
.mr-count { color: var(--brand-maroon); }
.mr-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}
.mr-today-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.mr-today-btn:hover { border-color: var(--brand-maroon); color: var(--brand-maroon); }

/* ── START pill ── */
.mr-start {
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
  flex-shrink: 0;
}
.mr-start span {
  background: var(--text-dark);
  color: var(--bg-page);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 20px;
  border-radius: 20px;
}
[data-theme="dark"] .mr-start span { background: var(--text-primary); color: var(--bg-page); }

/* ── Scroll area ── */
.mr-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  scroll-behavior: smooth;
}

/* ── Timeline (road SVG lives here, agent is absolute child) ── */
.mr-timeline {
  position: relative;
  width: 100%;
  /* Bug 4 fix: 56px top padding gives the 34px agent image + shadow room above
     the first task node so it isn't clipped by the scroll container edge */
  padding: 56px 0 20px;
}
.mr-tasks-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Road SVG wrapper — dimensions set by JS after measuring rows ── */
.mr-road-svg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
[data-theme="dark"] .mr-road-svg-wrap {
  /* Colors handled in JS with theme-aware values — no CSS filter needed */
}

/* ── Task row — height fits stacked time + card naturally ── */
.mr-task-row {
  display: block;
  min-height: 120px;
  position: relative;
  z-index: 2;
}
.mr-distance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  position: relative;
  z-index: 2;
}

/* Step circle — sits ON the road, left is set by JS */
.mr-task-center {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mr-step-circle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #444 0%, #333 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.mr-step-circle.completed {
  background: linear-gradient(135deg, var(--green-done) 0%, var(--green-done-dark) 100%);
}

/* Time pill — now sits ABOVE the card inside col-right, no longer absolutely positioned left */
.mr-col-left { display: none; } /* kept in case any old HTML references it, but hidden */

/* WO card column — absolutely positioned by JS, contains time pill + card stacked */
.mr-col-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mr-time-slot {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.mr-wo-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 11px 13px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.mr-wo-card:active { transform: scale(0.97); }
.mr-wo-card.is-done {
  border-color: var(--green-done);
  background: var(--green-done-bg);
}
.mr-wo-id {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 2px;
}
.mr-wo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 6px;
}
.mr-wo-loc {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.mr-wo-loc svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; }
.mr-wo-done-check {
  position: absolute;
  top: 9px; right: 9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-done);
  display: flex; align-items: center; justify-content: center;
}
.mr-wo-done-check svg { width: 11px; height: 11px; }

/* Distance badge */
.mr-distance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-maroon);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.mr-distance .mr-dist-unit {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.2px;
  margin-top: -1px;
}

/* Mobile agent — owns its own positioning and animation (does NOT use rd-agent class) */
.mr-agent {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transition: top 0.85s cubic-bezier(0.4,0,0.2,1), left 0.85s cubic-bezier(0.4,0,0.2,1);
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.28));
}
.mr-agent .agent-img {
  width: 34px;
}
.mr-agent.is-walking .agent-img {
  animation: agent-walk 0.42s ease-in-out infinite;
}

/* Fix 5: hide theme picker from mobile road header — keeps header clean (only Today btn visible) */
@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px) {
  #themeHostMobile { display: none !important; }
}
.mr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  text-align: center;
}
.mr-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.mr-empty-text { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.mr-empty-hint { font-size: 13px; color: var(--text-secondary); }

/* ── Bottom nav pill — position:fixed so it overlays viewport from outside .app-shell ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  /* Bug 2 fix: transparent bg with a very subtle fade so the pill doesn't
     appear to float over a stark white block on devices where backdrop-filter
     can't blur through overflow:hidden ancestors (most mobile browsers). */
  background: linear-gradient(to top, var(--bg-page) 40%, transparent 100%);
  pointer-events: none;
}
@media (max-width:1180px), (hover:none) and (pointer:coarse) and (max-width:1366px) {
  .bottom-nav { display: flex; }
}
.bn-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,245,248,0.55);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 100px;
  padding: 5px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  pointer-events: auto;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
[data-theme="dark"] .bn-pill {
  background: rgba(24,27,35,0.75);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.bn-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bn-item:active { transform: scale(0.93); }
.bn-icon { width: 22px; height: 22px; stroke: var(--text-secondary); transition: stroke 0.2s; }
.bn-item.active {
  background: var(--brand-maroon);
}
.bn-item.active .bn-icon { stroke: #fff; }

/* ═══════════════════════════════════════════════════
   UI IMPROVEMENTS
   ═══════════════════════════════════════════════════ */

/* ── Priority-forward WO cards ─────────────────────
   Inactive cards show a priority-colored left border.
   Active card keeps the existing brand-maroon border. */
.wo-card:not(.active).wo-card--p1 { border-left-color: #dc2626; background: rgba(220,38,38,0.018); }
.wo-card:not(.active).wo-card--p2 { border-left-color: #d97706; }
.wo-card:not(.active).wo-card--p3 { border-left-color: #3b82f6; }
.wo-card:not(.active).wo-card--p4 { border-left-color: #059669; }

/* ── WO card typography tweaks ── */
.wo-card-title  { font-weight: 600; }
.wo-id          { font-family: var(--mono); font-size: 11px; }
.wo-card-time   { font-family: var(--mono); }

/* ── Priority Banner ────────────────────────────────
   Inserted between top-bar and detail-content by JS
   when a work order is selected. Shows:
   [priority pill]  Job Type  · ⏰ time  · 📍 location */
.priority-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 12.5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 36px;
}
.priority-banner.visible { display: flex; }
.pb-pri {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; font-family: var(--mono); text-transform: uppercase;
  flex-shrink: 0; letter-spacing: 0.3px;
}
.pb-p1 { background: rgba(220,38,38,0.1);  color: #dc2626; }
.pb-p2 { background: rgba(217,119,6,0.1);  color: #d97706; }
.pb-p3 { background: rgba(37,99,235,0.1);  color: #2563eb; }
.pb-p4 { background: rgba(5,150,105,0.1);  color: #059669; }
[data-theme="dark"] .pb-p1 { background: rgba(220,38,38,0.18);  color: #f87171; }
[data-theme="dark"] .pb-p2 { background: rgba(217,119,6,0.18);  color: #fbbf24; }
[data-theme="dark"] .pb-p3 { background: rgba(37,99,235,0.18);  color: #93c5fd; }
[data-theme="dark"] .pb-p4 { background: rgba(5,150,105,0.18);  color: #34d399; }
.pb-type { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.pb-sep  { color: var(--border-color); flex-shrink: 0; }

/* ── NBA checklist: slightly larger circles & spacing ── */
.nba-circle { width: 24px; height: 24px; }
.nba-circle svg.check-icon { width: 13px; height: 13px; }
.nba-item { gap: 12px; padding: 10px 10px; }

/* ── WO list skeleton loading shimmer ── */
.wo-card-skeleton { padding: 14px 16px; border-top: 1px solid var(--border-color); border-left: 4px solid transparent; }
.sk-line { border-radius: 4px; background: linear-gradient(90deg, var(--border-color) 25%, rgba(200,200,200,0.15) 50%, var(--border-color) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s infinite; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
[data-theme="dark"] .sk-line { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.06) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s infinite; }

/* ── Login View ── */
#loginView {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card, 16px);
  padding: 40px 30px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.login-card h1 {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-maroon, #a80e4c);
  margin-bottom: 30px;
}
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-card input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-card, 8px);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.2s;
}
.login-card input:focus {
  border-color: var(--brand-maroon, #a80e4c);
}
.login-card button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-card, 8px);
  background: var(--brand-maroon, #a80e4c);
  color: #fff;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.login-card button:hover {
  opacity: 0.9;
}
.login-card #loginError {
  font-size: 13px;
  margin: 0;
  text-align: left;
}