@charset "UTF-8";
/* ============================================================================
   ВОЯЖ — voyage.css v3
   Самодостаточная дизайн-система приложения: токены, каркас и компоненты.
   Страницы своих :root и структурных правил не заводят — всё живёт здесь.

   Язык v3: холодная бумага, крупные плитки с большим радиусом, мягкая дальняя
   тень вместо границ, один акцент — графитовый синий, цифра как материал.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   00. ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root{
  --bg:#F4F5F7;
  --bg-soft:#EDEFF2;
  --bg-sunk:#F7F8FA;
  --surface:#FFFFFF;
  --surface-line:#EDEFF2;
  --line:#EDEFF2;
  --line-2:#DCDFE4;
  --line-3:#D3D6DC;
  --rail-bg:#F0F1F4;
  --seg-bg:#E9EBEF;

  --ink:#0E1418;
  --ink-soft:#5D646B;
  --ink-faint:#6E737B;
  --ink-mute:#8A9099;
  --ink-dim:#9AA1A9;

  --brand:#2F4A7A;
  --brand-soft:#EEF1F7;
  --brand-2:#E7ECF4;
  --brand-line:#8FA6CC;
  --dark-card:#0E1418;

  --sand:#BFA06E;
  --sand-soft:#F6F0E6;

  --available:#17795E; --available-bg:#E6F2ED;
  --attention:#8A6516; --attention-bg:#F6F0E6;
  --problem:#A6332A;   --problem-bg:#F7EBE9;
  --info:#2F4A7A;      --info-bg:#EEF1F7;
  --special:#584A7A;   --special-bg:#F1EEF6;

  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:26px; --r-pill:99px;

  --sh-sm:0 1px 2px rgba(14,20,24,.06);
  --sh-md:0 1px 2px rgba(14,20,24,.05), 0 24px 50px -40px rgba(14,20,24,.3);
  --sh-deep:0 1px 2px rgba(14,20,24,.05), 0 30px 60px -44px rgba(14,20,24,.34);
  --sh-lg:0 18px 40px -18px rgba(14,20,24,.4);

  --rail-w:236px;
  --page-max:1680px;

  --f-display:'Onest','Segoe UI',system-ui,sans-serif;
  --f-body:'Golos Text','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

/* ----------------------------------------------------------------------------
   01. БАЗА
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;color:inherit;}
::selection{background:#DDE4F0;color:var(--ink);}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px;}
img{max-width:100%;}

/* мягкий засвет за шапкой — фирменный приём языка v3 */
body::before{
  content:"";position:fixed;left:0;right:0;top:0;height:620px;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 460px at 88% -8%,rgba(47,74,122,.13),transparent 68%),
    radial-gradient(520px 380px at 2% 6%,rgba(191,160,110,.13),transparent 70%);
}

/* ----------------------------------------------------------------------------
   02. КАРКАС
   -------------------------------------------------------------------------- */
.app{display:flex;min-height:100vh;position:relative;z-index:1;align-items:flex-start;}

.rail{
  width:var(--rail-w);flex:none;
  background:var(--rail-bg);
  border-right:1px solid var(--line);
  padding:22px 10px;
  position:sticky;top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.rail .rb{
  font-family:var(--f-display);
  font-weight:400;
  font-size: 15.5px;
  letter-spacing: 0.22em;
  color:var(--ink);
  padding:8px 14px 22px;
}
.ni{
  display:flex;align-items:center;gap:11px;
  border-radius:var(--r-md);
  padding:11px 14px;margin-bottom:3px;
  color:var(--ink-soft);font-size:13.5px;font-weight:400;
  cursor:pointer;white-space:nowrap;
}
.ni:hover{background:rgba(255,255,255,.6);color:var(--ink);}
.ni .ix{font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.06em;width:16px;flex:none;}
.ni.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--sh-sm);}
.ni.active .ix{color:var(--brand);}

.main{
  flex:1;min-width:0;
  max-width:var(--page-max);
  padding:32px 40px 90px;
  position:relative;z-index:1;
}

.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:26px;
}
.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ttl{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.025em;}
.sub{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:5px;
}

