/* DriveDesk — premium fleet OS styling */
:root {
  --ink: #0b1220;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e9edf3;
  --line-2: #f1f4f8;
  --bg: #f7f8fb;
  --card: #ffffff;
  --brand: #2747d6;
  --brand-2: #4f6bff;
  --brand-soft: #eef1ff;
  --gold: #c08a2b;
  --success: #0f9d6b;
  --warning: #d98a00;
  --danger: #e0393e;
  --info: #0b8ec2;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .25);
  --sidebar: 264px;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-primary: #2747d6;
  --bs-primary-rgb: 39, 71, 214;
  --bs-link-color: #2747d6;
  --bs-link-color-rgb: 39, 71, 214;
  --bs-border-color: #e9edf3;
  --bs-body-color: #0b1220;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-font { font-family: 'Manrope', 'Inter', sans-serif; letter-spacing: -.02em; font-weight: 800; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92em; letter-spacing: -.01em; }
.text-muted { color: var(--muted) !important; }
a { text-decoration: none; }
.small, small { font-size: 12.5px; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); background: #fff; border-right: 1px solid var(--line); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; color: var(--ink); }
.brand-logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 16px -6px rgba(39, 71, 214, .6); }
.brand strong { display: block; font-family: 'Manrope'; font-weight: 800; font-size: 15px; line-height: 1.15; letter-spacing: -.02em; }
.brand small { color: var(--muted); font-size: 11.5px; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; }
.nav-section { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9aa6b8; padding: 16px 12px 6px; }
.sidebar .nav-link { display: flex; align-items: center; gap: 11px; padding: 8.5px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; margin-bottom: 1px; transition: background .15s, color .15s; }
.sidebar .nav-link i { font-size: 16px; width: 18px; color: #8592a6; transition: color .15s; }
.sidebar .nav-link:hover { background: var(--line-2); color: var(--ink); }
.sidebar .nav-link.active { background: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(11, 18, 32, .7); }
.sidebar .nav-link.active i { color: #fff; }
.nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.nav-badge.nb-danger { background: #fdecec; color: var(--danger); }
.nav-badge.nb-warning { background: #fff4de; color: #a86a00; }
.nav-link.active .nav-badge { background: rgba(255, 255, 255, .16); color: #fff; }
.sidebar-foot { margin: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #f4f6ff, #fbfcff); border: 1px solid #e6eaff; display: flex; gap: 10px; align-items: center; }
.sidebar-foot .sf-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.sidebar-foot strong { display: block; font-size: 12.5px; }
.sidebar-foot small { color: var(--muted); font-size: 11px; }
.main { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(247, 248, 251, .82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; }
.top-search { align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; width: min(460px, 46vw); height: 40px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.top-search:focus-within { border-color: #c3ccfa; box-shadow: 0 0 0 4px rgba(39, 71, 214, .08); }
.top-search i { color: var(--muted); }
.top-search input { border: 0; outline: 0; flex: 1; background: transparent; font-size: 13.5px; }
.top-search kbd { background: var(--line-2); color: var(--muted); border-radius: 6px; font-size: 11px; padding: 2px 7px; }
.btn-icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: inline-grid; place-items: center; color: var(--ink-2); font-size: 18px; box-shadow: var(--shadow-sm); }
.btn-icon:hover { color: var(--brand); border-color: #d5dcfb; }
.dot-count { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 2px 6px; border: 2px solid #fff; }
.user-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 3px 12px 3px 3px; box-shadow: var(--shadow-sm); }
.user-chip small { color: var(--muted); font-size: 11.5px; }
.user-chip strong { font-size: 13px; font-weight: 600; }
.content { padding: 8px 28px 32px; flex: 1; }
.app-footer { padding: 16px 28px; color: #9aa6b8; font-size: 12px; display: flex; justify-content: space-between; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 18, 32, .35); z-index: 1030; }
  .main { margin-left: 0; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
}

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0 22px; }
.page-head h1 { font-size: 26px; margin: 0; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-header h5, .card-title { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.01em; font-family: 'Manrope'; }
.card-header .hint { color: var(--muted); font-size: 12.5px; font-weight: 400; font-family: 'Inter'; }
.card-body { padding: 20px; }
.card-link { font-size: 12.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.card-link:hover { text-decoration: underline; }

/* KPI tiles */
.kpi { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); height: 100%; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; display: block; color: var(--ink); }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(15, 23, 42, .25); color: var(--ink); }
.kpi .k-label { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.kpi .k-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.kpi .k-value { font-family: 'Manrope'; font-weight: 800; font-size: 26px; letter-spacing: -.03em; margin-top: 10px; line-height: 1.1; }
.kpi .k-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.kpi.kpi-dark { background: radial-gradient(120% 140% at 100% 0%, #2b3a8f 0%, #0b1220 55%); color: #fff; border-color: #0b1220; }
.kpi.kpi-dark .k-label, .kpi.kpi-dark .k-foot { color: rgba(255, 255, 255, .7); }
.ico-blue { background: #eef1ff; color: var(--brand); }
.ico-green { background: #e6f6ef; color: var(--success); }
.ico-amber { background: #fff4de; color: #b77300; }
.ico-red { background: #fdecec; color: var(--danger); }
.ico-sky { background: #e5f5fb; color: var(--info); }
.ico-slate { background: #eef1f5; color: #475569; }
.ico-violet { background: #f1ecff; color: #6a3fd6; }
.ico-glass { background: rgba(255, 255, 255, .12); color: #fff; }
.trend-up { color: var(--success); font-weight: 600; }
.trend-down { color: var(--danger); font-weight: 600; }

/* fleet status bar */
.fleet-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line-2); gap: 2px; }
.fleet-bar span { display: block; height: 100%; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* ---------- pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; }
.pill i { font-size: 11px; }
.pill-success { background: #e7f7f0; color: #0b7a53; border-color: #cdeedf; }
.pill-primary { background: #eef1ff; color: #2340c4; border-color: #dbe1ff; }
.pill-info { background: #e6f5fb; color: #0a6f99; border-color: #cbeaf5; }
.pill-warning { background: #fff5e0; color: #9a6200; border-color: #ffe7b3; }
.pill-orange { background: #fff0e6; color: #b2470e; border-color: #ffdcc4; }
.pill-danger { background: #fdeced; color: #c4262b; border-color: #f9d3d5; }
.pill-secondary { background: #f1f4f8; color: #475569; border-color: #e5e9f0; }
.pill-dark { background: #0b1220; color: #fff; }
.risk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px 2px 3px; border-radius: 99px; border: 1px solid; }
.risk b { min-width: 26px; height: 22px; border-radius: 99px; display: inline-grid; place-items: center; color: #fff; font-size: 11.5px; padding: 0 5px; }
.risk-success { color: #0b7a53; border-color: #cdeedf; background: #f3fbf7; } .risk-success b { background: var(--success); }
.risk-warning { color: #9a6200; border-color: #ffe7b3; background: #fffaf0; } .risk-warning b { background: var(--warning); }
.risk-danger { color: #c4262b; border-color: #f9d3d5; background: #fff6f6; } .risk-danger b { background: var(--danger); }
.bg-danger-soft { background: #fdeced; } .bg-success-soft { background: #e7f7f0; } .bg-warning-soft { background: #fff5e0; } .bg-brand-soft { background: var(--brand-soft); }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; margin: 0; font-size: 13.5px; }
.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: var(--line-2); vertical-align: middle; }
.table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #8592a6; font-weight: 600; background: #fafbfd; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tbody tr { transition: background .12s; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f8f9ff; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .t-main { font-weight: 600; color: var(--ink); }
.table .t-sub { font-size: 12px; color: var(--muted); }
.table-card { overflow: hidden; }
.table-responsive { scrollbar-width: thin; }
tr[data-href] { cursor: pointer; }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.avatar-text { display: inline-grid; place-items: center; font-weight: 700; border-radius: 50%; flex: none; letter-spacing: .02em; }
.user-chip .avatar-text { border-radius: 10px; }

/* ---------- buttons & forms ---------- */
.btn { font-weight: 600; border-radius: 11px; font-size: 13.5px; padding: 8px 16px; }
.btn-sm { border-radius: 9px; font-size: 12.5px; padding: 6px 12px; }
.btn-lg { border-radius: 13px; padding: 12px 22px; font-size: 15px; }
.btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 6px 16px -8px rgba(39, 71, 214, .7), inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn-primary:hover, .btn-primary:focus { background: #1f3bc0; border-color: #1f3bc0; }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-light { background: #fff; border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: #f8f9fc; border-color: #d9dfe8; }
.btn-soft { background: var(--brand-soft); color: var(--brand); border: 0; }
.btn-soft:hover { background: #e2e7ff; color: #1f3bc0; }
.form-control, .form-select { border-radius: 11px; border-color: #dde3ec; font-size: 14px; padding: 9px 13px; }
.form-control:focus, .form-select:focus { border-color: #9fb0f5; box-shadow: 0 0 0 4px rgba(39, 71, 214, .1); }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.form-text { font-size: 12px; }
.input-group-text { border-radius: 11px; background: #f8f9fc; border-color: #dde3ec; color: var(--muted); font-size: 13px; }
.ts-control { border-radius: 11px !important; border-color: #dde3ec !important; padding: 9px 13px !important; min-height: 42px; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #9aa6b8; margin-bottom: 10px; }

/* ---------- vehicles ---------- */
.car-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; height: 100%; display: flex; flex-direction: column; color: var(--ink); }
.car-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .35); color: var(--ink); }
.car-img { position: relative; aspect-ratio: 16 / 10; background: #eef1f5; overflow: hidden; }
.car-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.car-card:hover .car-img img { transform: scale(1.05); }
.car-img .pill { position: absolute; top: 12px; left: 12px; backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); }
.car-img .reg { position: absolute; bottom: 12px; left: 12px; background: #fff; color: var(--ink); font-family: 'JetBrains Mono'; font-size: 12px; padding: 3px 8px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--shadow-sm); }
.car-img .cat { position: absolute; bottom: 12px; right: 12px; background: rgba(11, 18, 32, .72); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.car-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.car-title { font-family: 'Manrope'; font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.car-specs { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12.5px; margin: 8px 0 12px; }
.car-specs i { margin-right: 4px; }
.car-price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 12px; }
.car-price strong { font-family: 'Manrope'; font-size: 18px; font-weight: 800; }
.car-price small { color: var(--muted); }
.gallery-main { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #eef1f5; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery-thumbs img { width: 92px; height: 62px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; opacity: .75; transition: .15s; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { border-color: var(--brand); opacity: 1; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.spec { background: #fafbfd; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; }
.spec small { display: block; color: var(--muted); font-size: 11.5px; }
.spec strong { font-size: 13.5px; font-weight: 600; }
.mini-car { width: 64px; height: 42px; border-radius: 8px; object-fit: cover; background: #eef1f5; flex: none; }

/* definition list */
.dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 9px 14px; font-size: 13.5px; margin: 0; }
.dl dt { color: var(--muted); font-weight: 500; }
.dl dd { margin: 0; font-weight: 500; word-break: break-word; }

/* lists */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink); transition: background .12s; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: #f8f9ff; color: var(--ink); }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ico-box { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 16px; }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--line-2); color: #8592a6; margin: 0 auto 10px; }

/* alerts list */
.alert-item { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); color: var(--ink); align-items: flex-start; }
.alert-item:hover { background: #fcfcfe; color: var(--ink); }
.alert-item .bar { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.alert { border-radius: 12px; border: 0; font-size: 13.5px; }

/* tabs */
.nav-tabs-clean { border-bottom: 1px solid var(--line); gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs-clean .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; padding: 10px 14px; border-radius: 0; white-space: nowrap; }
.nav-tabs-clean .nav-link.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }
.nav-tabs-clean .nav-link .count { background: var(--line-2); color: var(--muted); border-radius: 99px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.seg { display: inline-flex; background: #eef1f5; padding: 3px; border-radius: 11px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg a.active, .seg button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- agreement wizard ---------- */
.stepper { display: flex; gap: 6px; margin-bottom: 22px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.stepper .st { flex: 1; min-width: 132px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 12.5px; transition: .2s; }
.stepper .st b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--line-2); color: var(--muted); font-size: 12px; flex: none; }
.stepper .st strong { display: block; color: var(--ink-2); font-size: 13px; }
.stepper .st.active { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(39, 71, 214, .08); }
.stepper .st.active b { background: var(--brand); color: #fff; }
.stepper .st.done b { background: var(--success); color: #fff; }
.wz-pane { display: none; animation: fadeUp .3s ease; }
.wz-pane.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pick-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; background: #fff; transition: .15s; height: 100%; display: block; position: relative; }
.pick-card:hover { border-color: #b9c4f7; }
.pick-card.selected { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(39, 71, 214, .1); }
.pick-card.selected::after { content: "\F26B"; font-family: bootstrap-icons; position: absolute; top: 10px; right: 10px; color: #fff; background: var(--brand); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.pick-card.disabled { opacity: .45; pointer-events: none; }
.pick-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.photo-slot { border: 1.5px dashed #cdd5e1; border-radius: 14px; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); cursor: pointer; position: relative; overflow: hidden; background: #fafbfd; text-align: center; font-size: 12.5px; transition: .15s; }
.photo-slot:hover { border-color: var(--brand); color: var(--brand); background: #f6f8ff; }
.photo-slot i { font-size: 22px; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-slot .tag { position: absolute; bottom: 6px; left: 6px; background: rgba(11, 18, 32, .75); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; z-index: 2; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.tri { display: inline-flex; background: #eef1f5; border-radius: 9px; padding: 2px; }
.tri input { display: none; }
.tri label { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer; color: var(--muted); }
.tri input:checked + label.ok { background: var(--success); color: #fff; }
.tri input:checked + label.issue { background: var(--danger); color: #fff; }
.tri input:checked + label.na { background: #94a3b8; color: #fff; }
.sig-wrap { border: 1.5px dashed #cdd5e1; border-radius: 14px; background: #fff; position: relative; touch-action: none; }
.sig-wrap canvas { width: 100%; height: 180px; display: block; cursor: crosshair; }
.sig-wrap .sig-line { position: absolute; left: 24px; right: 24px; bottom: 40px; border-bottom: 1px solid #cbd5e1; pointer-events: none; }
.sig-wrap .sig-x { position: absolute; left: 20px; bottom: 44px; color: #94a3b8; font-size: 18px; pointer-events: none; }
.sig-img { height: 70px; max-width: 220px; object-fit: contain; }
.sig-text { font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive; font-size: 30px; color: #1e2a6e; line-height: 1; }
.summary-box { background: #fafbfd; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.sum-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.sum-row.total { border-top: 1px dashed #cbd5e1; margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 17px; font-family: 'Manrope'; }
.sticky-side { position: sticky; top: 84px; }
.fuel-gauge { display: flex; gap: 3px; }
.fuel-gauge span { flex: 1; height: 10px; border-radius: 3px; background: #e5e9f0; }
.fuel-gauge span.on { background: linear-gradient(180deg, #22c58b, #0f9d6b); }

/* timeline */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.tl-item.tl-success::before { border-color: var(--success); } .tl-item.tl-danger::before { border-color: var(--danger); } .tl-item.tl-warning::before { border-color: var(--warning); }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9aa6b8; text-align: center; padding-bottom: 4px; }
.cal .day { min-height: 98px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; font-size: 11.5px; overflow: hidden; }
.cal .day.out { background: #fafbfd; opacity: .55; }
.cal .day.today { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(39, 71, 214, .1); }
.cal .day .dn { font-weight: 700; font-size: 12px; margin-bottom: 4px; color: var(--ink-2); }
.cal .ev { display: block; border-radius: 6px; padding: 2px 6px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ev-maint { background: #fff4de; color: #8a5800; } .ev-done { background: #e7f7f0; color: #0b7a53; } .ev-over { background: #fdeced; color: #b42318; } .ev-ret { background: #eef1ff; color: #2340c4; }
@media (max-width: 767.98px) { .cal .day { min-height: 64px; } .cal .ev { font-size: 0; height: 6px; padding: 0; } }

/* compare photos */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #eef1f5; }
.compare figure img { width: 100%; height: 100%; object-fit: cover; }
.compare figcaption { position: absolute; top: 6px; left: 6px; background: rgba(11, 18, 32, .75); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; }

/* misc */
.chart-wrap { position: relative; height: 280px; }
.progress { height: 8px; border-radius: 99px; background: var(--line-2); }
.progress-bar { border-radius: 99px; }
.hover-lift { transition: transform .2s; } .hover-lift:hover { transform: translateY(-2px); }
.doc-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; background: #fff; color: var(--ink); }
.doc-tile:hover { border-color: #c3ccfa; color: var(--ink); }
.doc-thumb { width: 54px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--line-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.qr-box { background: #fff; padding: 14px; border-radius: 16px; border: 1px solid var(--line); display: inline-block; }
.modal-content { border: 0; border-radius: 20px; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); padding: 18px 22px; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 14px; padding: 6px; font-size: 13.5px; }
.dropdown-item { border-radius: 8px; padding: 7px 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .form-control, .filters .form-select { height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; width: auto; }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; }
.auth-visual { position: relative; overflow: hidden; background: #0b1220; color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-visual img.hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 32, .2) 0%, rgba(11, 18, 32, .5) 50%, rgba(11, 18, 32, .95) 100%); }
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual h1 { font-size: 40px; line-height: 1.08; max-width: 520px; }
.auth-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; max-width: 560px; }
.auth-feats div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px; backdrop-filter: blur(8px); font-size: 12.5px; }
.auth-feats i { font-size: 18px; display: block; margin-bottom: 6px; color: #9fb2ff; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-form .inner { width: 100%; max-width: 420px; }
.demo-login { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; cursor: pointer; transition: .15s; background: #fff; width: 100%; text-align: left; }
.demo-login:hover { border-color: #b9c4f7; background: #f8f9ff; }
.demo-login small { color: var(--muted); display: block; font-size: 11.5px; }
@media (max-width: 991.98px) { .auth { grid-template-columns: 1fr; } .auth-visual { min-height: 260px; padding: 28px; } .auth-visual h1 { font-size: 28px; } .auth-feats { display: none; } }

/* ---------- print / documents ---------- */
.doc-page { background: #fff; max-width: 860px; margin: 24px auto; padding: 44px 48px; border-radius: 6px; box-shadow: var(--shadow-lg); color: #0b1220; font-size: 12.5px; }
.doc-page h1 { font-size: 22px; }
.doc-page .doc-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #0b1220; padding-bottom: 16px; margin-bottom: 18px; }
.doc-page table { width: 100%; border-collapse: collapse; }
.doc-page th, .doc-page td { padding: 6px 8px; border: 1px solid #dfe4ec; text-align: left; vertical-align: top; }
.doc-page th { background: #f6f8fb; font-weight: 600; width: 30%; }
.doc-page .sec { font-family: 'Manrope'; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; color: #2747d6; }
.doc-toolbar { position: sticky; top: 0; z-index: 10; background: rgba(247, 248, 251, .9); backdrop-filter: blur(10px); padding: 12px; display: flex; justify-content: center; gap: 8px; border-bottom: 1px solid var(--line); }
.terms { font-size: 11px; color: #334155; columns: 2; column-gap: 24px; }
.terms p { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 640px) { .doc-page { padding: 22px 16px; margin: 0; border-radius: 0; } .terms { columns: 1; } .doc-page .doc-head { flex-direction: column; } }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .no-print, .doc-toolbar, .sidebar, .topbar, .app-footer { display: none !important; }
  .main { margin: 0; }
  .doc-page { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .card { box-shadow: none; }
}