/* ============================================================================
   RedApp UI — Design System (2026-06-12, Fable 5)
   "Ops Cockpit" · палитра ProReddit/Проставлятор (янтарь). Light + Dark.
   Линкуется ПОСЛЕ my_style.css и Bootstrap — переопределяет:
     · собственные токены  · легаси --color-*  · Bootstrap --bs-*
     · оверрайды .btn/.table/.card/.badge/.form/.modal/.nav/.alert/.pagination
   → все существующие страницы поднимаются разом, БЕЗ переписывания шаблонов.
   Шрифт Inter и Lucide подключаются в base.html.
   ============================================================================ */

/* ============ ТОКЕНЫ ============ */
:root {
  --brand:#ffa726; --brand-ink:#d9810a; --brand-600:#fb8c00; --brand-400:#ffb74d;
  --brand-tint:rgba(255,167,38,.16); --brand-ring:rgba(255,167,38,.32);

  --bg:#f5f5f5; --bg-grad:radial-gradient(1200px 480px at 80% -8%, rgba(255,167,38,.07), transparent 60%);
  --surface:#ffffff; --surface-2:#f0f0f0; --surface-3:#e8e8e8;
  --border:#dddddd; --border-strong:#cccccc;
  --text:#2b2b2e; --text-2:#5a5e66; --muted:#9499a1; --inset-hi:rgba(255,255,255,.6);

  --ok:#4caf50; --ok-tint:rgba(76,175,80,.14);
  --warn:#f59e0b; --warn-tint:rgba(245,158,11,.16);
  --bad:#f44336; --bad-tint:rgba(244,67,54,.14);
  --info:#2196f3; --info-tint:rgba(33,150,243,.14);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 4px 12px rgba(16,24,40,.07),0 2px 4px rgba(16,24,40,.05);
  --sh-3:0 16px 40px rgba(16,24,40,.12);
  --ease:cubic-bezier(.4,0,.2,1); --nav-h:58px;

  /* ---- мостик: легаси --color-* (используются формами/v2/конфигами) ---- */
  --color-bg:var(--bg); --color-surface:var(--surface); --color-surface-alt:var(--surface-2);
  --color-card-bg:var(--surface); --color-border:var(--border); --color-text:var(--text);
  --color-text-secondary:var(--muted); --color-muted:var(--muted);
  --color-brand-orange:var(--brand); --color-brand-dark:var(--text);
  --color-input-bg:var(--surface); --color-input-border:var(--border-strong);
  --color-table-header:var(--surface-2); --color-table-row-even:var(--surface-2);
  --color-table-row-hover:var(--surface-3); --color-footer:#2b2b2e;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md);
  --shadow-sm:var(--sh-1); --shadow-md:var(--sh-2); --shadow-lg:var(--sh-3);

  /* ---- мостик: Bootstrap --bs-* (5.x компоненты + инлайн-стили дашборда) ---- */
  --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-border-color:var(--border);
  --bs-border-radius:var(--r-sm); --bs-secondary-color:var(--muted);
  --bs-primary:var(--brand); --bs-primary-rgb:255,167,38;
  --bs-success:var(--ok); --bs-success-rgb:76,175,80;
  --bs-danger:var(--bad); --bs-danger-rgb:244,67,54;
  --bs-warning:var(--warn); --bs-warning-rgb:245,158,11;
  --bs-info:var(--info); --bs-info-rgb:33,150,243;
  --bs-light-rgb:240,240,240; --bs-dark-rgb:43,43,46;
  --bs-font-sans-serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

[data-theme="dark"] {
  --bg:#1c1c1e; --bg-grad:radial-gradient(1200px 520px at 80% -10%, rgba(255,167,38,.10), transparent 62%);
  --surface:#2c2c2e; --surface-2:#3a3a3c; --surface-3:#48484a;
  --border:#4a4a4a; --border-strong:#5c5c5e;
  --text:#f5f5f7; --text-2:#aeb0b6; --muted:#8a8d94; --inset-hi:rgba(255,255,255,.05);
  --brand:#ffb74d; --brand-ink:#ffc266; --brand-tint:rgba(255,167,38,.22);
  --ok:#66bb6a; --ok-tint:rgba(102,187,106,.20);
  --warn:#ffb74d; --warn-tint:rgba(255,183,77,.18);
  --bad:#ef5350; --bad-tint:rgba(239,83,80,.20);
  --info:#42a5f5; --info-tint:rgba(66,165,245,.22);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 18px rgba(0,0,0,.45); --sh-3:0 20px 48px rgba(0,0,0,.6);
  --color-footer:#141416;
  --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-border-color:var(--border);
  --bs-primary-rgb:255,183,77; --bs-success-rgb:102,187,106; --bs-danger-rgb:239,83,80;
  --bs-warning-rgb:255,183,77; --bs-info-rgb:66,165,245; --bs-light-rgb:58,58,60; --bs-dark-rgb:245,245,247;
}

/* ============ БАЗА ============ */
body.main-bg, body {
  background-color:var(--bg) !important; background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; font-feature-settings:"cv05" 1,"ss01" 1;
}
h1,h2,h3,h4,h5,h6 { letter-spacing:-.01em; }
a { color:var(--brand-ink); }
a:hover { color:var(--brand); }
.tnum,.num { font-variant-numeric:tabular-nums; }
::selection { background:var(--brand-tint); }
:focus-visible { outline:2px solid var(--brand-ring); outline-offset:2px; }
@media (min-width:1400px){ .container,.container-xxl,.container-xl,.container-lg { max-width:min(2560px,98vw) !important; } }

/* ============ NAVBAR (base.html .navbar) ============ */
.navbar { background-color:var(--surface) !important; border-bottom:1px solid var(--border) !important;
  box-shadow:var(--sh-1); backdrop-filter:saturate(1.3) blur(8px); }
.navbar .brand,.navbar .brand-text { color:var(--text) !important; font-family:"Inter",sans-serif; }
.navbar .brand-orange { color:var(--brand-ink) !important; }
.navbar .brand img { height:38px !important; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.navbar .nav-link { color:var(--text-2) !important; font-weight:500; border-radius:var(--r-sm); padding:7px 12px !important; transition:.15s var(--ease); }
.navbar .nav-link:hover { color:var(--text) !important; background:var(--surface-2); }
.navbar .nav-link.active { color:var(--brand-ink) !important; background:var(--brand-tint); }
.navbar .navbar-text { color:var(--text-2) !important; }
.theme-toggle { border:1px solid var(--border) !important; color:var(--text-2) !important; border-radius:var(--r-sm) !important; }
.theme-toggle:hover { border-color:var(--brand) !important; color:var(--brand-ink) !important; }

/* ============ BUTTONS ============ */
.btn { border-radius:var(--r-sm); font-weight:600; transition:.15s var(--ease); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); border-color:transparent; color:#fff; box-shadow:0 2px 8px var(--brand-ring); }
.btn-primary:hover,.btn-primary:focus { background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); filter:brightness(1.05); color:#fff; border-color:transparent; }
.btn-success { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-success:hover { background:var(--ok); filter:brightness(.94); border-color:var(--ok); }
.btn-danger { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-danger:hover { background:var(--bad); filter:brightness(.94); }
.btn-warning { background:var(--warn); border-color:var(--warn); color:#fff; }
.btn-warning:hover { background:var(--warn); filter:brightness(.94); color:#fff; }
.btn-info { background:var(--info); border-color:var(--info); color:#fff; }
.btn-secondary { background:var(--surface-3); border-color:var(--surface-3); color:var(--text); }
.btn-dark { background:var(--text); border-color:var(--text); color:var(--surface); }
.btn-outline-secondary,.btn-outline-dark { color:var(--text-2); border-color:var(--border-strong); }
.btn-outline-secondary:hover,.btn-outline-dark:hover,.btn-outline-dark.active { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-tint); }
.btn-outline-primary { color:var(--brand-ink); border-color:var(--brand); }
.btn-outline-primary:hover,.btn-outline-primary.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-outline-success { color:var(--ok); border-color:var(--ok); }
.btn-outline-success:hover,.btn-outline-success.active { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn-outline-danger { color:var(--bad); border-color:var(--bad); }
.btn-outline-danger:hover,.btn-outline-danger.active { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-outline-warning { color:var(--warn); border-color:var(--warn); }
.btn-outline-warning:hover,.btn-outline-warning.active { background:var(--warn); border-color:var(--warn); color:#fff; }
.btn-outline-info { color:var(--info); border-color:var(--info); }
.btn-outline-info:hover,.btn-outline-info.active { background:var(--info); border-color:var(--info); color:#fff; }

/* ============ CARDS / SURFACES ============ */
.card,.my-card { background-color:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; box-shadow:var(--sh-1); }
.card-header,.my-card .card-header { background-color:var(--surface-2) !important; border-color:var(--border) !important; color:var(--text) !important; }
.card-body { color:var(--text); }
.rounded-2,.rounded-3 { border-radius:var(--r-md) !important; }
.shadow-sm { box-shadow:var(--sh-1) !important; }
.form-page-container { background:var(--surface) !important; border:1px solid var(--border); box-shadow:var(--sh-2); border-radius:var(--r-md); }

/* ============ TABLES (django_tables2 .table + DataTables) ============ */
.table { color:var(--text); --bs-table-bg:transparent; border-color:var(--border); }
.table thead th,.table > thead > tr > th { background-color:var(--surface-2) !important; color:var(--muted) !important;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--border) !important; padding:10px 12px; }
.table thead th a { color:var(--muted) !important; font-weight:700; }
.table thead th a:hover { color:var(--brand-ink) !important; }
.table td { color:var(--text); border-color:var(--border); vertical-align:middle; }
.table tbody tr { background-color:var(--surface); }
.table tbody tr:nth-child(even) { background-color:color-mix(in srgb,var(--surface-2) 55%, var(--surface)); }
.table tbody tr:hover { background-color:var(--surface-2); }
.table-light,.table-light th { background-color:var(--surface-2) !important; color:var(--muted) !important; }
table.dataTable td { color:var(--text); }
.table-responsive-wrapper,.table-container { border-radius:var(--r-md); }

/* ============ BADGES ============ */
.badge { font-weight:600; border-radius:var(--r-pill); }
.badge.bg-success { background:var(--ok-tint) !important; color:var(--ok) !important; }
.badge.bg-danger { background:var(--bad-tint) !important; color:var(--bad) !important; }
.badge.bg-warning { background:var(--warn-tint) !important; color:var(--warn) !important; }
.badge.bg-info { background:var(--info-tint) !important; color:var(--info) !important; }
.badge.bg-secondary { background:var(--surface-3) !important; color:var(--text-2) !important; }
.badge.bg-dark { background:var(--surface-3) !important; color:var(--text) !important; }
.badge.text-dark { color:var(--text) !important; }

/* ============ FORMS ============ */
.form-control,.form-select,textarea,input[type=text],input[type=password],input[type=email],input[type=number],input[type=file],select {
  background-color:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); }
.form-control:focus,.form-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.form-control::placeholder { color:var(--muted); }
label,.form-label,.col-form-label { color:var(--text-2); }
.form-check-input:checked { background-color:var(--brand); border-color:var(--brand); }

/* ============ MODAL / DROPDOWN / ALERT / PAGINATION ============ */
.modal-content { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); }
.modal-header,.modal-footer { border-color:var(--border); }
.dropdown-menu { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); }
.dropdown-item { color:var(--text); border-radius:var(--r-sm); }
.dropdown-item:hover { background:var(--surface-2); color:var(--text); }
.dropdown-divider { border-color:var(--border); }
.alert-success { background:var(--ok-tint); border-color:transparent; color:var(--ok); border-radius:var(--r-sm); }
.alert-danger { background:var(--bad-tint); border-color:transparent; color:var(--bad); border-radius:var(--r-sm); }
.alert-warning { background:var(--warn-tint); border-color:transparent; color:var(--warn); border-radius:var(--r-sm); }
.alert-info { background:var(--info-tint); border-color:transparent; color:var(--info); border-radius:var(--r-sm); }
.page-link { background:var(--surface); border-color:var(--border); color:var(--text-2); }
.page-link:hover { background:var(--surface-2); color:var(--brand-ink); }
.page-item.active .page-link { background:var(--brand); border-color:var(--brand); color:#fff; }
.nav-tabs { border-color:var(--border); }
.nav-tabs .nav-link { color:var(--text-2); border:none; font-weight:600; }
.nav-tabs .nav-link.active { color:var(--brand-ink); background:transparent; border-bottom:2px solid var(--brand); }

/* ============ НОВЫЕ КЛАССЫ (для миграции шаблонов на чистую разметку) ============ */
.page-x { max-width:1520px; margin:0 auto; padding:var(--s6) var(--s6) var(--s10); }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s4); }
.metric .val { font-size:30px; font-weight:800; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.metric .cap { margin-top:6px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.metric .sub { margin-top:3px; font-size:12px; color:var(--muted); }
.metric .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-ink); margin-bottom:var(--s3); }
.val-ok{color:var(--ok)} .val-warn{color:var(--warn)} .val-bad{color:var(--bad)} .val-brand{color:var(--brand-ink)}
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.no-dot::before { display:none; }
.pill-ok{background:var(--ok-tint);color:var(--ok)} .pill-warn{background:var(--warn-tint);color:var(--warn)}
.pill-bad{background:var(--bad-tint);color:var(--bad)} .pill-info{background:var(--info-tint);color:var(--info)}
.pill-brand{background:var(--brand-tint);color:var(--brand-ink)} .pill-muted{background:var(--surface-3);color:var(--muted)}
.seg { display:inline-flex; flex-wrap:wrap; gap:6px; }
.seg-item { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid transparent; font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer; transition:.15s var(--ease); }
.seg-item:hover { background:var(--surface-3); color:var(--text); }
.seg-item.active { background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; box-shadow:0 2px 8px var(--brand-ring); }
.seg-item .c { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; }
.seg-item.active .c { color:rgba(255,255,255,.85); }

/* ============ AUTH SCREEN (вход/выход) — крупный, по центру ============ */
.auth-screen { min-height: calc(100vh - var(--nav-h) - 70px); display: grid; place-items: center; padding: 48px 20px; }
.auth-card {
  width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 44px 40px 40px; text-align: center;
}
.auth-logo { height: 104px; width: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.28)); }
.auth-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1; }
.auth-title .b1 { color: var(--text); } .auth-title .b2 { color: var(--brand-ink); }
.auth-sub { color: var(--muted); font-size: 14px; margin: 8px 0 28px; }
.auth-form { text-align: left; }
.auth-form label, .auth-form .form-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.auth-form .form-control, .auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=email] {
  height: 46px; font-size: 15px; border-radius: var(--r-sm);
}
.auth-form .form-check { margin: 4px 0 8px; }
.auth-submit { width: 100%; height: 48px; font-size: 16px; font-weight: 700; margin-top: 10px; }