/* Fleet admin: pop-up windows, Settings tiles, the library, insights, the weekly snapshot and badges.
   Built on the page's design tokens (tokens/*.css) so everything matches the rest of the Vehicle Log. */

/* NcModal (shared /timesheet/modal.js) inside the Vehicle Log: the page's .btn is full-width, so size it for a footer */
.ncm .btn{ width:auto; min-height:44px; padding:0 20px; font-size:var(--fs-sm) }
.ncm-f .btn{ min-width:96px }
.ncm .field{ margin-bottom:var(--space-3) }
.ncm input,.ncm select{ height:44px; font-size:var(--fs-sm) }
.ncm textarea{ font-size:var(--fs-sm) }
.ncm label{ margin-bottom:6px }
.ncm .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) }
@media (max-width:560px){ .ncm .grid2{ grid-template-columns:1fr } }
.ncm .switchrow{ border-top:1px solid var(--border); padding:10px 0 }
.ncm .switchrow span{ font-size:var(--fs-sm) }
.ncm .switchrow small{ display:block; font-size:var(--fs-xs); color:var(--text-subtle) }
.hint{ font-size:var(--fs-xs); color:var(--text-muted); line-height:var(--lh-snug); margin:4px 0 0 }

/* Fleet admin tabs on a phone: one row that scrolls sideways, not five rows of buttons */
@media (max-width:560px){
  #adminTabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:calc(-1 * var(--space-4)); margin-right:calc(-1 * var(--space-4)); padding-left:var(--space-4); padding-right:var(--space-4) }
  #adminTabs::-webkit-scrollbar{ display:none }
  #adminTabs .tab{ flex:0 0 auto }
}

/* Settings tiles */
.set-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-3); margin:var(--space-2) 0 var(--space-6) }
.set-tile{ display:flex; flex-direction:column; gap:6px; text-align:left; font-family:inherit; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); cursor:pointer; color:var(--text-body); transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out) }
.set-tile:hover,.set-tile:focus-visible{ border-color:var(--nc-cyan); box-shadow:var(--shadow-sm); outline:none; transform:translateY(-2px) }
.set-tile .st-h{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--nc-indigo) }
.set-tile .st-v{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5 }
.set-tile .st-e{ margin-top:auto; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--nc-indigo) }
.tear{ display:inline-block; width:12px; height:12px; flex:0 0 auto; background:var(--nc-cyan); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C50 2 92 46 92 58 A42 42 0 1 1 8 58 C8 46 50 2 50 2 Z'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C50 2 92 46 92 58 A42 42 0 1 1 8 58 C8 46 50 2 50 2 Z'/></svg>") center/contain no-repeat }
.sectlabel{ display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--nc-cyan-700); margin:var(--space-4) 0 var(--space-2) }
.sectlabel:first-child{ margin-top:0 }
.edit-list{ display:flex; flex-direction:column; gap:6px }
.edit-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; background:var(--surface-card) }
.edit-row input[type=text]{ height:38px; flex:1; min-width:0 }
.edit-row select{ height:38px; width:auto; min-width:120px }
.edit-row .mini{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap }
.edit-row .mini input{ width:16px; height:16px; accent-color:var(--nc-indigo) }
.edit-row.off{ opacity:.55 }
.icon-btn{ width:32px; height:32px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface-card); color:var(--text-muted); cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1; padding:0 }
.icon-btn:hover{ border-color:var(--nc-indigo); color:var(--nc-indigo) }
.icon-btn:disabled{ opacity:.35; cursor:default }
.num-in{ width:90px !important; height:38px !important; text-align:right }
.seg3{ display:inline-flex; border:1.5px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden }
.seg3 button{ border:0; background:transparent; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-xs); color:var(--text-muted); padding:7px 14px; cursor:pointer }
.seg3 button.on{ background:var(--nc-indigo); color:#fff }

/* status pills (library, insights) */
.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--radius-pill); font-family:var(--font-display); font-size:11px; font-weight:var(--fw-semibold); white-space:nowrap; line-height:1.3 }
.pill.ok{ background:var(--nc-green-50); color:var(--nc-green-700) }
.pill.due{ background:var(--nc-orange-50); color:var(--nc-orange-700) }
.pill.expired{ background:var(--status-danger-bg); color:var(--status-danger) }
.pill.missing{ background:var(--nc-orange-50); color:var(--nc-orange-700); border:1px dashed var(--nc-orange-100) }
.pill.optional,.pill.na{ background:var(--nc-grey-100); color:var(--nc-grey-700) }
.pill.info{ background:var(--nc-indigo-50); color:var(--nc-indigo) }

