/*
 * Стили по макету docs/mockup (токены — docs/mockup/README.md).
 * Цвета только через переменные ниже; новые компоненты добавлять сюда, инлайн-стили в шаблонах не использовать.
 */

:root {
    --accent: #0B6B5F;
    --accent-hover: #084E45;
    --accent-soft: color-mix(in srgb, var(--accent) 12%, white);

    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --border: #E3E6EB;
    --divider: #EEF0F3;
    --field-border: #CBD0D8;
    --chip-bg: #E9ECF0;

    --text: #14181F;
    --text-2: #3E4752;
    --muted: #5B6572;

    --blue-bg: #E0ECFB;   --blue-fg: #12448A;   --blue-bd: #C3D8F4;
    --green-bg: #DDF3E6;  --green-fg: #0B5C2E;  --green-bd: #BFE3CC;
    --yellow-bg: #FBEBC8; --yellow-fg: #6B4300; --yellow-bd: #F0D89B;
    --red-bg: #FBE1DC;    --red-fg: #8F1D0E;    --red-bd: #F2C3BA;
    --gray-bg: #ECEEF1;   --gray-fg: #3E4752;   --gray-bd: #D8DCE2;
    --violet-bg: #E8E3F8; --violet-fg: #4A2E9C; --violet-bd: #D3C9F0;
    --olive-bg: #EEF1D9;  --olive-fg: #4A5410;  --olive-bd: #D6DCA6;
    /* Метки разделов журнала (Log.dc.html): «Машины», «Расходы» */
    --teal-bg: #E6F2EF;   --teal-fg: #0B5C4F;
    --orange-bg: #FBE7DA; --orange-fg: #8A3A0C;

    --warn-text: #8A4B00;        /* «осталось 1 680 км», «скоро» в тексте */
    --danger-line: #C4432D;      /* рамка опасной кнопки */
    --border-strong: #A9B1BC;    /* hover карточки, пунктир загрузки */
    --surface-soft: #FAFAFB;
    --dot-on: #1E8E4E;
    --dot-off: #7A8594;

    --chart-income: #0E8A78;
    --chart-expense: #C8691E;
    /* Календарь занятости (Home.dc.html) */
    --cal-line: #F0F2F5;
    --cal-hover: #EEF4F2;
    --cal-booked-bd: #B9A9E6; --cal-booked-fg: #3B2380;
    --cal-service-bd: #E2BF6B; --cal-service-fg: #5C3A00;
    --telegram: #1B6FA8;
    /* Страница сотрудника и QR (QR всегда чёрный на белом — так его читает любая камера) */
    --on-accent: #FFFFFF;
    --qr-light: #FFFFFF;
    --qr-dark: #000000;

    --radius-card: 12px;
    --radius: 8px;
    --control-h: 44px;

    --font: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.4;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 18px; }

code, .mono { font-family: var(--font-mono); }

.icon { flex: 0 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- Каркас ---------- */

.app {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
}

.side {
    flex: 0 0 232px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    color: var(--text);
    text-decoration: none;
}
.brand:hover { color: var(--text); }

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-name { font-weight: 600; font-size: 16px; }

.burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.burger span { display: flex; }
.burger .burger-close { display: none; }
.burger[aria-expanded="true"] .burger-open { display: none; }
.burger[aria-expanded="true"] .burger-close { display: flex; }

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}
.side-nav a:hover { background: var(--bg); color: var(--text); }
.side-nav a.active {
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
}

/* Разделитель групп меню: главная · аренда · парк · деньги · служебное */
.side-sep { height: 1px; margin: 6px 12px; background: var(--divider); }

.side-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    border-top: 1px solid var(--border);
}

.avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-2);
}

.side-user-text { display: flex; flex-direction: column; min-width: 0; }
.side-user-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-note { font-size: 12px; color: var(--muted); }
.side-logout { margin: 0 0 0 auto; }

.icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }

.main {
    flex: 999 1 560px;
    min-width: 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.page-sub { margin: 4px 0 0; color: var(--muted); }

.pill {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--chip-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
}

/* ---------- Карточки ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.card-body { padding: 20px; }

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--muted);
    text-align: center;
}
.empty p { margin: 0; }

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.stat {
    flex: 1 1 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.stat-value { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { color: var(--muted); font-size: 13px; }

.swatch { width: 10px; height: 10px; border-radius: 3px; }
.swatch-income { background: var(--chart-income); }
.swatch-expense { background: var(--chart-expense); }

.meter { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.meter > span { display: block; height: 6px; border-radius: 3px; background: var(--accent); }

/* ---------- Кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-h);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: #FFFFFF; }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--field-border); }
.btn-secondary:hover:not(:disabled) { background: var(--bg); color: var(--text); }

/* ---------- Поля форм ---------- */

.input {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}
.input.mono { font-family: var(--font-mono); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.btn-telegram { min-height: 52px; border-radius: 10px; background: var(--telegram); color: #FFFFFF; font-size: 16px; }

/* ---------- Сообщения и статусы ---------- */

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
}
.alert .icon { margin-top: 1px; }
.alert-success { background: var(--green-bg); color: var(--green-fg); border-color: var(--green-bd); }
.alert-error   { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); }
.alert-info    { background: var(--blue-bg); color: var(--blue-fg); border-color: var(--blue-bd); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-blue   { background: var(--blue-bg); color: var(--blue-fg); border-color: var(--blue-bd); }
.badge-green  { background: var(--green-bg); color: var(--green-fg); border-color: var(--green-bd); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow-fg); border-color: var(--yellow-bd); }
.badge-red    { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); }
.badge-gray   { background: var(--gray-bg); color: var(--gray-fg); border-color: var(--gray-bd); }
.badge-violet { background: var(--violet-bg); color: var(--violet-fg); border-color: var(--violet-bd); }
.badge-olive  { background: var(--olive-bg); color: var(--olive-fg); border-color: var(--olive-bd); }

/* ---------- Гостевые страницы (вход, ошибки) ---------- */

.guest {
    min-height: 100vh;
    padding: 40px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.guest-card > p { margin: 0; }

.login-mark {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-head { display: flex; flex-direction: column; gap: 6px; }
.login-head h1 { font-size: 26px; }
.login-head p { margin: 0; }

.login-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.dev-login {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px dashed var(--yellow-bd);
    border-radius: 10px;
    background: #FDF6E3;
}
.dev-login form { margin: 0; }
.dev-login p { margin: 0; }
.dev-login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--yellow-fg);
}
.dev-login .btn { font-weight: 500; }

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.error-code { font-size: 48px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.trace {
    width: 100%;
    max-height: 50vh;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}
.guest-card:has(.trace) { max-width: 960px; }

/* ---------- Общие элементы страниц ---------- */

.crumbs { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.page-head-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.text-warn { color: var(--warn-text); font-weight: 600; }
.text-danger { color: var(--red-fg); font-weight: 600; }
.muted-2 { margin: 0; font-size: 14px; color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.plate {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--field-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
}
.plate-lg { padding: 3px 10px; font-size: 15px; }

.badge-status { gap: 8px; padding: 4px 12px; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.dot-on { background: var(--dot-on); }
.dot-off { background: var(--dot-off); }

.btn-danger { background: var(--surface); color: var(--red-fg); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--red-bg); color: var(--red-fg); }

/* Секция-карточка с заголовком в строку (как в макете карточки машины) */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.panel-head h2 { font-size: 17px; }
.panel-head a { font-size: 14px; font-weight: 500; }
.panel > p { margin: 0; }
.empty-tight { padding: 24px 12px; }

.rows { display: flex; flex-direction: column; }
.row-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--divider);
}
.row-item:last-child { padding-bottom: 0; }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-title { font-weight: 500; }
.row-sub { font-size: 13px; color: var(--muted); }
.row-end { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    border-radius: var(--radius);
    color: var(--muted);
}
.icon-link:hover { background: var(--bg); color: var(--text); }

.props {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 10px 16px;
    font-size: 14px;
}
.props dt { color: var(--muted); }
.props dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.with-dot { display: flex; align-items: center; gap: 8px; }

.progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
    color: var(--accent);
}
.progress::-webkit-progress-bar { background: var(--border); border-radius: 4px; }
.progress::-webkit-progress-value { background: currentColor; border-radius: 4px; }
.progress::-moz-progress-bar { background: currentColor; border-radius: 4px; }
.progress-ok { color: var(--accent); }
.progress-warn { color: var(--chart-expense); }
.progress-danger { color: var(--red-fg); }

.status-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.status-block form { margin: 0; }
.status-block-green { border-color: var(--green-bd); }
.status-block-yellow { border-color: var(--yellow-bd); }
.status-block-gray { border-color: var(--gray-bd); }
.status-block-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
.status-block-title { font-size: 18px; font-weight: 600; color: var(--text); }