/* ----------------------------------------------------------------------------
   03. ПОВЕРХНОСТИ
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:24px;
  min-width:0;
}
.card-flat{box-shadow:var(--sh-sm);}
.card-sunk{background:var(--bg-soft);border-radius:var(--r-md);padding:20px;}
.card-dark{background:var(--dark-card);color:#fff;border-radius:var(--r-lg);padding:24px;}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:18px;flex-wrap:wrap;
}
.card-head h3{font-family:var(--f-display);font-weight:500;font-size:16px;letter-spacing:-.02em;}
.link{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);cursor:pointer;
}
.link:hover{color:var(--brand);}
.divider{height:1px;background:var(--line);border:0;margin:20px 0;}

/* сетки, которыми пользуются страницы */
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start;}
.grid-even{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.grid-even > *{min-width:0;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pair > *{min-width:0;}
.fleet-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0;}
.grid-2 > *,.grid-3 > *,.grid-4 > *{min-width:0;}

/* ----------------------------------------------------------------------------
   04. СТАТУСЫ
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 12px;flex:none;
  border-radius:var(--r-pill);
  font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.02em;
  background:var(--bg-soft);color:var(--ink-soft);
  white-space:nowrap;
}
.chip.available{background:var(--available-bg);color:var(--available);}
.chip.attention{background:var(--attention-bg);color:var(--attention);}
.chip.problem  {background:var(--problem-bg);color:var(--problem);}
.chip.info     {background:var(--info-bg);color:var(--info);}
.chip.special  {background:var(--special-bg);color:var(--special);}

.dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-pill);background:var(--ink-dim);flex:none;}
.dot.available{background:var(--available);}
.dot.attention{background:var(--attention);}
.dot.problem{background:var(--problem);}
.dot.info{background:var(--info);}
.dot.special{background:var(--special);}

/* ----------------------------------------------------------------------------
   05. УПРАВЛЕНИЕ
   Высота 44px — сценарий выдачи: одна рука, парковка, спешка.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--ink);color:#fff;
  font-family:var(--f-body);font-weight:500;font-size:13.5px;line-height:1;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{background:#1B242B;}
.btn-brand{background:var(--brand);}
.btn-brand:hover{background:#263D64;}
.btn-sec{background:var(--surface);color:var(--ink);border-color:var(--line-2);}
.btn-sec:hover{border-color:var(--line-3);background:var(--surface);}
.btn-ghost{background:transparent;color:var(--brand);padding:0 14px;}
.btn-ghost:hover{background:var(--brand-soft);}
.btn-danger{background:var(--problem);}
.btn-danger:hover{background:#8F2C24;}
.btn-sm{height:36px;padding:0 14px;font-size:12.5px;border-radius:var(--r-sm);}
.btn:disabled,.btn[disabled]{background:var(--bg-soft);color:#9096A0;border-color:transparent;cursor:not-allowed;}
.btn:disabled:hover{background:var(--bg-soft);}
.btn-sec:disabled{background:var(--bg-soft);}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--r-pill);
  background:var(--surface);border:1px solid transparent;
  box-shadow:var(--sh-sm);cursor:pointer;position:relative;
  color:var(--ink-soft);font-size:15px;
}
.icon-btn:hover{box-shadow:var(--sh-md);color:var(--ink);}
.icon-btn .badge{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--problem);}

.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand);
  font-family:var(--f-display);font-weight:500;font-size:13px;
}

/* поля */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field > label,.field-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.input,input[type=text],input[type=date],input[type=datetime-local],input[type=number],
input[type=password],input[type=search],select,textarea{
  height:46px;padding:0 14px;width:100%;
  background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font-family:var(--f-body);font-size:14px;color:var(--ink);
}
textarea{height:auto;padding:12px 14px;line-height:1.55;resize:vertical;}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
  linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);
}
input[readonly]{background:var(--bg-sunk);border-color:transparent;}

