/* Oliver Dean Group — dashboard styles. Plain CSS, no build step. Brand: navy #002D80, red #C8102E, gold #FDCB00, yellow #F7E716. */
:root {
    --brand: #002d80;
    --brand-dark: #001f5c;
    --brand-soft: #e7edf8;
    --danger: #c8102e;
    --danger-dark: #9d0c24;
    --danger-soft: #fdecef;
    --gold: #fdcb00;
    --yellow: #f7e716;
    --slate: #3d4b6b;
    --slate-dark: #222d48;
    --sidebar: #0a1330;
    --sidebar-2: #121d44;
    --sidebar-text: #b3bdd6;
    --ink: #111827;
    --ink-2: #374151;
    --muted: #6b7280;
    --line: #e5e7eb;
    --line-2: #f0f1f3;
    --bg: #f4f5f7;
    --card: #ffffff;
    --ok: #15803d;
    --ok-soft: #dcfce7;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --info: #1d4ed8;
    --info-soft: #dbeafe;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg: 0 20px 45px -12px rgba(16, 24, 40, .25);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --sidebar-w: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--ink); }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 .75em; }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
    background: var(--sidebar); color: var(--sidebar-text);
    display: flex; flex-direction: column; transition: transform .2s ease;
}
.sidebar__brand { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar__brand img { width: 100%; max-width: 196px; height: auto; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sidebar__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6b7684; padding: 14px 12px 6px; }
.nav-link {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0;
    border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 500; position: relative;
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-link:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.nav-link.is-active { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-link.is-active svg { opacity: 1; }
.nav-link.is-locked { opacity: .55; cursor: not-allowed; }
.nav-link.is-locked:hover { background: transparent; color: var(--sidebar-text); }
.nav-link .lock { margin-left: auto; width: 15px; height: 15px; }
.nav-link .soon { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.08); color: #8d98a5; }
.nav-link.is-active .soon { background: rgba(255,255,255,.2); color: #fff; }
.sidebar__user { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; }
.sidebar__user .who { min-width: 0; flex: 1; }
.sidebar__user .name { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user .role { font-size: 12px; }
.sidebar__user button { background: none; border: 0; color: var(--sidebar-text); cursor: pointer; padding: 6px; border-radius: 6px; }
.sidebar__user button:hover { background: var(--sidebar-2); color: #fff; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 30; height: 60px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 28px;
}
.topbar__title { font-weight: 650; font-size: 15px; }
.topbar__spacer { flex: 1; }
.topbar__menu { display: none; background: none; border: 0; padding: 6px; margin-left: -6px; cursor: pointer; color: var(--ink); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.content { padding: 28px; max-width: 1400px; width: 100%; }
.backdrop { display: none; }

@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-lg); }
    .main { margin-left: 0; }
    .topbar { padding: 0 16px; }
    .topbar__menu { display: inline-flex; }
    .content { padding: 18px 16px; }
    .backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 35; }
}

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head p { color: var(--muted); margin: 4px 0 0; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.breadcrumb a { color: var(--muted); }

/* ---------- Cards & layout helpers ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card__body { padding: 20px; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--line); background: #fafafb; border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: flex-end; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.right { text-align: right; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

/* ---------- Side list (filters next to a table) ---------- */
.grid-side { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .grid-side { grid-template-columns: 1fr; } }
.side-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; font: inherit; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left; }
.side-item:hover { background: #f3f4f6; }
.side-item.is-active { background: var(--slate); color: #fff; }
.side-item.is-inactive { opacity: .55; }
.side-item .n { margin-left: auto; font-size: 11px; background: #eef0f2; color: var(--ink-2); padding: 0 7px; border-radius: 99px; }

/* ---------- Stat tiles ---------- */
.stat { padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.stat__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.stat__icon svg { width: 21px; height: 21px; }
.stat__icon.slate { background: #eef1f4; color: var(--slate); }
.stat__value { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: 13px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px;
    border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 13.5px;
    cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--slate); color: #fff; }
.btn-secondary:hover { background: var(--slate-dark); }
.btn-outline { background: #fff; color: var(--ink-2); border-color: #d6d9de; }
.btn-outline:hover { background: #f8f9fa; border-color: #c4c8ce; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: #eef0f2; }
.btn-danger { background: #fff; color: var(--danger-dark); border-color: #f3c3c9; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; }
.btn-icon { width: 34px; padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.form-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); margin: 6px 0 -4px; grid-column: 1 / -1; }
.field label, .label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field .req { color: var(--danger); }
.input, .select, .textarea {
    width: 100%; height: 40px; padding: 0 12px; font: inherit; color: var(--ink); background: #fff;
    border: 1px solid #d6d9de; border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px rgba(78,91,108,.15); }
.input[readonly], .input:disabled, .select:disabled { background: #f6f7f8; color: var(--muted); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field-error { color: var(--danger-dark); font-size: 12.5px; margin-top: 5px; }
.field-hint { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search .input { padding-left: 34px; min-width: 260px; }
@media (max-width: 720px) { .search .input { min-width: 0; } }
.locked-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); background: #f6f7f8; border: 1px dashed #d6d9de; color: var(--ink-2); }
.locked-field svg { width: 14px; height: 14px; color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 16px; background: #fafafb; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.table th button:hover { color: var(--ink); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.is-link { cursor: pointer; }
.table tbody tr:hover td { background: #fbfbfc; }
.table .actions { text-align: right; white-space: nowrap; }
.cell-main { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 12.5px; color: var(--muted); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #eef0f2; color: var(--ink-2); white-space: nowrap; }
.badge svg { width: 12px; height: 12px; }
.badge-red { background: var(--danger-soft); color: var(--danger-dark); }
.badge-navy { background: var(--brand-soft); color: var(--brand); }
.badge-gold { background: #fff5cc; color: #6b5300; }
.badge-green { background: var(--ok-soft); color: var(--ok); }
.badge-amber { background: var(--warn-soft); color: var(--warn); }
.badge-blue { background: var(--info-soft); color: var(--info); }
.badge-slate { background: #e6e9ed; color: var(--slate-dark); }

/* ---------- Avatar ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--slate); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-red { background: var(--danger); }
.avatar-navy { background: var(--brand); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tab { all: unset; cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab .count { font-size: 11px; background: #eef0f2; color: var(--ink-2); padding: 0 7px; border-radius: 99px; }

/* ---------- Definition list ---------- */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.dl div { min-width: 0; }
.dl dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 2px; }
.dl dd { margin: 0; font-weight: 500; word-break: break-word; display: flex; align-items: center; gap: 6px; }
.dl dd svg { width: 13px; height: 13px; color: var(--muted); }
@media (max-width: 720px) { .dl { grid-template-columns: 1fr; } }

/* ---------- Alerts & toasts ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.alert-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.alert-warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 40px); }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; min-width: 260px; }
.toast svg { width: 18px; height: 18px; color: #4ade80; }
.toast.is-error svg { color: #f87171; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; background: rgba(17,24,39,.5); }
.modal__panel { background: #fff; border-radius: 12px; width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); }
.modal__panel.sm { max-width: 460px; }
.modal__head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: 22px; }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: #fafafb; border-radius: 0 0 12px 12px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; color: #c3c8cf; margin: 0 auto 10px; }
.empty h3 { color: var(--ink-2); margin-bottom: 4px; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pager__links { display: flex; gap: 4px; }
.pager__links button, .pager__links span { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; cursor: pointer; display: inline-grid; place-items: center; }
.pager__links .is-current { background: var(--slate); color: #fff; border-color: var(--slate); }
.pager__links [disabled] { opacity: .45; cursor: default; }

/* ---------- Photo gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery a { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #eef0f2; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.gallery a:hover img { transform: scale(1.03); }
.gallery .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.photo-day { font-weight: 650; color: var(--ink-2); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.photo-day:first-child { margin-top: 0; }
.dropzone { border: 2px dashed #d6d9de; border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); background: #fafafb; cursor: pointer; display: block; }
.dropzone:hover { border-color: var(--slate); }
.dropzone svg { width: 28px; height: 28px; margin: 0 auto 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; }

/* ---------- Customer code ---------- */
.code-chip { font-family: var(--mono); font-weight: 600; background: #f3f4f6; border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }

/* ---------- Profile header ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-head .meta { flex: 1; min-width: 220px; }
.profile-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Membership card ---------- */
.member-card {
    position: relative; overflow: hidden; width: 100%; max-width: 420px; aspect-ratio: 1.586; border-radius: 16px; padding: 22px 24px;
    color: #fff; background: radial-gradient(120% 140% at 100% 0%, #16245a 0%, #0a1330 55%, #060b1f 100%); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; justify-content: space-between;
}
.member-card::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; border: 28px solid rgba(253,203,0,.18); }
.member-card__top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.member-card__top img { height: 30px; width: auto; }
.member-card__tier { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: var(--brand); padding: 3px 10px; border-radius: 99px; font-weight: 700; }
.member-card__name { font-size: 17px; font-weight: 650; letter-spacing: .02em; position: relative; z-index: 1; }
.member-card__code { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; opacity: .9; position: relative; z-index: 1; }
.member-card__barcode { background: #fff; border-radius: 8px; padding: 8px 10px 4px; position: relative; z-index: 1; }
.member-card__barcode svg { display: block; width: 100%; height: 44px; }

/* ---------- Upcoming placeholder ---------- */
.upcoming { text-align: center; padding: 64px 24px; }
.upcoming__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin: 0 auto 18px; }
.upcoming__icon svg { width: 30px; height: 30px; }
.upcoming p { max-width: 560px; margin: 8px auto 0; color: var(--muted); }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; }
.auth__art { background: radial-gradient(120% 120% at 0% 100%, #16245a 0%, #0a1330 50%, #060b1f 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__art::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid rgba(253,203,0,.16); }
.auth__art img { width: 260px; position: relative; z-index: 1; }
.auth__art h2 { color: #fff; font-size: 30px; font-weight: 700; max-width: 420px; position: relative; z-index: 1; }
.auth__art p { color: #aab4c0; max-width: 420px; position: relative; z-index: 1; }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth__form { width: 100%; max-width: 380px; }
.auth__form .logo-mobile { display: none; width: 220px; margin-bottom: 28px; }
.auth__form h1 { margin-bottom: 6px; }
.auth__form .lead { color: var(--muted); margin-bottom: 26px; }
.auth__form .field { margin-bottom: 16px; }
.auth__form .btn { width: 100%; height: 42px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } .auth__form .logo-mobile { display: block; } }

/* ---------- Sub navigation (module tabs) ---------- */
.subnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; margin-bottom: 20px; box-shadow: var(--shadow); }
.subnav__link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.subnav__link svg { width: 16px; height: 16px; }
.subnav__link:hover { background: #f3f4f6; text-decoration: none; }
.subnav__link.is-active { background: var(--slate); color: #fff; }

/* ---------- Picker list (choose customer / vehicle) ---------- */
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; text-align: left; cursor: pointer; margin-bottom: 8px; }
.pick:hover { border-color: var(--slate); background: #fafbfc; }
.pick.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,45,128,.12); }

/* ---------- Line items ---------- */
.lines td { vertical-align: top; }
.lines .group-row td { background: #fafafb; font-weight: 700; color: var(--slate); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 9px; padding-bottom: 9px; }
.totals { width: 100%; max-width: 360px; margin-left: auto; }
.totals div { display: flex; justify-content: space-between; padding: 5px 0; }
.totals .grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 700; }
.inline-form { display: grid; grid-template-columns: 160px minmax(0, 2fr) 90px 80px 130px auto; gap: 8px; align-items: start; }
@media (max-width: 1100px) { .inline-form { grid-template-columns: 1fr 1fr; } .inline-form .wide { grid-column: span 2; } }

/* ---------- Stepper (job stages) ---------- */
.stepper { display: flex; gap: 0; margin-bottom: 20px; overflow-x: auto; }
.step { flex: 1; min-width: 112px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--muted); }
.step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.step + .step { border-left: 0; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eef0f2; font-size: 12px; flex-shrink: 0; }
.step.is-done { color: var(--ink-2); }
.step.is-done .dot { background: var(--ok); color: #fff; }
.step.is-current { color: var(--info); background: var(--info-soft); }
.step.is-current .dot { background: var(--info); color: #fff; }

/* ---------- Kanban ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.board__col { background: #eceef1; border-radius: var(--radius); padding: 10px; min-height: 200px; }
.board__col.is-over { background: #e1e5ea; outline: 2px dashed var(--slate); }
.board__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.kcard { background: #fff; border-radius: 8px; padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--shadow); border-left: 3px solid var(--slate); cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.is-late { border-left-color: var(--danger); }
.kcard .plate { font-family: var(--mono); font-weight: 700; }
.kcard .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--slate); }
.timeline li.is-red::after { border-color: var(--danger); background: var(--danger); }
.timeline .when { font-size: 12px; color: var(--muted); }

/* ---------- Report bars ---------- */
.bar-row { display: grid; grid-template-columns: 120px 1fr 110px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.bar { height: 10px; background: #eef0f2; border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bar.slate span { background: var(--slate); }

/* ---------- Mini calendar (member appointments) ---------- */
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mini-cal__dow { font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.mini-cal__day { padding: 7px 0; border-radius: 7px; font-size: 13px; position: relative; }
.mini-cal__day.is-out { color: #c3c8cf; }
.mini-cal__day.is-today { outline: 2px solid var(--slate); }
.mini-cal__day.has-event::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--brand); }
.mini-cal__day.is-free { all: unset; box-sizing: border-box; padding: 7px 0; border-radius: 7px; font-size: 13px; position: relative; text-align: center; cursor: pointer; font-weight: 700; color: var(--ink); background: #eef1f4; }
.mini-cal__day.is-free:hover { background: var(--brand-soft); color: var(--brand-dark); }
.mini-cal__day.is-free.is-today { outline: 2px solid var(--slate); }
.mini-cal__day.is-selected, .mini-cal__day.is-free.is-selected { background: var(--brand); color: #fff; }
.mini-cal__day.is-selected::after { background: #fff; }
.mini-cal.is-loading { opacity: .5; }
.mini-cal__book { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mini-cal__book .field { margin: 0; }
.upcoming-appt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.upcoming-appt:last-child { border-bottom: 0; }
.upcoming-appt__when { display: flex; flex-direction: column; font-size: 13px; min-width: 104px; }
.upcoming-appt__when span { color: var(--muted); }
.upcoming-appt__car { min-width: 0; font-size: 13px; }
.upcoming-appt__status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.upcoming-appt__status .btn { padding: 2px 6px; }

/* ---------- Slot picker (appointments) ---------- */
.slot-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.slot-group > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; }
.slot-group > summary::-webkit-details-marker { display: none; }
.slot-group[open] > summary { border-bottom: 1px solid var(--line); background: #fafafb; }
.slot-group .slot-group { margin: 8px 10px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.slots button { min-width: 72px; }

/* ---------- E-Mail (Outlook-style three panes) ---------- */
.mail { display: grid; grid-template-columns: 220px minmax(260px, 360px) minmax(0, 1fr); gap: 14px; height: calc(100vh - 116px); min-height: 520px; }
.mail > .card { overflow: hidden; display: flex; flex-direction: column; }
.mail__folders { padding: 12px 10px; overflow-y: auto !important; }
.mail__search { padding: 10px; border-bottom: 1px solid var(--line); }
.mail__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mail__filters .select, .mail__filters .input { width: auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.mail__filters .select { flex: 1 1 110px; }
.mail__filters label.small { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; }
.mail__filters label.small .input { flex: 1; }
.mail__items { overflow-y: auto; flex: 1; }
.mail__items.is-loading { opacity: .5; }
.mail__item { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; border-left: 3px solid transparent; }
.mail__item:hover { background: #f8f9fa; }
.mail__item.is-active { background: var(--brand-soft); border-left-color: var(--brand); }
.mail__item.is-unread .mail__from, .mail__item.is-unread .mail__subject { font-weight: 700; color: var(--ink); }
.mail__item.is-unread { border-left-color: var(--slate); }
.mail__from { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail__subject { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mail__toolbar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mail__header { padding: 14px 16px 10px; }
.mail__header h2 { margin-bottom: 6px; }
.mail__body { flex: 1; width: 100%; border: 0; border-top: 1px solid var(--line-2); background: #fff; }
.mail__text { flex: 1; margin: 0; padding: 16px; white-space: pre-wrap; font-family: var(--font); font-size: 14px; overflow: auto; border-top: 1px solid var(--line-2); }
.mail__back, .mail__backdrop { display: none; }
@media (max-width: 1100px) {
    .mail { grid-template-columns: minmax(0, 1fr); height: auto; }
    .mail__folders { flex-direction: row !important; flex-wrap: wrap; gap: 4px; }
    .mail__folder-list { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
    .mail__folders .side-item { width: auto; }
    /* One page that scrolls (no inner scroll boxes); the cards keep everything within the screen width. */
    .mail > .card:not(.mail__read) { min-width: 0; max-width: 100%; }
    .mail__folders, .mail__items { overflow: visible !important; }
    .mail__items { max-height: none; }
    /* A clicked e-mail opens as a pop-up over the list (Back, the dark background or Esc closes it). */
    .mail > .mail__read { display: none; }
    .mail > .mail__read.is-open { display: flex; position: fixed; z-index: 55; top: calc(12px + env(safe-area-inset-top)); left: 8px; right: 8px;
        bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: mail-pop .18s ease-out; }
    .mail__backdrop { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(17,24,39,.45); }
    html.mail-open, html.mail-open body { overflow: hidden; overscroll-behavior: none; }
    .mail__back { display: inline-flex; }
    .mail__toolbar { position: sticky; top: 0; background: #fff; z-index: 1; }
    .mail__header { overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
    /* Phone: the folders (Inbox, Sent, Junk, Trash…) are blocks, 2 per row, always within the screen */
    .mail__folder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; width: 100%; box-sizing: border-box; }
    .mail__folder-list .side-item {
        position: relative; width: auto; min-width: 0; box-sizing: border-box; flex-direction: column; justify-content: center; text-align: center; gap: 6px;
        min-height: 70px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
        font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere;
    }
    .mail__folder-list .side-item svg { width: 21px !important; height: 21px !important; color: var(--muted); }
    .mail__folder-list .side-item .n { position: absolute; top: 6px; right: 6px; margin: 0; }
    .mail__folder-list .side-item.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); }
    .mail__folder-list .side-item.is-active svg { color: var(--brand); }
    .mail__folders > .small { margin: 10px 2px 2px !important; width: 100%; }
}
@keyframes mail-pop { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Website builder ---------- */
.builder { margin: -28px; display: flex; flex-direction: column; height: calc(100vh - 60px); }
.builder__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.builder__body { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.builder__panel { background: #fff; border-right: 1px solid var(--line); padding: 16px; overflow-y: auto; }
.builder__stage { background: #e9ebef; overflow: auto; display: flex; justify-content: center; padding: 16px; }
.builder__frame { background: #fff; border: 0; width: 100%; height: 100%; min-height: 600px; box-shadow: var(--shadow-lg); border-radius: 8px; transition: width .2s; }
.builder__frame.is-tablet { width: 820px; }
.builder__frame.is-mobile { width: 390px; }
.builder__block { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; margin-bottom: 6px; background: #fff; }
.builder__block:hover { border-color: var(--slate); }
.builder__grip { cursor: grab; color: #b4bac3; font-size: 13px; padding: 0 4px; user-select: none; }
.builder__blockname { all: unset; cursor: pointer; flex: 1; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; min-width: 0; }
.builder__blockname .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 180px; }
@media (max-width: 960px) {
    .builder { margin: -18px -16px; height: auto; }
    .builder__body { grid-template-columns: 1fr; }
    .builder__stage { min-height: 70vh; }
}

/* Website → Appearance */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.theme-pick__item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; background: #fff; }
.theme-pick__item.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.theme-pick__shot { display: grid; grid-template-rows: 14px 46px 10px 10px; gap: 6px; padding: 8px; border-radius: 7px; background: #f3f4f6; margin-bottom: 6px; }
.theme-pick__shot i { background: #fff; border-radius: 3px; }
.theme-pick__shot b { background: var(--s); border-radius: 4px; }
.theme-pick__shot em { background: #dfe2e6; border-radius: 3px; width: 70%; }
.theme-pick__shot em + em { width: 30%; background: var(--p); }
.theme-pick__shot--bold i { background: #111; }
.theme-pick__shot--bold b { background: linear-gradient(135deg, #111, var(--s)); }
.theme-pick__shot--clean { background: #fff; border: 1px solid var(--line); }
.theme-pick__shot--clean b { background: #f3f4f6; }
.theme-pick__shot--classic i { background: var(--s); box-shadow: inset 0 -5px 0 var(--p); }
.color-swatch { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.identity-box { height: 96px; border: 1px dashed #d6d9de; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; background: #fafafb; text-align: center; }
.identity-box.is-dark { background: #1f2329; }
.identity-box img { max-height: 76px; max-width: 100%; object-fit: contain; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.menu-item .input, .menu-item .select { min-width: 0; flex: 1; }
@media (max-width: 640px) { .menu-item { flex-wrap: wrap; } }

/* Marketing */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-red { color: var(--danger-dark); }
.text-green { color: #15803d; font-weight: 700; }
.section-title { font-size: 17px; margin: 6px 0 12px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.list-row:last-child { border-bottom: 0; }
.stat--link { color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.stat--link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.trend svg { width: 100%; height: 120px; display: block; }
.trend__line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.trend__area { fill: var(--brand-soft); }
.trend__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.trend-empty { color: var(--muted); font-size: 13px; padding: 30px 0; text-align: center; background: #fafafb; border-radius: 8px; }
.toplist__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 10px; font-size: 13.5px; }
.toplist__row .bar { grid-column: span 2; height: 6px; }
.toplist__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toplist__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs__item { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #eef0f2; }
.thumbs__item img { width: 100%; height: 100%; object-fit: cover; }
.thumbs__item button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; font-size: 16px; }
.thumbs__add { width: 84px; height: 84px; border: 2px dashed #d6d9de; border-radius: 8px; background: #fafafb; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; }
.thumbs__add svg { width: 20px; height: 20px; }
.post-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.post-preview__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.post-preview__head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.post-preview__text { padding: 0 12px 10px; white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.post-preview__img { position: relative; }
.post-preview__img img { width: 100%; display: block; max-height: 340px; object-fit: cover; }
.post-preview__img span { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 99px; font-size: 12px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.post-card { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: inherit; background: #fff; }
.post-card:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.post-card img, .post-card__noimg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #f3f4f6; }
.post-card__noimg { padding: 12px; font-size: 13px; color: var(--ink-2); overflow: hidden; }
.post-card__meta, .post-card__stats { padding: 6px 10px 0; font-size: 12px; color: var(--muted); }
.post-card__stats { padding-bottom: 9px; color: var(--ink-2); }
.comment { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.comment.is-new { background: linear-gradient(90deg, var(--brand-soft), transparent 60%); margin: 0 -18px; padding: 12px 18px; }
.comment__thumb { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.comment__body { flex: 1; min-width: 0; }
.comment__reply { margin-top: 6px; padding: 8px 10px; background: #f3f4f6; border-radius: 8px; font-size: 14px; }
.chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 250px); min-height: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chat__list { border-right: 1px solid var(--line); overflow-y: auto; }
.chat__search { padding: 10px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; z-index: 1; }
.chat__item { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 11px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.chat__item:hover { background: #f8f9fa; }
.chat__item.is-active { background: #eef0f2; }
.chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #f3f4f6; }
.chat--wa .chat__messages { background: #efeae2; }
.chat__composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.chat__composer .textarea { flex: 1; resize: none; min-height: 42px; }
.chat__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.chat__empty svg { width: 36px; height: 36px; }
.bubble { max-width: min(75%, 520px); padding: 7px 10px 5px; border-radius: 9px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 14.5px; overflow-wrap: anywhere; }
.bubble--in { align-self: flex-start; }
.bubble--out { align-self: flex-end; background: #d9fdd3; }
.bubble.is-failed { background: #fdecec; }
.bubble__time { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
.bubble__img { display: block; max-width: 100%; max-height: 300px; border-radius: 6px; margin-bottom: 4px; }
.bubble__file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(0,0,0,.05); border-radius: 6px; margin-bottom: 4px; }
.bubble__file svg { width: 16px; height: 16px; }
.ticks { margin-left: 3px; }
.ticks--read { color: #53bdeb; }
.ticks--failed { color: var(--danger-dark); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 3px; }
.dropdown { position: relative; }
.dropdown__menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: 300px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 4px; }
.dropdown__menu--up { top: auto; bottom: calc(100% + 4px); }
.dropdown__item { all: unset; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.dropdown__item:hover { background: #f3f4f6; }
.wa-template { white-space: pre-wrap; background: #d9fdd3; padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.mail-preview { width: 100%; height: 720px; border: 0; display: block; background: #f3f4f6; border-radius: 0 0 var(--radius) var(--radius); }
.howto { background: #fafafb; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px; }
.howto summary { cursor: pointer; font-weight: 600; }
.howto ol { margin: 10px 0 4px; padding-left: 20px; line-height: 1.65; }
.howto li { margin-bottom: 6px; }
@media (max-width: 900px) {
    .chat { grid-template-columns: 1fr; height: auto; }
    .chat__list { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
    .chat__messages { min-height: 360px; max-height: 60vh; }
}

/* Phase 8: notifications, Car Status Form, calendar, booth, vendors */
.notify-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 2px rgba(250, 204, 21, .35); vertical-align: middle; flex-shrink: 0; animation: notify-pulse 1.6s ease-in-out infinite; }
.nav-link .notify-dot { margin-left: auto; }
@keyframes notify-pulse { 50% { box-shadow: 0 0 0 5px rgba(250, 204, 21, .12); } }
.toast.is-notice { border-left: 4px solid #facc15; }
.bell { position: relative; margin-right: 10px; }
.bell__btn { all: unset; cursor: pointer; position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.bell__btn:hover { background: #f3f4f6; }
.bell__btn svg { width: 21px; height: 21px; }
.bell__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bell__panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.14); z-index: 60; }
.bell__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; }
.bell__item { all: unset; box-sizing: border-box; display: flex; gap: 10px; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.bell__item:hover { background: #f8f9fa; }
.bell__item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--muted); }
.bell__item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell__item.is-unread { background: #fffbeb; }
.bell__item.is-unread svg { color: #ca8a04; }
.attention { border-left: 4px solid #facc15; }

/* Car Status Form */
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.check-row.has-error span:first-child { color: var(--danger-dark); font-weight: 600; }
.okbad { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.okbad label { cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); background: #fff; user-select: none; }
.okbad label + label { border-left: 1px solid var(--line); }
.okbad__ok.is-on { background: #16a34a; color: #fff; }
.okbad__bad.is-on { background: #dc2626; color: #fff; }
.check-row.has-error .okbad { border-color: #dc2626; box-shadow: 0 0 0 2px #fdecec; }
.car-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.car-views__item--top { grid-row: span 2; align-self: start; max-width: 190px; justify-self: center; }
.car-views__item--front, .car-views__item--back { max-width: 260px; }
.car-views--print { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.car-views--print .car-views__item--top { grid-row: auto; }
.car-diagram { width: 100%; height: auto; display: block; background: #f8fafc; border: 1px solid var(--line-2); border-radius: 10px; touch-action: manipulation; }
.car-diagram.is-interactive { cursor: crosshair; }
.car-diagram .body { fill: #fff; stroke: #374151; stroke-width: 2; stroke-linejoin: round; }
.car-diagram .glass { fill: #dbeafe; stroke: #374151; stroke-width: 1.5; }
.car-diagram .line { fill: none; stroke: #9ca3af; stroke-width: 1.5; stroke-linecap: round; }
.car-diagram .line-fill { fill: #f3f4f6; stroke: #9ca3af; stroke-width: 1.5; }
.car-diagram .tyre { fill: #374151; }
.car-diagram .rim { fill: #d1d5db; }
.car-diagram .lamp { fill: #fef9c3; stroke: #9ca3af; stroke-width: 1; }
.car-diagram .lamp--rear { fill: #fecaca; }
.car-diagram__mark path { stroke: #dc2626; stroke-width: 3.5; stroke-linecap: round; pointer-events: none; }
.car-diagram__mark .hit { fill: rgba(220, 38, 38, .12); stroke: none; cursor: pointer; }

/* Dashboard calendar */
.calendar__toggle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.calendar__toggle h2 { margin: 0; }
.calendar__toggle svg { width: 18px; height: 18px; }
.calendar__chev { transition: transform .15s; }
.calendar__chev.is-open { transform: rotate(180deg); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.is-active { background: var(--slate); color: #fff; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 18px 14px; }
.calendar__dow { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.calendar__day { all: unset; box-sizing: border-box; cursor: pointer; min-height: 92px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: #fff; overflow: hidden; }
.calendar__grid.is-month .calendar__day { min-height: 70px; }
.calendar__day:hover { border-color: var(--slate); }
.calendar__day.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.calendar__day.is-selected { background: #f1f5f9; border-color: var(--slate); }
.calendar__day.is-other { opacity: .45; }
.calendar__day.is-past { background: #fafafa; }
.calendar__num { font-weight: 700; font-size: 13px; }
.cal-chip { font-size: 11px; padding: 1px 6px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-chip--appt { background: #dcfce7; color: #166534; }
.cal-chip--req { background: #fef3c7; color: #92400e; }
.cal-chip--booth { background: #dbeafe; color: #1e40af; }
.cal-chip--due { background: #f3f4f6; color: var(--ink-2); }
.calendar__detail { border-top: 1px solid var(--line); padding: 14px 18px 16px; background: #fbfbfc; }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.slot.is-free { background: #f8fafc; }
.slot__time { font-weight: 700; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.slot__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.mini-steps { display: flex; gap: 3px; flex-wrap: wrap; }
.mini-steps span { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: #f3f4f6; color: #9ca3af; white-space: nowrap; }
.mini-steps span.is-done { background: #dcfce7; color: #166534; }
.mini-steps span.is-current { background: var(--info-soft); color: var(--info); }
.booth-live.is-busy { border-left: 4px solid var(--brand); }
.vendor-inline { background: #fafafb; border: 1px dashed var(--line); }
@media (max-width: 760px) {
    .calendar__grid { gap: 3px; padding: 0 10px 12px; }
    .calendar__day { min-height: 58px; padding: 4px; }
    .cal-chip { font-size: 9.5px; padding: 0 4px; }
    .car-views { grid-template-columns: 1fr; }
    .car-views__item--top { grid-row: auto; }
    .slot { grid-template-columns: 54px 1fr; }
}
.theme-pick__shot--odg { background: #fff; border: 1px solid var(--line); }
.theme-pick__shot--odg i { background: #fff; box-shadow: inset 0 -3px 0 var(--p); }
.theme-pick__shot--odg b { background: linear-gradient(120deg, var(--p), var(--s)); }
.theme-pick__shot--odg em { background: var(--s); }

/* New appointment popup */
.pick-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pick-list__item { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.pick-list__item:last-child { border-bottom: 0; }
.pick-list__item:hover { background: #f8fafc; }
.d-block { display: block; }
.slot-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-pick { cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-weight: 600; display: flex; flex-direction: column; align-items: center; min-width: 70px; background: #fff; }
.slot-pick:hover { border-color: var(--slate); }
.slot-pick.is-on { background: var(--slate); color: #fff; border-color: var(--slate); }
.slot-pick.is-on .muted { color: #e5e7eb; }

.feature-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; }
.feature-check__row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.feature-check__mark { width: 18px; font-weight: 800; }
.feature-check__row.is-ok .feature-check__mark { color: #15803d; }
.feature-check__row.is-off { color: var(--muted); }
.slot.is-bookable { cursor: pointer; transition: border-color .15s, background .15s; }
.slot.is-bookable:hover, .slot.is-bookable:focus-visible { border-color: var(--brand); background: var(--brand-soft); outline: none; }
.slot__free { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; font-size: 13.5px; }
.slot__free svg { width: 15px; height: 15px; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #facc15; color: #422006; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.chat__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px 4px; }
.chat__item--waiting { cursor: default; background: #fffbeb; }
.chat-system { align-self: center; font-size: 12px; color: #6b7280; background: rgba(255,255,255,.75); padding: 3px 10px; border-radius: 99px; text-align: center; max-width: 90%; }
.chat--live .chat__messages { background: #f3f4f6; }
.mail-presence { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 4px 10px; margin-bottom: 6px; }
.mail-presence .dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; }
.mail-presence--done { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.mail-presence svg { width: 14px; height: 14px; }
.mail__done { font-size: 11.5px; color: #166534; font-weight: 600; }
.th-sort { all: unset; cursor: pointer; font: inherit; font-weight: 600; color: inherit; white-space: nowrap; }
.th-sort:hover, .th-sort.is-active { color: var(--brand); }

/* =====================================================================
   Layout v2 — grouped left panel without scrollbar, friendly sub-menus,
   tables that fit, and a real phone-app design (bottom tab bar).
   ===================================================================== */

/* Quiet, thin scrollbars wherever scrolling is unavoidable (mail list, chat…). */
* { scrollbar-width: thin; scrollbar-color: #cdd2d8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cdd2d8; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Left panel: compact groups, fits the screen ---- */
.sidebar__brand { padding: 16px 18px 12px; }
.sidebar__brand img { max-height: 46px; width: auto; max-width: 100%; }
.sidebar__nav { padding: 6px 10px 10px; scrollbar-width: none; }
.sidebar__nav::-webkit-scrollbar { display: none; }
.sidebar__label { font-size: 10.5px; font-weight: 700; padding: 12px 12px 4px; color: #6b7684; }
.nav-link { padding: 7px 12px; margin: 1px 0; }
.sidebar__user { padding: 10px 14px; }
@media (min-width: 961px) and (max-height: 820px) {
    .sidebar__label { padding: 8px 12px 2px; font-size: 10px; }
    .nav-link { padding: 6px 12px; }
}
@media (min-width: 961px) and (max-height: 700px) {
    .sidebar__brand { padding: 10px 16px 8px; }
    .sidebar__brand img { max-height: 34px; }
    .sidebar__label { font-size: 0; height: 1px; padding: 0; margin: 6px 12px; background: rgba(255,255,255,.08); }
    .nav-link { padding: 5px 12px; }
    .sidebar__user { padding: 8px 14px; }
    .sidebar__user .role { display: none; }
}

/* ---- Sub-menus (x-subnav): one row on desktop, a dropdown on the phone ---- */
.subnav { gap: 6px; }
.subnav__toggle { display: none; }
.subnav__links { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.subnav__actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.subnav__chev { transition: transform .15s; }
.subnav__chev.is-open { transform: rotate(180deg); }

/* ---- Tabs and tables: wrap instead of sideways scrolling ---- */
.tabs { flex-wrap: wrap; overflow: visible; }
.table th, .table td { padding: 10px 14px; }
@media (min-width: 961px) and (max-width: 1280px) {
    .table th, .table td { padding: 9px 10px; }
    .hide-md { display: none; }
}

/* =====================================================================
   Phone app (installed PWA or phone browser)
   ===================================================================== */
.tabbar { display: none; }

@media (max-width: 760px) {
    body { font-size: 15px; background: #eef0f3; }
    h1 { font-size: 20px; }

    /* Header */
    .topbar { height: 54px; padding: 0 12px; padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
    .topbar__menu, .live-dot { display: none; }
    .topbar__title { font-size: 16px; font-weight: 700; }
    .content { padding: 12px 12px calc(86px + env(safe-area-inset-bottom)); }

    /* Bottom tab bar */
    .tabbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
        border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(16,24,40,.06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .tabbar__item {
        all: unset; box-sizing: border-box; position: relative; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 52px; border-radius: 12px; color: #6b7280; font-size: 11px; font-weight: 600; text-align: center;
    }
    .tabbar__item svg { width: 23px; height: 23px; }
    .tabbar__item.is-active { color: var(--brand); }
    .tabbar__item.is-active svg { stroke-width: 2.4; }
    .tabbar__item.is-locked { opacity: .45; }
    .tabbar__item:active { background: #f3f4f6; }
    .tabbar__badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #facc15; color: #422006; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
    .tabbar__dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 2px #fff; }

    /* "More" = the full menu as a sheet */
    .sidebar { width: min(86vw, 330px); }
    .sidebar__nav { overflow-y: auto; }
    .nav-link { padding: 11px 12px; font-size: 15px; }
    .sidebar__label { font-size: 11px; padding: 14px 12px 4px; height: auto; margin: 0; background: none; }

    /* Page head: title, then the action buttons side by side */
    .page-head { margin-bottom: 14px; gap: 10px; align-items: stretch; }
    .page-head p { font-size: 13.5px; }
    .page-head__actions { width: 100%; }
    .page-head__actions > .btn, .page-head__actions > a.btn, .page-head__actions > button { flex: 1 1 auto; justify-content: center; }

    /* Sub-menu → one compact dropdown button */
    .subnav { flex-direction: column; align-items: stretch; padding: 6px; border-radius: 14px; }
    .subnav__toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 700; color: var(--ink); border-radius: 10px; }
    .subnav__toggle svg { width: 19px; height: 19px; flex-shrink: 0; }
    .subnav__toggle .subnav__current { flex: 1; }
    .subnav__links { display: none; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--line-2); }
    .subnav__links.is-open { display: flex; }
    .subnav__link { padding: 11px 12px; font-size: 15px; border-radius: 10px; }
    .subnav__actions { margin-left: 0; }
    .subnav__actions > .btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }

    /* Touch-friendly controls (16px inputs stop iPhone zooming in) */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    .input, .select, .textarea { font-size: 16px; min-height: 44px; }
    .textarea { min-height: 88px; }

    /* Cards & numbers */
    .card { border-radius: 14px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 12px; gap: 10px; }
    .stat__value { font-size: 19px; }
    .stat__icon { width: 36px; height: 36px; }

    /* Tables become a list of cards — no sideways scrolling */
    .table-wrap { overflow: visible; }
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
    .table tr:last-child { border-bottom: 0; }
    .table td { padding: 2px 0; border: 0; text-align: left !important; }
    .table td:empty { display: none; }
    .table tbody tr:hover td { background: transparent; }
    .table .actions { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; justify-content: flex-start; }
    .table .actions:empty { display: none; }
    .hide-md, .hide-sm { display: none !important; }

    /* Pop-ups slide up from the bottom like an app sheet */
    .modal { align-items: flex-end; padding: 0; }
    .modal__panel, .modal__panel.sm { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 94vh; overflow-y: auto; }
    .modal__head { position: sticky; top: 0; background: #fff; z-index: 1; padding: 14px 16px; border-radius: 18px 18px 0 0; }
    .modal__body { padding: 16px; }
    .modal__foot { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; }
    .modal__foot > .btn { flex: 1 1 auto; justify-content: center; }

    /* Toasts above the tab bar */
    .toasts { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ---- Tab lists (POS): icons everywhere; on the phone one clean row per tab, below each other ---- */
.tabs--list .tab svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
    .card__head:has(> .tabs--list) { flex-direction: column; align-items: stretch; gap: 10px; }
    .card__head .search { width: 100%; max-width: none; }
    /* Phone: the tabs are blocks, 3 per row (icon, name, count) — drawn by CSS only, so nothing jumps while loading */
    .tabs--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-bottom: 0 !important; margin-bottom: 14px; width: 100%; }
    .tabs--list .tab {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
        width: auto; box-sizing: border-box; gap: 6px; margin: 0; padding: 12px 6px 10px; min-height: 86px;
        border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-2);
        font-size: 12.5px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
    }
    .tabs--list .tab svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--muted); }
    .tabs--list .tab .count { position: absolute; top: 6px; right: 6px; margin: 0; min-width: 20px; text-align: center; font-size: 11px; padding: 0 6px; }
    .tabs--list .tab .notify-dot { position: absolute; top: 8px; left: 8px; }
    .tabs--list .tab.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); }
    .tabs--list .tab.is-active svg { color: var(--brand); }
    .tabs--list .tab.is-active .count { background: var(--brand); color: #fff; }
}

/* Website builder: colour picker */
.color-swatch { width: 44px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; flex-shrink: 0; }

/* ---- Menu on phone / tablet: smooth slide-in above everything, page behind it locked ---- */
.sidebar__brand { display: flex; align-items: center; gap: 8px; }
.sidebar__brand > a { flex: 1; min-width: 0; }
.sidebar__close { display: none; }
html, body { touch-action: manipulation; }
/* The menu is not drawn at all while closed (display:none) and is painted fresh each time it opens.
   A permanently off-screen, transformed menu with blurred bars behind it made Android Chrome
   drop parts of the menu (blank rows, stray lines). No backdrop blur on phones either. */
@media (max-width: 960px) {
    .sidebar {
        display: none; z-index: 70; height: 100vh; height: 100dvh; bottom: auto;
        transform: none; transition: none; will-change: auto;
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }
    /* Opens instantly (no slide): some phones kept half-drawn frames of the slide-in on screen (stripes, page showing through).
       The open menu and its dark background are each their own layer, so the page behind is never redrawn for them. */
    .sidebar.is-open { display: flex; animation: none; will-change: transform; }
    .sidebar__nav { flex: 1 0 auto; overflow: visible; }
    .sidebar__close {
        all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0;
        display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; background: rgba(255,255,255,.08);
    }
    .sidebar__close svg { width: 20px; height: 20px; }
    .backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: rgba(17,24,39,.5); }
    .backdrop.is-open { display: block; animation: none; will-change: opacity; }
    html.nav-open, html.nav-open body { overflow: hidden; overscroll-behavior: none; }
    .topbar, .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
    .nav-link, .nav-link:hover { transition: none; }
    .nav-link:hover { background: transparent; color: var(--sidebar-text); }
    .nav-link.is-active, .nav-link.is-active:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
}
@keyframes menu-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sidebar.is-open, .backdrop.is-open { animation: none; } }
@media (max-width: 760px) {
    .sidebar__user { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* Website builder: field group heading */
.builder__group { margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Chat tab flashes yellow while a visitor waits for a chat (like Windows Messenger) */
@keyframes chat-flash {
    0%, 55% { background: #facc15; color: #422006; box-shadow: 0 0 0 2px rgba(250,204,21,.35); }
    56%, 100% { background: transparent; color: inherit; box-shadow: none; }
}
.nav-link.is-flashing, .tabbar__item.is-flashing { position: relative; isolation: isolate; color: #facc15; }
.tabbar__item.is-flashing { color: #a16207; }
.nav-link.is-flashing::before, .tabbar__item.is-flashing::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: rgba(250,204,21,.28); box-shadow: 0 0 0 2px rgba(250,204,21,.35);
    opacity: 0; will-change: opacity; animation: chat-flash-on 1.1s steps(1, end) infinite;
}
@keyframes chat-flash-on { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.nav-link.is-flashing .nav-count { background: #facc15; color: #422006; }
@media (prefers-reduced-motion: reduce) {
    .nav-link.is-flashing::before, .tabbar__item.is-flashing::before { animation: none; opacity: 1; }
}

/* SEO score badge (Website → SEO, page editor) */
.seo-score { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 8px; border-radius: 99px; font-weight: 800; font-size: 13px; color: #fff; }
.seo-score--green { background: #16a34a; }
.seo-score--amber { background: #d97706; }
.seo-score--red { background: #dc2626; }
.seo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seo-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.seo-checks .dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.seo-checks .dot--good { background: #16a34a; } .seo-checks .dot--warn { background: #d97706; } .seo-checks .dot--bad { background: #dc2626; }
.serp { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; font-family: arial, sans-serif; }
.serp__url { font-size: 12.5px; color: #202124; }
.serp__title { font-size: 19px; color: #1a0dab; line-height: 1.3; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp__desc { font-size: 13.5px; color: #4d5156; line-height: 1.45; }

/* Logos link to the homepage */
.auth__art > a { position: relative; z-index: 1; display: inline-block; }
.auth__form > a { display: inline-block; }

/* Job board: 3 columns per row (no sideways scrolling), each status its own colour */
.board { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: unset; overflow: visible; padding-bottom: 0; gap: 16px; }
.board__col { --col: #64748b; background: color-mix(in srgb, var(--col) 8%, #fff); border: 1px solid color-mix(in srgb, var(--col) 25%, #fff); min-height: 140px; padding: 0 10px 10px; overflow: hidden; }
.board__col.is-over { background: color-mix(in srgb, var(--col) 16%, #fff); outline: 2px dashed var(--col); }
.board__head { margin: 0 -10px 10px; padding: 10px 14px; background: var(--col); color: #fff; font-size: 13.5px; letter-spacing: .02em; }
.board__count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 99px; background: rgba(255,255,255,.25); color: #fff; font-weight: 800; font-size: 12px; display: inline-grid; place-items: center; }
.board__empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 18px 0; }
.board .kcard { border-left: 4px solid var(--col); }
.board .kcard.is-late { border-left-color: var(--danger); }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board { grid-template-columns: 1fr; } }

/* Add line popup: extra services, one line each */
.svc-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 2px; background: #fafafa; }
.svc-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* Car Status Form: extra question under a damaged item */
.check-detail { margin: -2px 0 8px; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 8px 8px 0; }
.check-detail.has-error { border-left-color: #dc2626; }

/* Dashboard time slot: estimate status + button on the right of each appointment */
.slot__actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }

/* Two-way choice with icons (e.g. Paid to: Vendor | Supplier) */
.pick2 { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pick2__opt { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); background: #fff; }
.pick2__opt + .pick2__opt { border-left: 1px solid var(--line); }
.pick2__opt svg { width: 16px; height: 16px; }
.pick2__opt.is-on { background: var(--brand); color: #fff; }

/* Declined supplement: kept visible in the job, never in the total */
.table tr.is-declined td { color: var(--muted); }
.table tr.is-declined .cell-main { text-decoration: line-through; }
.table tr.is-declined .badge { text-decoration: none; }

/* Members' game: Car memory match */
.game-stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; }
.game-stat svg { width: 16px; height: 16px; color: var(--muted); }
.game-win { font-size: 46px; line-height: 1; }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.memory__card { all: unset; box-sizing: border-box; aspect-ratio: 3 / 4; cursor: pointer; perspective: 700px; -webkit-tap-highlight-color: transparent; }
.memory__card:focus-visible .memory__inner { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 12px; }
.memory__inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s ease; transform-style: preserve-3d; }
.memory__card.is-up .memory__inner { transform: rotateY(180deg); }
.memory__back, .memory__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.memory__back { background: linear-gradient(145deg, var(--brand), #9b1b1f); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.memory__face { background: #fff; border: 2px solid var(--line); font-size: clamp(28px, 8vw, 44px); transform: rotateY(180deg); }
.memory__card.is-found .memory__face { border-color: var(--ok); background: #f0fdf4; }
.memory__card:not(.is-up):hover .memory__back { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .memory__inner { transition: none; } }

/* Customers: every vehicle of a customer (fleets with many cars) */
.veh-cell { position: relative; white-space: nowrap; }
.veh-more { cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 2px; font-family: inherit; }
.veh-more svg { width: 12px; height: 12px; }
.veh-pop { position: fixed; z-index: 60; width: 300px; max-width: 80vw; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); font-family: inherit; white-space: normal; }
.veh-pop__head { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.veh-pop__list { max-height: 300px; overflow-y: auto; }
.veh-pop__row { display: flex; gap: 10px; justify-content: space-between; padding: 8px 12px; color: inherit; text-decoration: none; font-size: 13px; }
.veh-pop__row:hover { background: var(--brand-soft); }
.veh-pop__car { text-align: right; color: var(--ink-2); }
.veh-list { max-height: 420px; overflow-y: auto; }
.veh-list__row { display: block; padding: 10px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.veh-list__row:last-child { border-bottom: 0; }
.veh-list__row:hover .cell-main { color: var(--brand); }

/* Customer page (estimate / work order / invoice link): progress steps.
   Desktop: one row. Phone: blocks of 3 per row — done green, current blue, still to come grey. */
.stepper--public .step { min-width: 110px; }
@media (max-width: 640px) {
    /* Job page (staff) and customer page: blocks of 3 per row — done green, current blue, still to come grey. */
    .stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
    .stepper .step { min-width: 0; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center; font-size: 12.5px; line-height: 1.25;
        border: 1px solid #e5e7eb; border-radius: 10px; background: #f3f4f6; color: #6b7280; }
    .stepper .step + .step { border-left: 1px solid #e5e7eb; }
    .stepper .step:first-child, .stepper .step:last-child { border-radius: 10px; }
    .stepper .step .dot { background: #d1d5db; color: #374151; }
    .stepper .step.is-done { background: #dcfce7; border-color: #86efac; color: #166534; }
    .stepper .step.is-done .dot { background: #16a34a; color: #fff; }
    .stepper .step.is-current { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; font-weight: 700; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
    .stepper .step.is-current .dot { background: #2563eb; color: #fff; }
    .step-legend { margin-top: -8px; }
}

/* Invoice payment status for the customer: paid green, not (fully) paid red */
.pay-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 2px solid; font-size: 15px; }
.pay-banner svg { width: 18px; height: 18px; }
.pay-banner strong { letter-spacing: .06em; }
.pay-banner.is-paid { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.pay-banner.is-open { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }

/* Vehicle details: history per day */
.timeline li.is-green::after { border-color: var(--ok); background: var(--ok); }
.vh-timeline { margin: 4px 0 14px; }
.vh-timeline li { padding-bottom: 12px; }

/* Member dashboard: all membership parts on one page */
.member-section { margin-bottom: 32px; scroll-margin-top: 80px; }
.page-head--section { margin-bottom: 12px; }
.page-head--section h2 { margin: 0 0 2px; font-size: 20px; }

/* Photo upload: choose from photos/files, camera button below */
.photo-picker__camera { margin-top: 8px; justify-content: center; }

/* License plate: letter + number */
.plate-input { display: flex; gap: 8px; }
.plate-input__letter { width: 58px; flex: 0 0 58px; text-align: center; text-transform: uppercase; }
.plate-input__number { flex: 1; min-width: 0; }

/* Customers list: number of vehicles, links to the Vehicles tab */
.veh-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.veh-count:hover { background: var(--brand); color: #fff; }
.veh-match { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.veh-match:hover { color: var(--brand); }

/* Project expenses: choose the kind of expense */
.pick-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pick-kind__opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 14px; background: #fff; }
.pick-kind__opt:hover { border-color: var(--slate); }
.pick-kind__opt.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.pick-kind__sub { font-size: 12px; font-weight: 400; color: var(--muted); }

/* Legend of the progress colours: green completed, blue in process, grey not started */
.step-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: -12px 0 16px; }
.card__head .step-legend { margin: 0; }
.step-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.step-legend i { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; display: inline-block; }
.step-legend i.is-done { background: var(--ok); }
.step-legend i.is-current { background: var(--info); }

/* Job status (workshop): passed green, current blue, still to come grey — blocks of 3 on the phone */
.status-bar { margin-bottom: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-bar__label { margin-right: 2px; }
.status-blocks { display: flex; flex-wrap: wrap; gap: 6px; }
.status-block { font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #f3f4f6; color: #6b7280; cursor: pointer; }
.status-block:hover { border-color: #9ca3af; }
.status-block.is-done { background: #dcfce7; border-color: #86efac; color: #166534; }
.status-block.is-current { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; font-weight: 700; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
@media (max-width: 640px) {
    .status-bar { display: block; }
    .status-bar__label { display: block; margin-bottom: 8px; }
    .status-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .status-block { padding: 12px 6px; text-align: center; font-size: 12.5px; line-height: 1.25; border-radius: 10px; }
}

/* Paint booth: in the booth = blue (in process), completed = green, planned = grey */
.booth-live.is-busy { border-left-color: var(--info); }
.booth-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* A label used as a button / choice tile inside a form field keeps its own layout (icon and text centred). */
.field label.btn { display: inline-flex; margin-bottom: 0; font-size: 13.5px; }
/* A chosen option (type, service line …) is a filled button: its text stays white, not the grey of a field label. */
.field label.btn-primary, .field label.btn-secondary { color: #fff; }
.field label.pick2__opt { display: inline-flex; margin-bottom: 0; }
.field label.pick-kind__opt { display: flex; margin-bottom: 0; color: inherit; }
.field label.pick-kind__opt.is-on { color: var(--brand-dark); }
.pick-kind__sub { display: block; }

/* Desktop: pop-ups are wider, with the form in 4 columns, so most fit on the screen without scrolling.
   (Small pop-ups and the phone layout stay as they are.) */
@media (min-width: 1100px) {
    .modal { padding-top: 4vh; padding-bottom: 4vh; }
    .modal__panel:not(.sm) { max-width: 1040px; }
    .modal__panel:not(.sm) .modal__body > .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .modal__panel:not(.sm) .modal__body > .form-grid > .span-2 { grid-column: span 2; }
    .modal__panel:not(.sm) .modal__body > .form-grid > .span-4 { grid-column: 1 / -1; }
}
.status-bar.is-locked .status-block { cursor: not-allowed; opacity: .65; }
.status-bar__note { flex-basis: 100%; }
@media (max-width: 640px) { .status-bar__note { margin-top: 8px; } }

/* Logo of the social network of a member task */
.social-icon { display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.social-icon--instagram { border-radius: 28%; }
.social-icon--google { box-shadow: 0 0 0 1px var(--line); }

/* A count next to a card title (e.g. "Tasks for points 4"): a blue pill, apart from the title */
.card__head h2 .count { display: inline-block; margin-left: 6px; min-width: 22px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; vertical-align: 2px; background: var(--info-soft); color: var(--info); }

/* Staff: the member card on a member's profile */
.member-card-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.member-card-row .member-card { max-width: 380px; }
.member-card-row > .small { max-width: 280px; padding-bottom: 6px; }

/* ---- Review L1/L3/L4: phone tables with column names, keyboard focus, phone sizes ---- */
/* Keyboard users always see where they are (mouse clicks show no ring). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .tab:focus-visible, .side-item:focus-visible, .mail__item:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, .nav-link:focus-visible, .tabbar__item:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}
.modal__panel:focus { outline: none; }
.toast__close { all: unset; cursor: pointer; margin-left: auto; padding: 0 4px 0 10px; font-size: 20px; line-height: 1; opacity: .75; }
.toast__close:hover, .toast__close:focus-visible { opacity: 1; }
@media (max-width: 760px) {
    /* Each value shows its column name (e.g. Total vs Open) */
    /* Each value is a small block (label on top, value below), two per row; title and buttons use the full width */
    .table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .table tbody td:first-child, .table tbody td.actions, .table tbody td:not([data-label]), .table tbody td[colspan] { grid-column: 1 / -1; }
    .table tbody td[data-label]:not(:first-child):not(.actions):not([colspan]) {
        background: #f8fafc; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere;
    }
    .table tbody td[data-label]:not(:first-child):not(.actions):not([colspan])::before {
        content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
    }
    /* Real screen height on iPhone (the Safari toolbar no longer hides the Save button) */
    .modal__panel, .modal__panel.sm { max-height: 94dvh; }
    /* Big enough to read and to tap */
    .btn-sm { min-height: 36px; }
    .btn-icon { min-width: 40px; min-height: 40px; }
    .cal-chip { font-size: 10.5px; }
    .sidebar__label { font-size: 11px; }
}
.nav-link .soon { font-size: 11px; }

/* Customer type: Personal or Company */
.label-text { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-pick__option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.type-pick__option input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick__option svg { width: 22px; height: 22px; flex: none; color: var(--muted); margin-top: 1px; }
.type-pick__option > span { display: grid; gap: 2px; }
.type-pick__option.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
.type-pick__option.is-on svg { color: var(--brand); }
.type-pick__option:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 560px) { .type-pick { grid-template-columns: 1fr; } }

/* Sub-menu groups: one button with a small drop-down (desktop); listed under the group name (phone) */
.subnav__group { position: relative; display: inline-flex; flex-direction: column; }
.subnav__group > .subnav__link { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; }
.subnav__group > .subnav__link.is-active { background: var(--slate); color: #fff; }
.subnav__group > .subnav__link .subnav__chev { width: 14px; height: 14px; opacity: .7; }
.subnav__sub { font-weight: 500; opacity: .85; margin-left: 2px; }
.subnav__group-label { display: none; }
.subnav__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.subnav__menu .subnav__link { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
    .subnav__group { display: flex; }
    .subnav__group > button.subnav__link { display: none; }
    .subnav__group-label { display: block; padding: 10px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
    .subnav__menu { display: flex !important; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
}

/* Filter tabs with counts as blocks on the phone (e.g. Finance → Invoice expenses) */
@media (max-width: 760px) {
    .tabs--blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; border: 0 !important; margin: 0 0 4px !important; }
    .tabs--blocks .tab {
        display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 10px 12px; min-height: 64px; box-sizing: border-box;
        border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-2); font-size: 14px; white-space: normal;
    }
    .tabs--blocks .tab .count { order: -1; background: none; padding: 0; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
    .tabs--blocks .tab.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); }
    .tabs--blocks .tab.is-active .count { color: var(--brand-dark); }
    .card__head:has(> .tabs--blocks) { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* Job page on the phone: every action is a red block, 3 per row; an action that isn't possible yet is grey */
@media (max-width: 760px) {
    .page-head__actions.job-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
    .page-head__actions.job-actions > .btn {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 64px;
        box-sizing: border-box; padding: 8px 6px; font-size: 12.5px; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere;
        background: var(--brand); border: 1px solid var(--brand); color: #fff; opacity: 1;
    }
    .page-head__actions.job-actions > .btn svg { width: 19px; height: 19px; color: #fff; }
    .page-head__actions.job-actions > .btn:active { background: var(--brand-dark); }
    .page-head__actions.job-actions > .btn[disabled], .page-head__actions.job-actions > .btn.is-disabled {
        background: #e5e7eb; border-color: #e5e7eb; color: #8b95a1; opacity: 1;
    }
    .page-head__actions.job-actions > .btn[disabled] svg, .page-head__actions.job-actions > .btn.is-disabled svg { color: #8b95a1; }
}

/* Icons inside buttons on an empty page keep the button size (the big empty-page icon is for the page only) */
.empty .btn svg { width: 16px; height: 16px; margin: 0; color: currentColor; }

/* Next-step box on the job page: buttons after the text (desktop); red blocks, 3 per row (phone) */
.next-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; vertical-align: middle; }
.next-actions--center { display: flex; justify-content: center; margin: 0; }
@media (max-width: 760px) {
    .next-actions, .next-actions--center { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; width: 100%; }
    .next-actions:has(> :only-child) { grid-template-columns: 1fr; }
    .next-actions:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .next-actions > .btn {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 64px;
        box-sizing: border-box; padding: 8px 6px; font-size: 12.5px; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere;
        background: var(--brand); border: 1px solid var(--brand); color: #fff; margin: 0;
    }
    .next-actions > .btn svg { width: 19px; height: 19px; color: #fff; }
    .next-actions > .btn:active { background: var(--brand-dark); }
    .next-actions > .btn[disabled] { background: #e5e7eb; border-color: #e5e7eb; color: #8b95a1; }
    .alert:has(.next-actions) > div { flex: 1; min-width: 0; }
}

/* POS lists on desktop: blocks, 5 per row (3 on a tablet); the phone keeps its 3-per-row blocks */
@media (min-width: 761px) {
    .card__head:has(> .tabs--grid5) { flex-direction: column; align-items: stretch; gap: 12px; }
    .tabs--grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; border-bottom: 0 !important; margin: 0 !important; overflow: visible; }
    .tabs--grid5 .tab {
        display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; min-height: 50px; box-sizing: border-box;
        border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); font-size: 13.5px; line-height: 1.25; white-space: normal;
    }
    .tabs--grid5 .tab:hover { border-color: #cbd2d9; background: #fafbfc; }
    .tabs--grid5 .tab svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
    .tabs--grid5 .tab .count { margin-left: auto; flex: none; }
    .tabs--grid5 .tab.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); }
    .tabs--grid5 .tab.is-active svg { color: var(--brand); }
    .tabs--grid5 .tab.is-active .count { background: var(--brand); color: #fff; }
}
@media (min-width: 761px) and (max-width: 1100px) { .tabs--grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Technician functions: each its own colour, side by side (wrapping only on a phone) */
.fn-chips { display: flex; gap: 5px; flex-wrap: nowrap; }
.fn-col { min-width: 260px; }
.dl .fn-chips { flex-wrap: wrap; }
.fn-body_painting { background: #f3e8ff; color: #7e22ce; }
.fn-body_repair { background: #ffedd5; color: #c2410c; }
.fn-electrical { background: #fef3c7; color: #a16207; }
.fn-mechanical { background: #dbeafe; color: #1d4ed8; }
.fn-ac { background: #cffafe; color: #0e7490; }
.fn-sand_blast { background: #ede0d4; color: #7c4a1e; }
@media (max-width: 760px) {
    .fn-chips { flex-wrap: wrap; }
    .fn-col { min-width: 0; }
}

/* NEBULA — help assistant (top bar button + panel on the right; full screen on a phone) */
.nebula-btn { all: unset; cursor: pointer; width: 38px; height: 38px; margin-right: 4px; display: grid; place-items: center; color: #5b21b6; transition: transform .15s, color .15s; }
.nebula-btn:hover { color: #7c3aed; transform: scale(1.08); }
.nebula-btn:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: 6px; }
.nebula-btn svg { width: 32px; height: 32px; }
.nebula__backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.25); z-index: 90; }
.nebula__panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(430px, 100vw); background: #fff; z-index: 91; display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(0,0,0,.18); }
.nebula-in { animation: nebula-slide .18s ease-out; }
.nebula-out { animation: nebula-slide .14s ease-in reverse; }
@keyframes nebula-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.nebula__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; color: #fff; background: linear-gradient(120deg, #1e1b4b, #4c1d95 55%, #7c3aed); }
.nebula__avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: none; }
.nebula__avatar svg { width: 36px; height: 36px; }
.nebula__who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.nebula__who strong { letter-spacing: .12em; }
.nebula__who span { font-size: 12px; opacity: .8; }
.nebula__lang { display: flex; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; overflow: hidden; }
.nebula__lang button { all: unset; cursor: pointer; font-size: 11px; font-weight: 700; padding: 3px 8px; }
.nebula__lang button.is-on { background: #fff; color: #4c1d95; }
.nebula__icon-btn { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.nebula__icon-btn:hover { background: rgba(255,255,255,.15); }
.nebula__icon-btn svg { width: 18px; height: 18px; }
.nebula__start { padding: 22px 18px; display: grid; gap: 14px; }
.nebula__intro { margin: 0; line-height: 1.6; }
.nebula__choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nebula__choose .btn { justify-content: center; padding: 14px; font-size: 15px; }
.nebula__list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f8f7fc; }
.nebula__msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; line-height: 1.5; font-size: 14px; word-wrap: break-word; }
.nebula__msg.is-bot { align-self: flex-start; background: #fff; border: 1px solid #ebe7f7; border-top-left-radius: 4px; }
.nebula__msg.is-user { align-self: flex-end; background: #4c1d95; color: #fff; border-top-right-radius: 4px; }
.nebula__md p { margin: 0 0 8px; }
.nebula__md p:last-child, .nebula__md ol:last-child, .nebula__md ul:last-child { margin-bottom: 0; }
.nebula__md ol, .nebula__md ul { margin: 0 0 8px; padding-left: 20px; }
.nebula__md li { margin: 2px 0; }
.nebula__md strong { color: #3b0764; }
.nebula__md code { background: #f3f0ff; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.nebula__failed { display: block; font-size: 11px; opacity: .8; margin-top: 4px; }
.nebula__examples { display: grid; gap: 6px; }
.nebula__examples button { all: unset; cursor: pointer; font-size: 13px; padding: 8px 11px; border: 1px dashed #c4b5fd; border-radius: 10px; color: #4c1d95; background: #fff; }
.nebula__examples button:hover { background: #f5f3ff; }
.nebula__typing { align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.nebula__typing span { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: nebula-dot 1s infinite ease-in-out; }
.nebula__typing span:nth-child(2) { animation-delay: .15s; }
.nebula__typing span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes nebula-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.nebula__error { margin: 0; padding: 8px 14px; font-size: 13px; color: #991b1b; background: #fef2f2; border-top: 1px solid #fecaca; }
.nebula__form { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); align-items: flex-end; }
.nebula__form textarea { resize: none; min-height: 44px; max-height: 140px; }
.nebula__form .btn { height: 44px; width: 44px; padding: 0; justify-content: center; flex: none; background: #4c1d95; border-color: #4c1d95; }
.nebula__note { margin: 0; padding: 2px 14px 10px; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
    .nebula-btn { width: 34px; height: 34px; margin-right: 2px; }
    .nebula-btn svg { width: 29px; height: 29px; }
    .nebula__panel { width: 100vw; }
    .nebula__head { padding-top: calc(12px + env(safe-area-inset-top)); }
    .nebula__note { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------- Desktop: the left menu collapsed to icons only (the arrow at the top; remembered on this device) ---------- */
.sidebar__brand .logo-mark { display: none; }
.sidebar__collapse { display: none; }
@media (min-width: 961px) {
    .sidebar { transition: width .18s ease; }
    .main { transition: margin-left .18s ease; }
    .sidebar__collapse { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--sidebar-text); cursor: pointer; }
    .sidebar__collapse:hover { background: var(--sidebar-2); color: #fff; }
    .sidebar__collapse svg { width: 18px; height: 18px; transition: transform .18s; }

    /* Compact: small icons, so the whole menu fits the screen without scrolling */
    html.sidebar-collapsed { --sidebar-w: 60px; }
    html.sidebar-collapsed .sidebar__brand { flex-direction: column; gap: 6px; padding: 10px 6px 8px; }
    html.sidebar-collapsed .sidebar__brand > a { flex: none; }
    html.sidebar-collapsed .sidebar__brand .logo-full { display: none; }
    html.sidebar-collapsed .sidebar__brand .logo-mark { display: block; width: 30px; height: 30px; max-height: none; }
    html.sidebar-collapsed .sidebar__collapse { width: 26px; height: 24px; }
    html.sidebar-collapsed .sidebar__collapse svg { width: 16px; height: 16px; transform: rotate(180deg); }
    html.sidebar-collapsed .sidebar__nav { padding: 4px 8px 6px; }
    html.sidebar-collapsed .sidebar__label { font-size: 0; height: 1px; padding: 0; margin: 5px 8px; background: rgba(255,255,255,.1); }
    html.sidebar-collapsed .nav-link { justify-content: center; padding: 7px 0; margin: 1px 0; gap: 0; }
    html.sidebar-collapsed .nav-link svg { width: 17px; height: 17px; }
    html.sidebar-collapsed .nav-label, html.sidebar-collapsed .nav-link .lock { display: none; }
    html.sidebar-collapsed .nav-link .notify-dot { position: absolute; top: 4px; right: 8px; margin: 0; width: 7px; height: 7px; }
    html.sidebar-collapsed .nav-link .nav-count { position: absolute; top: 0; right: 1px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
    html.sidebar-collapsed .nav-install { padding: 6px 0; }
    html.sidebar-collapsed .sidebar__user { flex-direction: column; gap: 2px; padding: 8px 6px; }
    html.sidebar-collapsed .sidebar__user .who { display: none; }
    html.sidebar-collapsed .sidebar__user .avatar { width: 30px; height: 30px; font-size: 11.5px; }
    html.sidebar-collapsed .sidebar__user button { padding: 4px; }
}
/* Collapsed on a low screen (small laptop): a little tighter still */
@media (min-width: 961px) and (max-height: 760px) {
    html.sidebar-collapsed .sidebar__brand { padding: 8px 6px 6px; gap: 4px; }
    html.sidebar-collapsed .sidebar__brand .logo-mark { width: 26px; height: 26px; }
    html.sidebar-collapsed .sidebar__label { margin: 4px 8px; }
    html.sidebar-collapsed .nav-link { padding: 5px 0; }
    html.sidebar-collapsed .nav-install { padding: 5px 0; }
    html.sidebar-collapsed .sidebar__user { padding: 6px; }
}
@media (min-width: 961px) and (max-height: 600px) {
    html.sidebar-collapsed .sidebar__label { margin: 3px 8px; }
    html.sidebar-collapsed .nav-link { margin: 0; padding: 4px 0; }
}

/* Overlays on a phone are their own layers (never painted into the page behind them) */
@media (max-width: 1100px) {
    .mail > .mail__read.is-open { will-change: transform; }
    .mail__backdrop { will-change: opacity; }
}
.nebula__panel { will-change: transform; }
.nebula__backdrop { will-change: opacity; }

/* ---------- Left menu always fits the screen (full menu on a computer, and the phone menu) ----------
   The rows share the height that is left: full size on a tall screen, a little tighter on a low one —
   never a scrollbar. Only sizes and spacing here; how the phone menu opens is unchanged. */
@media (min-width: 961px) {
    html:not(.sidebar-collapsed) .sidebar__nav { display: flex; flex-direction: column; min-height: 0; }
    html:not(.sidebar-collapsed) .sidebar__nav .nav-link { flex: 0 1 34px; min-height: 24px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
    html:not(.sidebar-collapsed) .sidebar__label { flex: 0 1 28px; min-height: 15px; padding-top: 0; padding-bottom: 3px; display: flex; align-items: flex-end; }
    html:not(.sidebar-collapsed) .nav-install { font-size: 13px; }
}
@media (min-width: 961px) and (max-height: 700px) {
    html:not(.sidebar-collapsed) .sidebar__label { flex: 0 0 1px; min-height: 1px; padding: 0; }
}
@media (max-width: 960px) {
    .sidebar__brand { padding: 10px 14px 8px; }
    .sidebar__brand img { max-height: 40px; }
    .sidebar__nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 4px; padding-bottom: 6px; }
    .sidebar__nav .nav-link { flex: 0 1 40px; min-height: 28px; padding-top: 0; padding-bottom: 0; margin: 1px 0; }
    .sidebar__label { flex: 0 1 26px; min-height: 16px; padding-top: 0; padding-bottom: 3px; display: flex; align-items: flex-end; }
}
@media (max-width: 760px) {
    .sidebar__nav .nav-link { font-size: 14px; }
}
@media (max-width: 960px) and (max-height: 620px) {
    .sidebar__label { flex: 0 0 1px; min-height: 1px; font-size: 0; padding: 0; margin: 4px 12px; background: rgba(255,255,255,.08); }
    .sidebar__nav .nav-link { min-height: 26px; }
    .sidebar__user .role { display: none; }
}
/* Low screens: a little tighter still, so nothing has to scroll */
@media (min-width: 961px) and (max-height: 600px) {
    html:not(.sidebar-collapsed) .sidebar__nav { padding-top: 2px; padding-bottom: 4px; }
    html:not(.sidebar-collapsed) .sidebar__nav .nav-link { min-height: 22px; margin: 0; }
    html:not(.sidebar-collapsed) .nav-install { padding-top: 5px; padding-bottom: 5px; }
    html:not(.sidebar-collapsed) .sidebar__brand img { max-height: 28px; }
    html:not(.sidebar-collapsed) .sidebar__user .avatar { width: 30px; height: 30px; font-size: 11.5px; }
}
@media (max-width: 960px) and (max-height: 700px) {
    .sidebar__brand { padding: 6px 12px 6px; }
    .sidebar__brand img { max-height: 32px; }
    .sidebar__close { width: 34px; height: 34px; }
    .sidebar__nav .nav-link { min-height: 24px; margin: 0; }
    .nav-install { padding-top: 6px; padding-bottom: 6px; }
    .sidebar__user { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}
@media (max-width: 960px) and (max-height: 540px) {
    .sidebar__nav .nav-link { min-height: 22px; }
}
/* Collapsed (icons only): the same — the icons share the height, never a scrollbar */
@media (min-width: 961px) {
    html.sidebar-collapsed .sidebar__nav { display: flex; flex-direction: column; min-height: 0; }
    html.sidebar-collapsed .sidebar__nav .nav-link { flex: 0 1 33px; min-height: 22px; padding-top: 0; padding-bottom: 0; }
    html.sidebar-collapsed .sidebar__label { flex: 0 0 1px; }
}
@media (min-width: 961px) and (max-height: 600px) {
    html.sidebar-collapsed .sidebar__nav .nav-link { min-height: 20px; }
    html.sidebar-collapsed .sidebar__brand .logo-mark { width: 22px; height: 22px; }
    html.sidebar-collapsed .sidebar__user .avatar { width: 26px; height: 26px; font-size: 10.5px; }
    html.sidebar-collapsed .sidebar__user button { padding: 2px; }
}

/* ---------- Oliver Dean Group additions ---------- */
.nav-link.is-upcoming { opacity: .45; cursor: default; }
.nav-link.is-upcoming:hover { background: transparent; color: var(--sidebar-text); text-decoration: none; }
.nav-soon { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 0 6px; }
html.sidebar-collapsed .nav-soon { display: none; }
.brand-dots { display: inline-flex; gap: 7px; }
.brand-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.brand-dots i:nth-child(1) { background: var(--gold); }
.brand-dots i:nth-child(2) { background: var(--danger); }
.brand-dots i:nth-child(3) { background: var(--brand); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.brand-dots i:nth-child(4) { background: var(--yellow); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.plan-item svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.plan-item.is-done svg { color: var(--ok); }
.plan-item strong { display: block; }
.holding { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 32px 16px; background: #fff; color: var(--ink); }
.holding img { width: min(420px, 80vw); margin: 0 auto 26px; }
.holding p { color: var(--muted); max-width: 520px; margin: 0 auto 8px; font-size: 16px; }
/* Notes (customers, later projects) */
.note { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.note.is-pinned { border-color: #f3dc7a; background: #fffbea; }
.note__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.note__actions { margin-left: auto; display: inline-flex; gap: 2px; }
.note__body { white-space: pre-line; margin: 0; }
/* Global search (top bar) */
.gsearch { position: relative; flex: 1; max-width: 420px; margin: 0 12px; }
.gsearch .input { height: 36px; padding-left: 34px; background: #f6f7f9; }
.gsearch > svg { position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.gsearch__kbd { position: absolute; right: 8px; top: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: #fff; }
.gsearch__panel { position: absolute; top: 42px; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; max-height: 70vh; overflow-y: auto; padding: 6px; }
.gsearch__group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.gsearch__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.gsearch__item:hover, .gsearch__item.is-active { background: var(--brand-soft); text-decoration: none; }
.gsearch__item .avatar { width: 28px; height: 28px; font-size: 11px; }
@media (max-width: 760px) { .gsearch { margin: 0 6px; } .gsearch__kbd { display: none; } }
/* Service lines */
.line-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* Estimate / invoice editor lines */
.doc-lines { display: flex; flex-direction: column; }
.doc-line { padding: 14px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.doc-line:nth-child(even) { background: #fbfcfd; }
.doc-line__main { display: grid; gap: 6px; }
.doc-line__nums { display: grid; grid-template-columns: 90px 120px 140px 90px minmax(110px, 1fr); gap: 10px; align-items: end; }
.doc-line__nums label { font-size: 12px; }
.doc-line__total { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; height: 100%; font-variant-numeric: tabular-nums; }
.doc-line__total strong { font-size: 15px; }
.doc-line__foot { display: flex; align-items: center; gap: 10px; }
@media (max-width: 760px) {
    .doc-line { padding: 12px; }
    .doc-line__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-line__total { grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: center; }
}
/* Document preview (dashboard and the client's page) */
.paper { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 38px; border-top: 5px solid var(--brand); }
.paper__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.paper__title { font-size: 26px; font-weight: 800; color: var(--brand); letter-spacing: .04em; text-align: right; }
.paper__meta { margin-left: auto; font-size: 13px; }
.paper__meta td { padding: 2px 0 2px 14px; }
.paper__meta td:first-child { color: var(--muted); padding-left: 0; }
.paper__parties { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin: 24px 0 18px; }
.paper__box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.paper__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.paper .table th { background: var(--brand); color: #fff; }
.paper__totals { margin-left: auto; width: min(340px, 100%); margin-top: 12px; }
.paper__totals td { padding: 4px 0; }
.paper__totals .grand td { border-top: 2px solid var(--brand); font-size: 17px; font-weight: 700; padding-top: 8px; }
.paper__text { white-space: pre-line; }
.paper__stamp { display: inline-block; border: 2px solid var(--ok); color: var(--ok); font-weight: 800; letter-spacing: .1em; padding: 3px 12px; border-radius: 5px; margin-top: 8px; }
@media (max-width: 760px) { .paper { padding: 20px 16px; } .paper__parties { grid-template-columns: 1fr; } .paper__title { text-align: left; } .paper__meta { margin-left: 0; } }
/* 360° tours */
.tour-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; }
.tour-card__preview { border-radius: var(--radius-sm); overflow: hidden; background: #eef0f2; aspect-ratio: 16 / 10; }
.tour-card__preview iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .tour-card { grid-template-columns: 1fr; } }
/* Calendar */
.cal-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-layer { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: #fff; }
.cal-layer.is-off { opacity: .45; text-decoration: line-through; }
.cal-layer:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.cal-month__dow { padding: 8px 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); background: #fafafb; }
.cal-month__day { min-height: 112px; padding: 6px 6px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.cal-month__day:nth-child(7n) { border-right: 0; }
.cal-month__day:hover { background: #fafbfd; }
.cal-month__day.is-out { background: #fbfbfc; color: #b4bac3; }
.cal-month__day.is-selected { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-month__num { font-size: 12.5px; font-weight: 700; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-month__day.is-today .cal-month__num { background: var(--brand); color: #fff; }
.cal-month__dots { display: none; gap: 3px; }
.cal-month__dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-chip { font-size: 11.5px; line-height: 1.35; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 12%, #fff); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.cal-chip__time { font-weight: 700; }
.cal-chip.is-done { opacity: .5; text-decoration: line-through; }
.cal-chip.is-late { background: var(--danger-soft); }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line-2); border-left: 4px solid var(--c); }
.cal-list__item.is-done .cal-list__title { text-decoration: line-through; color: var(--muted); }
.cal-list__time { width: 92px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-list__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cal-list__body .cell-sub { flex-basis: 100%; }
.cal-list__title { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); }
a.cal-list__title:hover, button.cal-list__title:hover { color: var(--brand); text-decoration: underline; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-week__day.is-today { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.cal-week__day .card__head { padding: 10px 12px; }
.cal-week__day .cal-list__item { padding: 8px 10px; flex-wrap: wrap; gap: 4px; }
.cal-week__day .cal-list__time { width: auto; }
.cal-agenda__date { padding: 12px 20px 6px; font-weight: 700; font-size: 13px; color: var(--ink-2); background: #fafafb; border-top: 1px solid var(--line); }
.cal-agenda__date.is-today { color: var(--brand); }
@media (max-width: 1100px) { .cal-week { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .cal-month__day { min-height: 58px; padding: 4px; align-items: center; }
    .cal-month__day .cal-chip, .cal-month__day .small { display: none; }
    .cal-month__dots { display: flex; }
    .cal-month__dow { padding: 6px 2px; text-align: center; font-size: 10.5px; }
    .cal-list__item { padding: 10px 12px; }
    .cal-list__time { width: 64px; }
}
.mail-unread { font-weight: 700; }

/* Website → Portfolio editor */
.pf-photo { display: flex; flex-direction: column; gap: 4px; }
.pf-photo__move { display: flex; justify-content: center; gap: 4px; }
.pf-photo__move button { width: 28px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2); cursor: pointer; line-height: 1; font-size: 16px; }
.pf-photo__move button:disabled { opacity: .35; cursor: default; }
.pf-tour-preview { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #eef0f2; }
.pf-tour-preview iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Games / Extras: quiz editor */
.quiz-q { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.quiz-q__n { flex: none; width: 28px; height: 28px; margin-top: 6px; border-radius: 50%; background: var(--brand-soft, #eef2fb); color: var(--brand, #002d80); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.quiz-q__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0 36px; }
.quiz-q__answer { display: flex; align-items: center; gap: 8px; margin: 0; }
.quiz-q__answer input[type=radio] { width: 18px; height: 18px; flex: none; accent-color: #16a34a; }
.quiz-q__answer.is-right .input { border-color: #16a34a; background: #f0fdf4; }
@media (max-width: 720px) { .quiz-q__answers { grid-template-columns: 1fr; margin-left: 0; } }

/* A number that opens a filtered list (customer list → that customer's estimates / invoices) */
.count-link { display: inline-block; min-width: 30px; padding: 2px 9px; border-radius: 99px; background: var(--info-soft, #eff6ff); color: var(--brand, #002d80); font-weight: 700; text-align: center; text-decoration: none; }
.count-link:hover { background: var(--brand, #002d80); color: #fff; }

/* A-Zero studio */
.zthumb { display: block; width: 120px; height: 60px; object-fit: cover; border-radius: 6px; background: #0a1330; }
.dropzone.is-over { border-color: var(--brand); background: var(--info-soft, #eff6ff); }
.zup { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.zup li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: #f6f7f9; }
.zup__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zup__state { color: var(--muted); }
.zup li.is-done .zup__state { color: #166534; font-weight: 600; }
.zup li.is-error { background: #fef2f2; }
.zup li.is-error .zup__state { color: var(--danger-dark); grid-column: 1 / -1; }
.zup__bar { grid-column: 1 / -1; height: 4px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.zup__bar i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
.zwalk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.zwalk__viewer { position: relative; height: min(72vh, 660px); border-radius: var(--radius); overflow: hidden; background: #0a1330; }
.zwalk__fail { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.zwalk__panel { position: sticky; top: 80px; }
@media (max-width: 1000px) { .zwalk { grid-template-columns: 1fr; } .zwalk__viewer { height: 60vh; } .zwalk__panel { position: static; } }
.zmap { position: relative; user-select: none; }
.zmap.is-placing { cursor: crosshair; }
.zmap img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.zmap__pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; }
.zmap__pin.is-active { background: #fdcb00; color: #111; }
@media (min-width: 1001px) { .zwalk__panel { max-height: calc(100vh - 100px); overflow-y: auto; } }
.zseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: #f1f3f6; border-radius: 9px; }
.zseg button { all: unset; cursor: pointer; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 4px; border-radius: 7px; display: inline-flex; justify-content: center; align-items: center; gap: 5px; }
.zseg button.is-active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.zseg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.zpointform { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 8px; }
.zpointform .field { margin: 0; }
.zpointform__img { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.zstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zstats div { background: #f6f7f9; border-radius: 10px; padding: 10px; text-align: center; }
.zstats strong { display: block; font-size: 1.3rem; color: var(--brand); }
.zstats span { font-size: 12px; color: var(--muted); }
.zlogo { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #0a1330; margin-bottom: 6px; }
.zlogo img { display: block; max-width: 180px; max-height: 60px; }
.zcolor { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }

/* Calendar month chips: clickable, two lines (title / kind of event · customer) */
button.cal-chip, a.cal-chip { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; border-top: 0; border-right: 0; border-bottom: 0; margin: 0 0 3px; }
.cal-chip { white-space: normal; }
.cal-chip__line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip__sub { font-size: 10px; font-weight: 500; opacity: .75; }
button.cal-chip:hover, a.cal-chip:hover { background: color-mix(in srgb, var(--c) 22%, #fff); }
@media (max-width: 760px) { .cal-chip__sub { display: none; } }
.zarrow { display: grid; grid-template-columns: minmax(0, 1fr) 118px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.zarrow-item { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
.zarrow-item:last-of-type { border-bottom: 0; }
.zarrow-item .zarrow { margin-bottom: 4px; }
.zarrow__arrive { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; padding-right: 36px; }
.zpin { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff8db; border: 1px solid #f5d76e; }
.zpin.is-pinned { background: #ecfdf3; border-color: #a7e3bf; }
.zarrow__to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zarrow__dir { height: 32px; font-size: 12.5px; padding: 0 26px 0 8px; }

/* WhatsApp pop-up of estimates and invoices */
.btn-whatsapp { background: #1f9d4c; border-color: #1f9d4c; color: #fff; }
.btn-whatsapp:hover { background: #188a41; border-color: #188a41; color: #fff; }
.wa-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wa-way { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wa-way p { margin: 0; }
@media (max-width: 640px) { .wa-ways { grid-template-columns: 1fr; } }

/* An icon in a pop-up title stays title-sized */
.modal__head h2 svg { width: 22px; height: 22px; flex: none; }
.modal__head h2 .icon-whatsapp { color: #1f9d4c; }