/* chips that filter the list behind them */
.chips{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin:0 0 var(--space-4) }
.chip{ display:flex; flex-direction:column; align-items:flex-start; min-width:108px; background:var(--surface-card); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:8px 14px; font-family:inherit; cursor:pointer; text-align:left; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) }
.chip b{ font-family:var(--font-display); font-size:var(--fs-h5); font-weight:var(--fw-extrabold); color:var(--nc-indigo); line-height:1.15; font-variant-numeric:tabular-nums }
.chip span{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:var(--fw-semibold) }
.chip:hover{ border-color:var(--nc-cyan); box-shadow:var(--shadow-sm) }
.chip.on{ border-color:var(--nc-indigo); box-shadow:inset 0 0 0 1px var(--nc-indigo) }
.chip.warn b{ color:var(--status-danger) } .chip.soon b{ color:var(--nc-orange-700) } .chip.good b{ color:var(--nc-green-700) }
.toolrow{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin:0 0 var(--space-3) }
.toolrow input[type=search]{ height:44px; width:auto; min-width:200px; flex:1; border-radius:var(--radius-pill); padding:0 var(--space-5) }
.toolrow .seg3{ flex:0 0 auto }

/* library rows */
.lib-list{ display:flex; flex-direction:column; gap:var(--space-2) }
.lib-row{ display:flex; align-items:center; gap:var(--space-3); background:var(--surface-card); border:1px solid var(--border); border-left:4px solid var(--nc-green); border-radius:var(--radius-md); padding:10px 14px; cursor:pointer; text-align:left; font-family:inherit; width:100%; transition:box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) }
.lib-row:hover{ box-shadow:var(--shadow-sm); border-color:var(--nc-cyan) }
.lib-row.w-expired{ border-left-color:var(--status-danger) } .lib-row.w-missing,.lib-row.w-due{ border-left-color:var(--nc-orange) } .lib-row.w-optional,.lib-row.w-na{ border-left-color:var(--nc-grey-300) }
.lib-row .grow{ flex:1; min-width:0 }
.lib-row h4{ margin:0; font-family:var(--font-display); font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--text-primary) }
.lib-row .pills{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px }
.lib-row .go{ color:var(--text-subtle); font-size:18px }
.doc-card{ border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:var(--space-3); background:var(--surface-card) }
.doc-card .dh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.doc-card .dh b{ font-family:var(--font-display); font-size:var(--fs-body); color:var(--text-primary) }
.doc-card .dm{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:6px; line-height:1.55 }
.doc-card .da{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px }
.doc-card .da .btn{ width:auto; min-height:36px; padding:0 14px; font-size:var(--fs-xs) }
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.thumbs img,.thumbs .pdf{ height:74px; border-radius:8px; border:1px solid var(--border); cursor:pointer; background:var(--nc-grey-100); object-fit:cover }
.thumbs .pdf{ width:58px; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--nc-indigo) }
.scan-drop{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border:2px dashed var(--border-strong); border-radius:var(--radius-md); padding:22px 16px; background:var(--surface-subtle); cursor:pointer }
.scan-drop:hover{ border-color:var(--nc-cyan) }
.scan-drop b{ font-family:var(--font-display); color:var(--nc-indigo) }
.scan-drop small{ color:var(--text-muted); font-size:var(--fs-xs) }
.scan-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--space-4); align-items:start }
@media (max-width:720px){ .scan-split{ grid-template-columns:1fr } }
.scan-prev{ position:sticky; top:0; display:flex; flex-direction:column; gap:8px }
.scan-prev img{ width:100%; border-radius:10px; border:1px solid var(--border); background:var(--nc-grey-100) }
.scan-prev .pdf{ display:grid; place-items:center; height:140px; border-radius:10px; border:1px solid var(--border); background:var(--nc-grey-100); color:var(--nc-indigo); font-weight:700 }
.scan-note{ font-size:var(--fs-xs); border-radius:var(--radius-sm); padding:8px 12px; margin:0 0 var(--space-3); line-height:var(--lh-snug) }
.scan-note.ok{ background:var(--nc-green-50); color:var(--nc-green-700) }
.scan-note.warn{ background:var(--nc-orange-50); color:var(--nc-orange-700) }
.scan-note.busy{ background:var(--surface-indigo); color:var(--nc-indigo) }
.field.found input,.field.found select{ border-color:var(--nc-green) }
.hist{ display:flex; flex-direction:column; gap:6px; margin-top:6px }
.hist div{ font-size:var(--fs-xs); color:var(--text-muted); border-top:1px solid var(--border); padding-top:6px }

