/* ═══════════════════════════════════════════════════════════
   Лидоруб — base.css
   Общие переменные, reset, типографика, компоненты UI.
   Подключается один раз в base.html.
   ═══════════════════════════════════════════════════════════ */

/* ── Шрифт (локально, variable font) ──────────────────────
   Файл: /static/fonts/Manrope-Variable.woff2
   Покрывает диапазон weight 400–800 одним файлом.
   ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Variable.woff2') format('woff2 supports variations'),
       url('../fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── Токены ────────────────────────────────────────────────── */
:root {
  --bg:           #080A0F;
  --bg2:          #0D1018;
  --bg3:          #111420;
  --bg4:          #161927;
  --border:       rgba(255,255,255,.07);
  --border2:      rgba(255,255,255,.13);
  --text:         #F0F1F8;
  --muted:        #7A7E99;
  --dim:          #3E4160;
  --blue:         #4F8EFF;
  --blue-dim:     rgba(79,142,255,.10);
  --blue-border:  rgba(79,142,255,.20);
  --green:        #2EE89A;
  --green-dim:    rgba(46,232,154,.08);
  --green-border: rgba(46,232,154,.18);
  --red:          #FF5B5B;
  --red-dim:      rgba(255,91,91,.08);
  --orange:       #FFB547;
  --orange-dim:   rgba(255,181,71,.08);
  --violet:        #8B6EF5;
  --violet-dim:    rgba(139,110,245,.10);
  --violet-border: rgba(139,110,245,.20);
  --font:         'Manrope', system-ui, sans-serif;
  --nav-h:        58px;
  --sidebar-w:    240px;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    16px;
  --shadow:       0 4px 24px rgba(0,0,0,.35);
  --transition:   .18s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family:             var(--font);
  background:              var(--bg);
  color:                   var(--text);
  line-height:             1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }
button { cursor: pointer; font-family: var(--font); }

/* ── Typography helpers ────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-dim     { color: var(--dim); }
.text-blue    { color: var(--blue); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-orange  { color: var(--orange); }
.fw-500       { font-weight: 500; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }
.fs-12        { font-size: 12px; }
.fs-13        { font-size: 13px; }
.fs-14        { font-size: 14px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  border:          none;
  border-radius:   var(--radius-sm);
  padding:         9px 16px;
  font-size:       14px;
  font-weight:     600;
  transition:      opacity var(--transition), transform var(--transition), color var(--transition), border-color var(--transition), background var(--transition);
  white-space:     nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--blue);
  color:      #fff;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent);
  border-radius: inherit; pointer-events: none;
}
.btn-primary { position: relative; }
.btn-primary:hover { opacity: .88; }

.btn-secondary {
  background: var(--bg3);
  color:      var(--text);
  border:     1px solid var(--border2);
}
.btn-secondary:hover { border-color: rgba(255,255,255,.22); }

.btn-ghost {
  background: transparent;
  color:      var(--muted);
  border:     1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }

.btn-sm  { padding: 6px 12px; font-size: 13px; }
.btn-lg  { padding: 13px 22px; font-size: 15px; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }

/* ── Form elements ─────────────────────────────────────────── */
.input {
  width:         100%;
  background:    var(--bg2);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:       11px 14px;
  font-family:   var(--font);
  font-size:     14px;
  font-weight:   500;
  color:         var(--text);
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--dim); }
.input:focus {
  border-color: var(--blue);
  box-shadow:   0 0 0 3px rgba(79,142,255,.12);
}
.input.error {
  border-color: var(--red);
  box-shadow:   0 0 0 3px var(--red-dim);
}
.input-label {
  display:       block;
  font-size:     12px;
  font-weight:   600;
  color:         var(--muted);
  margin-bottom: 6px;
  letter-spacing: .2px;
}

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       24px;
}
.card-sm { padding: 16px 20px; }
.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.card-title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text);
  letter-spacing: -.2px;
}
.card-subtitle {
  font-size:  13px;
  color:      var(--muted);
  margin-top: 3px;
}

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     11px;
  font-weight:   700;
  padding:       3px 9px;
  border-radius: 20px;
  letter-spacing: .3px;
  white-space:   nowrap;
}
.badge-blue   { background: var(--blue-dim);   color: var(--blue);   border: 1px solid var(--blue-border); }
.badge-green  { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green-border); }
.badge-red    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,91,91,.15); }
.badge-orange { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,181,71,.2); }
.badge-muted  { background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--border); }

/* ── Tag / pill ────────────────────────────────────────────── */
.tag {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--bg3);
  border:        1px solid var(--border2);
  border-radius: 6px;
  padding:       4px 10px;
  font-size:     13px;
  font-weight:   500;
  color:         var(--text);
}
.tag-remove {
  display:      flex;
  align-items:  center;
  color:        var(--dim);
  transition:   color var(--transition);
  background:   none;
  border:       none;
  padding:      0;
  line-height:  1;
}
.tag-remove:hover { color: var(--red); }

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  height:     1px;
  background: var(--border);
  margin:     20px 0;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast-container {
  position:   fixed;
  bottom:     24px;
  right:      24px;
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}
.toast {
  background:    var(--bg3);
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:       12px 16px;
  font-size:     13px;
  font-weight:   500;
  color:         var(--text);
  box-shadow:    var(--shadow);
  display:       flex;
  align-items:   center;
  gap:           8px;
  animation:     toastIn .2s ease;
  max-width:     320px;
}
.toast.success { border-color: var(--green-border); }
.toast.error   { border-color: rgba(255,91,91,.2); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         48px 24px;
  color:           var(--muted);
  text-align:      center;
  gap:             12px;
}
.empty-state-icon {
  width:         48px;
  height:        48px;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--dim);
}
.empty-state-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text);
}
.empty-state-desc {
  font-size:  13px;
  color:      var(--muted);
  max-width:  320px;
  line-height: 1.6;
}