.two-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-main { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ---------- Машины: список ---------- */

.cars-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.car-grid { flex: 1 1 560px; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.car-grid > .empty { flex: 1 1 100%; }
.cars-side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.car-card {
    flex: 1 1 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--text);
    text-decoration: none;
}
.car-card:hover { color: var(--text); border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(20, 24, 31, .06); }
.car-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.car-card-top h3 { font-size: 17px; margin-bottom: 6px; }
.with-type-icon { display: flex; align-items: center; gap: 6px; }
.type-icon { display: inline-flex; color: var(--muted); flex: none; }
.car-card-line { margin: 0; color: var(--text-2); }
.car-card-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat-label { font-size: 12px; color: var(--muted); }
.mini-stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.car-card-warn { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--warn-text); }
.car-card-warn.text-danger { color: var(--red-fg); }
.car-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
    font-size: 13px;
    color: var(--muted);
}
.car-card-foot .more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; }

/* ---------- Машины: карточка ---------- */

.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb { display: block; width: 96px; height: 68px; border-radius: var(--radius); overflow: hidden; background: var(--chip-bg); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.service-line { display: flex; flex-direction: column; gap: 6px; }
.service-line-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }

/* ---------- Формы редактирования ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--field-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.chip:hover { border-color: var(--text); color: var(--text); }

.main:has(.savebar) { padding-bottom: 0; }
.car-form { display: flex; flex-direction: column; gap: 20px; }
.form-wrap { max-width: 880px; display: flex; flex-direction: column; gap: 20px; }

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-margin-top: 16px;
}
.form-card-danger { border-color: var(--red-bd); }
.form-card > p { margin: 0; }

.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}
/* Поле прямо в карточке (не в .field-row): карточка — колонка, flex-basis стал бы высотой */
.form-card > .field { flex: none; }
.field-narrow { max-width: 320px; }
.fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.fieldset legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.hint { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.field-error { font-size: 13px; font-weight: 500; color: var(--red-fg); }
.input[aria-invalid="true"] { border-color: var(--danger-line); }
select.input { padding-right: 8px; }
.note { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--bg); font-size: 14px; color: var(--text-2); }
.note strong { color: var(--text); }

.check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Переключатель «Автомат / Механика» */
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--chip-bg); border-radius: 10px; }
.segmented-item { flex: 1; position: relative; }
.segmented-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
}
.segmented-item input:checked + span { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 24, 31, .12); }
.segmented-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Карточки выбора «Доступна / В сервисе / Не сдаётся» */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
    position: relative;
    flex: 1 1 180px;
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { border: 2px solid var(--accent); padding: 9px 13px; background: color-mix(in srgb, var(--accent) 8%, white); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-title { font-size: 15px; font-weight: 600; }
.choice-note { font-size: 13px; color: var(--text-2); }

/* Фото в форме */
.photo-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-tile {
    position: relative;
    width: 120px;
    height: 84px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--chip-bg);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile:has(input:checked) img { opacity: .35; }
.photo-delete {
    position: absolute;
    left: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 4px;
    border-radius: 6px;
    background: var(--surface);
    font-size: 12px;
    cursor: pointer;
}
.photo-delete input { accent-color: var(--red-fg); }
.photo-add {
    position: relative;
    width: 120px;
    height: 84px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    color: var(--text-2);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.photo-add:has(input:focus-visible), .file-drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Документы в форме */
.doc-block { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--divider); }
.doc-block-title { font-weight: 600; }
.doc-remind { padding-top: 16px; border-top: 1px solid var(--divider); }
.file-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--control-h);
    padding: 0 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-weight: 400;
    color: var(--text-2);
    cursor: pointer;
}
.file-drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-current { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 13px; font-weight: 400; }
.file-current a { overflow-wrap: anywhere; }

/* Панель сохранения внизу формы */
.savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -40px;
    padding: 14px 40px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.savebar-note { margin-right: auto; font-size: 14px; color: var(--muted); }

/* ---------- Клиенты ---------- */

.status-block-red { border-color: var(--red-bd); }
.status-block-blue { border-color: var(--blue-bd); }
.text-end { text-align: right; }
textarea.input { padding: 10px 12px; resize: vertical; }
.note .icon { vertical-align: -3px; }

.search { flex: 0 1 300px; margin: 0; }
.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
}
.search-field:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.search-field input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}

.clients-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.clients-list {
    flex: 2 1 560px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow-x: auto;
}
.clients-table { min-width: 760px; }
.clients-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) 150px 130px 70px 150px 44px;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--divider);
    color: var(--text);
    text-decoration: none;
}
.clients-row:last-child { border-bottom: 0; }
a.clients-row:hover { background: var(--surface-soft); color: var(--text); }
.clients-row-head {
    padding: 12px 20px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}
.clients-row .badge { justify-self: start; white-space: nowrap; }
.client-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-cell-text { display: flex; flex-direction: column; min-width: 0; }
.client-name { font-weight: 500; }
.client-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-2);
}

.clients-new { flex: 1 1 340px; min-width: 0; gap: 16px; }
.panel-title { font-size: 17px; }
.client-form { display: flex; flex-direction: column; gap: 16px; }
.client-form > .field, .clients-new .client-form > .field { flex: none; }
.client-form .field-row .field { flex-basis: 160px; }

.license-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.license-side-wrap { display: flex; flex-direction: column; min-width: 0; }
.license-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}
.license-side.is-set { border: 1px solid var(--green-bd); background: var(--green-bg); color: var(--green-fg); }
.license-side:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.license-side-note { max-width: 100%; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.check-small { min-height: 36px; font-size: 13px; }
.check-top { align-items: flex-start; min-height: 0; }
.check-top input { flex: 0 0 18px; margin: 1px 0 0; }
.check-top > span { display: flex; flex-direction: column; gap: 2px; }

.doc-group { gap: 12px; padding-top: 16px; border-top: 1px solid var(--divider); }
.doc-group legend { float: left; width: 100%; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.doc-group .field, .foreign-box .field { flex: none; }
.doc-group .field-row .field { flex: 1 1 160px; }
.license-side.is-invalid { border-color: var(--danger-line); }
.subhead { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.foreign-box { padding: 12px 14px 14px; border-radius: var(--radius); background: var(--bg); }
.foreign-box legend { float: left; width: 100%; margin-bottom: 10px; font-size: 13px; color: var(--muted); }

/* Новый клиент: частное лицо или юрлицо — видны поля выбранного типа (поля другого уходят в POST, сервер их не берёт) */
.client-type-form:has(input[name="type"][value="company"]:checked) .client-type-person,
.client-type-form:not(:has(input[name="type"][value="company"]:checked)) .client-type-company { display: none; }
/* Представитель фирмы: поля доверенности — только при основании «доверенность» */
.rep-box:not(:has(input[name="rep_authority"][value="poa"]:checked)) .poa-fields { display: none; }
.poa-fields { display: flex; flex-direction: column; gap: 12px; }
.poa-fields .field-row .field { flex: 1 1 140px; }
.rep-box .chip-radio { min-width: 0; }

/* Поиск фирмы в Регистре предприятий (форма фирмы) */
.registry { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--bg); }
.registry[hidden] { display: none; }
.registry > .field { flex: none; }
.registry-search { display: flex; gap: 8px; }
.registry-search .input { flex: 1 1 auto; min-width: 0; }
.registry-search .btn { flex: none; gap: 6px; }
.registry-results:empty { display: none; }
.registry-item {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--divider);
    font: inherit;
    text-align: left;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}
.registry-item:last-child { padding-bottom: 0; }
.registry-item:hover .row-title { color: var(--accent); }
.registry-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.registry-item .row-sub { overflow-wrap: anywhere; }
.registry-item .row-end { flex-wrap: wrap; }
/* Водители фирмы в карточке */
.driver-row.is-archived .row-title { color: var(--muted); }
.driver-row .license-photos { margin-top: 8px; }

.comment-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.comment-form .field { flex: none; align-self: stretch; }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comment { padding: 12px 0; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 4px; }
.comment:last-child { padding-bottom: 0; }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-head form { margin: -8px -10px -8px 0; }
.comment-meta { font-size: 13px; color: var(--muted); }
.comment-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.blacklist-box { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--divider); }

.license-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.license-photo { display: block; aspect-ratio: 85.6 / 54; border-radius: var(--radius); overflow: hidden; background: var(--chip-bg); }
.license-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.license-photo-empty { display: flex; align-items: center; justify-content: center; padding: 8px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Договоры: список ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--field-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.filter-chip:hover { border-color: var(--text); color: var(--text); }
.filter-chip.is-on { background: var(--text); border-color: var(--text); color: #FFFFFF; }

.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow-x: auto;
}
.contracts-table { min-width: 900px; }
.contracts-row {
    display: grid;
    grid-template-columns: 130px minmax(120px, 1fr) minmax(150px, 1.2fr) 190px 90px 130px 24px;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--divider);
    color: var(--text);
    text-decoration: none;
}
.contracts-row:last-child { border-bottom: 0; }
a.contracts-row:hover { background: var(--surface-soft); color: var(--text); }
.contracts-row-head { padding: 12px 20px; background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--muted); }
.contracts-row .badge { justify-self: start; }
.contract-num { font-weight: 500; font-size: 14px; }
.contract-period { gap: 6px; }
.contract-sum { font-weight: 600; }
.row-chevron { display: flex; color: var(--muted); }
.progress-thin { height: 4px; color: var(--blue-fg); }
.progress-thin::-webkit-progress-bar { border-radius: 2px; }
.progress-thin::-webkit-progress-value, .progress-thin::-moz-progress-bar { border-radius: 2px; }

