/* tahoe-skin.css — общие детали платформы в облике UI-кита 2.0.

   Экраны собраны из десятка общих деталей: кнопка, поле, панель, метка,
   сегмент, чип, окно, пункт меню. Здесь они переведены на кит (tahoe-tokens.css,
   tahoe-components.css): все экраны меняют облик разом и одинаково.
   Подключается ПОСЛЕДНИМ. Селекторы той же силы, что в app.css, — поэтому
   особые правила экранов (они сильнее) продолжают действовать.
   Цвета — только из токенов кита: тёмная тема приходит вместе с ними. */

/* Каркас, кнопки и шапка — в tahoe-shell.css (1 в 1 по макетам). */

/* ── поля ── */
.inp, .fld .inp, .fld select, .fld textarea, select.inp, textarea.inp {
  min-height: var(--t-h-field); padding: 0 15px; border-radius: var(--t-r-field);
  border: 1.5px solid var(--t-line-2); background: var(--t-surface); color: var(--t-ink);
  font: 550 15px var(--t-font); box-shadow: none; outline: none; }
/* .fld textarea.inp — иначе «.fld .inp» (строкой выше, специфичнее) снимал отступ
   сверху, и текст многострочного поля прилипал к верхнему краю */
textarea.inp, .fld textarea, .fld textarea.inp { padding: 11px 15px; line-height: 1.45; }
.inp:focus, .fld .inp:focus, .fld select:focus, .fld textarea:focus {
  background: var(--t-surface); border-color: var(--t-blue); box-shadow: var(--focus); }
.inp:disabled { background: var(--t-nested); color: var(--t-ink-4); opacity: 1; }
.inp[aria-invalid="true"] { border-color: #d22b39; box-shadow: 0 0 0 4px rgba(210,43,57,.12); }
.fld label, .lbl { font-size: 13px; font-weight: 600; color: var(--t-ink-2); }
.fld .hint, .hint { color: var(--t-ink-3); }

/* ── сегмент ── */
.seg { gap: 3px; padding: 3px; border-radius: 17px; background: var(--t-nested); border: 1px solid var(--t-line); }
.seg button { padding: 8px 14px; border-radius: 14px; font: 650 13.5px var(--t-font); color: var(--t-ink-2); }
.seg button:hover:not(.on) { color: var(--t-ink); }
.seg button.on { background: var(--t-surface); color: var(--t-blue-ink); box-shadow: 0 1px 3px rgba(22,26,36,.16); font-weight: 650; }

/* ── метки ── */
.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }

/* ── выбор: чип ── */
.chip { border-radius: 15px; font: 650 13.5px var(--t-font); border: 1px solid rgba(60,66,78,.2);
  background: var(--t-surface); color: var(--t-ink); }
/* выбранное — всегда синее: рамка и голубой фон (правило кита) */
.chip.on { border-color: var(--t-blue); box-shadow: 0 0 0 1px var(--t-blue); background: var(--t-blue-soft);
  color: var(--t-blue-ink); }

/* ── панели и окна ── */
.panel { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r-card);
  box-shadow: var(--sh-panel); }
.panel h3 { font-family: var(--t-font); font-size: var(--fs-caps); font-weight: 800; letter-spacing: .12em;
  color: var(--t-ink-3); }
.ovl { background: var(--t-scrim); }
.modal { border-radius: 30px; background: var(--t-surface); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
.modal h2 { font-family: var(--t-font); font-size: var(--fs-h2); font-weight: 750; }
.modal .modal-sub { color: var(--t-ink-3); }
.empty { border: 1px dashed var(--t-line-2); border-radius: 22px; padding: 18px; background: var(--t-row);
  color: var(--t-ink-3); text-align: center; }
.muted { color: var(--t-ink-3); }

/* ── вкладки ленты заявок: выбранное синее, как сегмент кита ── */
.rq-tabs { gap: 3px; padding: 3px; border-radius: 17px; background: var(--t-nested); border: 1px solid var(--t-line);
  display: inline-flex; max-width: 100%; }
.rq-tab { padding: 8px 14px; border-radius: 14px; font: 650 13.5px var(--t-font); color: var(--t-ink-2); }
.rq-tab:hover { background: transparent; color: var(--t-ink); }
.rq-tab.on { background: var(--t-surface); color: var(--t-blue-ink); box-shadow: 0 1px 3px rgba(22,26,36,.16); }

/* ── цвет машины и операции — только оттенком (правило кита: сплошная
   красная КО-1 читается как ошибка). Цвет приходит в --mc из разметки. ── */
.t-tone { background: color-mix(in srgb, var(--mc) 16%, var(--t-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent) !important; color: var(--t-ink) !important; }
button.t-tone:hover { background: color-mix(in srgb, var(--mc) 26%, var(--t-surface)) !important; opacity: 1; }
.mc-btn.pool { --mc: var(--t-ink-3); }
/* номер остановки — кольцо цвета машины, как .t-ring */
.stop-num.t-ringn { background: var(--t-surface); color: var(--t-ink); font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--sc); }

/* ── «Новая заявка»: выбранное синее, цвет операции — точкой ── */
.nr-chip { border-radius: 15px; font: 650 13.5px var(--t-font); color: var(--t-ink); background: var(--t-surface);
  box-shadow: inset 0 0 0 1px rgba(60,66,78,.2); }
.nr-chip[style*="--kc"] { display: inline-flex; align-items: center; gap: 7px; }
.nr-chip[style*="--kc"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kc); flex: none; }
.nr-chip:hover { background: var(--t-row); }
.nr-chip.on { background: var(--t-blue-soft); color: var(--t-blue-ink); box-shadow: inset 0 0 0 2px var(--t-blue); }
.nr-submit { height: var(--h-btn-l); border-radius: 26px; background: var(--t-blue-grad); box-shadow: var(--sh-pri);
  font: 650 16px var(--t-font); }
.nr-submit:hover { background: linear-gradient(180deg, #5cb0ff, #1a7cea); }
.nr-submit:disabled { background: #dfe3ea; color: var(--t-ink-4); box-shadow: none; opacity: 1; }

/* телефон в таблице не рвётся по дефисам */
td[data-label*="тел"], td[data-label*="Тел"] { white-space: nowrap; }

/* ── высота в ряду: списки и даты — по полю кита (46) ── */
input[type="date"], input[type="datetime-local"], .dd-trigger { min-height: var(--t-h-field); }
.dd-trigger { border-radius: var(--t-r-field); border: 1.5px solid var(--t-line-2); background: var(--t-surface); }