/* Десктопный макет: боковое меню + широкая таблица + выезжающая карточка.
   Всё, кроме скрытия десктопных блоков, живёт внутри медиазапроса, поэтому
   телефонная вёрстка из app.css остаётся ровно такой, какой была. */

/* На телефоне десктопной обвязки просто нет. */
.side,
.desk-top,
.desk-title,
.table-wrap,
.fin-summary,
.wide-drawer,
.wd-backdrop { display: none; }

/* Обёртки двух колонок раздела «Финансы»: на телефоне их как бы нет, и список
   с пагинацией остаются прямыми детьми рабочей области. */
.fin-split, .fin-main { display: contents; }

/* ───────────────────────── дашборд ─────────────────────────
   Открывается и с телефона, поэтому оформление плиток общее,
   а сетка в четыре колонки включается ниже, в медиазапросе. */

.dash { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 24px; }
.dash-tile, .dash-card { margin-bottom: 10px; }

.dash-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.dash-tile .k {
  font: 700 9.5px/1 'Manrope', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}
.dash-tile .v { font: 300 30px/1.1 'Manrope', sans-serif; letter-spacing: -1px; margin-top: 8px; }
.dash-tile .v.neg { color: var(--red); }
.dash-tile .s { font: 500 11.5px/1.4 'Manrope', sans-serif; color: var(--text-2); margin-top: 5px; }

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px 8px;
}
.dash-card h2 {
  font: 700 9.5px/1 'Manrope', sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font: 500 12.5px/1.3 'Manrope', sans-serif;
  text-decoration: none;
  color: inherit;
}
.dash-row:hover .dash-row-name { text-decoration: underline; }
.dash-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.dash-bar { height: 5px; border-radius: 3px; flex-shrink: 0; min-width: 3px; }
.dash-empty { padding: 6px 0 12px; color: var(--text-3); font-size: 12.5px; }