/* ---------- Договоры: карточка ---------- */

.h1-mono { font-size: 26px; }
.panel-accent { border: 2px solid var(--accent); }
.panel-head .muted-2 { margin-top: 4px; }
.fieldset-title { font-size: 14px; font-weight: 500; }
.inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.inline-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.input-date { width: auto; }
.chip.is-on { border: 2px solid var(--accent); padding: 0 13px; background: color-mix(in srgb, var(--accent) 8%, white); font-weight: 600; }
.chip-small { min-height: 36px; padding: 0 12px; cursor: pointer; font-family: inherit; }

.mini-boxes { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-box { flex: 1 1 160px; padding: 12px 14px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.mini-box-label, .mini-box-note { font-size: 13px; color: var(--muted); }
.mini-box-value { font-size: 20px; font-weight: 600; }

.check-list { display: flex; flex-direction: column; gap: 4px; }
.check input:disabled { cursor: not-allowed; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.form-actions form { margin: 0; }

.props-wide { grid-template-columns: minmax(170px, auto) 1fr; }
.props dd .hint { display: block; }
.props dd .inline-form { margin-left: 8px; }
.text-ok { color: var(--green-fg); font-weight: 600; }
.text-blue { color: var(--blue-fg); font-weight: 500; }
.text-olive { color: var(--olive-fg); }
.text-violet { color: var(--violet-fg); font-weight: 500; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.btn-link { min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--accent); font-family: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }

.period-title { flex: 1 1 200px; }
.period-sum { min-width: 70px; text-align: right; font-weight: 600; }

.doc-row { flex-wrap: wrap; justify-content: flex-start; gap: 12px 14px; }
.doc-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--chip-bg); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.doc-main { flex: 1 1 200px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-actions form { display: contents; }
.doc-versions { display: flex; flex-wrap: wrap; gap: 4px 10px; }

.client-head { display: flex; align-items: center; gap: 14px; }
.avatar-lg { width: 48px; height: 48px; flex: 0 0 48px; font-size: 15px; }
.client-head-name { font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; }
.client-head-name:hover { color: var(--accent); }

.status-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.status-form .field { flex: none; }
.danger-zone { border-top: 1px solid var(--divider); padding-top: 12px; }
.danger-zone summary { min-height: 44px; display: flex; align-items: center; color: var(--red-fg); font-size: 14px; font-weight: 500; cursor: pointer; }
.danger-zone[open] summary { margin-bottom: 8px; }

.link-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); font-size: 13px; color: var(--muted); }
.btn-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-pair .btn { flex: 1 1 140px; }

/* ---------- Договоры: новый ---------- */

.head-note { margin: 0; max-width: 360px; font-size: 13px; color: var(--muted); }
.contract-new { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.new-steps { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.step-num { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.form-card-muted { background: var(--surface-soft); }
.form-card-muted .step-num { background: var(--border-strong); }
.segmented-inline { align-self: flex-start; }
.segmented-inline .segmented-item span { padding: 0 16px; white-space: nowrap; }

/* «Из базы / Новый клиент» без JS */
.mode-existing, .mode-new { display: flex; flex-direction: column; gap: 16px; }
.mode-existing > .field, .new-steps .form-card > .field { flex: none; }
.contract-new:has(input[name="client_mode"][value="new"]:checked) .mode-existing { display: none; }
.contract-new:has(input[name="client_mode"][value="existing"]:checked) .mode-new { display: none; }

.check-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.check-chips[hidden] { display: none; }
/* Новый договор с фирмой: водители и «без залога» — на всю ширину под проверками клиента */
.check-chips .company-drivers, .check-chips > .check { flex: 1 1 100%; }
.company-drivers { display: flex; flex-direction: column; gap: 4px; }
.company-drivers .check-chip { margin-left: 4px; }
.check-chip { padding: 6px 10px; border-radius: var(--radius); font-size: 13px; font-weight: 500; }
.check-chip-green { background: var(--green-bg); color: var(--green-fg); }
.check-chip-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.check-chip-red { background: var(--red-bg); color: var(--red-fg); }
.check-chip-gray { background: var(--gray-bg); color: var(--gray-fg); }

.quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-days { margin-left: auto; font-size: 14px; font-weight: 600; }

.car-choice { flex: 1 1 220px; min-height: 84px; gap: 4px; }
.car-choice-top { display: flex; justify-content: space-between; gap: 8px; }
.car-avail { font-size: 13px; font-weight: 600; color: var(--green-fg); }
.car-choice.is-busy .car-avail { color: var(--red-fg); }
.car-choice.is-busy:not(:has(input:checked)) { opacity: .75; }

.summary {
    flex: 1 1 300px;
    min-width: 0;
    position: sticky;
    top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.summary-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.summary-lines { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.summary-block { padding-top: 14px; border-top: 1px solid var(--divider); }
.summary-line { display: flex; justify-content: space-between; gap: 8px; }
.summary-val { font-weight: 500; text-align: right; }
.summary-strong { font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 14px; border-top: 1px solid var(--divider); font-weight: 600; }
.summary-total-value { font-size: 24px; }
.summary-problem[hidden] { display: none; }
.btn-tall { min-height: 48px; font-size: 16px; }
.text-center { text-align: center; }

/* ---------- Счета ---------- */

.alert-warn { background: var(--yellow-bg); color: var(--yellow-fg); border-color: var(--yellow-bd); }
.alert-stack { flex-direction: column; gap: 6px; }
.alert-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; width: 100%; }
.alert:has(> .btn) { flex-wrap: wrap; }
.alert-grow { flex: 1 1 200px; }
.alert .btn-small { flex: 0 0 auto; }
.alert-stack .check { min-height: 36px; }
.stat-danger .stat-value { color: var(--red-fg); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.filter-select { width: auto; max-width: 220px; }

.badge-action { text-decoration: none; justify-self: start; }
.badge-action:hover { filter: brightness(.96); }
.badge-action .icon { margin-left: -2px; }

.invoices-table { min-width: 850px; }
.invoices-row {
    display: grid;
    grid-template-columns: 110px minmax(120px, 1fr) minmax(150px, 1.2fr) 150px 100px 170px;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--divider);
}
.invoices-row:last-child { border-bottom: 0; }
.invoices-row-head { padding: 12px 20px; background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--muted); }
.invoices-row.is-cancelled { color: var(--muted); }
.invoices-row.is-cancelled .invoice-sum { text-decoration: line-through; }
.invoice-num { font-weight: 500; }
.invoice-sum { font-weight: 600; }
.invoice-period { display: flex; flex-direction: column; }
.invoice-period .row-sub { font-size: 12px; }

.pay-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 16px 20px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--divider);
}
#pay .pay-panel { border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 24px; }
.pay-head { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; }
.pay-title { font-weight: 600; }
.pay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; flex: 1 1 520px; margin: 0; }
.pay-form .field { flex: 0 1 200px; }
.pay-actions { display: flex; gap: 8px; }
.pay-unmark { margin: 0; }
.pay-panel > .hint { flex: 1 1 100%; }
/* Оплаты счёта (частичная оплата): дата · способ · сумма · удалить */
.pay-list { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pay-row .pay-sum { font-weight: 600; margin-left: auto; }

/* Новый счёт: форма слева, предпросмотр справа */
.invoice-new { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.invoice-new-main { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.invoice-form, .contract-pick { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.contract-pick .field, .invoice-form > .field { flex: none; }
.field-label { font-size: 14px; font-weight: 500; }
.count-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio { position: relative; min-width: 52px; justify-content: center; cursor: pointer; }
.chip-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-radio:has(input:checked) { border: 2px solid var(--accent); padding: 0 13px; background: color-mix(in srgb, var(--accent) 8%, white); font-weight: 600; }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Поля периода: «Неделя / Месяц» — начало и количество, «Свои даты» — с и по, тариф — только для месяца */
.invoice-new:has(input[name="mode"][value="custom"]:checked) .only-preset { display: none; }
.invoice-new:not(:has(input[name="mode"][value="custom"]:checked)) .only-custom { display: none; }
.invoice-new:not(:has(input[name="mode"][value="month"]:checked)) .only-month { display: none; }
.invoice-new:not(:has(input[name="mode"][value="week"]:checked)) .only-week { display: none; }
.invoice-new:has(input[name="mode"][value="month"]:checked) .count-4 { display: none; }
/* Срок оплаты: поле даты — только при «Своя дата…» */
.invoice-new:not(:has(select[name="due_days"] option[value="date"]:checked)) .only-due-date { display: none; }
.invoice-new:not(:has(input[name="mode"][value="month"]:checked)) .only-month-tariff,
.invoice-new:not(:has(input[name="tariff"][value="month"]:checked)) .only-month-tariff { display: none; }
.invoice-new:has(input[name="mode"][value="month"]:checked):has(input[name="tariff"][value="month"]:checked) .only-day-tariff { display: none; }

.extras { display: flex; flex-direction: column; gap: 10px; }
.extra-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.extra-row .extra-desc { flex: 3 1 240px; }
.extra-row .extra-qty { flex: 0 1 90px; }
.extra-row .extra-price { flex: 0 1 120px; }
.extra-row .extra-slot { flex: 0 1 180px; }
.extra-row .extra-check { flex: 0 0 auto; margin-top: 26px; min-height: 44px; }
.extra-remove { margin-top: 26px; }

.invoice-preview {
    flex: 1 1 300px;
    min-width: 0;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 10px;
    background: var(--bg);
}
.invoice-preview.is-loading { opacity: .6; }
.inv-doc-head { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
.inv-doc-num { font-size: 15px; font-weight: 600; color: var(--text); }
.inv-line { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.inv-line-title { font-weight: 500; font-size: 14px; }
.inv-line-meta { color: var(--muted); }
.inv-line-calc { display: flex; justify-content: space-between; gap: 8px; }
.inv-line-sum { font-weight: 600; }

/* Карточка счёта: строки */
.inv-items { display: flex; flex-direction: column; overflow-x: auto; }
.inv-item {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 80px 90px 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider);
    font-size: 14px;
}
.inv-item-head { padding-top: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.inv-item-total { border-bottom: 0; font-weight: 600; }
.inv-item-calc { display: none; }

/* Договор: периоды и счета, условия счетов */
.period-invoices { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.period-invoice { display: inline-flex; align-items: center; gap: 8px; }
.billing-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.billing-zone summary { color: var(--accent); }
.billing-form .btn { align-self: flex-start; }
a.row-link { color: var(--text); text-decoration: none; }
a.row-link:hover { background: var(--surface-soft); }
.billing-form .field { flex: none; }
.contract-new:has(input[name="billing_period"][value="whole"]:checked) .only-split,
.billing-form:has(input[name="billing_period"][value="whole"]:checked) .only-split { display: none; }
[data-sum-invoice-line][hidden] { display: none; }

/* ---------- Мобильная версия: меню → верхняя полоса с бургером ---------- */

/* Выдача и возврат по акту TPNA (Handover.dc.html, Return.dc.html) */
.step-charge { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fuel-choices .choice { flex: 1 1 90px; min-height: 48px; justify-content: center; align-items: center; }
.check-row { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.note-warn { background: var(--yellow-bg); color: var(--yellow-fg); }
.note-warn .check { color: var(--text); min-height: 36px; }
.note[hidden], .refund-box[hidden], .field-row[hidden] { display: none; }

.act-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.act-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-2);
    cursor: pointer;
}
.act-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-photo-text {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}
.act-photo-status { font-size: 11px; font-weight: 400; }
.act-photo.is-done { border: 1px solid var(--green-bd); color: #FFFFFF; }
.act-photo.is-done .act-photo-text { justify-content: flex-end; background: linear-gradient(transparent 40%, rgba(20, 24, 31, .7)); }
.act-photo.is-done .act-photo-text .icon { display: none; }
.act-photo.is-loading { opacity: .7; }
.act-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.act-photo:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.act-photo-progress { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.act-photo-progress[hidden] { display: none; }
.act-photo-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

.ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ready-list li { display: flex; align-items: center; gap: 10px; }
.ready-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-bg); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.ready-list .is-ok .ready-mark { background: var(--green-bg); color: var(--green-fg); }
.ready-list .is-bad .ready-mark { background: var(--red-bg); color: var(--red-fg); }

.damage-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.damage-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.damage-thumb { position: relative; display: inline-block; width: 72px; height: 54px; border-radius: var(--radius); overflow: hidden; vertical-align: middle; }
.damage-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Карточка машины: повреждения из актов возврата */
.car-damage { align-items: flex-start; }
.car-damage .row-main { flex: 1 1 200px; }
.car-damage .damage-photos { margin-top: 6px; }
.car-damage form { margin: 0; flex: 0 0 auto; }
.damage-fixed summary { min-height: 44px; display: flex; align-items: center; color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.damage-thumb .icon-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; min-height: 0; padding: 0; background: var(--surface); }
.damage-add {
    position: relative;
    min-height: var(--control-h);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text-2);
    font-size: 14px;
    cursor: pointer;
}
.damage-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.damage-add.is-loading { opacity: .7; }

.return-summary { display: flex; flex-direction: column; gap: 12px; }
.return-result { padding: 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.return-result-ok { background: var(--green-bg); color: var(--green-fg); }
.return-result-due { background: var(--red-bg); color: var(--red-fg); }
.return-result-title { font-size: 13px; font-weight: 600; }
.return-result-value { font-size: 26px; font-weight: 600; }
.refund-box { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--divider); }

.act-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.act-thumb { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); text-decoration: none; }
.act-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.act-damage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.refund-form { align-items: flex-end; }

@media (max-width: 760px) {
    .act-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Короткая страница: лишняя высота не растягивает верхнюю полосу меню (align-content по умолчанию — stretch) */
    .app { align-content: flex-start; }
    .side {
        flex: 1 1 100%;
        gap: 0;
        padding: 10px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        height: auto;
        z-index: 10;
    }
    .burger { display: flex; }
    .side-nav { display: none; padding: 12px 0 4px; }
    .side-nav.open { display: flex; }
    .side-user { display: none; }
    .side-nav.open + .side-user { display: flex; margin-top: 0; }
    .main { padding: 20px 16px; }
    h1 { font-size: 24px; }
    .guest-card { padding: 32px 20px; }
    .form-card { padding: 18px; }
    .savebar { margin: 0 -16px; padding: 12px 16px; }
    .savebar-note { display: none; }
    .savebar .btn { flex: 1 1 0; }
    .head-actions { width: 100%; }
    .head-actions .btn { flex: 1 1 auto; }
    .search { flex: 1 1 100%; }
    .summary { position: static; }
    .h1-mono { font-size: 22px; }
    .props-wide { grid-template-columns: 1fr; gap: 2px 0; }
    .props-wide dd { margin-bottom: 10px; }
    .quick-days { margin-left: 0; flex-basis: 100%; }
    .invoice-preview { position: static; }
    .filters { flex: 1 1 100%; }
    .filter-select { flex: 1 1 140px; max-width: none; }
    .filters .search-field { flex: 1 1 100%; }
    .pay-form .field { flex: 1 1 140px; }
    .pay-actions { flex: 1 1 100%; }
    .pay-actions .btn { flex: 1 1 0; }
    .inv-item { grid-template-columns: minmax(0, 1fr) auto; }
    .inv-item > :nth-child(2), .inv-item > :nth-child(3) { display: none; }
    .inv-item-calc { display: block; }
}

/* ---------- Расходы (макет Expenses.dc.html) ---------- */

.expense-form, .service-form, .fine-form { display: flex; flex-direction: column; gap: 16px; }
.expense-form > .field, .service-form > .field, .fine-form > .field { flex: none; }
/* Режим «к машине / общий / разделить» — по выбранной кнопке */
.expense-form:not(:has(input[name="mode"][value="car"]:checked)) .only-car,
.expense-form:not(:has(input[name="mode"][value="general"]:checked)) .only-general,
.expense-form:not(:has(input[name="mode"][value="split"]:checked)) .only-split { display: none; }
.expense-form:not(:has(input[name="split_mode"][value="manual"]:checked)) .split-amount,
.expense-form:not(:has(input[name="split_mode"][value="manual"]:checked)) .only-split-manual,
.expense-form:has(input[name="split_mode"][value="manual"]:checked) .only-split-equal { display: none; }
.expense-form:not(:has(input[name="to_service"]:checked)) .only-to-service { display: none; }
.service-check { display: flex; flex-direction: column; gap: 12px; }
.split-cars { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.split-car { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; border-bottom: 1px solid var(--divider); }
.split-amount { flex: 0 0 110px; }
.split-car:not(:has(input[type="checkbox"]:checked)) .split-amount { visibility: hidden; }
.file-drop-tall { min-height: 64px; justify-content: center; background: var(--surface-soft); }

.money-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.money-card {
    flex: 1 1 200px;
    padding: 14px 16px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
}
.money-card:hover { border-color: var(--border-strong); color: var(--text); }
.money-card-head { display: flex; justify-content: space-between; gap: 8px; }
.money-card-name { font-weight: 600; }
.money-card-nums { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--muted); }
.money-card-nums .num { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.money-card-nums .num.text-danger { color: var(--red-fg); }
.money-bars { display: flex; flex-direction: column; gap: 3px; }
.bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--divider); overflow: hidden; }
.bar::-webkit-progress-bar { background: var(--divider); border-radius: 3px; }
.bar::-webkit-progress-value { background: currentColor; border-radius: 3px; }
.bar::-moz-progress-bar { background: currentColor; border-radius: 3px; }
.bar-income { color: var(--chart-income); }
.bar-expense { color: var(--chart-expense); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }

.expenses-table { min-width: 640px; }
.expenses-row {
    display: grid;
    grid-template-columns: 90px minmax(180px, 1.6fr) minmax(140px, 1fr) 100px 40px;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--divider);
}
.expenses-row-head { background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--muted); }
.expenses-row-total { border-bottom: 0; font-weight: 600; }
.expense-sum { font-weight: 600; }
.tag-general { justify-self: start; padding: 4px 10px; border: 1px dashed var(--border-strong); border-radius: 999px; font-size: 13px; color: var(--text-2); }
.recurring-row .row-end { flex-wrap: wrap; }
.recurring-row form, .category-row form { margin: 0; }
.category-row .row-end { flex-wrap: wrap; }
.category-name { flex: 1 1 260px; }
.category-name .input { flex: 1 1 160px; width: auto; }
.category-row.is-hidden .input { color: var(--muted); }
.tag-review { justify-self: start; }

/* ---------- Сверка с банком (по образцу «Расходов») ---------- */

.bank-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.bank-bulk:empty { display: none; }
.bank-row {
    display: grid;
    grid-template-columns: 32px 90px minmax(200px, 1.5fr) 120px minmax(200px, 1.3fr) minmax(150px, auto);
    gap: 16px;
    align-items: start;
    padding: 12px 20px;
    border-bottom: 1px solid var(--divider);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row-head { align-items: center; background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--muted); }
.bank-row .check { margin-top: -10px; }
.bank-party .row-sub, .bank-match .row-sub { overflow-wrap: anywhere; }
.bank-amount { display: flex; flex-direction: column; font-weight: 600; }
.bank-match { gap: 4px; align-items: flex-start; }
.bank-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; }
.bank-actions form { margin: 0; }
.bank-search { width: 100%; margin-bottom: 16px; }
.bank-search .input { flex: 1 1 220px; width: auto; }
.bank-allocate { display: flex; flex-direction: column; gap: 0; margin: 0; }
.bank-alloc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.bank-alloc-input { flex: 0 0 130px; }
.bank-alloc-input .input { text-align: right; }

.draft-list { display: flex; flex-direction: column; gap: 12px; }
.draft-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(320px, 1.6fr);
    gap: 12px 20px;
    margin: 0;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.draft-info { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.draft-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.draft-fields .field { flex: none; }
.draft-receipt { align-self: start; }
.draft-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }

@media (max-width: 1100px) {
    .bank-row { grid-template-columns: 32px 90px minmax(0, 1fr) 110px; }
    .bank-match, .bank-actions { grid-column: 3 / -1; }
    .bank-actions { justify-content: flex-start; }
    .bank-row-head > :nth-child(n+5) { display: none; }
}
@media (max-width: 760px) {
    .bank-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 16px; }
    .bank-date { grid-column: 2; }
    .bank-party { grid-column: 2 / -1; }
    .bank-amount { grid-column: 3; grid-row: 1; text-align: right; }
    .bank-match, .bank-actions { grid-column: 2 / -1; }
    .bank-row-head { display: none; }
    .draft-row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .draft-info { grid-template-columns: minmax(0, 1fr) auto; }
    .draft-info > :first-child { grid-column: 1 / -1; }
    .draft-fields { grid-template-columns: minmax(0, 1fr); }
    .draft-actions { justify-content: flex-start; }
}

/* ---------- Обслуживание (макет Service.dc.html) ---------- */

.status-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: var(--yellow-bg); color: var(--yellow-fg); display: flex; align-items: center; justify-content: center; }
.status-block .status-block-text { flex: 1 1 260px; }
.plan-list { display: flex; flex-direction: column; }
.plan-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(160px, 1fr);
    gap: 8px 20px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--divider);
    color: var(--text);
    text-decoration: none;
}
.plan-item:hover { color: var(--text); background: var(--surface-soft); }
.plan-car, .plan-service, .plan-notes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.table-flat { border: 0; border-radius: 0; margin: 0 -20px -20px; }
.service-table { min-width: 640px; }
.service-row {
    display: grid;
    grid-template-columns: 90px minmax(180px, 1.6fr) minmax(130px, 1fr) 100px 90px;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
}
.service-row-head { background: var(--surface-soft); font-size: 13px; font-weight: 500; color: var(--muted); }
/* Форма записи: подписи и поля по статусу и виду работ */
.service-form:not(:has(input[name="status"][value="done"]:checked)) .only-status-done,
.service-form:has(input[name="status"][value="done"]:checked) .only-status-open,
.service-form:not(:has(input[name="status"][value="in_progress"]:checked)) .only-status-progress,
.service-form:not(:has(input[name="status"][value="planned"]:checked)) .only-status-planned,
.service-form:not(:has(select[name="type"] option[value="oil"]:checked, select[name="type"] option[value="timing"]:checked)) .only-type-replace,
.service-form:not(:has(select[name="type"] option[value="tires"]:checked)) .only-type-tires,
.service-form:not(:has(select[name="type"] option[data-monthly]:checked)) .only-type-monthly,
.service-form:not(:has(select[name="car_id"] option[data-type="trailer"]:checked)) .only-vehicle-trailer,
.service-form:has(select[name="car_id"] option[data-type="trailer"]:checked) .only-vehicle-car,
.service-form:has(select[name="car_id"] option[data-type="trailer"]:checked) select[name="type"] option[data-for="car"],
.service-form:has(select[name="car_id"] option[data-type="car"]:checked) select[name="type"] option[data-for="trailer"] { display: none; }
/* Вид работ в расходе «Записать в историю обслуживания» — по типу выбранного транспорта */
form:has(select[name="car_id"] option[data-type="trailer"]:checked) select[name="service_type"] option[data-for="car"],
form:has(select[name="car_id"] option[data-type="car"]:checked) select[name="service_type"] option[data-for="trailer"] { display: none; }
.mileage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mileage-form .input { width: 140px; }

