/* ============================================================================
   UI-СЛОЙ «Косметичка Prof» — единая дизайн-система (август 2026)
   Подключается ПОСЛЕ style.css и переопределяет его внешний вид.
   Правило: цвет, отступ, радиус и тень берутся ТОЛЬКО из переменных ниже.
   Старый style.css не удалён намеренно — он держит редкие частные экраны,
   а всё видимое перекрыто здесь.
   ============================================================================ */

:root{
  /* поверхности */
  --bg:#f5f6f8; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f2f4f7;
  /* текст */
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8; --ink-inv:#fff;
  /* линии */
  --line:#e4e7ec; --line-2:#eef1f4; --line-3:#d5dbe3;
  /* бренд */
  --brand:#2c4a7c; --brand-2:#24406e; --brand-soft:#eef2f9; --brand-ink:#1e3a68;
  /* статусы */
  --ok:#15803d; --ok-soft:#e8f5ec; --ok-line:#bfe3cc;
  --warn:#b45309; --warn-soft:#fdf4e3; --warn-line:#f2ddb6;
  --bad:#b42318; --bad-soft:#fdecea; --bad-line:#f4cdc8;
  --info:#0369a1; --info-soft:#e8f2fa; --info-line:#bfdcef;
  /* меню */
  --side:#101a2b; --side-ink:#c7d2e1; --side-ink-2:#61748d; --side-hover:rgba(255,255,255,.06);
  /* геометрия */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-full:999px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md:0 2px 6px rgba(16,24,40,.07);
  --shadow-lg:0 10px 30px rgba(16,24,40,.14);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ─── База ─────────────────────────────────────────────────────────────── */
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;
     -webkit-font-smoothing:antialiased}