/* insights */
.ins-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-3); margin-bottom:var(--space-5) }
.ins-tile{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; display:flex; flex-direction:column; gap:1px; text-align:left; font-family:inherit }
button.ins-tile{ cursor:pointer } button.ins-tile:hover{ border-color:var(--nc-cyan); box-shadow:var(--shadow-sm) }
.ins-tile b{ font-family:var(--font-display); font-size:22px; color:var(--nc-indigo); font-variant-numeric:tabular-nums; line-height:1.2 }
.ins-tile span{ font-size:11.5px; color:var(--text-muted); font-weight:var(--fw-semibold) }
.ins-tile small{ font-size:11px; color:var(--text-subtle) }
.ins-tile.warn b{ color:var(--nc-orange-700) }
.ins-tile .d{ font-size:11px; font-weight:700 } .ins-tile .d.up{ color:var(--nc-green-700) } .ins-tile .d.down{ color:var(--nc-orange-700) }
.ins-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin:var(--space-4) 0 }
@media (max-width:860px){ .ins-grid{ grid-template-columns:1fr } }
.ins-card{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5) }
.ins-card h5{ margin:var(--space-4) 0 6px; font-size:11.5px; font-weight:var(--fw-semibold); color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em }
.ins-wide{ grid-column:1/-1 }
.ins-filter{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--space-3) }
.ins-filter button{ font-family:inherit; border:1.5px solid var(--border); background:var(--surface-card); color:var(--text-muted); font-weight:var(--fw-semibold); font-size:12px; padding:5px 11px; border-radius:var(--radius-pill); cursor:pointer }
.ins-filter button.on{ border-color:var(--nc-indigo); background:var(--nc-indigo); color:#fff }
.flag{ background:var(--surface-card); border:1px solid var(--border); border-left:4px solid var(--nc-grey-300); border-radius:var(--radius-md); padding:12px 15px }
.flag.high{ border-left-color:var(--nc-orange) } .flag.medium{ border-left-color:var(--nc-cyan) } .flag.low{ border-left-color:var(--nc-grey-300) }
.flag.rev{ opacity:.62 }
.flag h4{ margin:0; font-family:var(--font-display); font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--text-primary) }
.flag .meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px }
.flag .fd{ font-size:12.5px; color:var(--text-body); margin-top:6px; line-height:1.5 }
.flag .fa{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center }
.flag .fa .btn{ width:auto; min-height:34px; padding:0 13px; font-size:var(--fs-xs) }
.flags{ display:flex; flex-direction:column; gap:var(--space-2) }
.okbox{ background:var(--nc-green-50); border:1px solid var(--nc-green-100); color:var(--nc-green-700); border-radius:var(--radius-md); padding:12px 14px; font-size:var(--fs-sm) }
table.grid td.l, table.grid th.l{ text-align:left }
table.grid td.warn{ color:var(--status-danger); font-weight:var(--fw-semibold) }
table.grid td.soft{ color:var(--nc-orange-700); font-weight:var(--fw-semibold) }