/* поиск в шапке */
.search-pill{
  display:flex;align-items:center;gap:9px;position:relative;
  width:min(280px,100%);
  background:var(--surface);border:1px solid transparent;border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);padding:0 18px;height:44px;
}
.search-pill:focus-within{box-shadow:0 0 0 4px var(--brand-soft),var(--sh-sm);}
.search-pill input{
  height:auto;border:none;background:transparent;padding:0;font-size:13.5px;box-shadow:none;
}
.search-pill input:focus{border:none;box-shadow:none;}
.search-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  min-width:300px;max-height:340px;overflow-y:auto;z-index:60;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:8px;
}
.search-dropdown.open{display:block;}
.sd-group{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);padding:8px 10px 4px;
}
.sd-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);}
.sd-row:hover{background:var(--bg-soft);}
.sd-ic{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-dim);}
.sd-ic.client{background:var(--info);}
.sd-ic.vehicle{background:var(--available);}
.sd-ic.rental{background:var(--special);}
.sd-l{font-size:13px;font-weight:500;}
.sd-s{font-size:12px;color:var(--ink-soft);}

/* сегментированный переключатель — подпись языка v3 */
.tabs{
  display:inline-flex;gap:0;padding:3px;
  background:var(--seg-bg);border-radius:var(--r-pill);
  max-width:100%;overflow-x:auto;
}
.tab{
  padding:7px 16px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:400;color:var(--ink-soft);
  cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--ink);}
.tab.active{background:var(--ink);color:#fff;font-weight:500;}

/* тумблер */
.toggle{
  width:44px;height:26px;flex:none;position:relative;cursor:pointer;
  background:var(--line-3);border-radius:var(--r-pill);transition:background .15s;
}
.toggle .knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:var(--surface);border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(14,20,24,.2);transition:transform .15s;
}
.toggle.on{background:var(--brand);}
.toggle.on .knob{transform:translateX(18px);}

/* ----------------------------------------------------------------------------
   05a. МОДАЛЬНЫЕ ФОРМЫ
   Всё, что раньше спрашивалось системным prompt(): создание клиента,
   смена статуса, ДТП, удержание при возврате.
   -------------------------------------------------------------------------- */
.modal-back{
  position:fixed;inset:0;z-index:200;
  background:rgba(14,20,24,.34);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:mfade .16s ease-out;
}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:min(520px,100%);max-height:88vh;overflow-y:auto;padding:26px;
  animation:mrise .18s ease-out;
}
.modal h3{font-family:var(--f-display);font-weight:500;font-size:20px;letter-spacing:-.02em;}
.modal .modal-note{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.modal .modal-body{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.modal .modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap;}
/* необязательные поля формы — под спойлером, как «Документы, страховки» в карточке машины */
.modal .form-more{background:var(--bg-sunk);border-radius:var(--r-md);overflow:hidden;}
.modal .form-more>summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;font-size:13.5px;font-weight:500;user-select:none;}
.modal .form-more>summary::-webkit-details-marker{display:none;}
.modal .form-more>summary::after{content:"⌄";font-size:16px;color:var(--ink-faint);transition:transform .15s;}
.modal .form-more[open]>summary::after{transform:rotate(180deg);}
.modal .form-more>summary span{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);font-weight:400;}
.modal .form-more-body{display:flex;flex-direction:column;gap:14px;padding:4px 16px 16px;}
.field .req{color:var(--problem);font-family:var(--f-body);letter-spacing:0;}

/* поле с подсказками (V.combo): пишут что угодно, привычное — из списка */
.combo{position:relative;width:100%;}
.combo > input{width:100%;padding-right:40px;}
.combo-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;
  background:none;border-radius:var(--r-sm);color:var(--ink-faint);font-size:16px;cursor:pointer;line-height:1;}
.combo-btn:hover{background:var(--bg-sunk);color:var(--ink);}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:6px;max-height:300px;overflow:auto;display:none;}
.combo-list.open{display:block;}
.combo-group{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding:10px 12px 4px;}
.combo-item{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 12px;
  border-radius:var(--r-sm);cursor:pointer;font-size:13.5px;}
.combo-item:hover,.combo-item.hl{background:var(--bg-sunk);}
.combo-hint{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap;}
@media(max-width:560px){
  .modal{padding:20px;border-radius:var(--r-md);}
  .modal .modal-foot .btn{flex:1;}
}