@media (max-width: 760px) {
    .plan-item { grid-template-columns: 1fr; }
    .table-flat { margin: 0 -20px -20px; }
}

/* ---------- Ссылка клиента, запросы продления, подписи (карточка договора) ---------- */

.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--yellow-bg); color: var(--yellow-fg); border: 1px solid var(--yellow-bd); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.link-input { font-size: 13px; }
.panel > .field, .cl-card > .field, .cl-ext-form > .field, .paper-form > .field { flex: 0 0 auto; }
.btn.is-disabled:hover { background: var(--border-strong); color: #FFFFFF; }
.btn-pair > form { flex: 1 1 140px; display: flex; }
.btn-pair > form .btn { flex: 1 1 auto; }
.btn-dark { background: var(--text); color: #FFFFFF; border-color: var(--text); }
.btn-dark:hover { background: var(--text-2); color: #FFFFFF; }
.btn.is-copied { color: var(--green-fg); border-color: var(--green-bd); }
.request-row { flex-wrap: wrap; }
.request-comment { white-space: pre-line; }
.request-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sign-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sign-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--green-bd); border-radius: var(--radius); background: var(--surface-soft); }
.sign-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--green-bg); color: var(--green-fg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sign-hash { font-size: 12px; }
.paper-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

/* ---------- Страница клиента /c/{token} (макеты ClientView, ClientSign) ---------- */

.cl-body { min-height: 100vh; }
.cl-page { max-width: 600px; margin: 0 auto; padding: 0 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.cl-page:has(.cl-main-wide) { max-width: 680px; }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 4px; }
.cl-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-brand .brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.cl-brand-name { font-weight: 600; overflow-wrap: anywhere; }
.cl-langs { display: flex; gap: 2px; padding: 3px; background: var(--chip-bg); border-radius: var(--radius); flex: 0 0 auto; }
.cl-lang { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.cl-lang:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.cl-lang.is-on { background: var(--surface); font-weight: 600; }
.cl-main { display: flex; flex-direction: column; gap: 16px; }
.cl-main [hidden] { display: none !important; }

.cl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cl-card h2 { font-size: 17px; }
.cl-card p { margin: 0; }
.cl-hero { gap: 16px; }
.cl-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-hero-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-hero-title h1 { font-size: 24px; }
.cl-hello { font-size: 13px; color: var(--muted); }
.cl-plate { font-size: 14px; color: var(--text-2); }
.cl-period { display: flex; flex-direction: column; gap: 8px; }
.cl-period-dates { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; }
.cl-progress { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--border); overflow: hidden; appearance: none; }
.cl-progress::-webkit-progress-bar { background: var(--border); border-radius: 4px; }
.cl-progress::-webkit-progress-value { background: var(--blue-fg); border-radius: 4px; }
.cl-progress::-moz-progress-bar { background: var(--blue-fg); border-radius: 4px; }
.cl-return { padding: 14px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.cl-return-label { font-size: 13px; color: var(--muted); }
.cl-return-when { font-size: 20px; font-weight: 600; }
.cl-return-where { font-size: 13px; color: var(--text-2); }

.cl-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: 10px; font-size: 14px; font-weight: 500; }
.cl-notice > span { flex: 1 1 200px; }
.cl-notice-ok { border-color: var(--green-bd); background: var(--green-bg); color: var(--green-fg); }
.cl-notice-warn { border-color: var(--yellow-bd); background: var(--yellow-bg); color: var(--yellow-fg); }
.cl-notice-error { border-color: var(--red-bd); background: var(--red-bg); color: var(--red-fg); }
.cl-notice-btn { flex: 0 0 auto; }
.cl-extend { display: flex; flex-direction: column; gap: 12px; }
.cl-ext > summary { list-style: none; min-height: 48px; font-size: 16px; }
.cl-ext > summary::-webkit-details-marker { display: none; }
.cl-ext[open] > summary { display: none; }
.cl-ext-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--field-border); border-radius: 10px; }

