/* FRONTLINE REDESIGN PASS 2 — compatibility containment over legacy stack */

/* ---------- global shell ---------- */
:root{
  --sidebar-w:228px;
  --topbar-h:54px;
  --row-h:40px;
  --control-h:34px;
}
html,body,#app{background:var(--bg-canvas);color:var(--text-primary)}
body{font-size:13px}
.shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr);background:var(--bg-canvas)}
.shell>aside{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);box-shadow:none}
.shell>main{background:var(--bg-canvas)}
.content{padding:16px 20px 30px;background:var(--bg-canvas);max-width:none}
.topbar{height:var(--topbar-h);min-height:var(--topbar-h);padding:0 12px;background:var(--bg-surface);border-bottom:1px solid var(--border);box-shadow:none}
.topbar>div>strong{font-size:14px;font-weight:650;color:var(--text-primary)}
.topbar .date,.topbar .tz,.system-health-chip,.topbar section>button:not(.new){height:30px;min-height:30px;background:var(--bg-raised);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;box-shadow:none}
.topbar .tz b{color:var(--text-primary)}
.topbar .search{height:34px;background:var(--bg-inset);border:1px solid var(--border);border-radius:7px;box-shadow:none}
.topbar .search input{background:transparent;color:var(--text-primary);font-size:12.5px}
.topbar .new{height:34px;min-height:34px;background:var(--accent);border:1px solid var(--accent);color:var(--text-on-accent);border-radius:7px;box-shadow:none}

/* ---------- sidebar ---------- */
.sidehead{height:var(--topbar-h);min-height:var(--topbar-h);padding:0 10px;background:var(--bg-sidebar);border-bottom:1px solid var(--border-subtle)}
.sidehead .brandtxt b{font-size:13px;color:var(--text-primary)}
.sidehead .brandtxt span{font-size:10px;color:var(--text-tertiary)}
.navscroll{padding:8px 7px 10px}
.nav-item,.nav-group-head{height:34px;min-height:34px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);box-shadow:none}
.nav-item b,.nav-group-head b{font-size:12.5px;font-weight:600}
.nav-item span,.nav-group-head span{color:var(--text-tertiary);background:transparent;border:0}
.nav-item:hover,.nav-group-head:hover{background:var(--bg-raised);color:var(--text-primary)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 2px 0 var(--accent)}
.nav-group{margin:1px 0}
.nav-group.has-active:before{display:none}
.nav-group.has-active>.nav-group-head{background:transparent;color:var(--text-primary);box-shadow:none}
.nav-sub{margin:0 0 3px 27px;padding:2px 0 3px 8px;border-left:1px solid var(--border)}
.nav-subitem{min-height:29px;height:29px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:var(--text-secondary);font-size:12px;box-shadow:none}
.nav-subitem:hover{background:var(--bg-raised);color:var(--text-primary)}
.nav-subitem.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.nav-third{margin-left:7px;padding-left:7px;border-left:1px solid var(--border-subtle)}
.nav-third-item{height:27px;min-height:27px;font-size:11.5px;color:var(--text-tertiary);background:transparent;box-shadow:none}
.nav-third-item.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.side-personal{display:none}
.sidebottom{padding:7px;background:var(--bg-sidebar);border-top:1px solid var(--border)}
.user{padding:5px}
.user>i{width:30px;height:30px;border-radius:7px;background:var(--bg-raised)}
.user b{font-size:11.5px;color:var(--text-primary)}
.user span{font-size:10px;color:var(--text-tertiary)}
.sidebottom>button{height:30px;min-height:30px;color:var(--text-secondary);font-size:11.5px}

/* ---------- fleet page framing ---------- */
.fleet-page{padding:0 0 24px}
.fleet-head,.fleet-head-v3,.fleet-head-v5,.fleet-head-clean{min-height:44px;padding:0 2px 10px;align-items:center}
.fleet-head h1,.fleet-head-v3 h1,.fleet-head-clean h1{font-size:21px;line-height:1.2;font-weight:650;letter-spacing:-.015em;color:var(--text-primary)}
.fleet-head p,.fleet-head-v3 p{font-size:12px;color:var(--text-secondary);margin-top:3px}
.fleet-live-source{height:30px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;box-shadow:none}
.fleet-live-source b{font-size:11.5px;color:var(--text-primary)}
.fleet-live-source small{font-size:9.5px;color:var(--text-tertiary)}

