/* ============================================================
   HoReCa B2B — UI kit. Токены и библиотека компонентов.
   Палитра и правила из ../docs/design.md
   Tailwind-утилиты отвечают за раскладку/адаптив (в разметке),
   эти классы — за визуальный стиль компонентов.
   ============================================================ */

:root{
  --c-primary:#131B4D; --c-primary-hover:#1E2A6B; --c-primary-active:#0D1438;
  --c-accent:#6D9932; --c-accent-hover:#5D842B; --c-accent-strong:#4F7224;
  --bg-page:#F7F8FB; --bg-surface:#FFFFFF; --bg-subtle:#F0F2F6;
  --text-primary:#1A1F33; --text-secondary:#5B617C; --text-muted:#787E98;
  --border:#E1E4EC; --border-strong:#C3C8D6;
  --c-success:#4F7224; --c-success-bg:#ECF4DE; --c-success-text:#3F5A1D; --c-success-border:#BCD897;
  --c-warning:#B3791A; --c-warning-bg:#FDF3E2; --c-warning-text:#8A5D12; --c-warning-border:#F0C97A;
  --c-error:#C0392B;   --c-error-bg:#FBEAE8;   --c-error-text:#A32F23;   --c-error-border:#E8A89F;
  --c-info:#2C3C8F;    --c-info-bg:#E7EAF7;    --c-info-text:#1E2A6B;    --c-info-border:#A6B0E0;
  --focus:0 0 0 3px rgba(109,153,50,.45);
  --dur:160ms; --ease:cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
}
h1,h2,h3,h4{color:var(--text-primary); margin:0;}
a{color:inherit;}
.num{font-variant-numeric:tabular-nums;}

/* фокус и доступность */
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;left:12px;top:-48px;z-index:100;background:var(--c-primary);color:#fff;padding:8px 14px;border-radius:6px;transition:top var(--dur);}
.skip-link:focus{top:12px;}

/* скроллбар */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg-page);}
*::-webkit-scrollbar-track{background:transparent;}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:40px;padding:0 16px;
  border-radius:6px;font-weight:600;font-size:14px;line-height:1;border:1px solid transparent;cursor:pointer;
  transition:background var(--dur),color var(--dur),border-color var(--dur),filter var(--dur);white-space:nowrap;text-decoration:none;}