@media (min-width: 1024px) {

  :root {
    --side-bg: #19191B;
    --side-text: #9A9AA4;
    --side-hover: #26262A;
    --side-label: #62626B;
    --row-hover: #F7F7F9;
    --side-w: 232px;
    /* Ширина колонки ID. Одно число на всю таблицу: заголовок, фильтр и ячейку. */
    --col-id: 34px;
    /* Нижняя граница колонки «Клиент» — под ФИО вида «Константинов Константин Иванович».
       Более длинное имя колонку раздвинет, обрезано не будет. */
    --col-client: 212px;
  }

  html, body { overflow: hidden; }

  #app {
    max-width: none;
    flex-direction: row;
    align-items: stretch;
  }

  /* .work объявлена display:contents на телефоне (см. ниже) — здесь она колонка */
  .work {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg);
  }

  /* Нижние вкладки заменены боковым меню; отдельные блоки помечены .mobile-only */
  .tabbar, .mobile-only { display: none !important; }

  /* Шапка остаётся: в ней живут поиск и фильтры разделов, у которых нет
     собственной панели инструментов. Логотип уезжает в меню, его место
     занимает название раздела. */
  .header {
    padding: 13px 20px 0;
    border-bottom: 1px solid var(--border);
  }
  .header .logo { display: none; }
  .header-row { margin-bottom: 11px; }
  .desk-title { display: block; font: 800 19px/1.2 'Manrope', sans-serif; letter-spacing: -.5px; }
  .header .search-row { max-width: 460px; }
  .header .list-count, .header .chip-row { padding-left: 0; padding-right: 0; }

  /* ───────────────────────── боковое меню ───────────────────────── */

  .side {
    display: flex;
    flex-direction: column;
    width: var(--side-w);
    flex-shrink: 0;
    background: var(--side-bg);
    color: var(--side-text);
    padding: 16px 10px 10px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .side-brand {
    display: block;
    padding: 2px 10px 16px;
    font: 800 19px/1 'Manrope', sans-serif;
    letter-spacing: -.6px;
    color: #F0F0F3;
    text-decoration: none;
  }
  .side-brand b { color: #6E6E78; font-weight: 400; }

  .side-dash {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    margin-bottom: 18px;
    border: 1px solid #33333A;
    border-radius: var(--r);
    color: #E4E4E9;
    text-decoration: none;
    font: 600 13px/1 'Manrope', sans-serif;
  }
  .side-dash svg { width: 15px; height: 15px; fill: currentColor; opacity: .8; }
  .side-dash:hover { background: var(--side-hover); }
  .side-dash.on { background: #F0F0F3; border-color: #F0F0F3; color: #19191B; }

  .side-label {
    padding: 0 11px 8px;
    font: 700 9.5px/1 'Manrope', sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--side-label);
  }

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

  .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--r);
    color: var(--side-text);
    text-decoration: none;
    font: 500 13px/1.2 'Manrope', sans-serif;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .nav-item::-webkit-details-marker { display: none; }
  .nav-item:hover { background: var(--side-hover); color: #fff; }
  .nav-item.on { background: #F0F0F3; color: #19191B; }
  .nav-item.on .nav-count { color: #6E6E78; }

  .nav-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-count { font: 600 11px/1 'Manrope', sans-serif; color: #62626B; font-variant-numeric: tabular-nums; }
  .nav-chevron { width: 10px; height: 10px; stroke: #62626B; fill: none; stroke-width: 2;
                 transition: transform .18s; flex-shrink: 0; }
  .nav-group[open] > .nav-item > .nav-chevron { transform: rotate(90deg); }
  .nav-group[open] > .nav-item { color: #E4E4E9; }

  .nav-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
  .nav-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px 6px 28px;
    border-radius: var(--r);
    color: #85858F;
    text-decoration: none;
    font: 400 12.5px/1.2 'Manrope', sans-serif;
  }
  .nav-sub-item:hover { background: var(--side-hover); color: #fff; }
  .nav-sub-item.on { background: #2E2E34; color: #F0F0F3; font-weight: 600; }
  .nav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: -14px; }

  .side-user {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #2A2A30;
  }
  .side-user-info {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border-radius: var(--r);
    text-decoration: none;
    display: block;
  }
  .side-user-info:hover { background: var(--side-hover); }
  .side-user-name {
    display: block;
    font: 600 12.5px/1.3 'Manrope', sans-serif;
    color: #E4E4E9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .side-user-role { display: block; font: 400 11px/1.3 'Manrope', sans-serif; color: #62626B; }
  .side-logout {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--r);
    background: transparent; cursor: pointer;
  }
  .side-logout svg { width: 15px; height: 15px; stroke: #85858F; fill: none; stroke-width: 1.6;
                     stroke-linecap: round; stroke-linejoin: round; }
  .side-logout:hover { background: var(--side-hover); }
  .side-logout:hover svg { stroke: var(--red); }

  /* Вход — единственный экран без бокового меню; держим форму узкой по центру. */
  .login-wrap { width: 100%; max-width: 380px; margin: 0 auto; }

  /* Экраны-панели (форма авто, карточка клиента) внутри общего каркаса:
     шапка во всю ширину, содержимое — читаемой колонкой по центру. */
  .panel-head {
    padding: 13px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .plate-page { max-width: 520px; }

  .panel-body {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 48px;
  }

  /* ───────────────────────── панель инструментов ───────────────────────── */

  /* display у этих блоков задан ниже, поэтому браузерное [hidden] надо повторить. */
  .wide-drawer[hidden], .wd-backdrop[hidden], .columns-menu[hidden] { display: none; }

  .desk-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
  }

  .desk-tools { display: flex; align-items: center; gap: 8px; }
  .desk-spacer { flex: 1; }
  .desk-count {
    font: 600 11px/1 'Manrope', sans-serif;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
  }

  .desk-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 320px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding-left: 30px;
  }
  .desk-search:focus-within { border-color: var(--accent); }
  .desk-search svg {
    position: absolute; left: 9px;
    width: 14px; height: 14px;
    stroke: var(--text-3); fill: none; stroke-width: 1.6; stroke-linecap: round;
  }
  .desk-search input {
    flex: 1; min-width: 0;
    border: none; background: none; outline: none;
    padding: 7px 10px 7px 0;
    font: 400 13px/1.3 'Manrope', sans-serif;
    color: var(--text-1);
  }

  .btn-desk {
    padding: 7px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-1);
    font: 600 12px/1.25 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-desk:hover { border-color: var(--accent); }
  .btn-desk.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-desk.primary:hover { opacity: .88; }
  .btn-desk.ghost { color: var(--text-2); }

  .desk-message {
    margin: 10px 20px 0;
    padding: 8px 12px;
    border-radius: var(--r);
    background: #E8F5E8;
    color: #1F6B1F;
    font: 600 12px/1.4 'Manrope', sans-serif;
  }

  /* Выбор видимых столбцов */
  .columns-menu {
    display: block;
    position: absolute;
    right: 20px;
    top: 100%;
    z-index: 120;
    width: 460px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
  }
  .columns-menu-head {
    font: 700 10px/1 'Manrope', sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
  }
  .columns-menu-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 10px;
    margin-bottom: 12px;
  }
  .columns-menu-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: var(--r);
    font: 500 12.5px/1.3 'Manrope', sans-serif;
    cursor: pointer;
  }
  .columns-menu-item:hover { background: var(--surface-alt); }
  .columns-menu-item input { width: 13px; height: 13px; accent-color: var(--accent); }

  /* ───────────────────────── таблица авто ───────────────────────── */

  .table-wrap {
    display: block;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-bottom: 40px;
  }

  /* Ширина — строго по содержимому: таблица не растягивается на всё окно,
     справа остаётся свободное место. Всё выравнивание — по левому краю. */
  .dtable {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    font: 400 12px/1.25 'Manrope', sans-serif;
  }

  .dtable th, .dtable td {
    padding: 0 10px;
    text-align: left;
    white-space: nowrap;
  }
  /* В Manrope цифры по умолчанию разной ширины («1» почти вдвое уже «6»),
     поэтому для всех числовых колонок включаем табличные — фича tnum в шрифте есть. */
  .dtable th.num, .dtable td.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ID и даты: по центру и в притык к содержимому. Поле фильтра здесь
     не должно распирать колонку, поэтому его нижняя граница почти снята. */
  .dtable th.center, .dtable td.center { text-align: center; padding: 0 6px; }
  .dtable th.right, .dtable td.right { text-align: right; }
  .th-filters th.right .colf { text-align: right; }
  .th-filters th.center .colf { min-width: 34px; padding: 3px 3px; text-align: center; }

  /* Колонка ID зафиксирована по ширине. Таблица считает ширину по содержимому,
     поэтому размер задаётся внутренним блоком, а не самой ячейке.
     Слева оставляем 2px, чтобы рамка поля фильтра не липла к краю таблицы. */
  .dtable th[data-col="id"], .dtable td[data-col="id"] { padding: 0 0 0 2px; }
  .dtable td[data-col="id"] .fit,
  .th-titles th[data-col="id"] a,
  .th-filters th[data-col="id"] .colf {
    display: block;
    width: var(--col-id);
    min-width: var(--col-id);
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }

  .th-titles th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 30px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    font: 700 9.5px/1 'Manrope', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .th-titles th a { color: inherit; text-decoration: none; display: inline-flex; gap: 3px; align-items: center; }
  .th-titles th a:hover { color: var(--text-1); }
  .th-titles th.sorted { color: var(--text-1); }
  .th-arrow { font-size: 10px; }

  .th-filters th {
    position: sticky;
    top: 30px;
    z-index: 3;
    height: 30px;
    padding: 0 5px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .colf {
    width: 100%;
    min-width: 68px;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    font: 400 11.5px/1.3 'Manrope', sans-serif;
    color: var(--text-1);
    outline: none;
  }
  .colf:focus { border-color: var(--accent); }
  select.colf { min-width: 88px; max-width: 150px; }
  /* Колонку раздвигает поле фильтра: оно тянется на всю ширину ячейки. */
  .th-filters th[data-col="client"] .colf,
  .th-filters th[data-col="client_account"] .colf { min-width: var(--col-client); }

  .dtable tbody td {
    height: 29px;
    background: var(--surface);
    border-bottom: 1px solid var(--sep);
    color: var(--text-1);
  }
  .dtable tbody tr { cursor: pointer; }
  .dtable tbody tr:hover td { background: var(--row-hover); }
  .dtable tbody tr.on td { background: var(--surface-alt); }

  .dtable td .dot, .dtable td i.dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
  }
  .dtable td .mono {
    font: 400 11px/1 'SF Mono', 'Fira Code', Consolas, monospace;
    letter-spacing: .2px;
    color: var(--text-2);
  }
  .dtable td .neg { color: var(--red); font-weight: 600; }
  .dtable td .pos { color: var(--green); font-weight: 600; }
  .dtable td[data-col="car"], .dtable td[data-col="client"],
  .dtable td[data-col="client_account"] { font-weight: 600; }
  /* Ярлык прихода и расхода объявлен в app.css — им пользуется и карточка */
  .dtable td[data-col="id"] { color: var(--text-3); }

  .table-empty td {
    height: 120px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
  }

  /* ───────────────────────── сводка в финансах ───────────────────────── */

  .fin-split { display: flex; flex: 1; min-height: 0; }
  .fin-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }

  .fin-summary {
    display: block;
    width: 268px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 14px 14px 32px 20px;
    border-right: 1px solid var(--border);
    scrollbar-width: thin;
  }
  .fin-block + .fin-block { margin-top: 22px; }
  .fin-block h2 {
    font: 700 9.5px/1 'Manrope', sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
  }

  /* Счёт — ссылка: оставляет в таблице только его проводки */
  .fin-acc {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--r);
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .fin-acc:hover { background: var(--surface); border-color: var(--border); }
  .fin-acc.on { background: var(--surface); border-color: var(--accent); }
  .fin-acc.on .fin-acc-name { text-decoration: underline; }
  .fin-acc-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
  .fin-acc-name { font: 700 12.5px/1.3 'Manrope', sans-serif; }
  .fin-acc-cat {
    font: 500 9.5px/1 'Manrope', sans-serif;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  .fin-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .fin-cur {
    font: 700 10px/1.6 'Manrope', sans-serif;
    color: var(--text-3);
    letter-spacing: .5px;
  }
  .fin-bal {
    font: 700 12.5px/1.4 'Manrope', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .fin-bal.pos { color: var(--green); }
  .fin-bal.neg { color: var(--red); }

  /* Оборот под остатком: у транзитных счетов остаток нулевой,
     и без него строка выглядела бы пустой. */
  .fin-turn {
    display: flex;
    gap: 8px;
    margin: -1px 0 6px;
    font: 500 10px/1.4 'Manrope', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
  }
  .fin-turn .pos { color: #6E9560; }
  .fin-turn .neg { color: #B57C7C; }

  .fin-empty { color: var(--text-3); font-size: 12px; }
  .fin-note {
    margin-top: 14px;
    font: 400 10.5px/1.45 'Manrope', sans-serif;
    color: var(--text-3);
  }

  /* ───────────────────────── выезжающая карточка ───────────────────────── */

  .wd-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20,20,22,.34);
    animation: wdFade .18s ease;
  }
  @keyframes wdFade { from { opacity: 0 } to { opacity: 1 } }

  .wide-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--wd-w, 720px);
    max-width: 92vw;
    z-index: 310;
    background: var(--bg);
    box-shadow: -10px 0 36px rgba(0,0,0,.16);
    animation: wdSlide .24s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes wdSlide { from { transform: translateX(100%) } to { transform: translateX(0) } }

  .wd-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .wd-close {
    border: none; background: none; cursor: pointer;
    font: 500 13px/1 'Manrope', sans-serif;
    color: var(--text-2);
    padding: 6px 2px;
  }
  .wd-close:hover { color: var(--text-1); }
  .wd-title {
    flex: 1; min-width: 0;
    font: 700 13px/1.3 'Manrope', sans-serif;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wd-edit {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-1);
    font: 600 12px/1 'Manrope', sans-serif;
    text-decoration: none;
  }
  .wd-edit:hover { border-color: var(--accent); }

  .wd-body { flex: 1; overflow-y: auto; }
  .wd-body .loading { padding: 40px; text-align: center; color: var(--text-3); font-size: 13px; }

  /* Карточка проводки идёт в одну колонку, поэтому панель под неё сужается до
     ширины телефонного экрана: вид получается один и там, и там. */
  .wide-drawer.narrow { --wd-w: 480px; }

  /* Панели выбора рисуются поверх и по умолчанию стоят по центру экрана.
     Пока открыта выезжающая карточка, им место над ней — справа. */
  body.wd-open .panel { margin-left: auto; margin-right: 0; }

  /* Внутри широкой панели поля идут в две колонки */
  .wide-drawer .detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  /* Строки с данными на 25% ниже: было 12px + 12px + ~18px текста ≈ 42px,
     стало 7px + 7px + ~18px ≈ 32px. На телефоне карточка не меняется. */
  .wide-drawer .detail-field { padding: 7px 0; }
  .wide-drawer .photo-grid { grid-template-columns: repeat(5, 1fr); }
  .wide-drawer .stages { columns: 2; column-gap: 0; }
  .wide-drawer .stage { break-inside: avoid; }

  /* ───────────────────────── дашборд ───────────────────────── */

  .dash {
    padding: 18px 20px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-content: start;
  }
  .dash-tile, .dash-card { margin-bottom: 0; }
  .dash-card.wide { grid-column: span 2; }
  .dash-card.full { grid-column: 1 / -1; }

  /* Клиенты и финансы остаются списком карточек — держим его читаемой колонкой */
  .work > .car-list, .work > .page-scroll { max-width: 820px; width: 100%; }
  .car-item:hover, .op-row:hover { background: var(--row-hover); }
}

/* На телефоне .work прозрачна: её дети остаются прямыми детьми #app,
   иначе шапка, список и вкладки перестали бы делить высоту экрана. */
@media (max-width: 1023.98px) {
  .work { display: contents; }
}