/* quick views: one compact segmented strip */
.fleet-view-tabs{display:flex;align-items:center;gap:3px;overflow:auto;margin:0 0 10px;padding:4px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px}
.fleet-view-tabs button{height:32px;min-height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;box-shadow:none}
.fleet-view-tabs button:hover{background:color-mix(in srgb,var(--bg-surface) 65%,transparent);color:var(--text-primary)}
.fleet-view-tabs button.active{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.fleet-view-tabs button b{min-width:21px;height:19px;padding:0 5px;border-radius:5px;background:var(--neutral-soft);color:var(--neutral-text);font-size:10px}
.fleet-view-tabs button.active b{background:var(--accent-soft);color:var(--accent-text)}

/* asset register container */
.fleet-register{margin-top:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:9px;overflow:visible;box-shadow:none}
.fleet-register-head{min-height:52px;padding:9px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border)}
.fleet-register-head span{font-size:9px;letter-spacing:.1em;color:var(--accent)}
.fleet-register-head h3{font-size:15px;color:var(--text-primary);margin:2px 0 0}
.fleet-register-head p{font-size:11px;color:var(--text-secondary)}

/* toolbar */
.fleet-pro-toolbar,.fleet-toolbar-v4{min-height:48px;padding:7px 10px;gap:6px;background:var(--bg-surface);border-bottom:1px solid var(--border);border-radius:0}
.fleet-search,.pro-search{height:34px;min-height:34px;background:var(--bg-inset);border:1px solid var(--border);border-radius:7px;color:var(--text-tertiary);box-shadow:none}
.fleet-search input,.fleet-search-input{height:32px;background:transparent;border:0;color:var(--text-primary);font-size:12px;box-shadow:none}
.fleet-toolbar-v4 .fleet-tool,.fleet-tool{height:32px;min-height:32px;padding:0 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:11.5px;font-weight:550;box-shadow:none}
.fleet-toolbar-v4 .fleet-tool:hover,.fleet-tool:hover{background:var(--bg-raised);border-color:var(--border-strong)}
.fleet-toolbar-v4>span{font-size:10.5px;color:var(--text-tertiary)}

/* fast filters */
.fleet-fast-filters,.fleet-fast-filters-v2{min-height:46px;padding:6px 10px;gap:7px;background:var(--bg-raised);border-bottom:1px solid var(--border);z-index:20}
.fleet-fast-combo,.fleet-fast-filters label{font-size:10.5px;color:var(--text-secondary)}
.fleet-fast-combo{min-width:190px}
.fleet-fast-combo input,.fleet-fast-filters select{height:31px;min-height:31px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:11.5px}
.fleet-fast-filters button{height:30px;min-height:30px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);border-radius:6px;font-size:11px}

/* ---------- fleet table ---------- */
.fleet-table-wrap,.pro-table-wrap{background:var(--bg-surface);border:0;border-radius:0 0 9px 9px;overflow-x:auto;overflow-y:visible;max-height:none}
.fleet-table-v4,.fleet-table-v5,.pro-fleet-table{border-collapse:separate;border-spacing:0;background:var(--bg-surface)}
.fleet-table-v4 th,.fleet-table-v5 th,.pro-fleet-table th{height:36px;padding:0 10px;background:var(--bg-raised);color:var(--text-secondary);border-color:var(--border);border-top:0;font-size:10px;font-weight:650;letter-spacing:.045em;text-transform:uppercase}
.fleet-table-v4 td,.fleet-table-v5 td,.pro-fleet-table td{height:40px;min-height:40px;padding:5px 10px;background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-primary);font-size:12.25px;line-height:1.25}
.fleet-table-v4 tbody tr:nth-child(even),.fleet-table-v5 tbody tr:nth-child(even){background:transparent}
.fleet-table-v4 tbody tr:hover td,.fleet-table-v5 tbody tr:hover td,.pro-fleet-table tbody tr:hover td{background:var(--bg-raised)}
.fleet-table-v4 tbody tr.selected td,.fleet-table-v5 tbody tr.selected td{background:var(--accent-soft)}
.fleet-table-v5 .pinned-col,.fleet-table-v5 .sticky-select{background:var(--bg-surface);box-shadow:none}
.fleet-table-v5 th.pinned-col,.fleet-table-v5 th.sticky-select{background:var(--bg-raised)}
.fleet-table-v4 .cell-main,.fleet-table-v4 td b,.fleet-table-v5 .cell-main,.fleet-table-v5 td b{font-size:12.5px;font-weight:650;color:var(--text-primary)}
.fleet-sort{font-size:9.5px;color:var(--accent)}
.fleet-status,.fleet-age,.statuspill-flat{height:20px;min-height:20px;padding:0 7px;border:0;border-radius:5px;font-size:10.25px;font-weight:550}
.fleet-status.good,.statuspill-flat.completed{background:var(--success-soft);color:var(--success-text)}
.fleet-status.warn{background:var(--warning-soft);color:var(--warning-text)}
.fleet-status.bad,.statuspill-flat.overdue{background:var(--danger-soft);color:var(--danger-text)}
.fleet-age{background:var(--neutral-soft);color:var(--neutral-text)}
.fleet-age.late{background:var(--warning-soft);color:var(--warning-text)}
.fleet-select-col{width:38px;min-width:38px}
.fleet-select-col input{width:15px;height:15px;accent-color:var(--accent)}