/* ----------------------------------------------------------------------------
   06. ДАННЫЕ И ДЕНЬГИ
   -------------------------------------------------------------------------- */
.num,.plate,.vin{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-family:var(--f-mono);}
.plate{letter-spacing:.06em;white-space:nowrap;}
.mono{font-family:var(--f-mono);}

table{width:100%;border-collapse:collapse;}
th{
  text-align:left;font-family:var(--f-mono);font-weight:400;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  padding:0 16px 12px 0;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
th:last-child,td:last-child{padding-right:0;}
tbody tr:hover td,table tr:hover td{background:var(--bg-sunk);}
thead tr:hover th{background:transparent;}

.fstat{background:white;border-radius:var(--r-md);padding:18px;min-width:0;}
.fstat .num,.fstat > div:first-child{
  font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.fstat .cap{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:6px;
}
.fstat.attention{background:var(--attention-bg);}
.fstat.attention .cap,.fstat.attention .num{color:var(--attention);}

/* ----------------------------------------------------------------------------
   07. ПЕЧАТЬ
   -------------------------------------------------------------------------- */
@page{size:A4;margin:16mm 18mm;}
@media print{
  body::before{display:none;}
  .rail,.topbar,.no-print,.search-pill,.icon-btn,.btn{display:none !important;}
  .main{padding:0;max-width:none;}
  .card{box-shadow:none;}
}

/* ----------------------------------------------------------------------------
   08. АДАПТИВ
   Веб на телефоне — рабочий сценарий сотрудника, а не обрезанный десктоп.
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .grid-2,.grid-even{grid-template-columns:1fr;}
  .fleet-stats{grid-template-columns:repeat(3,1fr);}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .main{padding:24px 22px 80px;}
}

@media(max-width:820px){
  /* в колонку — и обязательно растягиваем, иначе .main сжимается по контенту
     и страница начинает ездить вбок */
  .app{flex-direction:column;align-items:stretch;}
  .main{width:100%;max-width:100%;}
  .rail{
    position:sticky;top:0;z-index:40;
    width:100%;height:auto;
    flex-direction:row;align-items:center;gap:4px;
    padding:10px 12px;
    border-right:none;border-bottom:1px solid var(--line);
    overflow-x:auto;overflow-y:hidden;
    background:var(--rail-bg);
  }
  .rail .rb{padding:0 14px 0 4px;flex:none;font-size:11.5px;}
  .ni{margin-bottom:0;flex:none;padding:9px 12px;font-size:12.5px;}
  .ni .ix{display:none;}
  /* карточка смены в мобильной шапке не нужна — уводим её в конец полосы */
  .rail > div:last-child{
    order:99;margin:0 0 0 8px !important;padding:8px 12px !important;
    display:flex;align-items:center;gap:10px;flex:none;
  }
  .rail > div:last-child > div:first-child{display:none;}
  .rail > div:last-child .avatar{width:28px;height:28px;font-size:11px;}
  .rail > div:last-child > div{margin:0 !important;}
  .rail > div:last-child button{width:auto !important;margin:0 !important;}

  .main{padding:20px 16px 72px;}
  /* таблицы шире экрана прокручиваются внутри своей карточки,
     а не растягивают всю страницу */
  .card:has(> table),.card:has(> div > table){overflow-x:auto;}
  .card > table,.card > div > table{min-width:480px;}
  .scroll-x{overflow-x:auto;}
  .ttl{font-size:22px;}
  .topbar{gap:14px;}
  .topbar-actions{width:100%;}
  .search-pill{flex:1;width:auto;}
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .pair{grid-template-columns:1fr;}
  .fleet-stats{grid-template-columns:repeat(2,1fr);}
  .card{padding:20px;}
}

@media(max-width:560px){
  .main{padding:16px 12px 64px;}
  .card{padding:16px;border-radius:var(--r-md);}
  .ttl{font-size:20px;}
  .btn{height:46px;}
  th,td{padding-right:10px;font-size:13px;}
}