.cl-invoice { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.cl-invoice-issued { border-color: var(--yellow-bd); background: color-mix(in srgb, var(--yellow-bg) 55%, var(--surface)); }
.cl-invoice-overdue { border-color: var(--red-bd); background: color-mix(in srgb, var(--red-bg) 55%, var(--surface)); }
.cl-invoice-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-invoice-id, .cl-invoice-sum { display: flex; flex-direction: column; }
.cl-invoice-sum { align-items: flex-end; text-align: right; }
.cl-invoice-number { font-weight: 600; }
.cl-invoice-id .small { color: var(--text-2); }
.cl-invoice-amount { font-size: 20px; font-weight: 600; }
.cl-invoice-state { font-size: 13px; font-weight: 600; color: var(--yellow-fg); }
.cl-invoice-overdue .cl-invoice-state { color: var(--red-fg); }
.cl-invoice-paid .cl-invoice-state { color: var(--green-fg); }
.cl-pay { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.cl-pay-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cl-pay-row { display: flex; align-items: center; gap: 8px; }
.cl-pay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-pay-label { font-size: 12px; color: var(--muted); }
.cl-pay-value { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.cl-copy { flex: 0 0 auto; padding: 0 12px; font-size: 13px; font-weight: 500; }

.cl-docs { display: flex; flex-direction: column; }
.cl-doc { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.cl-doc:hover { color: var(--text); background: var(--surface-soft); }
.cl-doc .doc-icon { flex: 0 0 40px; }
.cl-doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-doc-name { font-weight: 500; }
.cl-doc-format { font-size: 14px; font-weight: 600; color: var(--accent); }

.cl-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cl-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--chip-bg); }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-photo-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: color-mix(in srgb, var(--text) 60%, transparent); color: #FFFFFF; font-size: 11px; text-align: center; }
.cl-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: color-mix(in srgb, var(--text) 92%, transparent); color: #FFFFFF; }
.cl-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cl-lightbox::backdrop { background: transparent; }
.cl-lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: var(--radius); }
.cl-lightbox-close { position: absolute; top: 12px; right: 12px; }
.cl-lightbox-btn { width: 44px; height: 44px; color: #FFFFFF; background: color-mix(in srgb, #FFFFFF 15%, transparent); }
.cl-lightbox-caption { font-size: 14px; }

.cl-kv { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cl-kv > div, .cl-summary > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cl-kv dt, .cl-summary dt { color: var(--muted); }
.cl-kv dd, .cl-summary dd { margin: 0; font-weight: 500; text-align: right; }
.cl-help { border-color: var(--red-bd); }
.cl-help-text { margin: 0; font-size: 14px; color: var(--text-2); }
.cl-help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-help-actions .btn { flex: 1 1 200px; overflow-wrap: anywhere; }
.cl-emergency { margin: 0; color: var(--red-fg); font-weight: 500; }
.cl-foot { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; font-size: 12px; color: var(--muted); text-align: center; }

.cl-error { align-items: center; text-align: center; margin-top: 40px; }
.cl-error-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--chip-bg); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.cl-error-lang h1 { font-size: 20px; }
.cl-error-lang p { margin: 4px 0 0; color: var(--text-2); }

/* Подписание */
.cl-sign-head { display: flex; flex-direction: column; gap: 4px; }
.cl-sign-head h1 { font-size: 24px; }
.cl-sign-head p { margin: 0; color: var(--text-2); }
.cl-steps { display: flex; gap: 6px; }
.cl-step { flex: 1; min-height: 52px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); font-family: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cl-step-num { font-size: 12px; font-weight: 600; opacity: .85; }
.cl-step-label { font-size: 14px; font-weight: 600; }
.cl-step.is-done { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-fg); }
.cl-step.is-done .cl-step-num::before { content: "\2713\00A0"; }
.cl-step.is-current { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.cl-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-doc-head a { font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.cl-note { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 13px; color: var(--text-2); }
.cl-doc-text { max-height: 520px; overflow-y: auto; padding: 20px; border: 1px solid var(--border); border-radius: 10px; font-family: 'IBM Plex Serif', Georgia, serif; font-size: 14px; line-height: 1.6; }
.cl-doc-text h3 { margin: 0 0 4px; font-size: 16px; text-align: center; }
.cl-doc-text h4 { margin: 16px 0 4px; font-size: 14px; }
.cl-doc-text h4:first-child { text-align: center; font-size: 16px; margin-top: 0; }
.cl-doc-text p { margin: 0 0 6px; }
.cl-doc-text .doc-center { text-align: center; }
.cl-doc-text .doc-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.cl-doc-text .doc-table td { vertical-align: top; padding: 4px 6px; border: 1px solid var(--divider); }
.cl-sign-photos { display: flex; flex-direction: column; gap: 8px; }
.cl-sign-photos-title { font-size: 14px; font-weight: 600; }
.cl-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.cl-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--accent); }
.cl-checks { display: flex; flex-direction: column; gap: 4px; }
.cl-summary { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.cl-input-lg { min-height: 48px; font-size: 16px; }
.cl-pad { display: flex; flex-direction: column; gap: 6px; }
.cl-pad-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cl-pad-label { font-size: 14px; font-weight: 500; }
.cl-pad-head .btn-link { min-height: 44px; }
.cl-canvas { width: 100%; height: 180px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface); touch-action: none; cursor: crosshair; }
.cl-missing { color: var(--warn-text); font-weight: 500; }
.cl-sign-btn, .cl-next { min-height: 52px; font-size: 17px; }
.btn.is-disabled { background: var(--border-strong); border-color: var(--border-strong); color: #FFFFFF; }
.btn.is-busy { opacity: .7; cursor: progress; }
.cl-done { align-items: center; text-align: center; padding: 32px 20px; }
.cl-done h1 { font-size: 22px; }
.cl-done p { margin: 0; color: var(--text-2); }
.cl-done-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green-fg); display: flex; align-items: center; justify-content: center; }
.cl-done-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.cl-done-actions .btn { flex: 1 1 200px; }