.btn i{font-size:18px;}
.btn:focus-visible{box-shadow:var(--focus);}
.btn-sm{height:32px;padding:0 12px;font-size:13px;} .btn-sm i{font-size:16px;}
.btn-lg{height:48px;padding:0 22px;font-size:15px;}
.btn-icon{width:40px;padding:0;} .btn-sm.btn-icon{width:32px;}
.btn-block{width:100%;}
.btn-primary{background:var(--c-primary);color:#fff;}
.btn-primary:hover{background:var(--c-primary-hover);}
.btn-accent{background:var(--c-accent-strong);color:#fff;}
.btn-accent:hover{filter:brightness(1.08);}
.btn-secondary{background:#fff;color:var(--c-primary);border-color:var(--c-primary);}
.btn-secondary:hover{background:var(--c-info-bg);}
.btn-ghost{background:transparent;color:var(--c-primary);}
.btn-ghost:hover{background:var(--bg-subtle);}
.btn-danger{background:var(--c-error);color:#fff;}
.btn-danger:hover{filter:brightness(.95);}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--border);color:var(--text-muted);border-color:transparent;cursor:not-allowed;pointer-events:none;filter:none;}
.btn .spin{animation:spin .8s linear infinite;}

/* ---------- Бейджи / статусы ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;}
.badge i{font-size:14px;}
.badge-info{background:var(--c-info-bg);color:var(--c-info-text);}
.badge-success{background:var(--c-success-bg);color:var(--c-success-text);}
.badge-accent{background:#ECF4DE;color:#4F7224;}
.badge-warning{background:var(--c-warning-bg);color:var(--c-warning-text);}
.badge-error{background:var(--c-error-bg);color:var(--c-error-text);}
.badge-neutral{background:var(--bg-subtle);color:var(--text-secondary);}
.badge-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--c-accent-strong);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}

/* ---------- Поля ввода ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.label{font-size:13px;font-weight:500;color:var(--text-secondary);}
.label .req{color:var(--c-error);}
.input,.select,.textarea{width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:6px;background:#fff;
  font-size:14px;color:var(--text-primary);font-family:inherit;transition:border-color var(--dur),box-shadow var(--dur);}
.textarea{height:auto;min-height:88px;padding:10px 12px;line-height:1.5;resize:vertical;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:var(--focus);}
.input::placeholder,.textarea::placeholder{color:var(--text-muted);}
.input-error,.input-error:focus{border-color:var(--c-error);box-shadow:0 0 0 3px rgba(192,57,43,.25);}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--bg-subtle);color:var(--text-muted);cursor:not-allowed;}
.hint{font-size:12px;color:var(--text-muted);}
.hint-error{color:var(--c-error-text);}
.input-icon{position:relative;}
.input-icon > i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:18px;pointer-events:none;}
.input-icon .input{padding-left:38px;}
.check{width:18px;height:18px;accent-color:var(--c-accent-strong);cursor:pointer;}

/* переключатель */
.switch{position:relative;display:inline-flex;width:40px;height:22px;flex:none;}
.switch input{appearance:none;width:100%;height:100%;margin:0;cursor:pointer;border-radius:999px;background:var(--border-strong);transition:background var(--dur);}
.switch input:checked{background:var(--c-accent-strong);}
.switch input:focus-visible{box-shadow:var(--focus);}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform var(--dur);pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.switch input:checked + .thumb{transform:translateX(18px);}

/* степпер количества */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;height:36px;}
.stepper button{width:32px;height:34px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--c-primary);border:none;cursor:pointer;transition:background var(--dur);}
.stepper button:hover{background:var(--c-info-bg);}
.stepper button i{font-size:16px;}
.stepper input{width:48px;height:34px;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);
  text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-primary);background:#fff;}
.stepper input:focus{outline:none;background:var(--c-info-bg);}
.stepper.is-disabled{opacity:.45;pointer-events:none;}

/* ---------- Карточки ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:12px;}
.card-pad{padding:20px;}
.card-hover{transition:box-shadow var(--dur),border-color var(--dur);}
.card-hover:hover{box-shadow:0 8px 24px rgba(19,27,77,.10);border-color:var(--border-strong);}

/* ---------- Алерты ---------- */
.alert{display:flex;gap:12px;padding:12px 16px;border:1px solid;border-radius:8px;font-size:14px;align-items:flex-start;}
.alert i{font-size:20px;flex:none;margin-top:1px;}
.alert .alert-title{font-weight:600;}
.alert-info{background:var(--c-info-bg);border-color:var(--c-info-border);color:var(--c-info-text);}
.alert-success{background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success-text);}
.alert-warning{background:var(--c-warning-bg);border-color:var(--c-warning-border);color:var(--c-warning-text);}
.alert-error{background:var(--c-error-bg);border-color:var(--c-error-border);color:var(--c-error-text);}

/* промо-баннер */
.promo{position:relative;border-radius:12px;overflow:hidden;background:var(--c-primary);color:#fff;}
.promo .promo-art{position:absolute;inset:0 0 0 auto;width:45%;display:grid;place-items:center;color:rgba(255,255,255,.25);
  border-left:1px dashed rgba(255,255,255,.25);}
.promo .promo-art i{font-size:48px;}

/* ---------- Таблица-прайс ---------- */
.price-table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px;}
.price-table th{position:sticky;top:0;background:var(--bg-subtle);color:var(--text-secondary);font-weight:600;text-align:left;
  padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;z-index:1;white-space:nowrap;}
