/* BRINGEAR ERP — фирменный стиль v2 (палитра сайта: природный / приглушённый) */
@font-face { font-family: 'Inter'; src: url('/static/Inter.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/static/Montserrat.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #33403A;      /* хвоя — основной текст */
  --muted: #7C8A82;    /* приглушённый серо-зелёный */
  --line: #DCE5E0;     /* туман — линии */
  --bg: #FDFCFA;       /* тёплый белый */
  --sand: #F0EBE3;     /* песок — секции */
  --accent: #6B9080;   /* шалфей — основной акцент */
  --terra: #C98B5E;    /* терракота */
  --brick: #B5563C;    /* кирпич — активный акцент */
}
html { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ---------- Шапка ---------- */
header.erp-head { position: sticky; top: 0; z-index: 80; background: rgba(253,252,250,.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.erp-nav { max-width: 1360px; margin: 0 auto; padding: 9px 22px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.erp-logo { display: flex; align-items: center; margin-right: 16px; }
.erp-logo img { height: 40px; width: auto; display: block; }
.erp-nav a { color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: 14px; transition: background .18s, color .18s; }
.erp-nav a:hover { background: var(--sand); color: var(--accent); }
.erp-user { color: var(--muted); font-size: 12px; padding: 0 6px; }
.erp-logout { color: var(--brick) !important; font-size: 12px; font-weight: 600; }

/* совместимость: если где-то остался <nav> */
nav { background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; gap: 4px; padding: 10px 16px; flex-wrap: wrap; }
nav .brand { font-weight: 700; font-size: 16px; margin-right: 16px; font-family: 'Montserrat','Inter',sans-serif; }
nav a { color: var(--ink); padding: 8px 12px; border-radius: 8px; }
nav a:hover { background: var(--sand); color: var(--accent); }

main { padding: 22px; max-width: 1360px; margin: 0 auto; }
h1 { font-size: 23px; font-weight: 700; margin-bottom: 16px; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 700; margin: 18px 0 10px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.head h1 { margin-bottom: 0; }
.title { font-size: 19px; font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.small { font-size: 12px; }

/* ---------- Таблицы ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(51,64,58,.08); border: 1px solid var(--line); }
th { color: var(--ink); background: var(--sand); text-align: left; padding: 9px 11px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
td { padding: 8px 11px; border-top: 1px solid var(--line); font-size: 14px; }
tr.low td { background: #FBEDE9; }

/* ---------- Карточки и сетки ---------- */
.card { background: #fff; padding: 18px; border-radius: 12px; box-shadow: 0 1px 3px rgba(51,64,58,.08); border: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: #fff; padding: 15px 17px; border-radius: 12px; box-shadow: 0 1px 3px rgba(51,64,58,.08); border: 1px solid var(--line); }
.stat .v { font-size: 24px; font-weight: 700; font-family: 'Montserrat','Inter',sans-serif; letter-spacing: -.01em; }
.stat .k { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Формы ---------- */
form.inline { display: inline; }
form.panel { background: #fff; padding: 14px 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(51,64,58,.09); border: 1px solid var(--line); margin-bottom: 16px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
input, select, button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
button { background: var(--accent); color: #fff; border: none; cursor: pointer; font-weight: 600; transition: background .18s; }
button:hover { background: #5A7D6E; }
button.ghost { background: var(--sand); color: var(--accent); }
button.ghost:hover { background: #E5DECF; }
button.red { background: var(--brick); }
button.red:hover { background: #9E4933; }

/* ---------- Прочее ---------- */
.muted { color: var(--muted); font-size: 13px; }
.pos { color: #3E7D5A; font-weight: 600; }
.neg { color: var(--brick); font-weight: 600; }
.ok { color: #3E7D5A; }
a.norm { color: var(--accent); }

@media (max-width: 720px) {
  main { padding: 14px; }
  /* Таблицы учёта на телефоне (остатки, отгрузки, счета): колонок много —
     прокручиваем каждую таблицу внутри её карточки, страница не «уезжает». */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
  /* Выпадающий список растягивается по самому длинному пункту («АРТ — название»)
     и выпирает за экран. В форме на телефоне даём ему ширину строки. */
  select { max-width: 100%; }
  form.panel { align-items: stretch; }
  form.panel select, form.panel input, form.panel button, form.panel textarea {
    width: 100%; max-width: 100%; min-width: 0; }
  .erp-nav { padding: 8px 12px; gap: 2px; }
  .erp-logo img { height: 34px; }
  .erp-nav a { padding: 7px 9px; font-size: 13px; }
}