@media (max-width: 480px) {
    .cl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-card { padding: 16px; }
    .cl-doc-text { padding: 14px; max-height: 420px; }
    .cl-step { padding: 6px; }
    .cl-step-label { font-size: 13px; }
}

/* ---------- Traccar (этап 10): GPS, карта, события, пробег ---------- */

.dot-bad { background: var(--danger-line); }
.nav-badge-danger { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-bd); }

.car-map {
    position: relative;
    z-index: 0;            /* слои Leaflet не перекрывают меню на телефоне */
    height: 360px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--chip-bg);
    overflow: hidden;
}
.map-error { margin: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-2); }
.map-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot-rent { background: var(--accent); }
.legend-dot-free { background: var(--dot-off); }
.legend-dot-off { background: var(--danger-line); }
.legend-line { width: 14px; height: 0; border-top: 2px dashed var(--blue-fg); }
.legend-line-riga { border-top: 2px solid var(--violet-fg); }

.map-marker-wrap { background: none; border: 0; }
.map-marker { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-marker-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 1px 3px rgba(20, 24, 31, .35); background: var(--dot-off); }
.map-marker-rent .map-marker-dot { background: var(--accent); }
.map-marker-off .map-marker-dot { background: var(--danger-line); }
.map-popup-speed { margin-top: 2px; font-weight: 600; }
.map-marker-plate { padding: 2px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--field-border); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); }
.map-marker-abroad .map-marker-plate { border-color: var(--danger-line); color: var(--red-fg); }

.event-row { justify-content: flex-start; align-items: flex-start; }
.event-row .row-main { flex: 1 1 200px; }
.event-row .row-title { display: inline-flex; align-items: center; gap: 6px; }
.event-row form { margin: 0; }
.event-time { flex: 0 0 auto; min-width: 84px; font-size: 13px; color: var(--muted); padding-top: 1px; }
.event-row-alarm .row-title { color: var(--red-fg); }

.km-stats { display: flex; flex-wrap: wrap; gap: 20px; }
.km-stat { flex: 1 1 80px; display: flex; flex-direction: column; }
.km-stat-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.km-days { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; font-size: 13px; }
.km-day-label { color: var(--muted); }
.km-days .bar { color: var(--accent); }
.km-day-value { text-align: right; }

.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.km-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
.km-table th { padding: 8px 8px 8px 0; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--border); }
.km-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--divider); }
.km-table .num { text-align: right; white-space: nowrap; }
.km-table .km-table-on { font-weight: 600; color: var(--text); }
.km-table-bar { width: 30%; }
.profit-table { min-width: 0; }
.profit-table tfoot th, .profit-table tfoot td { padding: 12px 8px 0 0; font-weight: 600; color: var(--text); border-bottom: 0; }
.km-table-bar .bar { height: 10px; color: var(--accent); }
.km-car { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; }
.km-car .plate { align-self: flex-start; }

.traccar-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

@media (max-width: 760px) {
    .car-map { height: 300px; }
}

/* ---------- Главная (макет Home.dc.html) ---------- */