.price-table td{padding:12px;border-top:1px solid var(--border);vertical-align:middle;}
.price-table tbody tr:nth-child(odd){background:var(--bg-page);}
.price-table tbody tr:hover{background:var(--c-info-bg);}
.price-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.price-table.density-compact td{padding:6px 12px;}
.row-unavailable td{color:var(--text-muted);}
.row-unavailable .stepper,.row-unavailable .btn{display:none;}
.price-request{color:var(--text-muted);font-style:italic;}
.line-comment{margin-top:6px;}
.line-comment .toggle{display:inline-flex;align-items:center;gap:4px;color:var(--c-primary);font-size:12px;cursor:pointer;background:none;border:none;padding:0;}
.line-comment .toggle:hover{text-decoration:underline;}
.line-comment .body{margin-top:6px;}

/* ---------- Иллюстрация-плейсхолдер (где будут картинки из design.md) ---------- */
.illus{display:grid;place-items:center;gap:10px;background:var(--c-info-bg);border:1px dashed var(--border-strong);
  border-radius:12px;color:var(--text-muted);text-align:center;padding:20px;}
.illus i{font-size:44px;color:var(--c-primary);opacity:.55;}
.illus code{font-size:11px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:1px 6px;}
.illus.accent{background:var(--c-success-bg);}
.illus.accent i{color:var(--c-accent-strong);opacity:.7;}

/* скелетон загрузки */
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skeleton{background:linear-gradient(90deg,#eef0f5 25%,#e2e6ef 37%,#eef0f5 63%);background-size:200% 100%;
  animation:shimmer 1.4s ease infinite;border-radius:6px;}

/* спиннер */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:32px;height:32px;border:3px solid var(--c-info-bg);border-top-color:var(--c-primary);border-radius:50%;animation:spin .8s linear infinite;}

/* свотчи палитры */
.swatch{height:56px;border-radius:8px;border:1px solid rgba(0,0,0,.06);}
.swatch-row{display:flex;flex-direction:column;gap:4px;}
.swatch-row .meta{font-size:11px;color:var(--text-muted);}

/* ---------- Шелл: топбар, сайдбар ---------- */
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--c-primary);color:#fff;}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text-secondary);
  font-weight:500;text-decoration:none;transition:background var(--dur),color var(--dur);}
.nav-link i{font-size:20px;}
.nav-link:hover{background:var(--bg-subtle);color:var(--text-primary);}
.nav-link.active{background:var(--c-info-bg);color:var(--c-primary);font-weight:600;}

#sidebar{background:#fff;border-right:1px solid var(--border);}
#overlay{position:fixed;inset:0;background:rgba(19,27,77,.45);z-index:45;}
@media (max-width:1023px){
  #sidebar{position:fixed;top:0;bottom:0;left:0;width:264px;transform:translateX(-100%);
    transition:transform var(--dur) var(--ease);z-index:50;}
  #sidebar.open{transform:translateX(0);box-shadow:0 8px 24px rgba(19,27,77,.18);}
}

/* выпадающее меню */
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(19,27,77,.12);padding:6px;z-index:30;}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:6px;
  background:none;border:none;text-align:left;color:var(--text-primary);font-size:14px;cursor:pointer;text-decoration:none;}
.menu a:hover,.menu button:hover{background:var(--bg-subtle);}
.menu i{font-size:18px;color:var(--text-secondary);}

/* ---------- Модалка ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(19,27,77,.45);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:60;animation:fade var(--dur) var(--ease);}
.modal{background:#fff;border-radius:14px;max-width:480px;width:100%;box-shadow:0 8px 24px rgba(19,27,77,.18);animation:pop var(--dur) var(--ease);}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Тосты ---------- */
.toast-wrap{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:80;width:min(360px,calc(100vw - 32px));}
.toast{display:flex;gap:10px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(19,27,77,.14);font-size:14px;align-items:flex-start;animation:toastin .2s var(--ease);}
.toast i{font-size:18px;flex:none;margin-top:1px;}
.toast .ti-circle-check{color:var(--c-success);}
.toast .ti-alert-triangle{color:var(--c-warning);}
.toast .ti-alert-circle{color:var(--c-error);}
.toast .ti-info-circle{color:var(--c-info);}
.toast button{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;}
@keyframes toastin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* служебное */
[hidden]{display:none!important;}
.section-anchor{scroll-margin-top:76px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}