/* Giebel Dispo · Concept 02 / preview-only interface.
 * All desktop UI source files remain unchanged. */
:root[data-theme="dark"]{
 --ui-page:#0a1520;--ui-top:#0e1b29;--ui-panel:#142536;
 --ui-panel-2:#172a3a;--ui-head:#192e40;
 --ui-stroke:#30485a;--ui-faint:#203648;--ui-text:#eff5fa;
 --ui-muted:#95acbe;--ui-accent:#55a9fa;
 --ui-input:#182c3e;--ui-hover:#213b4f;
 --ui-shadow:0 8px 32px rgba(0,0,0,.2);
}
:root[data-theme="light"]{
 --ui-page:#f2f5f8;--ui-top:#fcfdff;--ui-panel:#fff;
 --ui-panel-2:#f7f9fc;--ui-head:#f0f5fa;
 --ui-stroke:#cfdae5;--ui-faint:#e3eaf1;--ui-text:#183047;
 --ui-muted:#60788e;--ui-accent:#1475d5;
 --ui-input:#f7f9fc;--ui-hover:#e7f2fc;--ui-shadow:0 5px 24px rgba(28,64,100,.08);
}
*{scrollbar-width:thin}
body{background:var(--ui-page)!important}
#previewBanner{
 display:flex;align-items:center;gap:9px;position:relative;z-index:160;
 min-height:34px;padding:5px 18px;background:#10243a;
 border-bottom:1px solid #24425b;color:#bed4e7;
 font:600 10px Inter,"Segoe UI",Arial,sans-serif;
}
#previewBanner strong{
 padding:4px 8px;border:1px solid #3f698d;border-radius:5px;
 color:#e2f1ff;font-size:9px;letter-spacing:.8px;font-weight:900;
 background:#173754;white-space:nowrap
}
#previewBanner #previewInfo{font-size:10px;color:#9cb9cc;flex:1}
#previewBanner .preview-tools{display:flex;align-items:center;gap:5px}
#previewBanner button{
 background:transparent;border:1px solid #3a5c77;color:#e7f5ff;
 border-radius:6px;font-size:10px;font-weight:740;
 padding:6px 10px;min-height:26px;cursor:pointer
}
#previewBanner button:hover{border-color:#6bb9ff;background:#1b3b57}
#previewBanner + .app-shell .top{top:0}
.app-shell{min-height:100vh}
.top{
 position:relative!important;top:0!important;z-index:70;
 min-height:58px;padding:7px 18px!important;
 background:var(--ui-top)!important;
 border-bottom:1px solid var(--ui-faint);
 gap:22px
}
.brand{min-width:142px;gap:6px}
.brand-mark{
 display:grid;place-items:center;
 width:35px;height:35px;font-size:27px;letter-spacing:-2.5px;
 background:#1478db;border-radius:10px;color:white;
 box-shadow:inset 0 1px #ffffff4d
}
.brand-wordmark{letter-spacing:.15px;font-size:13px}
.brand-wordmark b{font-size:13px;color:var(--ui-accent)}
.version-pill{display:none!important}
.subnav{min-height:39px}
.tabs{gap:4px}
.tab{
 min-height:36px;border:1px solid transparent;border-radius:8px;
 font-weight:760;font-size:12px;
 padding:7px 14px;background:transparent!important;
 color:var(--ui-muted);letter-spacing:0;
}
.tab.active{
 color:var(--ui-text);background:var(--ui-panel-2)!important;
 border-color:var(--ui-stroke);box-shadow:inset 0 -2px var(--ui-accent)
}
.tab:hover{background:var(--ui-panel-2)!important;border-color:var(--ui-faint)}
.tab .nav-symbol{font-size:15px;color:var(--ui-muted)}
.tab.active .nav-symbol{color:var(--ui-accent)}
.tab span:not(.nav-symbol){padding:2px 6px}
.top-actions{margin-left:auto;gap:6px}
.header-date{
 padding:6px 10px;border:1px solid var(--ui-stroke);
 background:var(--ui-panel-2);color:var(--ui-muted);
 border-radius:8px;min-height:34px;font-size:10px
}
.header-date strong{color:var(--ui-text)}
.header-icon-button{
 min-height:34px;background:var(--ui-panel-2);border:1px solid var(--ui-stroke);
 color:var(--ui-text);border-radius:8px;padding:6px 10px
}
.workspace-status{display:none!important}
.view{padding:11px 18px 32px}
.button{
 background:var(--ui-panel-2)!important;color:var(--ui-text)!important;
 border:1px solid var(--ui-stroke)!important;border-radius:8px!important;
 font-size:11px!important;font-weight:700!important;
 padding:7px 11px!important;box-shadow:none!important;
}
.button:hover{background:var(--ui-hover)!important;border-color:#66a5d7!important}
.button-primary{
 background:#157ade!important;border-color:#1685ed!important;color:white!important
}
.button-primary:hover{background:#0566c2!important}
#boardView .board-toolbar{
 min-height:51px;background:var(--ui-panel)!important;
 padding:8px 11px;border:1px solid var(--ui-stroke);
 border-radius:10px 10px 0 0;gap:8px
}
.toolbar-info strong{font-size:13px;color:var(--ui-text);letter-spacing:-.15px}
.toolbar-actions{gap:6px}
.toolbar-actions .button{min-height:32px}
.search{
 border:1px solid var(--ui-stroke);background:var(--ui-input);
 min-height:32px;border-radius:7px;padding:0 9px
}
.search input{
 min-height:30px;height:30px;width:178px;
 font-size:11px;color:var(--ui-text)
}
.search:focus-within{outline:1px solid var(--ui-accent)}
.toolbar-more-menu{
 border:1px solid var(--ui-stroke);border-radius:9px;
 background:var(--ui-panel);box-shadow:var(--ui-shadow);
 padding:6px;min-width:192px;z-index:200
}
.toolbar-more-menu .button{width:100%;text-align:left;justify-content:flex-start}
.needs-panel{
 padding:6px 11px 7px;background:var(--ui-panel);
 border:1px solid var(--ui-stroke);border-top:0
}
.needs-header{gap:7px;margin-bottom:5px}
.needs-header strong{
 font-size:10px;font-weight:800;letter-spacing:.1px;color:var(--ui-muted)
}
.needs-header span{display:none}
.needs-palette{gap:5px}
.need-template,[data-theme=dark] .need-template{
 background:var(--ui-panel-2);border:1px solid var(--ui-stroke);
 border-radius:6px;color:var(--ui-text);
 font-size:10px;font-weight:740;
 padding:5px 9px;min-height:25px;box-shadow:none
}
.need-template:hover,.need-template.selected,
[data-theme=dark] .need-template:hover,[data-theme=dark] .need-template.selected{
 background:#d9ebff;color:#15436b;border-color:#71aeec
}
.board-scroll{
 background:transparent;border:1px solid var(--ui-stroke);
 border-top:0;border-radius:0 0 11px 11px;
 padding:10px;min-height:300px
}
.board{gap:14px}
.board-section-title{
 border:0;margin:0 0 6px;padding:2px 2px 7px;
 font-size:12px;font-weight:850;letter-spacing:.03em;
 color:var(--ui-muted)
}
.board-section-title:before{height:12px;width:3px;background:var(--ui-accent)}
.board-section-grid{gap:7px!important}
.site-card{
 border:1px solid var(--ui-stroke);border-radius:8px;
 background:var(--ui-panel);box-shadow:none;
 transition:border-color .14s,box-shadow .14s,transform .14s
}
.site-card:hover{border-color:#4a85b1;box-shadow:0 4px 15px rgba(0,0,0,.09)}
.site-header,.site-card.is-status .site-header{
 min-height:31px;background:var(--ui-head)!important;
 padding:5px 8px;border-bottom:1px solid var(--ui-faint);
 align-items:center
}
.site-header:before{
 width:3px;min-height:14px;align-self:stretch;
 background:#4eaaff;border-radius:4px;margin-right:5px
}
.site-number{font-size:11px;font-weight:850;font-variant-numeric:tabular-nums}
.site-name{font-size:11px;font-weight:750}
.site-title-line{gap:5px;flex-wrap:nowrap!important;white-space:nowrap}
.site-subtitle{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-attention{border-radius:6px}
.collapse{
 border:0;background:transparent;color:var(--ui-muted);
 width:21px;height:21px;font-size:13px;
}
.site-body{padding:6px;min-height:25px}
.person,.former-person{
 margin:0 0 4px;min-height:24px;
 border-radius:5px;border:1px solid var(--ui-stroke);
 border-left:2px solid var(--category);
 background:var(--ui-panel-2);
 padding:4px 7px;color:var(--ui-text);
 gap:5px;box-shadow:none
}
.person-name{font-size:10px;font-weight:720;line-height:1.15}
.drag-handle{font-size:9px;opacity:.38}
.person-detail{font-size:9px;color:var(--ui-muted)}
.person:hover{background:var(--ui-hover)}
.person.moved{background:#ffe29a!important;color:#583c0d!important}
.person.moved .person-name{color:#583c0d!important}
.person-tag{border-radius:4px}
.former-person.transfer-ghost{background:#fff0bc!important;border-color:#e5c76b}
.former-person.absence-ghost{background:#2a3b4a!important}
[data-theme=light] .former-person.absence-ghost{
 background:#e6ebf0!important;color:#566b7c!important
}
[data-theme=light] .former-person.absence-ghost .former-name{color:#6c8193}
.site-fleet{border-color:var(--ui-faint)}
.site-truck{
 border-radius:5px;background:#22483f!important;
 border-color:#467563;min-height:23px;font-size:10px
}
[data-theme=light] .site-truck{
 background:#e4f2eb!important;border-color:#b4d9c7
}
.site-need{border-radius:5px}
.crew-group-card{
 border:1px solid var(--ui-stroke);border-radius:9px;
 background:var(--ui-panel);box-shadow:none
}
.crew-group-header{
 background:var(--ui-head)!important;border-bottom:1px solid var(--ui-faint);
 font-size:11px;padding:7px 9px
}
.crew-group-members{padding:7px;gap:6px}
.board-special-row{
 grid-template-columns:minmax(360px,2.1fr) repeat(3,minmax(180px,1fr));
 gap:9px
}
.board-special-row .board-section-title{font-size:11px;line-height:1.2}
.board-special-row .crew-group-members{grid-template-columns:repeat(2,minmax(0,1fr))}
.board-section-status .site-card{min-height:0}
#trucksView .page-title-row,#peopleView .page-title-row,#changesView .page-title-row{margin-bottom:9px}
#trucksView .overline,#peopleView .overline,#changesView .overline{display:none}
#trucksView .page-title-row p,#peopleView .page-title-row p,
#changesView .page-title-row p{display:none}
.page-title-row h2{font-size:17px!important;letter-spacing:-.2px;margin:2px 0}
.truck-color-legend{
 background:var(--ui-panel);border-color:var(--ui-stroke);
 border-radius:9px;padding:7px 10px
}
.truck-legend-note{display:none}
.truck-color-chip{border-radius:5px;font-size:10px}
.truck-sheet-container{
 border:1px solid var(--ui-stroke);border-radius:9px;
 background:var(--ui-panel);max-height:calc(100vh - 240px);
 box-shadow:none
}
.truck-sheet-table th{
 min-height:32px;background:var(--ui-head)!important;
 font-size:11px;font-weight:800;color:var(--ui-text)!important
}
.truck-sheet-row{height:30px}
.truck-sheet-row>td{height:30px;border-right:1px solid rgba(69,102,126,.16)}
.truck-cell-input{height:29px;line-height:28px;font-size:11px}
.truck-table-colors:focus-within .truck-row-swatches,
.truck-table-colors.palette-open .truck-row-swatches,
.truck-table-colors:hover .truck-row-swatches{
 position:absolute;z-index:140;min-width:155px;
 padding:5px;background:var(--ui-panel);height:31px;
 border:1px solid var(--ui-stroke);border-radius:7px;
 box-shadow:var(--ui-shadow)
}
.truck-table-colors.palette-open .truck-swatch{display:inline-block}
.truck-type-input{font-weight:750}
.people-list,.change-history{background:var(--ui-panel);border-radius:9px}
.people-summary,.change-history summary{color:var(--ui-muted)}
#settingsDialog .dialog p{font-size:11px}
#previewBanner button:focus-visible,
.toolbar-more summary:focus-visible,
.site-card button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media(min-width:1440px){
 .board-section-site>.board-section-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(max-width:1350px){
 .top{gap:10px;padding:7px 12px!important;flex-wrap:wrap}
 .subnav{order:3;flex-basis:100%;min-height:32px}
 .view{padding:10px 11px 22px}
 .tabs{overflow-x:auto}
 .tab{padding:7px 10px}
 .board-special-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
 .top{position:relative;display:flex;gap:9px;padding:9px 11px!important;align-items:center}
 .brand{min-width:110px}
 .brand-mark{width:30px;height:30px;font-size:24px}
 .brand-wordmark{display:flex;font-size:11px}
 .brand-wordmark b{font-size:11px}
 .top-actions{margin-left:auto}
 .header-date{padding:6px;font-size:10px}
 .header-date strong{font-size:10px}
 .header-icon-button{padding:6px;font-size:11px}
 .subnav{min-width:0;order:3;width:100%;overflow:auto}
 .tabs{width:max-content;min-width:100%;gap:2px}
 .tab{font-size:11px;min-height:35px;padding:7px 9px}
 .view{padding:8px 8px 20px}
 #boardView .board-toolbar{flex-wrap:wrap;gap:6px;padding:8px}
 .toolbar-info{flex:1}
 .toolbar-actions{width:100%;gap:5px;flex-wrap:nowrap}
 .toolbar-actions .button{min-height:34px;padding:7px!important}
 .toolbar-actions .search{flex:1;min-width:0}
 .search input{width:100%;min-width:0}
 .needs-panel{padding:5px 9px 7px}
 .board-scroll{padding:8px 6px}
 .board-section-grid{grid-template-columns:repeat(1,minmax(0,1fr))!important}
 .board-section-title{font-size:11px}
 .board-special-row{grid-template-columns:1fr;gap:8px}
 .board-special-row .board-section-grid{grid-template-columns:1fr!important}
 .board-special-row .crew-group-members{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-header{min-height:32px}
 .person-name{font-size:11px}
 .person,.former-person{min-height:25px}
 .truck-color-legend{font-size:9px;gap:4px;overflow:auto}
 .truck-sheet-container{max-height:none}
}
@media(max-width:390px){
 .brand{min-width:95px}
 .brand-wordmark{font-size:10px}
 .header-date strong{font-size:9px}
 .top-actions{gap:4px}
 .tab{padding:7px 8px}
 .board-special-row .crew-group-members{grid-template-columns:1fr}
}
@media print{
 #previewBanner{display:none!important}
}