/* Fleet Service Tracker v0.12.0 — grouping, drawer, catalogue, MEX, field path, edit mode, usage calendar, roles, SaaS bootstrap and requests */

.appVersionFooter{position:fixed;right:14px;bottom:10px;z-index:20;font-size:10px;opacity:.55;pointer-events:none}
.facetRow,.viewRow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.facetChip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:750}
.facetChip.active{background:var(--accentSoft);border-color:var(--accent);color:var(--accent2)}
.assetSummary{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 8px;font-size:11px;color:var(--muted)}
.groupHead td{background:#f4f7f6 !important;font-weight:800;font-size:11px;letter-spacing:.01em;cursor:pointer;position:sticky;left:0}
.groupHead .groupCount{margin-left:8px;font-weight:650;color:var(--muted);font-size:10px}
.groupHead .groupToggle{display:inline-block;width:14px;margin-right:6px}
tr.groupHidden{display:none}
tr.assetRow{cursor:pointer}
.drawerPanel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:80;background:var(--panel,#fff);border-left:1px solid var(--line);box-shadow:var(--shadow2);transform:translateX(100%);transition:transform .2s ease;overflow:auto;padding:18px 18px 40px}
.drawerPanel.open{transform:none}
.drawerScrim{position:fixed;inset:0;background:rgba(10,16,24,.4);z-index:70;opacity:0;pointer-events:none;transition:.2s}
.drawerScrim.open{opacity:1;pointer-events:auto}
.drawerHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.bomTable{min-width:0 !important}
.bomTable td,.bomTable th{font-size:11px}
.partLink{border:0;background:none;padding:0;color:var(--accent2);font-weight:750;text-decoration:underline;cursor:pointer}
.woLine{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.woLine select{max-width:min(260px,100%);min-width:118px}
.woLine select:first-child{max-width:150px;min-width:110px}
.woLines{display:grid;gap:4px;margin-top:4px}
option.woExact{font-weight:800;color:#167f88;background:#e7f6f4}
option.woAlternate{font-weight:750;color:#126b76;background:#e2f5f4}
option.woCheck{font-weight:750;color:#785716;background:#fff3d2}
option.woOther{color:#69756e}
.woFitmentLegend{display:flex;flex-basis:100%;flex-wrap:wrap;gap:4px 8px;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.25}
.woFitmentKey{white-space:nowrap}
.woFitmentKey.exact{color:#176543;font-weight:750}
.woFitmentKey.alternate{color:#126b76;font-weight:750}
.woFitmentKey.check{color:#785716;font-weight:750}
.woFitmentKey.other{color:var(--muted)}
.woAlt{background:#e2f5f4;color:#126b76}
.woOther{background:#edf1ee;color:#69756e}
html[data-theme="dark"] option.woExact{color:#8cf1c0;background:rgba(115,239,174,.14)}
html[data-theme="dark"] option.woAlternate{color:#a4f2f4;background:rgba(114,230,236,.13)}
html[data-theme="dark"] option.woCheck{color:#f1d48e;background:rgba(241,197,106,.16)}
html[data-theme="dark"] option.woOther{color:#aebac1;background:#202a3a}
html[data-theme="dark"] .woFitmentKey.exact{color:#8cf1c0}
html[data-theme="dark"] .woFitmentKey.alternate{color:#a4f2f4}
html[data-theme="dark"] .woFitmentKey.check{color:#f1d48e}
html[data-theme="dark"] .woAlt{background:rgba(114,230,236,.13);color:#a4f2f4}
html[data-theme="dark"] .woOther{background:#202a3a;color:#aebac1}
.snapGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.snapStat{padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.4)}
.snapStat b{display:block;font-size:22px;letter-spacing:-.03em}
.snapStat span{font-size:10px;color:var(--muted)}
.mexMap table{min-width:640px}
.mexPreview{max-height:320px}
.importReport{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;white-space:pre-wrap;background:rgba(0,0,0,.04);padding:10px;border-radius:10px}
.photoRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photoRow img{width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.idQueue .tablewrap{max-height:280px}
.fieldExtras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dueSoon{color:#8a5a12;font-weight:750}
.overdue{color:#922d20;font-weight:800}
.clickableToken{cursor:pointer}
.sponsorLink{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 4px 6px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#f3d6e0;background:rgba(255,255,255,.04);font-size:10px;font-weight:750;text-decoration:none;letter-spacing:.02em}
.sponsorLink:hover{border-color:rgba(248,113,168,.5);color:#fff;background:rgba(248,113,168,.12)}
.drawerSession{flex:0 0 auto;margin:8px 4px 4px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.05)}
.drawerSession.hidden{display:none!important}
.drawerSession b{display:block;color:#fff;font-size:11px;word-break:break-all}
.drawerSession small{display:block;margin-top:4px;color:rgba(255,255,255,.62);font-size:9px}
.drawerSession button{width:100%;margin-top:8px;min-height:42px;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.editModeToggle{border-color:rgba(114,230,236,.55) !important;color:#d8ffff !important;background:rgba(28,128,139,.22) !important;font-weight:800}
.editModeToggle.active{background:rgba(114,230,236,.34) !important;box-shadow:0 0 0 1px rgba(114,230,236,.4),0 4px 14px rgba(114,230,236,.16)}
.editModeHint{line-height:1.45}
.editorCard{border-color:rgba(114,230,236,.4);background:linear-gradient(135deg,rgba(114,230,236,.09),rgba(255,255,255,.02))}
.editorCard .sectionHead{align-items:flex-start}
.editorCard .formgrid{margin-top:12px}
.editorCard textarea{min-height:66px}
.editorStatus{flex:1 1 180px;align-self:center;min-height:1.3em}
.editorStatus.error{color:#b42318;font-weight:700}
.editorStatus.success{color:#167f4d;font-weight:700}
.adminEditNote{margin:12px 0 0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(114,230,236,.06)}
.auditTable table{min-width:0 !important;width:100%;table-layout:fixed}
.auditTable th,.auditTable td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;vertical-align:top}
.auditTable th:first-child,.auditTable td:first-child{width:25%}
.auditTable th:nth-child(2),.auditTable td:nth-child(2){width:27%}
.auditTime{display:block;font-size:10px;line-height:1.35}
.auditActor,.auditChange{display:grid;gap:3px;line-height:1.35}
.auditActor b,.auditChange b{font-size:11px}
.auditChange .muted{font-size:10px;line-height:1.4}
html[data-theme="dark"] .auditTable tr{border-color:#273146}
html[data-theme="dark"] .editorCard{background:linear-gradient(135deg,rgba(114,230,236,.12),rgba(18,25,39,.65))}
html[data-theme="dark"] .editorStatus.error{color:#ffaaa0}
html[data-theme="dark"] .editorStatus.success{color:#91edbd}
#depot .tablewrap{overflow:visible}
#depot table.depotTable{min-width:0 !important;width:100%;table-layout:fixed}
#depot table.depotTable th,#depot table.depotTable td{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
#depot table.permTable{table-layout:auto}
#depot table.permTable th,#depot table.permTable td{padding:8px 6px;word-break:normal;overflow-wrap:normal}
#depot table.permTable th{line-height:1.2;white-space:nowrap;overflow:visible;letter-spacing:.03em}
#depot table.permTable td:not(:first-child),#depot table.permTable th:not(:first-child){text-align:center;white-space:nowrap;width:1%}
html.scanner-open,html.scanner-open body{overflow:hidden}
.scannerModal.scannerHeld{transform-origin:center center}
.fieldStatus{min-height:1.4em;margin:0 0 12px;font-size:13px;font-weight:650}
.fieldHome{display:grid;gap:10px;margin-bottom:8px}
.fieldBig{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:64px !important;padding:16px 18px !important;text-align:left;font-size:17px;font-weight:780;border-radius:14px}
.fieldBig small{font-size:12px;font-weight:500;opacity:.78}
.usageDay{margin:0 0 16px;padding:12px 12px 4px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.35)}
.usagePerson{margin:0 0 12px}
.usageTableBlock{margin-top:18px}
.usageTable table{min-width:0 !important;width:100%}
.usageTable th,.usageTable td{white-space:normal;word-break:break-word}
html[data-theme="dark"] .usageDay{background:rgba(18,25,39,.55)}
.viewToggle{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--accentSoft)}
.viewToggle button{border:0;background:transparent;color:var(--muted);padding:6px 10px;border-radius:7px;font-size:10px;font-weight:800}
.viewToggle button.active{background:var(--panel);color:var(--accent2);box-shadow:0 1px 4px rgba(22,36,54,.12)}
.usageCalendarHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 13px}
.usageCalendarHead p{margin:4px 0 0;color:var(--muted);font-size:10px}
.usageCalendarTitle{display:flex;align-items:center;gap:8px}
.usageCalendarTitle h2{margin:0;font-size:17px}
.usageCalendarTitle .smallBtn{font-size:17px;line-height:1;padding:4px 9px}
.usageCalendarWeekdays,.usageCalendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.usageCalendarWeekdays{margin-bottom:5px}
.usageCalendarWeekdays span{padding:0 7px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.usageCalendarDay{min-height:84px;padding:8px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.usageCalendarDay:not(:disabled):hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(22,36,54,.10)}
.usageCalendarDay:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.usageCalendarDay.outside{opacity:.34;background:transparent}
.usageCalendarDay.today{border-color:var(--accent2);box-shadow:inset 0 3px 0 var(--accent2)}
.usageCalendarDay.selected{background:var(--accentSoft);border-color:var(--accent)}
.usageCalendarDayNumber{font-size:12px;font-weight:850}
.usageCalendarCount{font-size:9px;color:var(--muted);line-height:1.25}
.usageCalendarPeople{font-size:10px;line-height:1.25;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.usageCalendarDetail{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.usageCalendarDetail .sectionHead{margin-bottom:8px}
.usageCalendarDetailRows{display:grid;gap:6px}
.usageCalendarDetailRow{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(130px,1fr) minmax(120px,.8fr);gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.35);font-size:11px}
html[data-theme="dark"] .viewToggle{background:rgba(114,230,236,.10)}
html[data-theme="dark"] .viewToggle button.active{background:#172338;color:#9ef5f2}
html[data-theme="dark"] .usageCalendarDay{background:#121927;border-color:#273146}
html[data-theme="dark"] .usageCalendarDay.selected{background:rgba(114,230,236,.12);border-color:#72e6ec}
html[data-theme="dark"] .usageCalendarDetailRow{background:rgba(18,25,39,.65)}
.fieldUsedList{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fieldUsedList li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff)}
.fieldUsedList li b{flex:1 1 140px}
.fieldNeed{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.requestSectionTitle{font-size:15px;margin:0 0 8px}
.requestResolvedTitle{margin-top:18px}
.requestRow{cursor:pointer}
.requestRow:focus-within td,.requestRow:hover td{background:var(--accentSoft)}
.requestSummaryButton{display:block;width:100%;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;color:var(--ink) !important;text-align:left;font-weight:750;line-height:1.35;box-shadow:none !important}
.requestSummaryButton:hover{background:transparent !important;transform:none !important}
.requestSummaryButton:hover>span:first-child{text-decoration:underline;color:var(--accent2)}
.requestSummaryMeta{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:500;line-height:1.35}
.requestSummaryMeta .badge{margin-right:4px;vertical-align:middle}
.requestFieldButton{padding:2px 0 !important}
.requestTable table{min-width:650px}
.requestUpdateButton{white-space:nowrap}
.requestModal{max-width:620px}
.requestDetailGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.requestDetailItem{min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.35)}
.requestDetailItem.full{grid-column:1/-1}
.requestDetailItem b{display:block;margin-bottom:3px;color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.requestDetailItem>span{display:block;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.requestDetailSub{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}
.requestEditor{margin-top:4px}
.requestModalActions{margin-top:12px}
html[data-theme="dark"] .requestDetailItem{background:rgba(18,25,39,.65)}
html[data-theme="dark"] .requestRow:focus-within td,html[data-theme="dark"] .requestRow:hover td{background:rgba(114,230,236,.11)}
.issueChips{display:flex;flex-wrap:wrap;gap:8px}
.issueChips button{min-height:44px;padding:8px 12px;border-radius:999px}
.issueChips button.active{background:var(--accentSoft);border-color:var(--accent);font-weight:800}
.fieldFind{display:grid;gap:8px;margin:0 0 16px}
.fieldScanBlock{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch}
.fieldScanBlock .fieldBig{width:auto;flex:1 1 48%;min-width:0}
.fieldScanBlock .scanWithId{flex:1 1 52%;min-width:0;align-items:stretch}
.scanWithId{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
.scanWithId input{flex:1 1 auto;min-width:0;min-height:44px}
.scanWithId button{flex:0 0 auto;white-space:nowrap;min-height:44px !important;padding:8px 12px !important}
.fieldScanBlock .scanWithId input,.fieldScanBlock .scanWithId button{min-height:64px !important}
.fieldActions{display:grid;gap:10px;margin-top:14px}
.fieldActions button{min-height:48px;font-size:15px;font-weight:750}
html[data-theme="dark"] .fieldUsedList li{background:rgba(18,25,39,.7)}
html.role-field .topRight #quickInspect{display:none!important}
.permMark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;line-height:1;font-variant-emoji:text}
.permYes{color:#1f7a3a;background:#e7f6ec}
.permNo{color:#a12d22;background:#fdecea}
html[data-theme="dark"] .permYes{color:#8ee0a8;background:rgba(46,160,90,.2)}
html[data-theme="dark"] .permNo{color:#ff9b8f;background:rgba(180,50,40,.22)}
#depot table.peopleTable td:nth-child(2){width:148px}
#depot table.peopleTable td:nth-child(3){width:88px}
#depot table.peopleTable select{min-width:0;width:100%}
#workshop table.workshopTable{min-width:0 !important;width:100%}
#workshop table.workshopTable th,#workshop table.workshopTable td{white-space:normal}


html[data-theme="dark"] .groupHead td{background:#151d2b !important}
html[data-theme="dark"] .drawerPanel{background:#121927;border-left-color:#273146}
html[data-theme="dark"] .snapStat{background:rgba(18,25,39,.7)}
html[data-theme="dark"] .importReport{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .facetChip.active{color:#dfe8ff}

@media(max-width:800px){
  .drawerPanel{width:100%}
  .fieldExtras{grid-template-columns:1fr}
  .snapGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .snapStat{padding:8px 5px;min-width:0;text-align:center}
  .snapStat b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .snapStat span{font-size:8px;line-height:1.25}
  .assetsTable{min-width:720px}
  .topRight{flex-wrap:wrap;justify-content:flex-end}
  #inspect .formgrid,.inspectionChecks{grid-template-columns:1fr}
  .check{min-height:44px}
  button,select,input{min-height:38px}
}
@media(max-width:650px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .kpi{min-width:0}
  .kpi .label{font-size:10px;line-height:1.25}
  .kpi .num{font-size:24px}
  .kpi .hint{font-size:9px;line-height:1.3}
  #depot table.permTable th{font-size:8px;letter-spacing:.02em;padding:8px 3px}
  #depot table.permTable td{padding:8px 3px}
  .fieldScanBlock{flex-wrap:wrap}
  .fieldScanBlock .fieldBig,.fieldScanBlock .scanWithId{flex:1 1 100%}
}

.rolePermissionMatrix{display:grid;gap:8px}
.roleMatrixWrap{max-width:100%;overflow:hidden}
#depot table.rolePermissionTable{min-width:0 !important;width:100%;table-layout:fixed;background:transparent}
#depot table.rolePermissionTable th,#depot table.rolePermissionTable td{padding:8px 6px;text-align:center;vertical-align:middle}
#depot table.rolePermissionTable thead th{font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#depot table.rolePermissionTable thead th:first-child{width:48%;text-align:left}
#depot table.rolePermissionTable th:not(:first-child),#depot table.rolePermissionTable td:not(:first-child){width:13%;text-align:center;white-space:nowrap}
#depot table.rolePermissionTable th:first-child,#depot table.rolePermissionTable td:first-child{text-align:left}
.permissionLabelShort{display:none}
#depot table.rolePermissionTable tbody th{font-weight:400}
#depot table.rolePermissionTable tbody tr.selectedRoleRow th,#depot table.rolePermissionTable tbody tr.selectedRoleRow td{background:var(--accentSoft)}
.roleMatrixName,.roleMatrixMeta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roleMatrixName{font-size:11px;font-weight:750}
.roleMatrixMeta{margin-top:2px;color:var(--muted);font-size:9px;font-weight:500}
.roleAdminActions{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.roleModalLabel{margin:0 0 6px;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.roleEditorModal{width:min(900px,calc(100% - 28px));max-width:min(900px,calc(100% - 28px))}
.roleEditorModal .scannerHead>div{display:grid;gap:2px}
.roleEditorDialogHint{font-size:10px;color:var(--muted);font-weight:500}
.roleEditorModal .scannerBody{max-height:min(80vh,720px);overflow:auto}
.roleEditorModal .roleAdminLayout{display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);gap:12px;align-items:start}
.roleEditorModal .roleList{display:grid;gap:5px;max-height:420px;overflow:auto;padding:3px}
.roleChoice{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel,#fff);color:var(--ink);text-align:left;cursor:pointer}
.roleChoice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.roleChoice:hover{border-color:var(--accent)}
.roleChoice.active{border-color:var(--accent);background:var(--accentSoft);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.roleChoice span{display:grid;gap:2px;min-width:0}
.roleChoice b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roleChoice small{font-size:9px;color:var(--muted);white-space:nowrap}
.roleEditor{min-width:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.35)}
.roleEditorHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.roleEditorHeader h3{margin:0;font-size:14px}
.roleEditorHeader p{margin:3px 0 0}
.roleEditorHeader .badge:empty{display:none}
.rolePermissionGroup{margin-top:12px}
.rolePermissionGroup h4{margin:0 0 7px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.rolePermissionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rolePermission{display:flex;align-items:flex-start;gap:7px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel,#fff);font-size:10px;color:var(--ink);cursor:pointer}
.rolePermission input{min-width:16px;width:16px;height:16px;margin:1px 0 0;accent-color:var(--accent)}
.rolePermission span{display:grid;gap:2px;line-height:1.25}
.rolePermission b{font-size:10px}
.rolePermission small{font-size:9px;color:var(--muted)}
.rolePermission:has(input:disabled){opacity:.68;cursor:not-allowed}
.roleEditorActions{margin-top:12px;align-items:center}
.newRoleForm{display:flex;align-items:end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.newRoleForm label{flex:1}
.newRoleForm label span{font-size:10px;color:var(--muted)}
.newRoleForm input{width:100%}
html[data-theme="dark"] #depot table.rolePermissionTable tbody tr.selectedRoleRow th,html[data-theme="dark"] #depot table.rolePermissionTable tbody tr.selectedRoleRow td{background:rgba(114,230,236,.12) !important}
html[data-theme="dark"] .roleEditor{background:rgba(18,25,39,.55)}
html[data-theme="dark"] .roleChoice,html[data-theme="dark"] .rolePermission{background:#121927}
@media(max-width:800px){
  .roleEditorModal .roleAdminLayout{grid-template-columns:1fr}
  .roleEditorModal .roleList{display:flex;overflow:auto;max-height:none;padding:0 0 3px}
  .roleEditorModal .roleChoice{min-width:145px;flex:0 0 auto}
  .rolePermissionGrid{grid-template-columns:1fr}
  .newRoleForm{align-items:stretch;flex-direction:column}
}

@media(max-width:650px){
  #depot table.rolePermissionTable thead th{font-size:8px;letter-spacing:.02em}
  #depot table.rolePermissionTable thead th:first-child{width:40%}
  #depot table.rolePermissionTable th:not(:first-child),#depot table.rolePermissionTable td:not(:first-child){width:15%}
  .permissionLabelLong{display:none}
  .permissionLabelShort{display:inline}
  .usageCalendarHead{align-items:flex-start;flex-direction:column}
  .usageCalendarGrid{gap:3px}
  .usageCalendarWeekdays{gap:3px}
  .usageCalendarWeekdays span{padding:0 3px;font-size:8px}
  .usageCalendarDay{min-height:64px;padding:5px;gap:2px;border-radius:7px}
  .usageCalendarCount{font-size:8px}
  .usageCalendarPeople{display:none}
  .usageCalendarDetailRow{grid-template-columns:1fr;gap:3px;padding:8px}
  .usageCalendarDetailRow span:nth-child(2){font-weight:700}
  .requestDetailGrid{grid-template-columns:1fr}
  .requestDetailItem.full{grid-column:auto}
}

/* Keep the full desktop tab list above the fold at 100% zoom without
   changing mobile touch-target sizing. The drawer can still scroll when a
   genuinely short viewport needs it. */
@media(min-width:701px){
  .drawer nav{scrollbar-gutter:auto}
  .drawer nav button{min-height:30px !important;padding:6px 10px !important;margin:1px 0}
  .drawer .sep{margin-top:9px;margin-bottom:3px}
}