a{color:var(--brand)}
::selection{background:#d7e3f5}
/* Все суммы и количества — табличными цифрами, чтобы столбцы совпадали */
.num,.data-table td,.stat-value,.card .val,.driver-item-amount,
.driver-submit-row,.money,.amount{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ─── Иконки (вместо эмодзи) ───────────────────────────────────────────── */
.ic{width:1.05em;height:1.05em;flex:0 0 auto;display:inline-block;vertical-align:-.16em;
    stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.35em;height:1.35em}
.ic-xl{width:22px;height:22px}
.ic-muted{opacity:.62}
.ic-ok{color:var(--ok)} .ic-bad{color:var(--bad)} .ic-warn{color:var(--warn)} .ic-brand{color:var(--brand)}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
          flex:0 0 18px;opacity:.9;font-size:0}
.nav-icon .ic{width:17px;height:17px}
.card-icon,.driver-empty-icon,.driver-item-icon,.linked-account-icon{font-size:0}
.card-icon .ic{width:22px;height:22px;color:var(--brand)}
.driver-empty-icon .ic{width:40px;height:40px;color:var(--ink-3)}
.driver-item-icon .ic,.linked-account-icon .ic{width:19px;height:19px;color:var(--ink-2)}

/* ─── Каркас админки ───────────────────────────────────────────────────── */
.sidebar{background:var(--side);color:var(--side-ink);padding:0;border-right:0}
.sidebar-header{padding:16px 18px 13px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{color:#fff;font-size:15px;font-weight:650;letter-spacing:.2px}
.brand-sub{font-size:10.5px;color:#7d8ea6;text-transform:uppercase;letter-spacing:1.3px}
.sidebar-nav{padding:8px}
.nav-section{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--side-ink-2);
             padding:14px 10px 5px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:1px;
          color:var(--side-ink);border-radius:var(--r-sm);font-size:13.5px;text-decoration:none}
.nav-item:hover:not(.disabled){background:var(--side-hover);color:#fff}
.nav-item.active{background:var(--brand);color:#fff;font-weight:600}
.nav-item.disabled{opacity:.35;cursor:not-allowed}
.main{background:var(--bg)}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 22px;height:56px;
        display:flex;align-items:center;justify-content:space-between}
.topbar-title{font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.1px}
.topbar-user{font-size:13px;color:var(--ink-2)}
.user-role{background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-full);
           padding:3px 10px;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.4px}
.btn-topbar-logout{font-size:12.5px;padding:5px 12px;border:1px solid var(--line-3);border-radius:var(--r-sm);
                   background:var(--surface);color:var(--ink-2)}
.btn-topbar-logout:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.content{padding:20px 22px 40px}
.nav-toggle{background:none;border:0;font-size:20px;color:var(--ink-2);cursor:pointer;padding:4px 8px;
            border-radius:var(--r-sm)}
.nav-toggle:hover{background:var(--surface-3)}

/* ─── Заголовки разделов ───────────────────────────────────────────────── */
.section-header{margin-bottom:16px;gap:12px;flex-wrap:wrap}
.section-header h2{font-size:19px;font-weight:680;letter-spacing:-.3px;margin:0}
.section-actions{display:flex;gap:8px;flex-wrap:wrap}
.subsection-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 10px}
.subsection-title{font-size:14.5px;font-weight:650;color:var(--ink)}
.muted{color:var(--ink-3)}

/* ─── Кнопки ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;
     border-radius:var(--r-sm);border:1px solid var(--line-3);background:var(--surface);color:var(--ink-2);
     font-family:inherit;font-size:13.5px;font-weight:550;cursor:pointer;line-height:1.25;
     transition:background .12s,border-color .12s,color .12s}
.btn:hover:not(:disabled){background:var(--surface-3);color:var(--ink);border-color:var(--line-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-primary:hover:not(:disabled){background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn-secondary{background:var(--surface);border-color:var(--line-3);color:var(--ink-2)}
.btn-secondary:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
.btn-outline{background:transparent;border-color:var(--line-3);color:var(--ink-2)}
.btn-outline:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover:not(:disabled){background:#96190f;border-color:#96190f;color:#fff}
.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-success:hover:not(:disabled){background:#116631;border-color:#116631;color:#fff}
.btn-salary{background:var(--brand-soft);color:var(--brand-ink);border-color:#cfdcef}
.btn-salary:hover{background:#e3ebf6}
.btn-lg{padding:12px 18px;font-size:15px;border-radius:var(--r)}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-xs{padding:3px 8px;font-size:11.5px;border-radius:var(--r-xs);border:1px solid var(--line-3);
        background:var(--surface);color:var(--ink-2);cursor:pointer;font-family:inherit}
.btn-xs:hover{background:var(--surface-3)}
.btn-block{width:100%}
.btn-icon{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:var(--r-sm);
          padding:4px 8px;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center}
.btn-icon:hover{background:var(--surface-3);color:var(--ink)}
.btn-icon.danger{color:var(--bad);border-color:var(--bad-line)}
.btn-icon.danger:hover{background:var(--bad-soft)}
.btn-row-del{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:2px 6px;border-radius:var(--r-xs)}
.btn-row-del:hover{color:var(--bad);background:var(--bad-soft)}
.primary{background:var(--brand);border-color:var(--brand);color:#fff}

/* ─── Плитки и карточки ────────────────────────────────────────────────── */
.stats-row{display:flex;gap:12px;flex-wrap:wrap}
.stat-card{flex:1;min-width:170px;background:var(--surface);border:1px solid var(--line);
           border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.stat-label{font-size:12.5px;color:var(--ink-2);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.stat-value{font-size:23px;font-weight:680;color:var(--ink);letter-spacing:-.5px;line-height:1.15}
.stat-card.stat-green{border-left:3px solid var(--ok)}
.stat-card.stat-red{border-left:3px solid var(--bad)}
.stat-card.stat-blue{border-left:3px solid var(--brand)}
.stat-card.stat-warn{border-left:3px solid var(--warn);background:var(--surface)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;
      box-shadow:var(--shadow)}
.card-title{font-weight:650;color:var(--ink);font-size:14px}
.card-desc{color:var(--ink-2);font-size:12.5px}
.card-ok{border-left:3px solid var(--ok)}
.card-progress{border-left:3px solid var(--warn)}
.card-pending{border-left:3px solid var(--line-3);opacity:.75}
.welcome h2{font-size:20px;font-weight:680;letter-spacing:-.3px}

/* ─── Таблицы ──────────────────────────────────────────────────────────── */
.table-wrap,.table-scroll{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
                          overflow:auto;box-shadow:var(--shadow)}
.data-table{font-size:13.5px}
.data-table th{background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:650;
               text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;
               border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.data-table tr:hover td{background:#fafcff}
.data-table tr.clickable:hover td{background:var(--brand-soft)}
.data-table th.accounts-group-title{background:var(--surface-3);color:var(--ink);font-weight:650;
                                    text-transform:none;letter-spacing:0;font-size:13px}
.data-table .row-actions button{border:1px solid var(--line-3);background:var(--surface);color:var(--ink-2);
                                border-radius:var(--r-sm);padding:4px 10px;font-size:12px}
.data-table .row-actions button:hover{background:var(--surface-3);color:var(--ink)}
.data-table .row-actions button.danger{color:var(--bad);border-color:var(--bad-line)}
.data-table .row-actions button.danger:hover{background:var(--bad-soft)}
.empty-state{background:var(--surface);border:1px dashed var(--line-3);border-radius:var(--r);
             padding:26px;text-align:center;color:var(--ink-3);font-size:13.5px}
.loading{padding:22px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ─── Метки статусов ───────────────────────────────────────────────────── */
.tag,.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-full);
            font-size:11.5px;font-weight:650;background:var(--surface-3);color:var(--ink-2);line-height:1.6}
.tag-active,.badge-green{background:var(--ok-soft);color:var(--ok)}
.tag-inactive,.tag-red{background:var(--bad-soft);color:var(--bad)}
.tag-blue{background:var(--info-soft);color:var(--info)}
.tag-purple{background:var(--brand-soft);color:var(--brand-ink)}
.tag-orange,.tag-warn{background:var(--warn-soft);color:var(--warn)}
.amount-income{color:var(--ok);font-weight:650}
.amount-expense{color:var(--bad);font-weight:650}
.amount-transfer{color:var(--brand);font-weight:650}

/* ─── Формы и фильтры ──────────────────────────────────────────────────── */
.filters-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
             padding:10px 12px;gap:8px;box-shadow:var(--shadow)}
.filters-bar label{font-size:13px;color:var(--ink-2)}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=month],
input[type=password],input[type=email],input[type=tel],select,textarea,
.filter-input,.form-input,.form-control,.date-input,.cp-ac-input{
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-3);border-radius:var(--r-sm);padding:7px 11px;outline:none;
  transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,74,124,.12)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
label,.field-label{font-size:12.5px;color:var(--ink-2);font-weight:550}
.field{display:block;margin-bottom:12px}
.form-group{margin-bottom:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.salary-add-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* ─── Модальные окна ───────────────────────────────────────────────────── */
.modal-backdrop,.modal-overlay{background:rgba(15,23,42,.45)}
.modal-window,.modal-box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
                         border:1px solid var(--line)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-header h3{font-size:16px;font-weight:650;letter-spacing:-.1px}
.modal-close{color:var(--ink-3);border-radius:var(--r-sm)}
.modal-close:hover{background:var(--surface-3);color:var(--ink)}
.modal-body{padding:20px}
.modal-actions{gap:8px;margin-top:16px}

/* ─── Сообщения ────────────────────────────────────────────────────────── */
.toast{background:var(--surface);border:1px solid var(--line);border-left-width:3px;
       border-radius:var(--r-sm);box-shadow:var(--shadow-md);font-size:13.5px;color:var(--ink)}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--bad)}
.toast.warning{border-left-color:var(--warn)}
.alert{background:var(--warn-soft);border:1px solid var(--warn-line);color:#7c4a08;
       border-radius:var(--r);font-size:13px;padding:11px 14px}
.alert code{background:rgba(0,0,0,.05);border-radius:var(--r-xs);font-family:var(--mono);font-size:12px}
.error-message{color:var(--bad);font-size:13px}
.success-message{color:var(--ok);font-size:13px}

/* ─── Вход и приглашения ───────────────────────────────────────────────── */
.login-screen{background:linear-gradient(160deg,#152238 0%,#20344f 55%,#2c4a7c 100%)}
.login-card{border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(8,15,30,.35);padding:34px;border:0}
.login-logo h1{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.login-subtitle{color:var(--ink-3);font-size:12.5px}
.login-form .btn{width:100%}
.pw-toggle{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)}
.pw-toggle:hover{color:var(--ink-2);background:var(--surface-3)}

/* ─── Полевые экраны (телефон): водитель, ТП, продавец ─────────────────── */
.driver-screen,.tp-screen,.seller-screen,.senior-screen{background:var(--bg)}
.driver-header{background:var(--surface);border-bottom:1px solid var(--line)}
.driver-greet{font-weight:680;color:var(--ink);font-size:16px;letter-spacing:-.2px}
.driver-date{color:var(--ink-3);font-size:12.5px}
.driver-logout{background:none;border:1px solid var(--line-3);color:var(--ink-2);border-radius:var(--r-sm);
               width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.driver-logout:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.driver-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
             box-shadow:var(--shadow);padding:14px}
.driver-card h3{font-size:15px;font-weight:650;color:var(--ink)}
.driver-count{background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-full);
              padding:1px 8px;font-size:12px;font-weight:650}
.driver-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.driver-item-sub{color:var(--ink-3);font-size:12px}
.driver-item-amount{font-weight:680;color:var(--ink)}
.driver-empty{color:var(--ink-3);text-align:center;padding:22px}
.driver-list-empty{color:var(--ink-3);text-align:center;padding:18px;font-size:13.5px}
.driver-submit-summary{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.driver-submit-row{font-size:13.5px;color:var(--ink);padding:3px 0}
.driver-state{display:block}
.driver-meter{font-variant-numeric:tabular-nums}
.tp-card-body{padding:12px}
.tp-collect-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.tp-collect-main{flex:1;min-width:0}
.tp-collect-client{font-weight:600;color:var(--ink);font-size:13.5px}
.tp-collect-actions{display:flex;gap:6px}
.tp-tocollect{margin-top:8px}
.tp-tocollect-head{font-size:12.5px;color:var(--ink-2);font-weight:650;margin-bottom:6px}
.tp-card-name{font-weight:650;color:var(--ink)}
.hv-decide{border-bottom:1px dashed var(--line)}
.hv-btn-hand,.hv-btn-hold{min-width:74px}

/* ─── Пул заказов ──────────────────────────────────────────────────────── */
.pool-tabs-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pool-tab-btn{border:1px solid var(--line-3);background:var(--surface);color:var(--ink-2);
              border-radius:var(--r-full);padding:6px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.pool-tab-btn:hover{background:var(--surface-3);color:var(--ink)}
.pool-tab-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pool-subsection{margin-bottom:16px}
.pool-driver-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
                   margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.pool-driver-header{background:var(--surface-2);border-bottom:1px solid var(--line);padding:10px 14px;
                    font-weight:650;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.pool-drv-sel,.driver-pool-sel{border:1px solid var(--line-3);border-radius:var(--r-sm);padding:5px 9px;
                               font-size:13px;font-family:inherit;background:var(--surface)}
.from1c-cb{width:16px;height:16px;accent-color:var(--brand)}
.srp-check{width:16px;height:16px;accent-color:var(--brand)}
.srp-emp{font-size:13.5px}

/* ─── Автокомплит / подсказки ──────────────────────────────────────────── */
.rf-suggest-item,.rf-num-item{padding:8px 12px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.rf-suggest-item:hover,.rf-num-item:hover{background:var(--brand-soft)}

/* ─── Группировка сотрудников ──────────────────────────────────────────── */
.emp-dir-group{font-size:13px;font-weight:680;color:var(--ink);background:var(--surface-3);
               padding:8px 14px;border-radius:var(--r-sm);margin:14px 0 6px}
.emp-role-subhead{font-size:12px;color:var(--ink-2);font-weight:600;padding:6px 14px 2px}

/* ─── Прочее ───────────────────────────────────────────────────────────── */
.screen{min-height:100vh}
.hidden{display:none !important}
.status-{display:inline-block}
.linked-account-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
                     border-radius:var(--r-sm);background:var(--surface-3)}
.timesheet-widget{font-size:12.5px;color:var(--ink-2)}

/* ─── Телефон ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .content{padding:14px 12px 30px}
  .section-header h2{font-size:17px}
  .stats-row{gap:8px}
  .stat-card{min-width:calc(50% - 4px);padding:12px 13px}
  .stat-value{font-size:19px}
  .cards-grid{grid-template-columns:1fr;gap:10px}
  .topbar{padding:0 12px;height:52px}
  .topbar-title{font-size:15px}
  .filters-bar{padding:9px 10px}
  .filters-bar > *{flex:1 1 auto;min-width:0}
  .data-table{font-size:13px}
  .data-table th,.data-table td{padding:9px 10px}
  .modal-window,.modal-box{border-radius:var(--r) var(--r) 0 0;max-height:92vh}
  .modal-body{padding:16px}
  .btn{padding:9px 14px}          /* палец, а не курсор */
  .btn-sm{padding:7px 12px;font-size:13px}
  .driver-card{padding:12px;border-radius:var(--r)}
  .sidebar{width:270px}
}
@media(max-width:420px){
  .stat-card{min-width:100%}
}


/* ─── Перебиваем немногие !important из старого style.css ───────────────── */
.ddt-planned{background:var(--warn-soft) !important}
.row-warn:hover{background:var(--warn-soft) !important}