/* Пять показателей: в один ряд, на узком экране — 3 + 2, на телефоне — столбиком */
.stats-dash { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1240px) {
    .stats-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .stats-dash { grid-template-columns: minmax(0, 1fr); }
}
.stat-negative { color: var(--red-fg); }
.stat-link { color: var(--text); text-decoration: none; }
.stat-link:hover { border-color: var(--border-strong); color: var(--text); }
.stat-pair { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.stat-pair .mini-stat-label { font-size: 13px; }
.stat-pair .mini-stat-value { font-size: 20px; }
.link-plain { color: var(--text); }
.flip { display: inline-flex; transform: rotate(180deg); }

/* Календарь занятости: таблица, полосы — ячейки с colspan; колонка машин закреплена */
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-nav h2 { margin: 0 8px 0 0; font-size: 17px; }
/* Кнопки и месяц переносятся только вместе: на телефоне — строкой под заголовком */
.cal-nav-btns { display: flex; align-items: center; gap: 8px; }
.cal-nav .btn { min-height: var(--control-h); }
.cal-nav .btn-icon { width: var(--control-h); padding: 0; }
.cal-nav .is-current { color: var(--muted); }
.cal-title { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-2); }
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key { width: 14px; height: 10px; border-radius: 3px; border: 1px solid transparent; }
.cal-key-active { background: var(--blue-fg); border-color: var(--blue-fg); }
.cal-key-booked { background: var(--violet-bg); border-color: var(--cal-booked-bd); }
.cal-key-service { background: var(--yellow-bg); border-color: var(--cal-service-bd); }

.cal-scroll { overflow-x: auto; }
.cal-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: collapse; }
.cal-table th, .cal-table td { padding: 0; border-left: 1px solid var(--cal-line); }
.cal-table thead th { background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.cal-table tbody tr { height: 60px; border-bottom: 1px solid var(--divider); }
.cal-table tbody tr:last-child { border-bottom: 0; }
.cal-car {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 170px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    text-align: left;
}
.cal-table thead .cal-car { padding: 10px 16px; background: var(--surface-soft); font-size: 13px; font-weight: 500; color: var(--muted); }
.cal-car a { display: flex; flex-direction: column; justify-content: center; min-height: 60px; padding: 8px 16px; box-sizing: border-box; color: var(--text); text-decoration: none; }
.cal-car-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-car-plate { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.cal-day { padding: 6px 0; font-weight: 400; }
.cal-day > span { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.cal-table thead .cal-day.is-weekend { background: var(--bg); }
.cal-wd { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.cal-day.is-weekend .cal-wd { color: var(--warn-text); }
.cal-num { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-day.is-today .cal-num { background: var(--accent); color: var(--surface); font-weight: 700; }
.cal-cell { background: var(--surface); }
.cal-cell.is-weekend { background: var(--surface-soft); }
.cal-cell.is-today { background: color-mix(in srgb, var(--accent) 9%, white); }
.cal-add { position: relative; display: block; height: 59px; text-decoration: none; }
.cal-add:hover, .cal-add:focus-visible { background: var(--cal-hover); }
.cal-add:hover::after, .cal-add:focus-visible::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
}
.cal-span { padding: 0 3px; vertical-align: middle; background: var(--surface); }
.cal-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 42px;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: var(--radius);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}
.cal-bar:hover { filter: brightness(0.96); }
.cal-bar.from-prev { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.to-next { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cal-bar-sub { font-size: 12px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; }
.cal-bar-active, .cal-bar-done { background: var(--blue-fg); border-color: var(--blue-fg); color: var(--surface); }
.cal-bar-active:hover, .cal-bar-done:hover { color: var(--surface); }
.cal-bar-done { opacity: 0.75; }
.cal-bar-booked { background: var(--violet-bg); border-color: var(--cal-booked-bd); color: var(--cal-booked-fg); }
.cal-bar-booked:hover { color: var(--cal-booked-fg); }
.cal-bar-service { background: var(--yellow-bg); border-color: var(--cal-service-bd); color: var(--cal-service-fg); }
.cal-bar-service:hover { color: var(--cal-service-fg); }
.cal-hint { margin: 0; padding: 10px 20px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--divider); }

/* Ряды панелей */
.dash-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.dash-wide { flex: 3 1 520px; min-width: 0; box-sizing: border-box; }
.dash-narrow { flex: 2 1 320px; min-width: 0; box-sizing: border-box; }

/* График доходов и расходов: столбики — SVG внутри кнопок, высоты — атрибуты rect */
.chart-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.chart-caption { margin: 0; min-height: 22px; font-size: 14px; color: var(--text-2); }
.chart-caption strong { font-weight: 600; color: var(--text); }
.chart { display: flex; gap: 8px; }
.chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    margin-top: -7px;
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.chart-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chart-plot {
    display: flex;
    align-items: stretch;
    height: 200px;
    border-bottom: 1px solid var(--border-strong);
    background: repeating-linear-gradient(to bottom, var(--divider) 0 1px, transparent 1px 50px);
}
.chart-col {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.chart-col.is-active { background: var(--cal-line); }
.chart-col:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chart-bars { width: 100%; max-width: 34px; height: 100%; }
.chart-inc { fill: var(--chart-income); }
.chart-exp { fill: var(--chart-expense); }
.chart-col.is-current .chart-bars { opacity: 0.7; }
.chart-labels { display: flex; }
.chart-label { flex: 1; min-width: 0; overflow: hidden; text-align: center; font-size: 12px; color: var(--muted); }
.chart-label.is-active { font-weight: 600; color: var(--text); }

/* Требует внимания */
.att-list { display: flex; flex-direction: column; }
.att-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid var(--divider);
    color: var(--text);
    text-decoration: none;
}
.att-row:hover { color: var(--text); }
.att-row:hover .row-title { color: var(--accent); }
.att-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; }
.att-red    { background: var(--red-bg);    color: var(--red-fg); }
.att-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.att-violet { background: var(--violet-bg); color: var(--violet-fg); }
.att-blue   { background: var(--blue-bg);   color: var(--blue-fg); }
.att-gray   { background: var(--gray-bg);   color: var(--gray-fg); }
.att-more summary { min-height: var(--control-h); display: flex; align-items: center; border-top: 1px solid var(--divider); color: var(--accent); font-weight: 500; cursor: pointer; }
.att-empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-fg); }

/* Пробег: полоса — эта неделя из 1000 км, больше — полная и другого цвета */
.km-table-bar .km-bar-over { color: var(--chart-expense); }
.km-table .km-over { color: var(--warn-text); }

/* Структура расходов */
.cost-total { font-weight: 600; }
.cost-list { display: flex; flex-direction: column; gap: 14px; }
.cost-item { display: flex; flex-direction: column; gap: 6px; }
.cost-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cost-sum { font-weight: 600; }
.bar-expense { height: 10px; color: var(--chart-expense); }

@media (max-width: 760px) {
    .chart-label:nth-child(odd):not(.is-active) { visibility: hidden; }
    .cal-nav { flex: 1 1 100%; }
    .cal-nav h2 { flex: 1 1 100%; margin: 0; }
    .cal-car { width: 120px; }
    .cal-car a { padding: 8px 10px; }
}

/* ---------- Журнал действий (макет Log.dc.html) и блок «История» ---------- */

.log-filters { display: flex; flex-direction: column; gap: 10px; }
.log-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.log-filter-row .search-field { flex: 0 1 300px; }

.seg-links { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--chip-bg); border-radius: 10px; }
.seg-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.seg-link:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.seg-link.is-on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 24, 31, .12); }