/* ---------- drawer ---------- */
.fleet-drawer-bg{background:color-mix(in srgb,var(--legacy-palette-2063) 46%,transparent);backdrop-filter:none}
.fleet-drawer-v5{width:min(1080px,calc(100vw - 360px));min-width:840px;background:var(--bg-canvas);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-lg)}
.fleet-drawer-v5>header{min-height:76px;padding:12px 18px;background:var(--bg-surface);border-bottom:1px solid var(--border);box-shadow:none}
.drawer-identity>span{font-size:9.5px;letter-spacing:.11em;color:var(--accent)}
.drawer-identity h2{font-size:24px;line-height:1.08;margin:4px 0;color:var(--text-primary)}
.drawer-identity p{font-size:11px;color:var(--text-secondary)}
.fleet-drawer-actions button{height:31px;min-height:31px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border);color:var(--text-primary)}
.fleet-drawer-tabs{height:43px;min-height:43px;padding:0 16px;gap:3px;align-items:stretch;background:var(--bg-surface);border-bottom:1px solid var(--border)}
.fleet-drawer-tabs button{height:43px;min-height:43px;padding:0 11px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-secondary);font-size:11.5px;font-weight:600}
.fleet-drawer-tabs button:hover{color:var(--text-primary);background:transparent}
.fleet-drawer-tabs button.active{color:var(--text-primary);border-bottom-color:var(--accent);background:transparent}
.fleet-drawer-tabs button b{margin-left:4px;padding:1px 5px;background:var(--neutral-soft);color:var(--neutral-text);border-radius:5px;font-size:9px}
.fleet-drawer-v5 .fleet-drawer-body{padding:12px 16px 18px;background:var(--bg-canvas);overflow:auto}
.fleet-drawer-footer{min-height:44px;padding:7px 14px;background:var(--bg-surface);border-top:1px solid var(--border)}

/* overview fields */
.drawer-overview-hero{margin-bottom:10px;padding:11px 13px;background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px}
.drawer-overview-hero h3{font-size:15px;color:var(--text-primary)}
.drawer-overview-hero p{font-size:10.5px;color:var(--text-secondary)}
.drawer-edit-field,.drawer-static-field,.service-grid>div,.editable-service-grid>.drawer-edit-field{background:var(--bg-surface);border:1px solid var(--border);border-radius:7px}
.drawer-edit-field>span,.drawer-static-field>span{font-size:9.5px;color:var(--text-tertiary)}
.drawer-edit-field>b,.drawer-static-field>b{font-size:12px;color:var(--text-primary)}

