/* ==========================================================================
   style.css — единый минималистичный стиль: DASH / CLIENTS / CALC / USERS / LOGIN / CLIENT_VIEW
   Без внешних библиотек. Профессиональные нейтральные оттенки и аккуратные размеры.
   ========================================================================== */

/* ---------- Токены ---------- */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --ink:#0f172a;
  --ink-2:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;

  --accent:#2563eb;
  --accent-2:#1e4ed8;
  --pos:#059669;
  --neg:#dc2626;
  --warn:#b45309;
  --danger:#b91c1c;

  --r:12px;
  --r-sm:8px;
  --r-pill:999px;
  --h:36px;                /* единая высота инпутов/кнопок */
  --shadow:0 2px 12px rgba(2,6,23,.06);

  --font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--font)}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.18);border-radius:8px}

/* ---------- Каркас ---------- */
.wrap,.container{max-width:1100px;margin:24px auto;padding:0 16px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
h1,h2,h3{margin:0}
h3{font-weight:700;letter-spacing:.2px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.right{float:right}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff}

/* ---------- Карточки ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:12px}

/* ---------- Кнопки ---------- */
/* ---------- Кнопки (единый outline-стиль) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--h);padding:0 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;
  transition:transform .06s,box-shadow .12s,background .12s,border-color .12s,color .12s;
  text-decoration:none;
}
.btn.small,.btn-sm{min-height:32px;padding:0 10px;font-size:.92rem}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:none;box-shadow:none}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Базовая (нейтральная) */
.btn{ --btn-c:#374151; --btn-bg:#fff; --btn-hbg:color-mix(in oklab, var(--btn-c) 6%, #fff); }
.btn{ border-color:var(--btn-c); color:var(--btn-c); background:var(--btn-bg); }
.btn:hover{ background:var(--btn-hbg); }

/* Варианты по назначению — только цвет обводки/текста и hover-подсветка */
.btn.primary{
  --btn-c: var(--accent);
  --btn-hbg: color-mix(in oklab, var(--accent) 10%, #fff);
}
.btn.danger{
  --btn-c: var(--danger);
  --btn-hbg: color-mix(in oklab, var(--danger) 10%, #fff);
}
.btn.dark{
  --btn-c: #111827;
  --btn-hbg: color-mix(in oklab, #111827 10%, #fff);
}
.btn.ghost{
  --btn-c: #6b7280;
  --btn-hbg: color-mix(in oklab, #6b7280 10%, #fff);
}
.btn-outline{
  /* оставляем как синоним базовой, чтобы старые места не ломать */
  --btn-c:#374151;
  --btn-hbg: color-mix(in oklab, #374151 10%, #fff);
}

/* ---------- Формы (общие) ---------- */
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
label{font-size:.9rem;color:var(--muted)}

input:not([type]), input[type=""],
input[type=text], input[type=number], input[type=date], input[type=password],
select, .form-control{
  height:var(--h);padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  width:100%;
}
input::placeholder{color:color-mix(in oklab, var(--muted) 85%, var(--ink) 15%)}
select{max-width:100%}

/* Сетки для мини-форм */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-row{display:grid;grid-template-columns:2fr 3fr auto;gap:10px;align-items:end}
.inline-form{display:inline}

/* Компактная форма «Добавить клиента» + фикса типов */
form[action="/clients/add"] .grid{
  display:grid;gap:8px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
form[action="/clients/add"] .grid > [class^="col-"]{grid-column:auto}
form[action="/clients/add"] .grid .col-12{grid-column:1 / -1;text-align:right}

/* ---------- Таблицы ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:visible;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line)}
thead th{
  background:#111827;color:#fff;text-align:left;position:sticky;top:0;z-index:1;white-space:nowrap;
  font-weight:700;letter-spacing:.2px;
}
tbody td{white-space:normal;vertical-align:top}
tfoot td{font-weight:700;background:#f8fafc}
tbody tr:hover td{background:#f5f7ff}

.num, th.num{ text-align:right; font-variant-numeric: tabular-nums; }
td.num{ white-space:nowrap; }

.strong{font-weight:600}
.text-pos{color:var(--pos)}
.text-neg{color:var(--neg)}
.total{font-weight:700;color:var(--accent)}
.row-actions{white-space:nowrap;position:relative}
/* ---------- Тёмные кнопки внутри .row-actions ---------- */

/* Необязательно: компактнее кнопки в таблицах */
.row-actions .btn { min-height:30px; padding:0 10px; }
/* ---------- Поповеры (details) для правок без JS ---------- */
/* Калькуляция */
.inline-edit{display:inline-block;position:relative}
.inline-edit summary{list-style:none;display:inline-block}
.inline-edit summary::-webkit-details-marker{display:none}
.inline-edit .panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:10;
  min-width:540px; max-width:min(92vw,720px);
  padding:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); white-space:normal;
}
.inline-edit .panel .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sep{border:0;border-top:1px solid var(--line);margin:10px 0}

/* Клиенты / Пользователи */
details.edit{display:inline-block;position:relative;margin-right:6px}
details.edit>summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--accent)
}
details.edit>summary::-webkit-details-marker{display:none}
details.edit .form{
  position:absolute; top:calc(100% + 8px); right:0; z-index:12;
  min-width:560px; max-width:min(94vw,900px);
  padding:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); white-space:normal;
}
details.edit .form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
details.edit .form .grid > [class^="col-"]{grid-column:auto}
details.edit .form .grid .col-12{grid-column:1 / -1}

/* ---------- Панель периода (компактная одинаково везде) ---------- */
.form-period{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.form-period > *{flex:0 0 auto}
.form-period input[type=date]{width:auto;min-width:140px;max-width:180px;height:32px;padding:0 12px;border-radius:10px;background:#f9fafb}
.form-period .separator{color:var(--muted);margin:0 2px}
.form-period .btn,.form-period a.btn{height:32px;padding:0 12px;border-radius:10px}
@media (max-width:560px){
  .form-period{flex-wrap:wrap}
  .form-period input[type=date]{flex:1 0 140px;max-width:none}
}

/* ---------- LOGIN ---------- */
.auth{max-width:420px;margin:7rem auto 0;padding:0 16px}
.auth .card{padding:20px}
.auth h4{margin:0 0 10px;text-align:center}
.auth .alert{padding:10px 12px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:8px;margin-bottom:10px}

/* ---------- CLIENT VIEW ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.detail-col-6{grid-column:span 6}
@media (max-width:880px){ .detail-col-6{grid-column:1 / -1} }
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.kv b{font-weight:600}
.history{margin-top:8px}
.history .item{border-left:3px solid var(--line);padding-left:10px;margin-bottom:8px}
.history code{background:#f1f5f9;padding:2px 6px;border-radius:6px}

/* ---------- Адаптив ---------- */
@media (max-width:820px){ .form-row{grid-template-columns:1fr} }
@media (max-width:620px){
  .topbar{flex-direction:column;align-items:flex-start;gap:6px}
  th,td{padding:10px}
  .inline-edit .panel,
  details.edit .form{position:fixed;left:16px;right:16px;top:12vh;min-width:0;max-width:none}
  .inline-edit .panel .form-grid,
  details.edit .form .grid{grid-template-columns:1fr}
}

/* ---------- Печать ---------- */
@media print{
  body{background:#fff}
  .wrap,.container{max-width:100%;margin:0;padding:0}
  .nav,.topbar .btn,.row-actions,details.edit,.inline-edit,.inline-form button{display:none!important}
  .table-wrap{box-shadow:none;border:1px solid var(--line)}
  thead th{position:static;background:#f3f4f6;color:#000}
  .total{color:#000}
}
/* ===== Панель над таблицей (единая) ===== */
.table-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px; border-bottom:1px solid var(--line); background:#fff;
}
.table-toolbar .spacer{ flex:1 1 auto; }















/* ===== Авторизация: минимализм с лёгким блюром фона ===== */
.auth-page{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.auth-page::before{
  content:"";
  position: fixed;
  inset:-6%;
  z-index:-2;
  background: url("/static/login-bg.jpg") center/cover no-repeat;
  filter: blur(8px) saturate(108%);   /* было 16px — стало 8px */
  transform: scale(1.04);             /* меньшее увеличение */
  will-change: transform;
}

/* мягкая вуаль для читаемости, ещё тише */
.auth-page::after{
  content:"";
  position: fixed; inset:0; z-index:-1;
  background: radial-gradient(70% 50% at 50% 15%, rgba(0,0,0,.12), transparent 60%),
              linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.12));
}

/* карточка логина — чисто и компактно */
.auth{
  width: 100%;
  max-width: 380px;
  padding: 0 16px;
}
.auth .card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(3px);  /* деликатный стеклянный эффект */
}
.auth h4{
  margin: 0 0 8px;
  text-align: left;
  font-weight: 700;
  letter-spacing: .2px;
}
.auth .sub{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .92rem;
}
.auth .form{
  display: grid;
  gap: 10px;
}
.auth .row{
  display: grid;
  gap: 6px;
}
.auth .actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.auth .alert{
  padding:10px 12px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:8px;margin-bottom:10px
}

/* Ссылка "забыли пароль?" — спокойная */
.auth .link{
  color: var(--muted);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Тёмная тема — слегка повышаем контраст карточки */
@media (prefers-color-scheme: dark){
  .auth .card{
    background: rgba(17,24,39,.78);
    color:#eef2ff;
    border: 1px solid rgba(255,255,255,.12);
  }
  .auth .sub{ color:#94a3b8; }
  .auth .link{ color:#94a3b8; }
}