.log-day {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.log-day-title {
    padding: 12px 20px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-2);
}
.log-entry { display: flex; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--divider); }
.log-entry:last-child { border-bottom: 0; }
.log-list .log-entry { padding: 12px 0; }
.log-time {
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.log-date { font-size: 12px; }
.avatar-sm { width: 36px; height: 36px; font-size: 12px; }
.avatar-blue { background: var(--blue-bg); color: var(--blue-fg); }
.avatar-violet { background: var(--violet-bg); color: var(--violet-fg); }
.avatar-plain { background: var(--bg); color: var(--muted); }
.log-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.log-who { font-weight: 600; }
.log-action { min-width: 0; overflow-wrap: anywhere; }
.log-action a, .log-object { font-weight: 500; }
.log-tag { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.log-tag-blue { background: var(--blue-bg); color: var(--blue-fg); }
.log-tag-teal { background: var(--teal-bg); color: var(--teal-fg); }
.log-tag-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.log-tag-violet { background: var(--violet-bg); color: var(--violet-fg); }
.log-tag-gray { background: var(--gray-bg); color: var(--gray-fg); }
.log-tag-orange { background: var(--orange-bg); color: var(--orange-fg); }
.log-tag-red { background: var(--red-bg); color: var(--red-fg); }
.log-changes { display: flex; flex-direction: column; gap: 4px; }
.log-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.log-change .icon { color: var(--muted); }
.log-old { padding: 1px 6px; border-radius: 4px; background: var(--red-bg); color: var(--red-fg); text-decoration: line-through; overflow-wrap: anywhere; }
.log-new { padding: 1px 6px; border-radius: 4px; background: var(--green-bg); color: var(--green-fg); font-weight: 500; overflow-wrap: anywhere; }
.log-note { margin: 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.log-meta { font-size: 12px; color: var(--muted); }
.log-empty {
    margin: 0;
    padding: 32px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.log-pages { display: flex; justify-content: center; gap: 8px; }

/* Переключатель страниц под таблицами (partials/pagination): клиенты, договоры, счета, история работ */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; }
.pager-step { padding: 0 14px; }
.pager-step.is-disabled { opacity: .45; pointer-events: none; }
.pager-back .icon { transform: scaleX(-1); }
.pager-back { display: inline-flex; }
.pager-nums { display: flex; align-items: center; gap: 4px; }
.pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h);
    min-height: var(--control-h);
    padding: 0 8px;
    border-radius: var(--radius);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.pager-num:hover { background: var(--chip-bg); color: var(--text); }
.pager-num.is-on { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.pager-gap { min-width: 20px; text-align: center; color: var(--muted); }
.pager-of { display: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Область списка с переключателем: страницы подгружаются без перезагрузки (app.js, data-pages) */
.pages-region { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
[data-pages][aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.clients-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.clients-main .clients-list { flex: none; }

@media (max-width: 760px) {
    .pager-nums { display: none; }
    .pager-of { display: inline; flex: 1; text-align: center; }
    .pager { justify-content: space-between; }
}

@media (max-width: 760px) {
    .log-entry { gap: 10px; padding: 12px 16px; }
    .log-list .log-entry { padding: 12px 0; }
    .log-time { flex-basis: 40px; }
    .log-filter-row .search-field { flex: 1 1 100%; }
    .seg-links { flex: 1 1 100%; }
}

/* ---------- Профиль: Telegram и уведомления ---------- */

.tg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tg-link-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.notify-list { display: flex; flex-direction: column; }
.notify-row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.notify-row:last-child { border-bottom: 0; }
.notify-row input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.notify-text { display: flex; flex-direction: column; gap: 2px; }
.notify-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notify-hours .input { width: 90px; }
.side-user-link { color: var(--text); text-decoration: none; border-radius: var(--radius); }
.side-user-link:hover { color: var(--accent); }
.side-user-link[aria-current="page"] .side-user-name { color: var(--accent); }

/* ---------- Страница входа: страница компании (LV / RU / EN) ---------- */

.login-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-top .login-mark { margin: 0; }
.login-contacts { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 16px; border-top: 1px solid var(--divider); }
.login-contacts-title { font-size: 13px; color: var(--muted); }
.login-contact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 500; }
.login-contact:hover { color: var(--accent); }
.login-contact .icon { color: var(--muted); }
@media (max-width: 480px) {
    .guest { padding: 16px; align-items: flex-start; }
    .guest-card { padding: 28px 20px; }
}
.login-form { width: 100%; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.login-or { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Перенос старых договоров (LEGACY_IMPORT) ---------- */

.legacy-invoice { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); }
.legacy-invoice .field-row { align-items: flex-start; }
.legacy-invoice .field-row > .check { align-self: flex-end; }
.legacy-items { display: flex; flex-direction: column; gap: 8px; }
.legacy-item { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px; gap: 8px; }
.legacy-item .field { margin: 0; }
@media (max-width: 760px) {
    .legacy-item { grid-template-columns: minmax(0, 1fr) 110px; }
    .legacy-item-desc { grid-column: 1 / -1; }
}

/* Штрафы: формы действий в карточке — колонкой, кнопка по ширине текста */
.stack-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.stack-form .field-row { align-self: stretch; }

/* ---------- Общий поиск ---------- */

.side-search { margin: 0 0 8px; }
.side-search .search-field { padding: 0 10px; }
.search-results { display: flex; flex-direction: column; gap: 16px; }
.search-row { flex-wrap: nowrap; justify-content: flex-start; color: var(--text); text-decoration: none; }
.search-row:hover { color: var(--text); }
.search-row:hover .row-title { color: var(--accent); }
.search-row .row-main { flex: 1 1 auto; }
.search-row .row-sub { overflow: hidden; text-overflow: ellipsis; }
.search-row-icon { flex: none; display: flex; color: var(--muted); }

@media (max-width: 760px) {
    .search-row .row-end .badge { display: none; }
}

/* ---------- Поездки и маршрут (договор), машина в момент штрафа ---------- */

.trip-days { margin-bottom: 16px; }
.trip-days + .panel, .trip-days + .alert { margin-bottom: 16px; }
.trip-map { height: 440px; }
.trip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.trip-key { display: inline-block; width: 12px; height: 12px; margin-right: -8px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); vertical-align: -1px; }
.trip-key-start { background: var(--accent); }
.trip-key-stop { background: var(--muted); }
.trip-key-harsh { background: var(--warn-text); }
.fine-map { height: 320px; }

@media (max-width: 760px) {
    .trip-map { height: 340px; }
    .trip-days { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .trip-days .filter-chip { flex: none; }
}

/* --- Страница фото сотрудника /p/{token} (templates/staff, staff-photos.js): крупно, контрастно, одна колонка --- */
.staff-body { min-height: 100vh; background: var(--surface); color: var(--text); font-size: 24px; line-height: 1.3; display: flex; flex-direction: column; }
.staff-page { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 16px 8px; }
.staff-page [hidden] { display: none !important; }
.staff-screen { display: flex; flex-direction: column; gap: 16px; }
.staff-screen h1 { font-size: 32px; line-height: 1.2; }
.staff-screen p { margin: 0; }
.staff-kicker { font-size: 28px; font-weight: 600; color: var(--accent); }
.staff-plate { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: 0.04em; }
.staff-date { color: var(--text-2); }
.staff-lead { font-size: 26px; }
.staff-count { font-size: 26px; font-weight: 600; color: var(--accent); }
.staff-hint { color: var(--text-2); }
.staff-alert { padding: 14px 16px; border-radius: var(--radius); background: var(--yellow-bg); color: var(--yellow-fg); border: 2px solid var(--yellow-bd); }
.staff-wait { padding: 16px; border-radius: var(--radius); background: var(--blue-bg); color: var(--blue-fg); display: flex; flex-direction: column; gap: 6px; }
.staff-wait .staff-hint { color: var(--blue-fg); }
.staff-mark { display: inline-flex; width: 88px; height: 88px; align-items: center; justify-content: center; border-radius: 50%; background: var(--chip-bg); color: var(--text-2); }
.staff-mark-ok { background: var(--green-bg); color: var(--green-fg); }

.staff-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 20px;
    border: 2px solid transparent; border-radius: 14px; font: inherit; font-size: 24px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.staff-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.staff-btn:focus-within, .staff-btn:focus-visible { outline: 4px solid var(--blue-bd); outline-offset: 2px; }
.staff-btn:disabled { opacity: 0.6; cursor: default; }
.staff-btn-go { background: var(--accent); color: var(--on-accent); min-height: 88px; font-size: 26px; }
.staff-btn-go:hover { background: var(--accent-hover); color: var(--on-accent); }
.staff-btn-ok { background: var(--dot-on); color: var(--on-accent); min-height: 88px; font-size: 26px; }
.staff-btn-plain { background: var(--chip-bg); color: var(--text); border-color: var(--gray-bd); }
.staff-btn-small { min-height: 56px; font-size: 20px; }

.staff-scheme-box { border: 2px solid var(--border); border-radius: 14px; background: var(--surface-soft); padding: 8px; }
.staff-scheme { display: block; width: 100%; height: auto; max-height: 34vh; }
.staff-scheme .sc-line, .staff-scheme .sc-ground { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.staff-scheme .sc-ground { stroke: var(--border-strong); stroke-dasharray: 6 6; }
.staff-scheme .sc-hot { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.staff-scheme .sc-thin { fill: none; stroke-width: 2; }
.staff-scheme .sc-eye { fill: none; stroke: var(--warn-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.staff-preview { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; background: var(--text); }

.staff-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staff-thumb { display: flex; flex-direction: column; gap: 8px; }
.staff-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--chip-bg); }
.staff-status { font-size: 20px; font-weight: 600; color: var(--warn-text); }
.staff-status.is-sent { color: var(--green-fg); }
.staff-status.is-missing { color: var(--red-fg); }
.staff-list { display: flex; flex-direction: column; gap: 14px; }
.staff-row { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid var(--border); border-radius: 14px; }
.staff-row-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.staff-row-thumbs img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--chip-bg); }
.staff-row-text { display: flex; flex-direction: column; gap: 8px; }

/* Блок «Фото от сотрудника» у администратора и QR */
.staff-link-box { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.staff-link-new { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.staff-link-url { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.staff-link-url .input { font-family: var(--font-mono); font-size: 13px; }
.qr { width: 168px; height: 168px; flex: 0 0 auto; }
.qr .qr-bg { fill: var(--qr-light); }
.qr .qr-fg { fill: var(--qr-dark); }
.staff-photo-rows { display: flex; flex-direction: column; gap: 8px; }
.staff-photo-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--divider); }
.staff-photo-row img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--chip-bg); }
.staff-photo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.staff-flag { color: var(--warn-text); font-weight: 500; }

/* Настройки: ракурс фото с шагом сотрудника и наборами выдачи / приёма */
.photo-slot-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--divider); }
.photo-slot-stages { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.photo-slot-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.photo-slot-order { flex-direction: row; align-items: center; gap: 6px; }
.photo-slot-order .input { width: 64px; }
.employee-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--divider); }
.employee-row .field { flex: 1 1 180px; }