/* ---------- approved tire card — fully integrated with theme ---------- */
.approved-tires{border:1px solid var(--border);border-radius:9px;background:var(--bg-surface);overflow:hidden;box-shadow:none}
.approved-head{min-height:58px;padding:9px 13px;background:var(--bg-surface);border-bottom:1px solid var(--border);color:var(--text-primary)}
.approved-head h3{font-size:16px;line-height:1.2;color:var(--text-primary)}
.approved-head p{font-size:10.5px;color:var(--text-secondary);margin-top:3px}
.approved-head>span{font-size:10px;color:var(--text-tertiary)}
.approved-workspace{grid-template-columns:320px minmax(0,1fr);background:var(--bg-raised);min-height:530px}
.approved-sidebar{background:var(--bg-surface);border-right:1px solid var(--border)}
.approved-inspector{padding:14px;gap:9px;color:var(--text-primary);font-size:12px;max-height:560px}
.approved-inspector header{padding:0;background:transparent;border:0}
.approved-inspector header small{font-size:9.5px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.approved-inspector h3{font-size:15px;margin:3px 0;color:var(--text-primary)}
.approved-inspector p{font-size:11px;color:var(--text-secondary);margin:2px 0}
.approved-inspector-fields{gap:7px}
.approved-inspector label{font-size:10.5px;color:var(--text-secondary);gap:4px}
.approved-inspector input,.approved-inspector textarea{background:var(--bg-inset);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;box-shadow:none}
.approved-inspector input{height:32px;min-height:32px;font-size:13px}
.approved-inspector textarea{min-height:72px;height:72px;font-size:11.5px}
.approved-inspector>button{height:32px;min-height:32px;background:var(--accent);border:1px solid var(--accent);color:var(--text-on-accent);border-radius:6px;font-size:11.5px;font-weight:600}
.approved-inspector h4{font-size:12.5px;color:var(--text-primary);margin:8px 0 0}
.approved-history-list article{padding:8px 0;border-top:1px solid var(--border-subtle)}
.approved-history-list time{font-size:9.5px;color:var(--text-tertiary)}
.approved-history-list b{font-size:11.5px;color:var(--text-primary)}
.approved-history-list p{font-size:10.5px;color:var(--text-secondary)}
.approved-scroll{background:var(--bg-raised);overflow:auto}
.approved-stage{background:var(--bg-raised);color:var(--text-primary)}
.approved-reading{background:var(--bg-surface);border:1px solid var(--border-strong);color:var(--text-primary);border-radius:6px;box-shadow:var(--shadow-sm)}
.approved-reading>b{color:var(--text-primary);font-size:12px;font-weight:650}
.approved-number{background:var(--accent);color:var(--text-on-accent)}
.approved-fields label{color:var(--text-secondary);font-size:10px}
.approved-fields input{height:27px;min-height:27px;background:var(--bg-inset);color:var(--text-primary);border:1px solid var(--border);border-radius:5px;font-size:12px}
.approved-fields input::placeholder{color:var(--text-tertiary)}
.approved-reading.is-focused{background:var(--accent-soft);border-color:var(--accent);outline:1px solid var(--accent);outline-offset:0}
.approved-reading.bad{border-left:3px solid var(--danger)}
.approved-reading.warn{border-left:3px solid var(--warning)}
.approved-footer{min-height:40px;padding:7px 12px;background:var(--bg-surface);border-top:1px solid var(--border);color:var(--text-secondary)}
.approved-footer>span{font-size:10px;color:var(--text-secondary)}
.approved-footer button{height:30px;min-height:30px;border-radius:6px}

/* make the visual map fit the drawer without giant dead zones */
.approved-tires .approved-stage{
  --art-width:clamp(410px,calc((100dvh - 330px)*.82),560px);
  min-width:560px;
  height:calc(var(--art-width)*1.08);
}
.approved-tires .approved-reading{width:calc(50% - var(--art-width)*.215 - 10px);padding:5px 7px;gap:2px}
.approved-tires .approved-reading[data-approved-pos^="R"]{right:10px}
.approved-tires .approved-reading:not([data-approved-pos^="R"]){left:10px}
.approved-tires .approved-art{width:var(--art-width);left:calc(50% - var(--art-width)*.5)}
.approved-tires .approved-wheel{width:calc(var(--art-width)*.052)}

/* ---------- misc density ---------- */
.density-compact .fleet-table-v4 td,.density-compact .fleet-table-v5 td{height:35px;min-height:35px}
.density-compact .fleet-view-tabs button{height:29px;min-height:29px}




/* pass2 tire geometry refinement */
.fleet-drawer-v5{width:min(1040px,calc(100vw - 420px));min-width:820px}
.approved-tires .approved-stage{
  --art-width:clamp(390px,calc((100dvh - 340px)*.76),510px);
  min-width:560px;
  height:calc(var(--art-width)*1.10);
}
.approved-tires .approved-reading{
  width:calc(50% - var(--art-width)*.18 - 8px);
}


.ui-icon{width:16px;height:16px;display:block;flex:0 0 auto}
#collapse,.topbar button,#logout{display:flex;align-items:center;justify-content:center;gap:7px}
#collapse{width:30px;height:30px;min-height:30px;background:transparent;border:0;color:var(--text-secondary)}
#collapse:hover{background:var(--bg-raised);color:var(--text-primary)}
.search>.ui-icon{width:15px;height:15px;color:var(--text-tertiary);margin-left:7px}