/* Tamm Fleet — one design system for every page */
:root {
  --bg: #F3F5F7;
  --surface: #FFFFFF;
  --surface-2: #F8FAFB;
  --ink: #1D1D1B;
  --muted: #5F676E;
  --faint: #98A3A9;
  --line: #E2E6EA;
  --line-strong: #CDD3D9;
  --side: #17191B;
  --side-ink: #AEB5BB;
  --teal: #0078A8;
  --teal-dark: #005C82;
  --teal-soft: #E2F2F8;
  --gold: #FCBF00;
  --red: #B42318;
  --red-soft: #FDECEA;
  --amber: #B54708;
  --amber-bar: #F0A23B;
  --amber-soft: #FEF3E6;
  --green: #067647;
  --green-bar: #2E9E6A;
  --green-soft: #E5F5EC;
  --grey-bar: #D6DCE1;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 38, 43, .05), 0 1px 1px rgba(16, 38, 43, .03);
  --side-w: 236px;
  --page-w: 1480px;
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); min-height: 100vh; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.num, td.date, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ── App frame ─────────────────────────────────────────── */
body.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; padding: 20px 14px; gap: 22px; }
.brand { display: block; padding: 6px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.brand:hover { text-decoration: none; }
.logo-tile { display: block; background: #fff; border-radius: var(--radius); padding: 14px 16px 12px; }
.logo-tile img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.brand > span:not(.logo-tile) { display: block; margin-top: 12px; color: #fff; font-weight: 600; font-size: 14px; text-align: center; }
.cables { display: flex; flex-direction: column; gap: 2px; }
.cables i { display: block; height: 3px; }
.cables i:nth-child(1) { background: var(--ink); }
.cables i:nth-child(2) { background: #00A8D4; }
.cables i:nth-child(3) { background: #E40E20; }
.cables i:nth-child(4) { background: #FCBF00; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--side-ink); font-size: 14.5px; position: relative; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav a.on { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; }
.nav a.on::before { content: ""; position: absolute; inset-inline-start: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
[dir=rtl] .nav a.on::before { border-radius: 3px 0 0 3px; }
.nav-sep { height: 1px; background: rgba(255, 255, 255, .08); margin: 10px 12px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.side-foot .lang { color: var(--side-ink); font-size: 13px; padding: 0 12px; }
.who-am-i { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.uname { color: #fff; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signout { color: var(--side-ink); display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.signout:hover { color: #fff; background: rgba(255, 255, 255, .08); }
[dir=rtl] .signout .ico { transform: scaleX(-1); }

main { min-width: 0; }
.page { max-width: var(--page-w); margin: 0 auto; padding: 28px 32px 72px; }

/* ── Page header (same on every page) ───────────────────── */
.head { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.head > :first-child { min-width: 0; }
.head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
h1 { font-size: 25px; line-height: 1.25; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 14px; font-weight: 700; }
.lead { color: var(--muted); margin: 0; max-width: 75ch; }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 34px 0 12px; }
.section-head h2 { margin: 0; }
.section-head > :last-child:not(h2) { margin-inline-start: auto; }

/* ── Messages ────────────────────────────────────────────── */
.flashes { display: grid; gap: 8px; margin-bottom: 20px; }
.flash { padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid; border-inline-start-width: 4px; background: var(--surface); white-space: pre-line; font-size: 14px; }
.flash.success { border-color: #B8E2CB; border-inline-start-color: var(--green); background: var(--green-soft); }
.flash.error { border-color: #F5C7C2; border-inline-start-color: var(--red); background: var(--red-soft); }
.flash.warning { border-color: #F6D6B3; border-inline-start-color: var(--amber); background: var(--amber-soft); }
.flash.info { border-color: #B5DCEB; border-inline-start-color: var(--teal); background: var(--teal-soft); }

/* ── Buttons and forms ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; min-height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); transition: border-color .15s, background-color .15s; }
.btn:hover { border-color: var(--teal); text-decoration: none; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
input, select, textarea { font: inherit; font-size: 14.5px; width: 100%; padding: 8px 11px; min-height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--teal); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 20px; }
.field.wide { grid-column: 1 / -1; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.check { display: flex; gap: 9px; align-items: center; color: var(--ink); font-size: 14px; }
.check input { width: 16px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ── Cards ───────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel > h2:first-child { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.panel h2:not(:first-child) { margin-top: 28px; }
.panel > input[type=hidden]:first-child + h2 { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.panel.empty { color: var(--muted); text-align: center; padding: 34px 24px; }

/* ── Saudi plate (signature element) ─────────────────────── */
.plate { white-space: nowrap; color: var(--ink); display: inline-flex; align-items: stretch; direction: ltr; border: 2px solid var(--ink); border-radius: 5px; background: #fff; overflow: hidden; font-weight: 700; line-height: 1; vertical-align: middle; }
.plate .p-num, .plate .p-let { padding: 5px 8px; font-size: 15px; letter-spacing: .5px; display: flex; align-items: center; }
.plate .p-num { font-variant-numeric: tabular-nums; border-inline-end: 2px solid var(--ink); }
.plate .p-let { direction: rtl; word-spacing: 2px; border-inline-end: 2px solid var(--ink); }
.plate .p-ksa { background: var(--ink); color: #fff; font-size: 9px; padding: 3px 4px; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; font-weight: 600; }
.plate.big .p-num, .plate.big .p-let { font-size: 26px; padding: 10px 16px; }
.plate.big .p-ksa { font-size: 11px; padding: 6px; }
.plate.t-3 .p-ksa, .plate.t-2 .p-ksa { background: #1F4E8C; }
.plate.t-10 .p-ksa { background: #6B7280; }
.plate.plain { font-weight: 600; padding: 5px 8px; }
a:hover .plate { border-color: var(--teal); }
a:has(.plate):hover { text-decoration: none; }

/* ── Status ──────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.expired { background: var(--red-soft); color: var(--red); }
.chip.soon { background: var(--amber-soft); color: var(--amber); }
.chip.ok, .chip.valid, .chip.active { background: var(--green-soft); color: var(--green); }
.chip.none, .chip.draft, .chip.cancelled { background: #EEF1F4; color: var(--muted); }
.chip.otp { background: var(--teal-soft); color: var(--teal); }
.d { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d .h { display: block; font-size: 11.5px; color: var(--faint); }
.d.expired { color: var(--red); font-weight: 600; }
.d.soon { color: var(--amber); font-weight: 600; }
.days { direction: ltr; unicode-bidi: isolate; display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.days.expired { color: var(--red); }
.days.soon { color: var(--amber); }
.days-pill { direction: ltr; unicode-bidi: isolate; display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.days-pill.expired { background: var(--red-soft); color: var(--red); }
.days-pill.soon { background: var(--amber-soft); color: var(--amber); }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:not(.group):hover td { background: #F5F9FB; }
table.data tr.group td { background: var(--surface-2); font-weight: 700; font-size: 13px; color: var(--teal-dark); padding-top: 9px; padding-bottom: 9px; }
table.data tr.left td { opacity: .55; }
td.sel, th.sel { width: 36px; }
pre.log { white-space: pre-wrap; margin: 0; font: inherit; font-size: 13px; }

table.vtable td { vertical-align: top; }
table.vtable .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
table.vtable td.nowrap { white-space: nowrap; }
table.vtable td.veh { min-width: 120px; }
table.vtable td.who { min-width: 150px; max-width: 240px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.vtable .doc { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; white-space: nowrap; }
table.vtable td.who .d { margin-top: 5px; }

/* ── Filters and bulk bar ────────────────────────────────── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters a.f { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 13px; }
.filters a.f:hover { border-color: var(--teal); text-decoration: none; }
.filters a.f.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.filters form { margin-inline-start: auto; display: flex; gap: 6px; }
.filters input[type=search] { width: 250px; }
.bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }

/* ── Overview: document health cards ─────────────────────── */
.health { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; border-top: 3px solid var(--green-bar); }
.hcard.warn { border-top-color: var(--amber-bar); }
.hcard.alert { border-top-color: var(--red); }
.hcard.unknown { border-top-color: var(--grey-bar); }
.hnum.none { color: var(--faint); }
.hcard header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hcard h2 { margin: 0; font-size: 15px; }
.hnum { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--ink); }
.hnum:hover { text-decoration: none; }
.hnum small { font-size: 12px; font-weight: 500; color: var(--muted); }
.hcard.alert .hnum { color: var(--red); }
.hcard.warn .hnum { color: var(--amber); }
.hnum.ok { color: var(--green); font-size: 24px; }
.bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--grey-bar); gap: 2px; }
.bar .seg { flex-basis: 0; min-width: 6px; }
.seg.expired { background: var(--red); }
.seg.soon { background: var(--amber-bar); }
.seg.ok { background: var(--green-bar); }
.seg.missing { background: var(--grey-bar); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; }
.legend div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.legend dt { color: var(--muted); display: flex; align-items: center; gap: 7px; }
.legend dt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.legend .expired dt::before { background: var(--red); }
.legend .soon dt::before { background: var(--amber-bar); }
.legend .ok dt::before { background: var(--green-bar); }
.legend .missing dt::before { background: var(--grey-bar); }
.legend dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.legend .expired dd a { color: var(--red); }
.legend .soon dd a { color: var(--amber); }
.legend .zero dd { color: var(--faint); font-weight: 500; }

/* ── Authorization screens ───────────────────────────────── */
.otp-box { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--teal-soft); border: 1px solid #B5DCEB; padding: 18px; border-radius: var(--radius); margin-bottom: 18px; }
.otp-box input { width: 150px; font-size: 22px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.countries { max-height: 230px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; background: #fff; }
.countries .group { grid-column: 1 / -1; }
.auth-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ── Two-step sign-in ────────────────────────────────────── */
.qr-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.qr { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; width: 200px; height: 200px; }
.qr svg { width: 100%; height: 100%; display: block; }
code.secret { display: inline-block; margin-top: 6px; padding: 6px 10px; background: #EEF1F4; border-radius: 6px; font-size: 14px; letter-spacing: .06em; word-break: break-all; }
.code-input { font-size: 22px; letter-spacing: .3em; text-align: center; }

/* ── Sign-in pages ───────────────────────────────────────── */
body.public { background: radial-gradient(1200px 600px at 50% -10%, #DDEFF6 0%, var(--bg) 60%); }
.login { max-width: 400px; margin: 11vh auto 40px; }
.login .panel { padding: 0 0 26px; overflow: hidden; }
.login .panel > :not(.cables) { margin-inline: 30px; }
.login .cables { margin-bottom: 26px; }
.login .company { display: block; width: 190px; height: auto; margin: 0 auto 18px !important; }
.login h1 { margin-bottom: 4px; font-size: 21px; text-align: center; }
.login .lead { text-align: center; margin-bottom: 22px; font-size: 14px; }

/* ── Small screens: sidebar becomes a top bar ────────────── */
@media (max-width: 960px) {
  body.app { display: block; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 14px; gap: 8px 14px; }
  .brand { border: 0; padding: 4px; display: flex; align-items: center; gap: 10px; }
  .logo-tile { padding: 6px 10px; border-radius: var(--radius-sm); }
  .logo-tile img { width: 82px; }
  .brand > span:not(.logo-tile) { margin: 0; }
  .nav { flex-direction: row; overflow-x: auto; order: 3; width: 100%; gap: 4px; padding-bottom: 2px; }
  .nav a { padding: 7px 11px; white-space: nowrap; }
  .nav a.on::before { display: none; }
  .nav-sep { display: none; }
  .side-foot { margin: 0; margin-inline-start: auto; flex-direction: row; align-items: center; }
  .who-am-i { padding: 4px 8px; }
  .page { padding: 20px 16px 56px; }
  .health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .health { grid-template-columns: 1fr; }
  .filters form { margin-inline-start: 0; width: 100%; }
  .filters input[type=search] { width: 100%; }
  .uname { display: none; }
  h1 { font-size: 22px; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Phone cards (vehicles, authorizations, follow-up) ───── */
.cards { display: none; }
.vcard, .acard, .fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-inline-start: 4px solid var(--green-bar); }
.vcard.soon, .acard.soon, .fcard.soon { border-inline-start-color: var(--amber-bar); }
.vcard.expired, .acard.expired, .fcard.expired { border-inline-start-color: var(--red); }
.vcard:not(.ok):not(.soon):not(.expired) { border-inline-start-color: var(--grey-bar); }
.vcard.left { opacity: .6; }
.cards-group { font-size: 13px; color: var(--teal-dark); margin: 10px 2px 2px; }
.cards-all { padding: 2px 4px; color: var(--muted); }

.vcard { padding: 14px 14px 12px; display: grid; gap: 12px; }
.vcard-top { display: flex; align-items: flex-start; gap: 10px; }
.vcard-top input { margin-top: 8px; flex: none; }
.vcard-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink); min-width: 0; }
.vcard-id:hover { text-decoration: none; }
.vcard-id > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.vcard-id b { font-size: 15px; }
.vcard-id small, .vcard-people small { color: var(--muted); font-size: 12px; }
.vcard-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13.5px; }
.vcard-people > div { min-width: 0; display: flex; flex-direction: column; }
.vcard-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.vcard-docs > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; }
.vcard-docs > div.expired { background: var(--red-soft); border-color: #F5C7C2; }
.vcard-docs > div.soon { background: var(--amber-soft); border-color: #F6D6B3; }
.vcard-docs dt { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.vcard-docs dd { margin: 0; }
.vcard-docs .doc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.acard { padding: 14px; display: grid; gap: 8px; }
.acard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acard-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.acard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.acard-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.acard-dates > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.acard-dates dt { font-size: 12px; color: var(--muted); }
.acard-dates dd { margin: 0; }

.fcard { padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "plate when" "body body"; gap: 10px 12px; align-items: center; }
.fcard > a { grid-area: plate; }
.fcard-body { grid-area: body; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.fcard-body small { color: var(--muted); }
.fcard-when { grid-area: when; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* ── Phones: cards instead of tables, tab bar at the bottom ─ */
@media (max-width: 720px) {
  .has-cards { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .has-cards > table { display: none; }
  .has-cards > .cards { display: grid; gap: 10px; }
  .has-cards > .bulk { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 10px; }
  .bulk .btn { flex: 1 1 auto; }
  .bulk > span { width: 100%; }

  body.app { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .side { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); flex-wrap: nowrap; }
  .side-foot .lang { padding: 0 4px; }
  .nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; width: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
         gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--side); border-top: 1px solid rgba(255, 255, 255, .08); overflow: visible; }
  .nav a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 10.5px; text-align: center; border-radius: 8px; white-space: nowrap; }
  .nav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav a.on { background: rgba(255, 255, 255, .08); color: #fff; }
  .nav a.on .ico { color: var(--gold); }
  .head { margin-bottom: 16px; }
  .head .actions { width: 100%; margin-inline-start: 0; }
  .head .actions .btn { flex: 1 1 auto; }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .filters a.f { white-space: nowrap; }
  .filters form { flex: none; }
  .flashes { margin-bottom: 14px; }
}

td.nowrap, .nowrap { white-space: nowrap; }

/* ── Phones: every other table becomes stacked cards ─────── */
@media (max-width: 720px) {
  table.data.stack, table.data.stack tbody { display: block; width: 100%; }
  table.data.stack thead { display: none; }
  table.data.stack tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.data.stack tbody tr:last-child { border-bottom: 0; }
  table.data.stack td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 4px 0; border: 0; min-width: 0; }
  table.data.stack td[data-label]::before { content: attr(data-label); flex: 0 0 7.5em; color: var(--muted); font-size: 12px; font-weight: 600; }
  table.data.stack td[data-label=""]::before { display: none; }
  table.data.stack td:empty { display: none; }
  table.data.stack td > * { min-width: 0; max-width: 100%; }
  table.data.stack td pre.log { flex: 1 1 100%; overflow-wrap: anywhere; }
  table.data.stack td form, table.data.stack td .btn { margin-inline-start: auto; }
  table.data.stack tbody tr:not(.group):hover td { background: transparent; }
  .table-wrap:has(> table.stack) { overflow: visible; }
  .panel table.data.stack { margin-inline: -4px; width: calc(100% + 8px); }
}

/* ── Tablets / small laptops: wide tables (vehicles, authorizations) switch to cards in two columns ── */
@media (max-width: 1360px) {
  .has-cards.cards-wide { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .has-cards.cards-wide > table { display: none; }
  .has-cards.cards-wide > .cards { display: grid; gap: 10px; }
  .has-cards.cards-wide > .bulk { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 10px; }
}
@media (min-width: 721px) and (max-width: 1360px) {
  .has-cards.cards-wide > .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cards-wide .cards-group, .cards-wide .cards-all, .cards-wide .cards > .panel.empty { grid-column: 1 / -1; }
}

/* allowed countries of an international authorization */
.country-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.country-chip { background: var(--teal-soft); color: var(--teal-dark); border: 1px solid #B5DCEB; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; }
.countries-line { color: var(--muted); font-size: 12px; margin-top: 3px; max-width: 260px; }
.btn.small-btn { min-height: 30px; padding: 4px 12px; font-size: 13px; margin-top: 6px; }

/* users & permissions */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
table.perms th:not(:first-child), table.perms td:not(:first-child) { text-align: center; }
table.perms th { white-space: normal; max-width: 120px; line-height: 1.35; }
.tick { display: inline-flex; padding: 6px; cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.tick input:disabled { cursor: default; }
.perm-picks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 4px; }
.perm-picks input { accent-color: var(--teal); }
@media (max-width: 720px) {
  table.perms td:not(:first-child) { text-align: start; }
  .tick { padding: 2px 0; }
}

.admin-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
@media (max-width: 720px) { .nav a.desk { display: none; } .admin-links .btn { flex: 1 1 0; } }

/* weekly update */
.weekly { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.weekly .hint { margin: 4px 0 0; max-width: 72ch; }
.weekly-last { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.weekly-last pre { margin: 4px 0 0; font: inherit; font-size: 13.5px; white-space: pre-wrap; }
.lic-box pre { margin: 0; font: inherit; white-space: pre-wrap; }
.auth-list { display: flex; flex-wrap: wrap; gap: 6px; }
.auth-list a { display: inline-flex; }

.quick-lic { display: flex; gap: 6px; align-items: center; }
.quick-lic input { width: 92px; height: 32px; padding: 4px 8px; font-size: 13.5px; text-align: center; }