/* weekly snapshot (story cards, as in Content) */
.rc-back{ position:fixed; inset:0; z-index:900; background:rgba(20,30,60,.55); display:grid; place-items:center; animation:rcFade .2s ease-out }
.rc{ position:relative; width:min(440px,100vw); height:min(760px,100dvh); background:#fff; border-radius:26px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-lg) }
@media (max-width:480px){ .rc{ border-radius:0 } }
.rc-segs{ display:flex; gap:5px; padding:12px 14px 0; position:relative; z-index:3 }
.rc-seg{ flex:1; height:4px; border-radius:2px; background:rgba(43,62,120,.18); overflow:hidden }
.rc-seg i{ display:block; height:100%; width:0; background:var(--nc-indigo) }
.rc-seg.done i{ width:100% } .rc-seg.run i{ animation:rcFill var(--dur,6s) linear forwards }
.rc.paused .rc-seg.run i{ animation-play-state:paused }
@keyframes rcFill{ from{ width:0 } to{ width:100% } }
@keyframes rcFade{ from{ opacity:0 } to{ opacity:1 } }
.rc-head{ display:flex; align-items:center; gap:10px; padding:12px 14px 6px; position:relative; z-index:3 }
.rc-head .tear{ width:28px; height:28px; background:var(--nc-indigo) }
.rc-head b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--text-primary) }
.rc-head small{ font-size:12px; color:var(--text-muted) }
.rc-btn{ margin-left:auto; border:0; background:transparent; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--text-primary); font-size:18px }
.rc-btn + .rc-btn{ margin-left:0 } .rc-btn:hover{ background:var(--nc-grey-100) }
.rc-stage{ position:relative; flex:1; overflow:hidden; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation }
.rc-card{ position:absolute; inset:0; padding:18px 22px 24px; display:flex; flex-direction:column; background:var(--bg,#fff); opacity:0; transform:translateX(26px); transition:opacity .35s, transform .35s; pointer-events:none; overflow-x:hidden; overflow-y:auto }
.rc-card.on{ opacity:1; transform:none; pointer-events:auto } .rc-card.gone{ transform:translateX(-26px) }
.rc-card .deco{ position:absolute; width:220px; height:220px; right:-60px; top:-40px; background:var(--acc,var(--nc-cyan)); opacity:.13; pointer-events:none; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C50 2 92 46 92 58 A42 42 0 1 1 8 58 C8 46 50 2 50 2 Z'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C50 2 92 46 92 58 A42 42 0 1 1 8 58 C8 46 50 2 50 2 Z'/></svg>") center/contain no-repeat }
.rc-card h2{ margin:10px 0 4px; font-family:var(--font-display); font-size:25px; line-height:1.2; color:var(--nc-indigo); text-align:center; text-wrap:balance }
.rc-card .rc-sub{ margin:0 0 18px; text-align:center; color:var(--text-muted); font-size:14.5px }
.rc-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:auto 0 }
.rc-tile{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px 14px 12px; box-shadow:var(--shadow-xs) }
.rc-tile .l{ font-size:12.5px; color:var(--text-muted) } .rc-tile .n{ font-family:var(--font-display); font-size:30px; font-weight:var(--fw-bold); color:var(--text-primary); line-height:1.15; font-variant-numeric:tabular-nums }
.rc-d{ display:inline-block; margin-top:4px; font-size:12px; font-weight:700; color:var(--text-muted) } .rc-d.up{ color:var(--nc-green-700) } .rc-d.down{ color:var(--nc-orange-700) }
.rc-list{ display:flex; flex-direction:column; gap:9px; margin:auto 0 }
.rc-item{ display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px }
.rc-item b{ display:block; font-size:13.5px; color:var(--text-primary) } .rc-item small{ color:var(--text-muted); font-size:12px }
.rc-item .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--nc-orange) }
.rc-item .dot.red{ background:var(--status-danger) } .rc-item .dot.green{ background:var(--nc-green) }
.rc-note{ margin:auto 0; text-align:center; color:var(--text-muted); font-size:14.5px }
.rc-cta{ display:flex; flex-direction:column; gap:10px; margin-top:auto }
.rc-cta .btn{ width:100%; min-height:48px }
.rc-count{ font-family:var(--font-display); font-size:64px; font-weight:var(--fw-bold); color:var(--nc-indigo); text-align:center; line-height:1; margin:auto 0 6px; font-variant-numeric:tabular-nums }
.rc-card .ncb-row{ justify-content:center }
@media (prefers-reduced-motion:reduce){ .rc-card{ transition:none; transform:none } .rc-seg.run i{ animation:none; width:100% } }

/* driver badges on the Vehicle Log */
.game-card{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin:0 0 var(--space-5); box-shadow:var(--shadow-sm) }
.game-card .gh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.game-card .gh b{ font-family:var(--font-display); font-size:var(--fs-body); color:var(--text-primary) }
.game-card .pts{ margin-left:auto; font-family:var(--font-display); font-weight:var(--fw-extrabold); color:var(--nc-indigo); font-variant-numeric:tabular-nums }
.game-card .gs{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px }
.game-card .ncb-row{ margin:10px 0 2px }
.game-card .gm-lvl .ncb-medal{ width:auto; padding:0 }
.game-card .gm-lvl .ncb-l:empty{ display:none }
.game-card .btn-ghost{ padding:4px 0 }
.ladder{ display:flex; flex-direction:column; gap:6px }
.ladder .lr{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 12px; font-size:var(--fs-sm) }
.ladder .lr .rk{ font-family:var(--font-display); font-weight:var(--fw-extrabold); color:var(--text-subtle); text-align:center }
.ladder .lr.top .rk{ color:var(--nc-orange-700) }
.ladder .lr .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary) }
.ladder .lr .nm small{ color:var(--text-muted); margin-left:6px }
.ladder .lr .sc{ font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--nc-indigo); font-variant-numeric:tabular-nums }
.ladder .lr.me{ border-color:var(--nc-indigo); box-shadow:inset 0 0 0 1px var(--nc-indigo) }