/* ═══════════════════════════════════════
   Fashion Rynok CRM — Modern Glass v4.0
   Тёмная тема · градиенты · glassmorphism
   ═══════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-0: #060910;
  --bg-1: rgba(13, 17, 28, 0.72);
  --bg-2: rgba(20, 26, 40, 0.62);
  --bg-3: rgba(30, 38, 58, 0.85);
  --bg-4: rgba(44, 54, 80, 0.9);
  --bg-body: #060910;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: #4f8bff;
  --accent-2: #8b5cf6;
  --accent-grad: linear-gradient(135deg, #4f8bff 0%, #8b5cf6 100%);
  --accent-hover: #3b76f2;
  --accent-dim: rgba(79, 139, 255, 0.14);
  --accent-glow: rgba(79, 139, 255, 0.35);

  --green: #34d399;
  --green-dim: rgba(52, 211, 153, 0.13);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.13);
  --yellow: #fbbf24;
  --yellow-dim: rgba(251, 191, 36, 0.13);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.13);
  --cyan: #22d3ee;
  --cyan-dim: rgba(34, 211, 238, 0.13);

  --text-1: #eef2f9;
  --text-2: #9aa7bd;
  --text-3: #5c6b84;

  --sidebar-bg: rgba(9, 12, 20, 0.78);
  --sidebar-w: 240px;
  --topbar-h: 58px;
  --topbar-bg: rgba(9, 12, 20, 0.55);

  --r: 14px;
  --r-sm: 9px;
  --r-lg: 18px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { font-size: 14px; -webkit-text-size-adjust: 100%; }

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font);
  color: var(--text-1);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(79, 139, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 92% 8%, rgba(139, 92, 246, 0.13), transparent 55%),
    radial-gradient(900px 600px at 55% 115%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--bg-body);
  background-attachment: fixed;
}

a { color: inherit; }

::selection { background: var(--accent-dim); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 135, 160, 0.3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 135, 160, 0.5); }

/* ═══════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════ */
.login-page {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(800px 500px at 20% 15%, rgba(79, 139, 255, 0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(139, 92, 246, 0.15), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(34, 211, 238, 0.08), transparent 60%),
    var(--bg-0);
  overflow: hidden;
}

.login-container {
  display: flex; width: 880px; min-height: 520px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.login-left {
  flex: 1; padding: 60px 44px;
  background: linear-gradient(160deg, #3b82f6 0%, #6d5ce7 52%, #8b5cf6 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.login-left::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.login-left::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(400px 300px at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}

.login-brand { position: relative; z-index: 1; text-align: center; color: #fff; }

.brand-icon {
  width: 76px; height: 76px; margin: 0 auto 22px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.brand-icon svg { width: 38px; height: 38px; stroke: #fff; fill: none; }
.brand-img { width: 54px; height: 54px; object-fit: contain; border-radius: 16px; }

.login-brand h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.login-brand p { font-size: 14px; opacity: 0.88; line-height: 1.5; }

.login-right {
  flex: 1; padding: 60px 50px;
  display: flex; align-items: center;
}

.login-form { width: 100%; }
.login-form h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 6px; }
.login-hint { font-size: 13px; color: var(--text-3); margin-bottom: 30px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; letter-spacing: 0.2px; }
.field input {
  width: 100%; padding: 4px 8px; height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-1);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus { border-color: var(--accent); background: rgba(79, 139, 255, 0.06); box-shadow: 0 0 0 4px var(--accent-dim); }
.field input::placeholder { color: var(--text-3); }

.btn-full {
  width: 100%; padding: 8px; margin-top: 10px;
  background: var(--accent-grad); color: #fff; border: none;
  border-radius: var(--r-sm); font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.2px;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn-full:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); }
.btn-full:active { transform: translateY(0); }

.login-demo { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 18px; line-height: 1.5; }

.login-error {
  background: var(--red-dim); border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5; font-size: 12px; padding: 10px 14px;
  border-radius: var(--r-sm); margin-bottom: 14px;
}

/* ═══════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════ */
.app {
  display: flex; height: 100vh; overflow: hidden;
  max-width: 100%;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  max-width: 90vw;
  height: 100vh; display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 50;
}

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 18px 14px;
}

.brand-sm { display: flex; align-items: center; gap: 12px; }
.brand-icon-sm {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.brand-icon-sm svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.brand-img-sm { width: 26px; height: 26px; object-fit: contain; border-radius: 7px; }
.brand-sm span { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-1); }

.sidebar-close { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }

.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 6px 12px 20px;
}

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; margin-bottom: 3px;
  border-radius: 11px; text-decoration: none;
  color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: background .18s, color .18s, transform .18s;
}

.nav-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; }

.nav-link:hover { background: var(--glass-strong); color: #fff; transform: translateX(2px); }

/* Вложенные пункты */
.nav-link.sub {
  color: var(--text-2); font-size: 13px; font-weight: 500;
  padding-left: 44px;
}

/* Активный пункт — градиентная карточка с подсветкой */
.nav-link.active {
  background: linear-gradient(135deg, rgba(79, 139, 255, 0.22) 0%, rgba(139, 92, 246, 0.12) 100%);
  border: 1px solid rgba(79, 139, 255, 0.32);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(79, 139, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-link.active svg { stroke: var(--accent); color: var(--accent); }
.nav-link.active::before {
  content: ''; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent-grad);
}

/* Плейсхолдеры (пункты без страниц) */
.nav-link.ph { cursor: default; color: var(--text-3); }
.nav-link.ph:hover { background: none; transform: none; }

/* Названия категорий (например, РЕДАКТОР) */
.nav-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--text-3); padding: 18px 14px 8px;
}

/* Заголовки блоков (Отделы, Слоты) */
.nav-group-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--accent);
  padding: 18px 14px 8px;
}

.nav-divider { height: 1px; background: var(--line); margin: 14px 10px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); }
.user-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--r);
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-grad); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text-3); }
.btn-logout {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: background .2s; flex-shrink: 0;
}
.btn-logout svg { width: 15px; height: 15px; stroke: currentColor; color: var(--text-3); }
.btn-logout:hover { background: var(--red-dim); }
.btn-logout:hover svg { color: var(--red); }

/* ── MAIN ── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; max-width: 100%; min-width: 0; }

.topbar {
  height: var(--topbar-h); min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 40;
}

.burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  align-items: center; justify-content: center; transition: background .2s;
}
.burger svg { width: 20px; height: 20px; stroke: currentColor; color: var(--text-1); }
.burger:hover { background: var(--bg-3); }

.page-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; flex: 1; }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--glass);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.search-box svg { width: 16px; height: 16px; stroke: currentColor; color: var(--text-3); flex-shrink: 0; }
.search-box input {
  background: none; border: none; outline: none;
  color: var(--text-1); font-family: var(--font); font-size: 13px; width: 180px;
}
.search-box input::placeholder { color: var(--text-3); }

.content {
  flex: 1; overflow-y: auto; padding: 26px 28px;
  overflow-x: hidden; min-width: 0;
}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: none; border-radius: 8px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .16s; white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-grad); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 6px 20px var(--accent-glow); transform: translateY(-1px); }

.btn-ghost {
  background: var(--glass); color: var(--text-2); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--line-strong); color: var(--text-1); background: var(--glass-strong); }

.btn-danger { background: var(--red-dim); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.25); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.22); }

.btn-success { background: var(--green-dim); color: #86efac; border: 1px solid rgba(52, 211, 153, 0.25); }
.btn-success:hover { background: rgba(52, 211, 153, 0.22); }

.btn-sm { padding: 4px 8px; font-size: 12px; border-radius: 8px; }

.btn-icon {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: all .16s; color: var(--text-2);
}
.btn-icon:hover { border-color: var(--line-strong); color: var(--text-1); background: var(--glass-strong); transform: translateY(-1px); }
.btn-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; flex-shrink: 0; }
.btn-primary svg, .btn-danger svg, .btn-success svg { color: #fff; }

.btn-icon.danger:hover { border-color: rgba(248, 113, 113, 0.45); color: #fca5a5; background: var(--red-dim); }
.btn-icon.danger:hover svg { color: #fca5a5; }

/* ═══════════════════════════════════════
   FORM
   ═══════════════════════════════════════ */
.form-group { margin-bottom: 16px; flex: 1; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.form-input {
  width: 100%; padding: 4px 8px; height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-1);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-input:focus { border-color: var(--accent); background: rgba(79, 139, 255, 0.06); box-shadow: 0 0 0 4px var(--accent-dim); }
.form-input::placeholder { color: var(--text-3); }
.form-input:disabled { opacity: 0.55; }
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='%239aa7bd' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  padding-right: 26px; cursor: pointer;
  color-scheme: dark;
}
select.form-input option { background: #1c1c1e; color: #ffffff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════ */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-bottom: 24px;
}
.kpi-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
  display: flex; align-items: center; gap: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kpi-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.kpi-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.25);
}
.kpi-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.kpi-icon.blue { background: var(--accent-grad); }
.kpi-icon.green { background: linear-gradient(135deg, #34d399, #0ea5e9); }
.kpi-icon.purple { background: linear-gradient(135deg, #a78bfa, #ec4899); }
.kpi-icon.yellow { background: linear-gradient(135deg, #fbbf24, #f97316); }

.kpi-info { flex: 1; min-width: 0; }
.kpi-val { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.kpi-label { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.kpi-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px;
}
.kpi-badge.up { color: var(--green); background: var(--green-dim); }
.kpi-badge.down { color: var(--red); background: var(--red-dim); }
.kpi-badge.flat { color: var(--text-3); background: var(--bg-3); }

/* ═══════════════════════════════════════
   CHART
   ═══════════════════════════════════════ */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }

.chart-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chart-head h4 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.chart-card canvas { width: 100% !important; height: 280px !important; min-height: 280px !important; }
.chart-canvas { position: relative; height: 280px; min-height: 280px; }
.chart-canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 280px !important; }

/* ═══════════════════════════════════════
   TABLE
   ═══════════════════════════════════════ */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.table-search {
  padding: 9px 14px; background: var(--glass);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-1); font-family: var(--font); font-size: 13px;
  outline: none; width: 280px; transition: border-color .2s, box-shadow .2s;
}
.table-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.table-search::placeholder { color: var(--text-3); }

.table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); overflow-x: auto;
  max-width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th {
  padding: 13px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3);
  background: rgba(255, 255, 255, 0.03);
  text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-wrap td {
  padding: 12px 16px; font-size: 13px; color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap;
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr { transition: background .12s; }
.table-wrap tbody tr:hover { background: rgba(79, 139, 255, 0.06); }
.table-wrap .row-total td { background: rgba(79, 139, 255, 0.08); font-weight: 700; color: var(--text-1); border-top: 1px solid var(--accent); }
.table-info { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }

.table-wrap th.sortable { cursor: pointer; user-select: none; }
.table-wrap th.sortable:hover { color: var(--text-1); background: var(--glass-strong); }
.sort-arrow { color: var(--accent); margin-left: 3px; font-size: 11px; display: inline-flex; vertical-align: middle; }
.sort-arrow svg { width: 11px; height: 11px; stroke: currentColor; fill: none; }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pager .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pager-info { font-size: 12px; color: var(--text-3); }

.user-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-1); }
.avatar-sm {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.status-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
}
.status-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
}
.status-dot.active::before { background: var(--green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.status-dot.active { color: var(--green); }
.status-dot.inactive::before { background: var(--red); }
.status-dot.inactive { color: #fca5a5; }

.table-actions { display: flex; gap: 6px; }

/* ═══════════════════════════════════════
   KANBAN
   ═══════════════════════════════════════ */
.kanban-board {
  display: flex; gap: 16px; overflow-x: auto;
  padding-bottom: 16px; width: 100%; min-height: 400px;
}
.kanban-col {
  min-width: 260px; flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 11px; font-size: 13px; font-weight: 700;
}
.kanban-count {
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 20px;
}
.kanban-cards {
  flex: 1; padding: 4px 10px 10px; display: flex; flex-direction: column;
  gap: 8px; min-height: 80px; transition: background .2s;
}
.kanban-cards.drag-over { background: var(--accent-dim); border-radius: 0 0 var(--r) var(--r); }

.kanban-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; cursor: grab;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kanban-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.kanban-card.dragging { opacity: .4; transform: rotate(2deg); }
.kanban-card-client { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.kanban-card-amount { font-size: 15px; font-weight: 800; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.kanban-card-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }

/* ═══════════════════════════════════════
   MODAL
   ═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(4, 7, 14, 0.7); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  width: 100%; max-width: 540px; max-height: 90vh;
  background: rgba(18, 23, 36, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  transform: scale(.95) translateY(10px); transition: transform .22s cubic-bezier(.2,.8,.3,1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.modal-x {
  width: 32px; height: 32px; border: none; background: transparent;
  color: #fff; font-size: 22px; cursor: pointer;
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-x:hover { background: var(--bg-3); color: var(--text-1); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */
.toast-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 10001;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.toast {
  padding: 12px 20px; background: rgba(18, 23, 36, 0.95);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 12px;
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow);
  opacity: 0; transform: translateX(30px);
  transition: all .3s cubic-bezier(.4,0,.2,1); pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.info { border-left-color: var(--accent); }

/* ═══════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════ */
.settings-grid { max-width: 820px; }
.settings-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; margin-bottom: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.settings-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.settings-row:first-child { padding-top: 0; }
.settings-row label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.settings-row .form-input, .settings-row select { max-width: 240px; }

/* ═══════════════════════════════════════
   DEPARTMENTS GRID
   ═══════════════════════════════════════ */
.dept-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.dept-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dept-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.dept-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.dept-card p { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.dept-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.dept-stat { font-size: 12px; color: var(--text-2); }
.dept-stat strong { color: var(--text-1); }

/* ═══════════════════════════════════════
   FILTER
   ═══════════════════════════════════════ */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.filter-bar .form-input { width: auto; padding: 8px 12px; font-size: 12px; }
.filter-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.filter-sep { color: var(--text-3); }

/* Поиск по клиентам в разделе отчётов */
.client-search-input { min-width: 240px; font-size: 13px; }
.client-sub { color: var(--text-3); font-size: 12px; }
.client-search-result { animation: frFadeIn .25s ease; }
@keyframes frFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pct-grid {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 4px;
}
.pct-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--glass);
}
.pct-cell label { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pct-cell input { width: 64px; }
.pct-cell span { font-size: 12px; color: var(--text-3); }

/* ═══════════════════════════════════════
   LOADING
   ═══════════════════════════════════════ */
.loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 300px;
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(79, 139, 255, 0.15); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   FR MODULE
   ═══════════════════════════════════════ */
.fr-badge {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  border: 1px solid currentColor; white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
}

.fr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; height: 60vh;
}
.fr-empty h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.fr-empty p { color: var(--text-2); }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }

.hint { font-size: 12px; color: var(--text-3); }

/* ── STAT CARDS ── */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.stat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat-card.stat-total {
  border-color: rgba(79, 139, 255, 0.45);
  background: linear-gradient(135deg, rgba(79, 139, 255, 0.18), rgba(139, 92, 246, 0.08)), var(--bg-2);
  box-shadow: 0 8px 30px rgba(79, 139, 255, 0.12);
}
.stat-card.stat-total .stat-val { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card.stat-passive {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08)), var(--bg-2);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.12);
}
.stat-card.stat-passive .stat-val { color: #4ade80; }
.stat-card.stat-passive .stat-label { color: #86efac; }
.stat-card.stat-commission {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.08)), var(--bg-2);
  box-shadow: 0 8px 30px rgba(251, 191, 36, 0.12);
}
.stat-card.stat-commission .stat-val { color: #fbbf24; }
.stat-card.stat-commission .stat-label { color: #fde68a; }
.stat-card.stat-commission .stat-sub { color: #d4a017; }
.stat-label {
  font-size: 11px; color: var(--text-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px;
}
.stat-val { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.stat-sub { font-size: 12px; color: var(--text-2); margin-top: 6px; }

/* ── DEPARTMENT DASHBOARD: QUICK ACTIONS ── */
.dept-actions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.action-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 20px; text-decoration: none; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); transition: all .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.action-tile::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.action-tile:hover {
  border-color: rgba(79, 139, 255, 0.5); transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
.action-tile:hover::after { opacity: 1; }
.action-tile.action-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #7c5ce7 100%);
  border-color: rgba(79, 139, 255, 0.5);
}
.action-tile.action-primary .action-title { color: #fff; }
.action-tile.action-primary .action-sub { color: rgba(255, 255, 255, 0.82); }
.action-tile.action-primary:hover { box-shadow: 0 12px 34px var(--accent-glow); }
.action-tile.action-primary .action-ico svg { color: #fff; }
.action-ico { font-size: 22px; line-height: 1; margin-bottom: 6px; display: flex; }
.action-ico svg { width: 22px; height: 22px; stroke: currentColor; color: var(--accent); fill: none; }
.action-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.action-sub { font-size: 11px; color: var(--text-3); }

/* ── DEPARTMENT DASHBOARD: METRICS ── */
.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.metric-card {
  border-radius: var(--r); padding: 18px 20px;
  border: 1px solid var(--line); transition: transform .2s, box-shadow .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.metric-label {
  font-size: 11px; color: var(--text-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px;
}
.metric-val { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.metric-buyers { background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(168, 85, 247, 0.05)); border-color: rgba(168, 85, 247, 0.4); }
.metric-buyers .metric-label { color: #c4a5fc; }
.metric-buyers .metric-val { color: #dcc8ff; }
.metric-logistics { background: linear-gradient(135deg, rgba(196, 100, 62, 0.2), rgba(196, 100, 62, 0.06)); border-color: rgba(196, 100, 62, 0.45); }
.metric-logistics .metric-label { color: #e8b394; }
.metric-logistics .metric-val { color: #f3c9a8; }
.metric-commission { background: linear-gradient(135deg, rgba(212, 160, 23, 0.16), rgba(212, 160, 23, 0.05)); border-color: rgba(212, 160, 23, 0.4); }
.metric-commission .metric-label { color: #e9cf7d; }
.metric-commission .metric-val { color: #f2dc9b; }
.metric-index { background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.05)); border-color: rgba(56, 189, 248, 0.4); }
.metric-index .metric-label { color: #8fd9fb; }
.metric-index .metric-val { color: #b7e6fc; }

/* ── HUB CARDS ── */
.fr-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.fr-hub-card {
  display: block; padding: 22px; text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); transition: all .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.fr-hub-card:hover {
  border-color: rgba(79, 139, 255, 0.5); transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
.fr-hub-card h4 { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.fr-hub-card h4 svg { width: 15px; height: 15px; stroke: currentColor; color: var(--accent); fill: none; flex-shrink: 0; }
.fr-hub-card p { font-size: 12px; color: var(--text-3); }

/* ── EDITABLE ROW INPUTS (report/SIM) ── */
.table-wrap td .ri {
  width: auto; /* v16: инпуты ровно под текст, без лишней ширины справа */
  max-width: 100%;
  min-width: 40px; padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-1);
  font-family: var(--font); font-size: 12px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.table-wrap td .ri:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.table-wrap td .ri.num-i { text-align: right; }
.table-wrap td select.ri {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='%239aa7bd' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  padding-right: 22px;
}
.table-wrap td select.ri option { background: #141a28; }

.rep-table td { padding: 6px; }
.rep-table .num { text-align: center; color: var(--text-3); width: 34px; }

.rep-table tfoot td {
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.rep-table tfoot td.tot-com_persent_100,
.rep-table tfoot td.tot-index_persent_100,
.rep-table tfoot td.tot-itog,
.rep-table tfoot td.tot-itog_index {
  color: var(--accent);
}

.senior-detail { cursor: pointer; }
td.rat-actions { text-align: center; white-space: nowrap; }
td.rat-actions .senior-detail { display: inline-block; line-height: 1.2; }
.rep-row { transition: background .12s; }
.rep-row:hover { background: rgba(79, 139, 255, 0.05); }
.rep-row-actions { display: inline-flex; gap: 4px; }
.rep-wrap { max-height: 72vh; overflow: auto; max-width: 100%; }
.rep-wrap thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-2); }
.rep-wrap thead .rep-h1 th:nth-child(-n+2) { left: 0; z-index: 5; }
.rep-wrap tbody tr.rep-cm td:nth-child(-n+2),
.rep-wrap tfoot td:nth-child(-n+2) { position: sticky; left: 0; z-index: 2; background: var(--bg-2); }

/* ── REPORT EDITOR · TWO-LEVEL DENSE TABLE ── */
.rep2 {
  width: 100%; min-width: 1000px;
  border-collapse: collapse;
}
.rep2 th, .rep2 td {
  border: 1px solid var(--line);
  vertical-align: middle;
}
.rep2 thead th {
  padding: 8px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1px; white-space: normal; line-height: 1.2;
  text-align: center; color: var(--text-2);
}
.rep2 .rep-h1 th {
  background: #1e2738; color: var(--text-1); font-size: 11px;
}
.rep2 .rep-h1 th.grp {
  background: #18202e; color: #9fb0c9; font-size: 10px; font-weight: 600;
}
.rep2 .rep-h1 th.rep-pr { color: var(--green); }
.rep2 .rep-h1 th.rep-uh { color: var(--red); }
.rep2 .rep-h2 th,
.rep2 .rep-h4 th {
  background: #18202e;
  color: #7b8aa2; font-size: 9px; font-weight: 500;
  font-family: var(--font-mono, Consolas, monospace);
  padding: 5px 3px; text-align: center;
  border-top: 1px solid var(--line-strong);
}
.rep2 .rep-h2 th.ro-kassa,
.rep2 .rep-h4 th.ro-kassa { color: #cbd5e1; font-weight: 600; }
.rep2 .rep-h3 th {
  background: #18202e;
  color: #9fb0c9; font-size: 10px; font-weight: 600;
  border-top: 1px solid var(--line-strong);
}
.rep2 .rep-h1 th.grp-cm { border-right: 2px solid var(--line-strong); }
.rep2 th.blk { border-left: 2px solid var(--line-strong); }
.rep2 td { padding: 4px 3px; }
.rep2 tfoot td { white-space: nowrap; padding: 6px 3px; }
.rep2 td .ri {
  min-width: 0; width: 100%; height: 32px; padding: 4px 8px;
  font-size: 12px; box-sizing: border-box;
  background-color: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.rep2 td .ri:hover { border-color: #475569; }
.rep2 td .ri:focus {
  border-color: var(--accent);
  background-color: rgba(79, 139, 255, 0.08);
  box-shadow: 0 0 0 2px var(--accent-dim);
  outline: none;
}
.rep2 td select.ri { font-size: 11px; padding-right: 20px; }
.rep2 td select.ri option { font-size: 11px; }
.rep2 td select.ri { position: relative; z-index: 5; color-scheme: dark; }
.rep2 td select.ri:focus { z-index: 60; }
.rep-tb-group select.form-input { position: relative; z-index: 70; color-scheme: dark; }
.rep-tb-group select.form-input option { font-size: 12px; background: #1c1c1e; color: #ffffff; }
.rep2 td textarea.ri {
  display: block; height: auto; min-height: 32px;
  resize: none; overflow: hidden;
  font-family: inherit; line-height: 1.35;
  vertical-align: middle;
}
.rep2 .rep-row-actions { opacity: 0.45; transition: opacity .15s; }
.rep2 .rep-row:hover .rep-row-actions { opacity: 1; }
.rep2 .rep-row-actions { gap: 2px; }
.rep2 .num { width: auto; }
.rep2 th.rep-idx, .rep2 td.rep-idx { width: 34px; text-align: center; color: var(--text-3); }
.rep2 th.rep-name { min-width: 170px; text-align: left; }
.rep2 th.rep-adm, .rep2 td.rep-adm { width: 140px; white-space: nowrap; }
.rep2 th.rep-buyer, .rep2 td.rep-buyer { width: 140px; white-space: nowrap; }
.rep2 th.rep-sm, .rep2 td.rep-sm { min-width: 90px; }
.rep2 th.rep-act, .rep2 td.rep-act { width: 52px; }
.rep2 .rep-h2 th.rep-c5, .rep2 th.rep-c6 { min-width: 52px; }
.rep2 th.rep-pr, .rep2 th.rep-uh { min-width: 46px; }
.rep2 td.rep-actions { text-align: center; white-space: nowrap; padding: 4px 2px; }
.rep2 .rep-row-actions .btn-icon { width: 22px; height: 22px; border-radius: 6px; }
.rep2 .rep-row-actions .btn-icon svg { width: 12px; height: 12px; }
.rep2 td.num-i { text-align: right; font-family: var(--font-mono, Consolas, monospace); }
.rep2 td.blk { border-left: 2px solid var(--line-strong); }
.rep2 td.rep-pr { color: var(--green); }
.rep2 td.rep-uh { color: var(--red); }
.rep2 td .ri.ro { color: var(--text-3); cursor: default; }
.rep2 td .ri.ro-kassa { color: var(--accent); font-weight: 600; }
.rep2 td .ri::placeholder { color: var(--text-3); opacity: 0.65; }
.rep2 tbody td { height: 40px; }
.rep2 tbody tr.rep-idx td { border-top: 1px dashed var(--line); }
.rep2 tbody tr.rep-cm:hover td,
.rep2 tbody tr.rep-cm:hover + tr.rep-idx td { background: rgba(255, 255, 255, 0.02); }
.rep2 td.rep-itog,
.rep2 td.rep-itog-index {
  text-align: right; font-weight: 700; color: var(--text-1);
  font-family: var(--font-mono, Consolas, monospace);
}
.rep2 td.rep-actions { text-align: center; white-space: nowrap; }
.rep2 tfoot td {
  border-top: 2px solid var(--line-strong);
  background: #18202e;
  font-weight: 700; color: var(--text-1);
  font-family: var(--font-mono, Consolas, monospace);
}
.rep2 tfoot td.tot-com_persent_4,
.rep2 tfoot td.tot-index_persent_4,
.rep2 tfoot td.tot-itog,
.rep2 tfoot td.tot-itog_index { color: var(--accent); font-size: 12px; }
.rep2 tfoot td.tot-prihod { color: var(--green); }
.rep2 tfoot td.tot-uhod { color: var(--red); }
.rep-wrap .rep2 thead { position: sticky; top: 0; z-index: 6; }

/* ── REPORT DETAIL · COMMISSION / INDEX TABLE ── */
.rep-det { width: 100%; min-width: 1000px; border-collapse: collapse; }
.rep-det th, .rep-det td {
  border: 1px solid var(--line);
  padding: 6px; text-align: center; vertical-align: middle;
  white-space: nowrap;
}
.rep-det thead th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1px; color: var(--text-2);
  padding: 8px 6px;
}
.rep-det .rep-h1 th { background: #1e2738; color: var(--text-1); font-size: 11px; }
.rep-det .rep-h1 th.grp { background: #18202e; color: #9fb0c9; font-size: 10px; font-weight: 600; }
.rep-det .rep-h1 th.rep-det-pr { color: var(--green); }
.rep-det .rep-h1 th.rep-det-uh { color: var(--red); }
.rep-det .rep-h2 th,
.rep-det .rep-h2 td {
  background: #18202e;
  color: #7b8aa2; font-size: 9px; font-weight: 500;
  font-family: var(--font-mono, Consolas, monospace);
  padding: 5px 3px; text-align: center;
  border-top: 1px solid var(--line-strong);
}
.rep-det .rep-h1 th.grp-cm { border-right: 2px solid var(--line-strong); }
.rep-det .rep-h1 th.grp-idx,
.rep-det .rep-h3 th { border-left: 2px solid var(--line-strong); }
.rep-det .rep-h3 th {
  background: #18202e;
  color: #9fb0c9; font-size: 10px; font-weight: 600;
  border-top: 1px solid var(--line-strong);
}
.rep-det .rep-h4 th {
  background: #18202e;
  color: #7b8aa2; font-size: 9px; font-weight: 500;
  font-family: var(--font-mono, Consolas, monospace);
  padding: 5px 3px; text-align: center;
}
.rep-det th.blk,
.rep-det td.blk { border-left: 2px solid var(--line-strong); }
.rep-det td.rep-idx { color: var(--text-3); width: 36px; }
.rep-det tbody td { font-family: var(--font-mono, Consolas, monospace); font-size: 12px; }
.rep-det tbody tr.rep-det-cm td { background: var(--bg-1); }
.rep-det tbody tr.rep-det-cm:hover td { background: rgba(255, 255, 255, 0.02); }
.rep-det tbody tr.rep-det-cm td strong { color: var(--text-1); }
.rep-det tbody tr.rep-det-idx td {
  border-top: 1px dashed var(--line);
  color: var(--text-2);
}
.rep-det tbody tr.rep-det-idx td:first-child { border-left: 2px solid var(--line-strong); }
.rep-det td.rep-det-pr { color: var(--green); font-weight: 600; }
.rep-det td.rep-det-uh { color: var(--red); font-weight: 600; }
.rep-det td.rep-det-itog { font-weight: 700; color: var(--text-1); }

/* ── REPORT EDITOR · TOOLBAR ── */
.rep-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-head-actions .btn { padding: 6px 12px; }
.rep-head-actions .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

.rep-toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(9, 12, 20, 0.86);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rep-tb-group { display: flex; flex-direction: column; gap: 5px; }
.rep-tb-group label {
  font-size: 10px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.rep-tb-group .form-input { height: 32px; min-width: 150px; font-size: 12px; }
.rep-tb-group input[type="date"].form-input { min-width: 138px; }
.rep-tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }

/* ── REPORT EDITOR · PERCENT RULES GRID ── */
.pct-grid2 {
  display: flex; flex-direction: column; gap: 0;
  max-width: 620px; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.pct-grid2-head,
.pct-row2 {
  display: grid; grid-template-columns: 1.4fr repeat(4, 0.8fr);
  align-items: center; gap: 6px; padding: 6px 10px;
}
.pct-grid2-head {
  background: rgba(79, 139, 255, 0.10);
  font-size: 10px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--line);
}
.pct-row2 { border-bottom: 1px solid var(--line); }
.pct-row2:last-child { border-bottom: none; }
.pct-row2:hover { background: rgba(79, 139, 255, 0.04); }
.pct-grid2 .pct-name { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.3px; }
.pct-grid2 .pct-inp { width: 100%; height: 30px !important; padding: 4px 8px; text-align: right; }

/* ── REPORT EDITOR · LIVE SUMMARY ── */
.rep-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.rep-sum-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.rep-sum-card span {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-3);
}
.rep-sum-card b {
  font-size: 17px; font-weight: 800; color: var(--text-1);
  font-family: var(--font-mono, Consolas, monospace);
}
.rep-sum-acc { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.07); }
.rep-sum-acc b { color: var(--green); }
.rep-sum-hero { border-color: rgba(79, 139, 255, 0.5); background: var(--accent-dim); }
.rep-sum-hero b { color: var(--accent); font-size: 20px; }


/* ── SLOTS ── */
.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.slot-cell {
  border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; cursor: default;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-1); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.slot-cell[data-slot-id] { cursor: pointer; }
.slot-cell[data-slot-id]:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.slot-num { font-size: 15px; font-weight: 800; }
.slot-val { font-size: 11px; color: var(--text-2); }

.slot-legend { gap: 18px; }
.slot-legend-item { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* ── SLOT MATRIX ── */
.slot-matrix { overflow-x: auto; max-width: 100%; }
.slot-matrix table { width: 100%; border-collapse: collapse; min-width: 420px; }
.slot-matrix th {
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 8px 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); text-transform: uppercase; letter-spacing: .04em;
}
.slot-matrix td {
  border: 1px solid var(--line); padding: 6px; text-align: center;
  background: var(--bg-1);
}
.slot-matrix td.slot-empty { background: transparent; }
.slot-matrix .slot-cell {
  padding: 8px 10px; min-height: 52px; justify-content: center; align-items: center;
}
.slot-matrix .slot-num { font-size: 13px; }
.slot-matrix .slot-val { font-size: 10px; line-height: 1.2; }
.slot-op {
  font-size: 10px; line-height: 1.2; font-weight: 600;
  color: var(--text-1); background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-sm); padding: 2px 6px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.st-total td { font-weight: 700; color: var(--text-1); background: rgba(79, 139, 255, 0.08); }
.st-total td:first-child { text-align: right; }

/* ── SIM-КАРТЫ: блоки отделов и таблиц СМ ── */
.dept-block { margin-bottom: 22px; }
.dept-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.dept-head h4 { font-size: 16px; font-weight: 800; color: var(--text-1); margin: 0; }
.st-card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; margin-bottom: 14px; background: var(--bg-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.st-card.st-unassigned { border-style: dashed; }
.st-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.st-head strong { font-size: 13px; color: var(--text-1); }
.st-total { font-size: 12px; color: var(--text-3); }
.st-card .btn-sm { margin-top: 8px; }

/* ── SLOTS: цветовые статусы ── */
.slot-cell.slot-free { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.35); }
.slot-cell.slot-occ { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); }
.slot-cell.slot-video { background: rgba(251, 191, 36, 0.09); border-color: rgba(251, 191, 36, 0.4); }
.slot-cell.slot-dept { background: rgba(79, 139, 255, 0.08); border-color: rgba(79, 139, 255, 0.35); }

/* ── SLOTS UNIFIED MATRIX ── */
.slots-unified-wrap { overflow-x: auto; max-width: 100%; }
.slots-unified { width: 100%; border-collapse: collapse; min-width: 560px; }
.slots-unified th {
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 8px 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); text-transform: uppercase; letter-spacing: .04em;
}
.slots-unified td { border: 1px solid var(--line); padding: 0; text-align: center; }
.slots-unified .slots-account { background: var(--bg-2); padding: 12px; vertical-align: middle; }
.slots-unified .slots-account-name { font-weight: 700; color: var(--text-1); font-size: 13px; }
.slots-unified .slots-account-meta { font-size: 11px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; }
.slots-unified .slots-row-num {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  background: var(--bg-2); width: 36px;
}
.slots-unified .slots-cell { min-height: 34px; padding: 4px 8px; }
.slots-unified .slots-cell .slots-val { font-size: 11px; font-weight: 600; }
.slots-unified .slots-cell.cell-occupied {
  background: linear-gradient(180deg, #333a47 0%, #232831 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.slots-unified .slots-cell.cell-occupied .slots-occ-label {
  font-size: 11px; font-weight: 700; color: #e8ecf4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 180px;
}
.slots-unified .slots-cell.cell-free { background: rgba(52, 211, 153, 0.16); color: #5eead4; }
.slots-unified .slots-cell.cell-unavailable { background: rgba(248, 113, 113, 0.24); color: #fecaca; }
.slots-unified .slots-cell.cell-video { background: rgba(251, 191, 36, 0.2); color: #fde68a; }
.slots-unified .slots-cell.cell-missing { background: var(--bg-2); }
.legend-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 4px;
  margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line);
}
.legend-swatch.sw-occupied { background: linear-gradient(180deg, #333a47, #232831); }
.legend-swatch.sw-free { background: var(--green); }
.legend-swatch.sw-unavailable { background: var(--red); }
.legend-swatch.sw-video { background: var(--yellow); }

/* ── SLOTS EDITOR TABS ── */
.slot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.slot-tab {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--text-2); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .16s;
}
.slot-tab:hover { color: var(--text-1); border-color: var(--line-strong); transform: translateY(-1px); }
.slot-tab.active { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px var(--accent-glow); }
.slots-unified.is-editable .slots-cell.cell-editable { cursor: pointer; }
.slots-unified.is-editable .slots-cell.cell-editable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.slot-edit-card:hover { transform: translateY(-3px) scale(1.01); }

/* ── SLOTS: inline-редактирование названия слота ── */
.slots-unified .slots-cell .slots-custom-label { color: var(--text-1); }
.slots-unified .slots-cell.cell-dirty { outline: 2px solid var(--yellow); outline-offset: -2px; }
.slots-unified .slots-cell.cell-inline-editing { padding: 2px; }
.slot-inline-input {
  width: 100%; min-width: 110px; box-sizing: border-box;
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--accent); border-radius: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  padding: 3px 6px; resize: vertical; min-height: 22px;
  font-family: inherit;
}
.slot-inline-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.slot-inline-editor { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.slot-inline-status {
  width: 100%; box-sizing: border-box;
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 11px; font-weight: 600; padding: 3px 6px;
  font-family: inherit; cursor: pointer;
}
.slot-inline-status:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.slot-save-bar { gap: 10px; flex-wrap: wrap; }
.slot-save-bar .hint { color: var(--yellow); font-weight: 600; }

/* ── CHECKBOX LABEL ── */
.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
.chk input { accent-color: var(--accent); }

/* ── SLOT OPERATOR TABLE ── */
.slot-table .slot-operator { min-width: 160px; }

/* ── SLOT ALLOCATION ── */
.alloc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.alloc-pool-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.alloc-pool-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.alloc-pool-head {
  display: flex; justify-content: space-between; align-items: center;
  border-left: 4px solid var(--accent); padding-left: 12px; margin-bottom: 8px;
}
.alloc-pool-label { font-weight: 700; color: var(--text-1); font-size: 15px; }
.alloc-pool-total { font-size: 13px; color: var(--text-2); font-weight: 600; }
.alloc-pool-metric { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.alloc-pool-depts { display: flex; flex-direction: column; gap: 10px; }
.alloc-dept-row { display: flex; align-items: center; gap: 10px; }
.alloc-dept-name { min-width: 80px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.alloc-dept-bar { flex: 1; height: 10px; background: var(--bg-1); border-radius: 6px; overflow: hidden; }
.alloc-dept-fill { display: block; height: 100%; border-radius: 6px; transition: width .3s ease; }
.alloc-dept-pct { min-width: 48px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-1); }
.alloc-dept-slots { min-width: 60px; text-align: right; font-size: 13px; color: var(--text-2); }

/* ── IT SIM: УЧЕТ SIM-КАРТ СМ ── */
.sim-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.sim-hub-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); transition: border-color .2s, transform .2s, box-shadow .2s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.sim-hub-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.sim-hub-head { display: flex; flex-direction: column; gap: 4px; }
.sim-hub-head strong { font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.35; }
.sim-hub-dept { font-size: 12px; color: var(--text-3); }
.sim-hub-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sim-hub-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sim-hub-val { font-size: 20px; font-weight: 800; color: var(--text-1); }
.sim-hub-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 700; }
.sim-hub-card .btn { align-self: flex-start; }

.sim-it-table { min-width: 0; width: 100%; table-layout: fixed; border-collapse: collapse; }
.sim-it-table th { padding: 7px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; white-space: normal; line-height: 1.2; overflow: hidden; vertical-align: middle; text-transform: uppercase; }
.sim-it-table td { padding: 5px 5px; overflow: hidden; vertical-align: middle; }
.sim-it-table th, .sim-it-table td { border: 1px solid var(--line); }
.sim-it-table .sim-idx, .sim-it-table .sim-days-cell, .sim-it-table td:nth-child(10) { text-align: center; }
.sim-it-table th:nth-child(1), .sim-it-table td:nth-child(1) { width: 3%; }
.sim-it-table th:nth-child(2), .sim-it-table td:nth-child(2) { width: calc(11%); }
.sim-it-table th:nth-child(3), .sim-it-table td:nth-child(3) { width: 9%; }
.sim-it-table th:nth-child(4), .sim-it-table td:nth-child(4) { width: 14%; }
.sim-it-table th:nth-child(5), .sim-it-table td:nth-child(5) { width: 11%; }
.sim-it-table th:nth-child(6), .sim-it-table td:nth-child(6) { width: 7.5%; }
.sim-it-table th:nth-child(7), .sim-it-table td:nth-child(7) { width: 7%; }
.sim-it-table th:nth-child(8), .sim-it-table td:nth-child(8) { width: 10%; }
.sim-it-table th:nth-child(9), .sim-it-table td:nth-child(9) { width: 9%; }
.sim-it-table th:nth-child(10), .sim-it-table td:nth-child(10) { width: 4%; }
.sim-it-table th:nth-child(11), .sim-it-table td:nth-child(11) { width: 5%; }
.sim-it-table th:nth-child(12), .sim-it-table td:nth-child(12) { width: 5%; }
.sim-it-table th:nth-child(13), .sim-it-table td:nth-child(13) { width: 3%; }
.sim-it-table .sim-idx { text-align: center; color: var(--text-3); font-weight: 700; }
.sim-it-table .ri { min-width: 0; width: 100%; height: 28px; padding: 4px 8px; box-sizing: border-box; }
.sim-it-table td select.ri { padding-right: 18px; font-size: 11px; }
.sim-it-table td select.ri option { font-size: 11px; }
.sim-num { display: flex; align-items: center; gap: 0; }
.sim-num input.ri { min-width: 0; }
.sim-num-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 5px;
  color: var(--text-2); background: rgba(255, 255, 255, 0.04);
  transition: border-color .16s, color .16s, background .16s;
}
.sim-num-wa:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.sim-num-wa svg { width: 10px; height: 10px; stroke: currentColor; fill: none; }
.sim-it-table .sim-date { min-width: 0; }
.sim-days-cell { text-align: center; }
.sim-days { font-weight: 700; color: var(--text-2); }
.sim-days-warn { color: var(--red); }
.sim-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; flex-wrap: wrap;
}
.sim-actions .btn-success { box-shadow: 0 6px 20px rgba(52, 211, 153, 0.18); }

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeUp .3s ease; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1440px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 20px 24px; }
}

@media (max-width: 1080px) {
  .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 16px; gap: 10px; }
  .page-title { font-size: 16px; }
}

@media (max-height: 760px) {
  .topbar { height: 52px; min-height: 52px; padding: 0 14px; }
  .content { padding-top: 16px; }
  .kpi-card { padding: 14px 16px; }
  .kpi-icon { width: 38px; height: 38px; }
  .kpi-val { font-size: 20px; }
  .chart-card { padding: 14px; }
  .login-left { padding: 32px 28px; }
  .login-right { padding: 26px 32px; }
  .login-container { min-height: auto; }
  .brand-icon { width: 56px; height: 56px; margin-bottom: 14px; }
  .login-brand h1 { font-size: 24px; }
  .login-hint { margin-bottom: 18px; }
  .field { margin-bottom: 13px; }
}

/* ═══════════════════════════════════════
   ТЗ 09.09.2026 (v6): ZOOM-подгонка БЕЗ пустых полей.
   Пользователь: «оставить zoom, но убрать огромные пустые поля вокруг
   сжатой таблицы». Причина пустот в v5: transform: scale на обёртке не
   сжимает layout-высоту карточки → под таблицей оставалась «дыра».
   Возврат к per-table zoom через fitMobileTables() (fr.js): таблица
   меряется по НАТУРАЛЬНОЙ ширине и получает inline zoom
   (cardWidth ÷ naturalWidth). CSS zoom сжимает layout и по ширине, и по
   высоте → ни боковых «дыр», ни пустот снизу. iOS (нет CSS zoom):
   transform: scale + компенсация бокса обёртки (width/height = нат × f),
   origin 0 0 — таблица встаёт ровно на 100% карточки.
   Редактор (.rep-wrap) — свой scale-блок ниже, НЕ трогаем.
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  .main, .content, #content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* ТЗ 07.09 (auto-zoom): все интерактивные поля ввода ≥16px —
     iOS/Android не масштабирует страницу при фокусе на инпуте. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  .content { padding: 18px 14px; }
  .sidebar {
    position: fixed; left: -280px; z-index: 100;
    transition: left .3s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open { left: 0; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5); }
  .sidebar-close { display: block; }
  .burger { display: flex; }
  /* ТЗ 09.09.2026 (v13): метрики на мобильных — 2 колонки (~50% каждая),
     без горизонтального скролла */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .search-box { display: none; }
  .login-left { display: none; }
  .login-container { width: 100%; max-width: 420px; }
  .login-right { padding: 40px 32px; }

  /* ── ALL non-report tables: per-table zoom fit (ТЗ 09.09, v6) ──
     The wrapper stays 100% of the card (no fixed width, no transform
     scale in CSS), so there are NO holes either on the sides or below.
     fitMobileTables() applies an inline zoom to each table (on iOS: scale
     + box compensation, origin 0 0) so it lands exactly on 100% card.  */

  /* «Дата регистрации» в рейтингах скрыта (класс ставит fr.js) */
  #rtBody .col-date, .table-wrap.rating-tbl .col-date { display: none !important; }

  /* «Подробнее» в рейтинге старших менеджеров: колонка Действий не должна
     схлопываться при авто-масштабе таблицы (fitMobileTables). */
  table.rat-sen td:last-child { min-width: 84px; }
  table.rat-sen .senior-detail { font-size: 11px; font-weight: 600; padding: 7px 10px; }

  .table-wrap:not(.rep-wrap),
  .slot-matrix,
  .slots-unified-wrap,
  .sim-it-wrap,
  [class*="table-scroll"],
  [class*="scroll-x"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: left;
  }
  .table-wrap:not(.rep-wrap) > table,
  .slot-matrix > table,
  .slots-unified-wrap > table,
  .sim-it-wrap > table,
  [class*="table-scroll"] > table,
  [class*="scroll-x"] > table {
    table-layout: auto;
  }

  /* ── Report editor form (.rep-wrap/.rep2) — UNTOUCHED, keeps its own
     scale rules exactly as before (works perfectly per the ТЗ). */
  .rep-wrap {
    width: 1200px !important;
    max-width: none !important;
    overflow: hidden !important;
    transform: scale(0.28);
    transform-origin: 0 0;
  }
  @supports (transform: scale(calc(100vw / 1300))) {
    .rep-wrap {
      width: 1300px !important;
      transform: scale(calc(100vw / 1300));
      transform-origin: 0 0;
    }
  }
  .rep-wrap > .rep2 { width: 1200px !important; min-width: 1200px; }
  /* the report editor must show its full height, not a short scroll window */
  .rep-wrap { max-height: none !important; }

  .table-wrap th, .table-wrap td,
  .slot-matrix th, .slot-matrix td,
  .slots-unified-wrap th, .slots-unified-wrap td,
  .sim-it-wrap th, .sim-it-wrap td,
  [class*="table-scroll"] th, [class*="table-scroll"] td,
  [class*="scroll-x"] th, [class*="scroll-x"] td {
    white-space: nowrap;
  }

  /* dashboards become single-column so cards keep the viewport width */
  .chart-grid { grid-template-columns: 1fr; gap: 14px; }
  .chart-grid > .chart-card { min-width: 0; }
  /* free space for the table: thin the card's side padding on phones */
  .chart-card { padding: 14px 8px; }
}

/* ═══════════════════════════════════════
   ТЗ 09.09.2026 (v8): STATIC zoom + компенсация ширины (width = 100% / zoom).
   Пользователь: «оставить zoom, полностью убрать пустые поля по бокам;
   контейнеру таблицы задать width = 100% / zoom (0.72 → 138.8%,
   0.65 → 153.8%)». Класс .table-container в проекте отсутствует — правила
   применены к реальным обёрткам (.table-wrap:not(.rep-wrap), .slot-matrix,
   .slots-unified-wrap, .sim-it-wrap, [class*=table-scroll], [class*=scroll-x]).
   CSS zoom сжимает layout и по ширине, и по высоте → нет ни боковых, ни
   нижних «дыр»; ширина 100%/zoom возвращает визуал ровно на 100% карточки.
   Ограничено @supports (zoom: 1): там, где zoom нет (iOS Safari), работает
   динамический fitMobileTables() (transform + компенсация бокса, origin 0 0).
   Шрифты заданы С ПОПРАВКОЙ на сжатие (÷zoom), чтобы на экране рендерилось
   ~11–11.5px («читаемыми»), как задумано.
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  /* 1. Карточка на 100% ширины экрана без лишних внутренних зазоров
     и БЕЗ горизонтального скролла (в проекте классы .card/.dashboard-card
     не используются — это .chart-grid > .chart-card) */
  .chart-grid > .chart-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }
  /* v67: НЕ заворачивать в @supports (zoom:1) — Safari/iPhone может не
     распознать zoom как supported и тир отключается целиком (таблицы на
     телефоне выглядят «по-другому»). Свойство zoom просто игнорируется в
     браузерах без поддержки, а JS fitMobileTables подстроит такие таблицы
     через transform: scale. */
.table-wrap:not(.rep-wrap),
  .slot-matrix,
  .slots-unified-wrap,
  .sim-it-wrap,
  [class*="table-scroll"],
  [class*="scroll-x"] {
      /* v68: БЕЗ CSS zoom — нестандартный zoom на iPhone (Safari) не
        применяется, из-за чего на реальном телефоне масштаб пропадал.
        Теперь таблицы масштабирует только fitMobileTables() через
        transform: scale (работает на всех браузерах). БЕЗ !important —
        иначе inline-стили из fitMobileTables (width/overflow) не смогут
        перебить CSS и таблица обрезается справа на реальном телефоне. */
      width: 100%; /* v17c: НЕ 138.8% — распирало обёртку шире экрана
        и последние колонки прятались за правой кромкой (overflow-x:hidden);
        fitMobileTables() сжимает таблицу точно под 100% обёртки. */
      max-width: 100%;
      margin: 0;
      overflow-x: hidden; /* никакой полосы прокрутки у контейнера */
    }
    .table-wrap:not(.rep-wrap) > table,
    .slot-matrix > table,
    .slots-unified-wrap > table,
    .sim-it-wrap > table,
    [class*="table-scroll"] > table,
    [class*="scroll-x"] > table {
      width: 100% !important;
      table-layout: auto !important; /* v16: НЕ fixed — fixed делал колонки
        равными, длинные ФИО вылезали поверх соседних колонок (наложение).
        auto + JS fitMobileTables() даёт пропорциональные колонки по контенту. */
      border-collapse: collapse;
    }
    .table-wrap:not(.rep-wrap) th,
    .slot-matrix th,
    .slots-unified-wrap th,
    .sim-it-wrap th,
    [class*="table-scroll"] th,
    [class*="scroll-x"] th {
      padding: 13px 16px !important; /* ДОП 66: как на ПК (th 13px 16px) */
      font-size: 16px !important; /* ≈9.6px рендер после zoom 0.60 */
      white-space: nowrap !important;
    }
    .table-wrap:not(.rep-wrap) td,
    .slot-matrix td,
    .slots-unified-wrap td,
    .sim-it-wrap td,
    [class*="table-scroll"] td,
    [class*="scroll-x"] td {
      padding: 12px 16px !important; /* ДОП 66: как на ПК (td 12px 16px) */
      font-size: 16px !important; /* ≈9.6px рендер после zoom 0.60 */
      line-height: 1.2;
      word-break: keep-all !important;
      overflow-wrap: break-word !important;
    }
    /* v17d: инпуты в таблицах масштабируются вместе с zoom-блоком,
       не «жимаются» поперёк (со своей min-width). Поля становятся частью
       общего масштаба — как и ячейки th/td. */
    .table-wrap:not(.rep-wrap) td .ri,
    .slot-matrix td .ri,
    .slots-unified-wrap td .ri,
    .sim-it-wrap td .ri,
    [class*="table-scroll"] td .ri,
    [class*="scroll-x"] td .ri {
      min-width: 0 !important;
      max-width: 100% !important;
      padding: 3px 4px !important;
      font-size: 16px !important; /* v17e: ТЗ — инпуты ≥16px, чтобы iOS не зум-ит при фокусе */
    }
  }

/* Для узких экранов (≤ 360px) */
@media (max-width: 360px) {
  /* v68: БЕЗ zoom и БЕЗ !important — масштаб только через fitMobileTables
     (transform: scale), обёртке под той же логикой что и в 480-тире. */
  .table-wrap:not(.rep-wrap),
    .slot-matrix,
    .slots-unified-wrap,
    .sim-it-wrap,
    [class*="table-scroll"],
    [class*="scroll-x"] {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    .table-wrap:not(.rep-wrap) th,
    .slot-matrix th,
    .slots-unified-wrap th,
    .sim-it-wrap th,
    [class*="table-scroll"] th,
    [class*="scroll-x"] th {
      font-size: 17.5px !important; /* рендер зависит от JS-масштаба f */
    }
    .table-wrap:not(.rep-wrap) td,
    .slot-matrix td,
    .slots-unified-wrap td,
    .sim-it-wrap td,
    [class*="table-scroll"] td,
    [class*="scroll-x"] td {
      font-size: 17.5px !important; /* рендер зависит от JS-масштаба f */
    }
    /* v17e: все интерактивные поля ≥16px — нет авто-зума iOS/Android при фокусе */
    .table-wrap:not(.rep-wrap) td .ri,
    .slot-matrix td .ri,
    .slots-unified-wrap td .ri,
    .sim-it-wrap td .ri,
    [class*="table-scroll"] td .ri,
    [class*="scroll-x"] td .ri {
      min-width: 0 !important;
      max-width: 100% !important;
      padding: 3px 4px !important;
      font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════
   ТЗ 09.09.2026 (v14): «Строки отчёта» — растяжение на 100% контейнера.
   Команда: «блок „Строки отчёта“ на мобильных автоматически растягивается
   на 100% ширины экрана/родителя: контейнеру 100% без фикс-пикселей, таблице
   и строкам — растяжение на всю доступную ширину, колонки переносят текст /
   адаптируют ширину, справа нет пустоты и нет горизонтального скролла».
   ОТМЕНЯЕТ v12 (PC-map width:1200px + zoom:0.31/0.3 — сначала просили «как
   на ПК», теперь просят плавный компакт): rep-таблицы (.rep-table внутри
   .table-wrap: .rep-det „Детали отчёта“, attracted/passive/bonus) идут
   АДАПТИВНО. Редактор .rep-wrap/.rep2 (форма «Создать отчёт») НЕ трогаем
   (ДОП 45) — у него свой scale-блок (1200px + transform scale).
   Селектор (:has + :not) специфичнее общих v8-zoom правил → zoom сброшен
   в 1, компенсация ширины снята, шрифты возвращены с зоом-компенсированных
   16/17.5px на компактные (thead 9px / td 10px, как в старом ≤460 блоке).
   Длинные ФИО/города переносятся (white-space normal, word-break normal
   вместо keep-all из v10). Только @supports (zoom: 1); iOS — dynamic
   fitMobileTables() (transform + компенсация бокса, origin 0 0).
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  @supports (zoom: 1) {
    .table-wrap:has(.rep-table):not(.rep-wrap) {
      width: 100% !important;   /* контейнер — на весь родитель, без фикс-px */
      max-width: none !important;
      zoom: 1 !important;       /* сброс общего v8-zoom (0.72/0.65) */
      margin: 0 !important;
      overflow-x: hidden !important;
    }
    .table-wrap:has(.rep-table):not(.rep-wrap) > table {
      width: 100% !important;   /* таблица и все строки — на всю ширину */
      table-layout: auto !important;
      border-collapse: collapse;
    }
    .table-wrap:has(.rep-table):not(.rep-wrap) th,
    .table-wrap:has(.rep-table):not(.rep-wrap) td {
      white-space: normal !important;  /* перенос текста внутри ячеек */
      word-break: normal !important;   /* вместо word-break: keep-all из v10 */
      overflow-wrap: break-word !important;
      padding: 3px 4px !important;
    }
    .table-wrap:has(.rep-table):not(.rep-wrap) thead th {
      font-size: 9px !important;
    }
    .table-wrap:has(.rep-table):not(.rep-wrap) td {
      font-size: 10px !important;
    }
  }

  /* v14b: прямое правило на самой таблице — работает и в браузерах БЕЗ :has
     (старых): сама rep-таблица занимает 100% контейнера (min-width:1000px у
     .rep-det сбрасывается), текст переносится → контейнер не переполняется и
     горизонтальный скроллбар не появляется. Редактор .rep2 исключён. */
  table.rep-table:not(.rep2) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;   /* сброс min-width:1000px (база .rep-det) */
    table-layout: auto !important;
    border-collapse: collapse;
  }
  table.rep-table:not(.rep2) th,
  table.rep-table:not(.rep2) td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    padding: 3px 4px !important;
  }
  table.rep-table:not(.rep2) thead th { font-size: 9px !important; }
  table.rep-table:not(.rep2) td { font-size: 10px !important; }

  /* Карточки, где лежат rep-таблицы, тоже прячут горизонтальный скроллбар */
  .chart-card:has(table.rep-table:not(.rep2)) {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}
/* v14: плавная ширина действует на всех ширинах ≤480, отдельный ≤360 не нужен */

/* ═══════════════════════════════════════
   v68b: «Руководительские бонусы» (.attracted-tbl) — PC-map на мобильных.
   ДОП 69 убрал CSS zoom 0.46/0.40/0.34 (на iPhone zoom не работает), но вместе
   с ним исчезла и ПК-ширина 920px → fitMobileTables() нечего сжимать
   (nat==ширине контейнера, f≈1) → таблица оставалась «флюидом» с переносами.
   Возвращаем ПК-ширину 920px + no-wrap БЕЗ zoom и БЕЗ @supports: теперь
   nat≈920, и fitMobileTables() сжимает её через transform: scale(avail/920) —
   единый эффект «PC-map» на всех браузерах, включая iPhone. Селекторы по
   специфичности равны/выше v14/v14b и идут ПОЗЖЕ — перекрывают флюид.
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
  .table-wrap:has(table.attracted-tbl):not(.rep-wrap) {
    width: auto;
    max-width: none;
    overflow: hidden;
  }
  .table-wrap:has(table.attracted-tbl):not(.rep-wrap) > table {
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse;
  }
  .table-wrap:has(table.attracted-tbl):not(.rep-wrap) th {
    white-space: nowrap !important;
    padding: 13px 16px !important;
    font-size: 11px !important;
  }
  .table-wrap:has(table.attracted-tbl):not(.rep-wrap) td {
    white-space: nowrap !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .topbar { padding: 0 16px; }
  .kanban-col { min-width: 240px; }
  .dept-actions { grid-template-columns: 1fr; }
  .content { padding: 16px 12px; }
  .kpi-card { padding: 12px 10px; }

  /* ТЗ 09.09.2026 (v13): шапка формы «Отчёт» — поля растянуты на width:100%;
     «Дата» и «Команда» — в один ряд (по 50%) для экономии пространства */
  .rep-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .rep-toolbar .rep-tb-group { width: auto; min-width: 0; }
  .rep-toolbar .rep-tb-group:nth-child(1),
  .rep-toolbar .rep-tb-group:nth-child(2) { flex: 1 1 0; width: 50%; min-width: 0; box-sizing: border-box; }
  .rep-toolbar .rep-tb-group:nth-child(3),
  .rep-toolbar .rep-tb-sep { flex: 1 1 100%; }
  .rep-tb-group .form-input,
  .rep-tb-group input[type="date"].form-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .rep-toolbar .rep-tb-group:nth-child(1) .form-input,
  .rep-toolbar .rep-tb-group:nth-child(2) .form-input,
  .rep-toolbar .rep-tb-group:nth-child(1) input[type="date"].form-input,
  .rep-toolbar .rep-tb-group:nth-child(2) input[type="date"].form-input {
    height: 36px !important;
    box-sizing: border-box;
    padding: 0px 5px;
    font-size: 12px;
  }
  .rep-toolbar .btn-sm { width: 100%; }
  .rep-tb-sep { width: auto; height: 1px; margin: 0; }

  /* панель ставок: на мобильных без 30%-лимита, на всю ширину (ТЗ 09.09 v15) */
  .pct-ref-card { width: 100%; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 390px) {
  /* ── «Создать отчёт» — компакт блоков ставок и полей (≤390px) ──
     Структура и кликабельность сохранены: правки только в отступах/шрифтах
     панели ставок (.pct-ref-card), тулбара и полей. Общий scale .rep-wrap
     (calc(100vw/1300)) НЕ трогаем — редактор остаётся как одобрен. */
  .pct-ref-tbl th, .pct-ref-tbl td { padding: 3px 4px; font-size: 10px; }
  .pct-badge { padding: 2px 5px; font-size: 10px; border-radius: 6px; }
  .rep-tb-group .form-input { height: 30px; min-width: 132px; font-size: 11px; }
  .rep-toolbar .btn-sm { padding: 4px 8px; font-size: 11px; }
  .rep2 td .ri { padding: 3px 4px; font-size: 10px; }
  .rep2 td select.ri { font-size: 10px; padding-right: 18px; }
  .rep2 tbody td { height: 30px; }
  .rep2 tfoot td { padding: 4px 3px; }
  .rep2 td textarea.ri[data-f="sity"] { min-width: 130px; font-size: 10px; }
}

@media (max-width: 600px) {
  .pct-ref-card { max-width: 100%; width: 100%; padding: 10px 8px; overflow-x: auto; }
  .rep-toolbar { padding: 10px; gap: 10px; }
}

/* ── REPORT TABLE · MOBILE ──
   The report table (.rep2) displays at its natural desktop width on mobile.
   Pinch-to-zoom (viewport user-scalable=yes) lets the user zoom in to read
   cells. No special mobile overrides — the table looks identical to desktop. */

/* ── REPORT EDITOR · FINAL POLISH ── */
.rep2 td .ri[type="number"]::-webkit-outer-spin-button,
.rep2 td .ri[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rep2 td .ri[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.rep-wrap .rep2 thead { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

.pct-grid2-head,
.pct-row2 { grid-template-columns: 1.4fr repeat(4, 0.8fr) 0.7fr; }
.pct-grid2 .pct-check { text-align: center; }
.pct-grid2 .pct-inp[data-pct="k"] { background: rgba(79, 139, 255, 0.08); border-color: rgba(79, 139, 255, 0.35); }
.pct-grid2 .pct-inp[data-pct="k"]:focus { background: rgba(79, 139, 255, 0.12); }
.pct-grid2 .pct-inp[type="number"]::-webkit-outer-spin-button,
.pct-grid2 .pct-inp[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-grid2 .pct-inp[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pct-grid2 .pct-sum {
  font-size: 12px; font-weight: 800; text-align: center;
  font-family: var(--font-mono, Consolas, monospace);
}
.pct-grid2 .pct-sum.ok { color: var(--green); }
.pct-grid2 .pct-sum.bad { color: var(--red); }

.rep-sum-idx { border-color: rgba(34, 211, 238, 0.35); background: rgba(34, 211, 238, 0.06); }
.rep-sum-idx b { color: var(--cyan); }
.rep-sum-kassa { border-color: rgba(79, 139, 255, 0.35); background: rgba(79, 139, 255, 0.06); }
.rep-sum-kassa b { color: var(--accent); }
.rep-sum-in { border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.10); }
.rep-sum-in b { color: var(--green); }
.rep-sum-out { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.10); }
.rep-sum-out b { color: var(--red); }
.rep2 tfoot td:first-child { text-align: left; padding-left: 12px; letter-spacing: 0.4px; text-transform: uppercase; font-size: 11px; }

/* ── REPORT DETAIL · PRIHOD / UHOD COLUMNS ── */
.rep-det th.rep-det-pr { color: var(--green); }
.rep-det th.rep-det-uh { color: var(--red); }
.rep-det td.rep-det-pr { color: var(--green); font-weight: 600; }
.rep-det td.rep-det-uh { color: var(--red); font-weight: 600; }

/* ── ПРИВЛЕЧЕННЫЙ КЛИЕНТ (40/10/50) ── */
.badge-attracted {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  color: #dcc8ff; background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
  vertical-align: middle;
}
.role-chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  color: var(--text-2); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  vertical-align: middle;
}

.metric-admin { background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.05)); border-color: rgba(56, 189, 248, 0.4); }
.metric-admin .metric-label { color: #8fd9fb; }
.metric-admin .metric-val { color: #b7e6fc; }
.metric-cash { background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.05)); border-color: rgba(52, 211, 153, 0.4); }
.metric-cash .metric-label { color: #86efac; }
.metric-cash .metric-val { color: #a7f3d0; }

.accrual-hero {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  padding: 16px 18px; margin-bottom: 12px;
  border-radius: var(--r); border: 1px solid rgba(79, 139, 255, 0.35);
  background: linear-gradient(135deg, rgba(79, 139, 255, 0.12), rgba(79, 139, 255, 0.04));
}
.accrual-hero span { font-size: 13px; font-weight: 700; color: var(--text-1); }
.accrual-hero b { font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; }
.accrual-hero em { font-style: normal; font-size: 12px; color: var(--text-3); }
.accrual-hero.accrual-zero { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.accrual-hero.accrual-zero b { color: var(--text-3); }
.accrual-hero.accrual-attr { border-color: rgba(168, 85, 247, 0.4); background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.04)); }
.accrual-hero.accrual-attr b { color: #c4a5fc; }

.attracted-tbl { min-width: 920px; }
.attracted-tbl td, .attracted-tbl th { white-space: nowrap; }
.attr-client td { background: var(--bg-2); font-size: 13px; }
.attr-meta { color: var(--text-3); font-weight: 400; margin-left: 10px; }
.attr-status {
  display: inline-block; margin-left: 12px; padding: 1px 9px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  border-radius: 999px; text-transform: uppercase;
  border: 1px solid;
}
.attr-status.status-ok { color: var(--green); background: var(--green-dim); border-color: rgba(52, 211, 153, 0.35); }
.attr-status.status-bad { color: var(--red); background: var(--red-dim); border-color: rgba(248, 113, 113, 0.35); }

/* Фиксированная таблица процентов */
.pct-ref-card {
    /* max-width: 30%; */
    padding: 10px;
}
.pct-ref-card .table-wrap { overflow: visible; background: none; border: none; backdrop-filter: none; }
.pct-ref-tbl { width: 100%; border-collapse: collapse; }
.pct-ref-tbl th, .pct-ref-tbl td { text-align: center; padding: 4px 6px; white-space: nowrap; }
.pct-ref-tbl th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-3); }
.pct-ref-tbl td { font-size: 11px; color: var(--text-2); }
.pct-ref-tbl td:first-child { text-align: left; font-weight: 700; color: var(--text-1); }

.pct-badge {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
  border: 1px solid;
}
.pct-badge.pct-blue { color: #6da5ff; background: rgba(79,139,255,0.14); border-color: rgba(79,139,255,0.35); }
.pct-badge.pct-green { color: var(--green); background: var(--green-dim); border-color: rgba(52,211,153,0.35); }
.pct-badge.pct-yellow { color: var(--yellow); background: var(--yellow-dim); border-color: rgba(251,191,36,0.35); }
.pct-badge.pct-red { color: var(--red); background: var(--red-dim); border-color: rgba(248,113,113,0.35); }

/* ═══ Light Theme ═══ */
[data-theme="light"] {
  --bg-0: #f0f2f5;
  --bg-1: rgba(255, 255, 255, 0.85);
  --bg-2: rgba(241, 243, 247, 0.92);
  --bg-3: rgba(227, 230, 236, 0.95);
  --bg-4: rgba(214, 219, 228, 1);
  --bg-body: #E8ECF1;
  --glass: rgba(0, 0, 0, 0.03);
  --glass-strong: rgba(0, 0, 0, 0.06);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);

  --accent: #3b76f2;
  --accent-2: #7c3aed;
  --accent-hover: #2563eb;
  --accent-dim: rgba(59, 118, 242, 0.10);
  --accent-glow: rgba(59, 118, 242, 0.20);

  --green: #16a34a;
  --green-dim: rgba(22, 163, 74, 0.10);
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.10);
  --yellow: #d97706;
  --yellow-dim: rgba(217, 119, 6, 0.10);
  --purple: #7c3aed;
  --purple-dim: rgba(124, 58, 237, 0.10);
  --cyan: #0891b2;
  --cyan-dim: rgba(8, 145, 178, 0.10);

  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6B7280;

  --topbar-bg: rgba(255, 255, 255, 0.95);

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Body: Light BG ── */
[data-theme="light"] body {
  background: var(--bg-body);
  background-attachment: fixed;
}

/* ── Sidebar: всегда тёмный ── */
[data-theme="light"] .sidebar {
  background: rgba(9, 12, 20, 0.92);
  border-right-color: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .sidebar .sidebar-head span { color: #eef2f9; }
[data-theme="light"] .sidebar .nav-link { color: rgba(255, 255, 255, 0.55); }
[data-theme="light"] .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
[data-theme="light"] .sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(79, 139, 255, 0.22) 0%, rgba(139, 92, 246, 0.12) 100%);
  border-color: rgba(79, 139, 255, 0.32);
  color: #fff;
}
[data-theme="light"] .sidebar .user-name,
[data-theme="light"] .sidebar .user-role { color: #fff; }
[data-theme="light"] .sidebar .user-avatar { color: #fff; }
[data-theme="light"] .sidebar .sidebar-foot { border-top-color: rgba(255, 255, 255, 0.06); }

/* ── Login: Light ── */
[data-theme="light"] .login-page { background: #f0f2f5; }
[data-theme="light"] .login-container { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .login-right { background: #fff; }
[data-theme="light"] .login-right h2 { color: #111827; }
[data-theme="light"] .login-right p { color: #6b7280; }
[data-theme="light"] .login-hint { color: #9ca3af; }
[data-theme="light"] .form-input { background: #f9fafb; border-color: #d1d5db; color: #111827; }
[data-theme="light"] .form-input:focus { background: #fff; border-color: var(--accent); }
[data-theme="light"] .form-group label { color: #4b5563; }
[data-theme="light"] select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); }
[data-theme="light"] select.form-input option { background: #fff; color: #111827; }
[data-theme="light"] .btn-full { background: var(--accent-grad); color: #fff; }
[data-theme="light"] .login-error { color: #dc2626; background: rgba(220, 38, 38, 0.08); }

/* ── Topbar: Light ── */
[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.96); border-bottom-color: #D1D5DB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .page-title { color: #111827; }

/* ── Content background ── */
[data-theme="light"] .content { background: transparent; }

/* ── KPI Cards: Light ── */
[data-theme="light"] .kpi-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
[data-theme="light"] .kpi-card:hover { border-color: #9CA3AF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
[data-theme="light"] .kpi-val { color: #111827; }
[data-theme="light"] .kpi-label { color: #6B7280; }
[data-theme="light"] .kpi-badge.flat { background: #F3F4F6; color: #4B5563; }

/* ── Chart Cards: Light ── */
[data-theme="light"] .chart-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
[data-theme="light"] .chart-head h4 { color: #111827; }

/* ── Tables: Light ── */
[data-theme="light"] .table-wrap { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .table-wrap th { background: #F3F4F6; color: #1F2937; border-bottom: 2px solid #D1D5DB; font-weight: 700; }
[data-theme="light"] .table-wrap td { color: #1F2937; border-bottom-color: #E5E7EB; }
[data-theme="light"] .table-wrap tbody tr:hover { background: rgba(59, 118, 242, 0.05); }
[data-theme="light"] .table-wrap .row-total td { background: rgba(59, 118, 242, 0.06); color: #111827; border-top-color: var(--accent); font-weight: 700; }
[data-theme="light"] .table-search { background: #F9FAFB; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .table-search::placeholder { color: #6B7280; }

/* ── Inputs: Light ── */
[data-theme="light"] .form-input { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .form-input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
[data-theme="light"] .form-input::placeholder { color: #6B7280; }
[data-theme="light"] .form-group label { color: #374151; font-weight: 600; }
[data-theme="light"] select.form-input option { background: #fff; color: #111827; }

/* ── Table editable inputs: Light ── */
[data-theme="light"] .table-wrap td .ri { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .table-wrap td .ri:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
[data-theme="light"] .table-wrap td select.ri option { background: #fff; color: #111827; }

/* ── Buttons: Light ── */
[data-theme="light"] .btn-ghost { background: #F1F3F4; border-color: #D1D5DB; color: #374151; }
[data-theme="light"] .btn-ghost:hover { background: #E5E7EB; border-color: #9CA3AF; color: #111827; }
[data-theme="light"] .btn-danger { background: rgba(220, 38, 38, 0.08); color: #B91C1C; border-color: rgba(220, 38, 38, 0.25); }
[data-theme="light"] .btn-danger:hover { background: rgba(220, 38, 38, 0.14); }
[data-theme="light"] .btn-success { background: rgba(22, 163, 74, 0.08); color: #15803D; border-color: rgba(22, 163, 74, 0.25); }
[data-theme="light"] .btn-success:hover { background: rgba(22, 163, 74, 0.14); }
[data-theme="light"] .btn-icon { background: #F1F3F4; border-color: #D1D5DB; color: #374151; }
[data-theme="light"] .btn-icon:hover { background: #E5E7EB; color: #111827; }

/* ── Modal: Light ── */
[data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.4); }
[data-theme="light"] .modal { background: #fff; border-color: #D1D5DB; }
[data-theme="light"] .modal-head { border-bottom-color: #E5E7EB; }
[data-theme="light"] .modal-head h3 { color: #111827; }
[data-theme="light"] .modal-x { color: #6B7280; }
[data-theme="light"] .modal-x:hover { background: #F3F4F6; color: #111827; }
[data-theme="light"] .modal-body { color: #1F2937; }
[data-theme="light"] .modal-body .form-group label { color: #374151; }
[data-theme="light"] .modal-body .form-input { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .modal-foot { border-top-color: #E5E7EB; }

/* ── Toast: Light ── */
[data-theme="light"] .toast { background: #fff; border-color: #D1D5DB; color: #111827; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }

/* ── Search Box: Light ── */
[data-theme="light"] .search-box { background: #F1F3F4; border-color: #D1D5DB; }
[data-theme="light"] .search-box input { color: #111827; }
[data-theme="light"] .search-box input::placeholder { color: #6B7280; }

/* ── Settings: Light ── */
[data-theme="light"] .settings-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .settings-card h4 { color: #111827; }
[data-theme="light"] .settings-row { border-bottom-color: #E5E7EB; }
[data-theme="light"] .settings-row label { color: #374151; }

/* ── Dept Cards: Light ── */
[data-theme="light"] .dept-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .dept-card:hover { border-color: #9CA3AF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
[data-theme="light"] .dept-card h4 { color: #111827; }
[data-theme="light"] .dept-card p { color: #6B7280; }

/* ── Filter Bar: Light ── */
[data-theme="light"] .filter-label { color: #374151; }
[data-theme="light"] .filter-sep { color: #6B7280; }
[data-theme="light"] .filter-bar .form-input { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }

/* ── Pct Grid: Light ── */
[data-theme="light"] .pct-cell { background: #F1F3F4; border-color: #D1D5DB; }
[data-theme="light"] .pct-cell label { color: #374151; }
[data-theme="light"] .pct-grid2 { border-color: #D1D5DB; }
[data-theme="light"] .pct-grid2-head { background: rgba(59, 118, 242, 0.06); border-bottom-color: #D1D5DB; color: #475569; }
[data-theme="light"] .pct-row2 { border-bottom-color: #E5E7EB; }
[data-theme="light"] .pct-row2:hover { background: rgba(59, 118, 242, 0.04); }
[data-theme="light"] .pct-grid2 .pct-name { color: #3B76F2; }

/* ── Stat Cards: Light ── */
[data-theme="light"] .stat-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .stat-card.stat-total { background: linear-gradient(135deg, rgba(59, 118, 242, 0.08), rgba(124, 58, 237, 0.04)), #fff; border-color: rgba(59, 118, 242, 0.3); }
[data-theme="light"] .stat-card.stat-passive { background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0.03)), #fff; border-color: rgba(22, 163, 74, 0.3); }
[data-theme="light"] .stat-card.stat-passive .stat-val { color: #16a34a; }
[data-theme="light"] .stat-card.stat-passive .stat-label { color: #15803d; }
[data-theme="light"] .stat-card.stat-commission { background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(245, 158, 11, 0.03)), #fff; border-color: rgba(217, 119, 6, 0.3); }
[data-theme="light"] .stat-card.stat-commission .stat-val { color: #d97706; }
[data-theme="light"] .stat-card.stat-commission .stat-label { color: #b45309; }
[data-theme="light"] .stat-card.stat-commission .stat-sub { color: #92400e; }
[data-theme="light"] .stat-label { color: #475569; font-weight: 700; }
[data-theme="light"] .stat-val { color: #111827; }
[data-theme="light"] .stat-sub { color: #475569; }

/* ── Action Tiles: Light ── */
[data-theme="light"] .action-tile { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .action-tile:hover { border-color: rgba(59, 118, 242, 0.35); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
[data-theme="light"] .action-title { color: #111827; }
[data-theme="light"] .action-sub { color: #475569; }
[data-theme="light"] .action-tile.action-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #7c5ce7 100%);
  border-color: rgba(59, 118, 242, 0.45);
}
[data-theme="light"] .action-tile.action-primary:hover { box-shadow: 0 4px 14px rgba(59, 118, 242, 0.35); }
[data-theme="light"] .action-tile.action-primary .action-title,
[data-theme="light"] .action-tile.action-primary .action-sub { color: #fff; }

/* ── Metric Cards: Light ── */
[data-theme="light"] .metric-card { border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .metric-buyers { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.02)); border-color: rgba(168, 85, 247, 0.25); }
[data-theme="light"] .metric-buyers .metric-label { color: #6D28D9; }
[data-theme="light"] .metric-buyers .metric-val { color: #5B21B6; }
[data-theme="light"] .metric-logistics { background: linear-gradient(135deg, rgba(196, 100, 62, 0.1), rgba(196, 100, 62, 0.03)); border-color: rgba(196, 100, 62, 0.3); }
[data-theme="light"] .metric-logistics .metric-label { color: #9A3412; }
[data-theme="light"] .metric-logistics .metric-val { color: #7C2D12; }
[data-theme="light"] .metric-commission { background: linear-gradient(135deg, rgba(212, 160, 23, 0.08), rgba(212, 160, 23, 0.02)); border-color: rgba(212, 160, 23, 0.25); }
[data-theme="light"] .metric-commission .metric-label { color: #92400E; }
[data-theme="light"] .metric-commission .metric-val { color: #78350F; }
[data-theme="light"] .metric-index { background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0.02)); border-color: rgba(56, 189, 248, 0.25); }
[data-theme="light"] .metric-index .metric-label { color: #0369A1; }
[data-theme="light"] .metric-index .metric-val { color: #075985; }

/* ── Hub Cards: Light ── */
[data-theme="light"] .fr-hub-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .fr-hub-card:hover { border-color: rgba(59, 118, 242, 0.35); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
[data-theme="light"] .fr-hub-card h4 { color: #111827; }
[data-theme="light"] .fr-hub-card p { color: #475569; }

/* ── Kanban: Light ── */
[data-theme="light"] .kanban-col { background: #F1F3F4; border-color: #D1D5DB; }
[data-theme="light"] .kanban-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .kanban-card:hover { border-color: #9CA3AF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
[data-theme="light"] .kanban-card-client { color: #111827; }
[data-theme="light"] .kanban-card-meta { color: #475569; }

/* ── Toolbar: Light ── */
[data-theme="light"] .rep-toolbar { background: #F8FAFC; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .rep-toolbar .form-input { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .rep-toolbar .rep-tb-group label { color: #475569; font-weight: 700; }

/* ── Report Table (rep2): Light ── */
[data-theme="light"] .rep2 .rep-h1 th { background: #E2E8F0; color: #1F2937; }
[data-theme="light"] .rep2 .rep-h1 th.grp { background: #CBD5E1; color: #334155; }
[data-theme="light"] .rep2 .rep-h2 th, [data-theme="light"] .rep2 .rep-h4 th { background: #F1F3F4; color: #475569; border-top-color: #CBD5E1; }
[data-theme="light"] .rep2 .rep-h3 th { background: #F1F3F4; color: #334155; border-top-color: #CBD5E1; }
[data-theme="light"] .rep2 thead th { border-color: #CBD5E1; }
[data-theme="light"] .rep2 td { border-color: #E2E8F0; }
[data-theme="light"] .rep2 td .ri { background: #F1F3F4; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] .rep2 td .ri:hover { border-color: #9CA3AF; }
[data-theme="light"] .rep2 td .ri:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
[data-theme="light"] .rep2 td select.ri option { background: #fff; color: #111827; }
[data-theme="light"] .rep2 tfoot td { background: #E2E8F0; border-top-color: #CBD5E1; color: #1F2937; }
[data-theme="light"] .rep2 tbody tr.rep-cm:hover td { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .rep-wrap thead th { background: #E2E8F0; color: #1F2937; }
[data-theme="light"] .rep-wrap tbody tr.rep-cm td:nth-child(-n+2),
[data-theme="light"] .rep-wrap tfoot td:nth-child(-n+2) { background: #F1F3F4; }

/* ── Report Detail: Light ── */
[data-theme="light"] .rep-det .rep-h1 th { background: #E2E8F0; color: #1F2937; }
[data-theme="light"] .rep-det .rep-h1 th.grp { background: #CBD5E1; color: #334155; }
[data-theme="light"] .rep-det .rep-h2 th, [data-theme="light"] .rep-det .rep-h2 td { background: #F1F3F4; color: #475569; border-top-color: #CBD5E1; }
[data-theme="light"] .rep-det .rep-h3 th { background: #F1F3F4; color: #334155; border-top-color: #CBD5E1; }
[data-theme="light"] .rep-det .rep-h4 th { background: #F1F3F4; color: #475569; }
[data-theme="light"] .rep-det th, [data-theme="light"] .rep-det td { border-color: #E2E8F0; }
[data-theme="light"] .rep-det tbody tr.rep-det-cm td { background: #F8FAFC; }
[data-theme="light"] .rep-det tbody tr.rep-det-cm:hover td { background: rgba(0, 0, 0, 0.02); }

/* ── Report Summary: Light ── */
[data-theme="light"] .rep-sum-card { background: #F1F3F4; border-color: #D1D5DB; }
[data-theme="light"] .rep-sum-card span { color: #475569; font-weight: 700; }
[data-theme="light"] .rep-sum-card b { color: #111827; }

/* ── Slots: Light ── */
[data-theme="light"] .slot-cell { background: #fff; border-color: #D1D5DB; }
[data-theme="light"] .slot-num { color: #111827; }
[data-theme="light"] .slot-val { color: #475569; }
[data-theme="light"] .slot-tab { background: #fff; border-color: #D1D5DB; color: #475569; }
[data-theme="light"] .slot-tab:hover { color: #111827; border-color: #9CA3AF; }
[data-theme="light"] .slot-matrix th { background: #F1F3F4; border-color: #E2E8F0; color: #1F2937; font-weight: 700; }
[data-theme="light"] .slot-matrix td { border-color: #E2E8F0; background: #fff; }
[data-theme="light"] .slots-unified th { background: #F1F3F4; border-color: #E2E8F0; color: #1F2937; font-weight: 700; }
[data-theme="light"] .slots-unified td { border-color: #E2E8F0; }
[data-theme="light"] .slots-unified .slots-account { background: #F1F3F4; }
[data-theme="light"] .slots-unified .slots-account-name { color: #111827; }
[data-theme="light"] .slots-unified .slots-account-meta { color: #475569; }
[data-theme="light"] .slots-unified .slots-row-num { background: #F1F3F4; color: #475569; }
[data-theme="light"] .slot-op { background: rgba(0, 0, 0, 0.04); color: #111827; }

/* ── SLOTS: Soft Pastel Badges (Light) ── */
[data-theme="light"] .slot-cell.slot-free { background: #E6F4EA; border-color: #A7D9B8; color: #137333; }
[data-theme="light"] .slot-cell.slot-occ { background: #FCE8E6; border-color: #F5B7B1; color: #C5221F; }
[data-theme="light"] .slot-cell.slot-video { background: #FEF7E0; border-color: #F5D98A; color: #B06000; }
[data-theme="light"] .slot-cell.slot-dept { background: #E8F0FE; border-color: #A8C7FA; color: #1A56DB; }
[data-theme="light"] .slots-unified .slots-cell.cell-free { background: #E6F4EA; color: #137333; }
[data-theme="light"] .slots-unified .slots-cell.cell-unavailable { background: #FCE8E6; color: #C5221F; }
[data-theme="light"] .slots-unified .slots-cell.cell-video { background: #FEF7E0; color: #B06000; }
[data-theme="light"] .slots-unified .slots-cell.cell-occupied { background: #F1F3F4; color: #3C4043; box-shadow: none; }
[data-theme="light"] .slots-unified .slots-cell.cell-occupied .slots-occ-label { color: #3C4043; font-weight: 700; }
[data-theme="light"] .slots-unified .slots-cell.cell-missing { background: #fff; }
[data-theme="light"] .legend-swatch.sw-occupied { background: #F1F3F4; border-color: #DADCE0; }
[data-theme="light"] .legend-swatch.sw-free { background: #E6F4EA; border-color: #A7D9B8; }
[data-theme="light"] .legend-swatch.sw-unavailable { background: #FCE8E6; border-color: #F5B7B1; }
[data-theme="light"] .legend-swatch.sw-video { background: #FEF7E0; border-color: #F5D98A; }

/* ── Tables: Zebra Striping + Borders (Light) ── */
[data-theme="light"] .table-wrap th { background: #F1F3F4; color: #1F2937; border-bottom: 2px solid #D1D5DB; }
[data-theme="light"] .table-wrap td { border-bottom-color: #E5E7EB; }
[data-theme="light"] .table-wrap tbody tr:nth-child(even) { background: #F8FAFC; }
[data-theme="light"] .table-wrap tbody tr:nth-child(odd) { background: #fff; }

/* ── SIM Hub: Light ── */
[data-theme="light"] .sim-hub-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .sim-hub-head strong { color: #111827; }
[data-theme="light"] .sim-hub-dept { color: #475569; }
[data-theme="light"] .sim-hub-val { color: #111827; }
[data-theme="light"] .sim-hub-lbl { color: #475569; }
[data-theme="light"] .st-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .st-head strong { color: #111827; }
[data-theme="light"] .st-total { color: #475569; }
[data-theme="light"] .sim-it-table th, [data-theme="light"] .sim-it-table td { border-color: #E2E8F0; }

/* ── Alloc Pool: Light ── */
[data-theme="light"] .alloc-pool-card { background: #fff; border-color: #D1D5DB; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
[data-theme="light"] .alloc-dept-bar { background: #F1F3F4; }
[data-theme="light"] .alloc-dept-name { color: #111827; }
[data-theme="light"] .alloc-dept-pct { color: #111827; }

/* ── Loading Spinner: Light ── */
[data-theme="light"] .spinner { border-color: rgba(59, 118, 242, 0.15); }

/* ── Fr Badge: Light ── */
[data-theme="light"] .fr-badge { background: #F1F3F4; border-color: #D1D5DB; color: #374151; }

/* ── Fr Empty: Light ── */
[data-theme="light"] .fr-empty h2 { color: #111827; }
[data-theme="light"] .fr-empty p { color: #475569; }

/* ── Checkbox: Light ── */
[data-theme="light"] .chk { color: #374151; }

/* ── Status Dot: Light ── */
[data-theme="light"] .status-dot.active::before { background: #137333; box-shadow: none; }
[data-theme="light"] .status-dot.active { color: #137333; }
[data-theme="light"] .status-dot.inactive::before { background: #C5221F; }
[data-theme="light"] .status-dot.inactive { color: #C5221F; }

/* ── Hint text: clear dark gray (Light) ── */
[data-theme="light"] .hint { color: #64748B; }

/* ── Scrollbar: Light ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.5); }

/* ── Selection: Light ── */
[data-theme="light"] ::selection { background: rgba(59, 118, 242, 0.15); }

/* ── Theme Toggle Button ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line);
  cursor: pointer; transition: background .2s, border-color .2s;
  color: var(--text-1); font-size: 18px; line-height: 1;
}
.theme-toggle:hover { background: var(--bg-4); border-color: var(--line-strong); }
[data-theme="light"] .theme-toggle { background: #F1F3F4; border-color: #D1D5DB; color: #374151; }
[data-theme="light"] .theme-toggle:hover { background: #E5E7EB; }

/* ═════════════════════════════════════════════════════════════════
   MOBILE POLISH · Отчёты / Детали отчёта / Кнопки (ТЗ 06.09)
   Все таблицы (кроме .rep-wrap/.rep2) масштабируются персонально в
   runtime (fitMobileTables в fr.js): zoom = карточка ÷ фактическая
   ширина таблицы. Здесь — ужимка не-табличных элементов мобильных
   страниц, чтобы ничего не уходило за экран и не обрезалось справа. */
@media (max-width: 768px) {
  /* больше полезной ширины контента и карточек */
  .content { padding: 14px 10px; }
  .chart-card { padding: 12px 6px; }

  /* Список отчётов: компактнее кнопки («Детали», «Править»…) и бейджи
     статусов («Черновик», «Отправлен»), чтобы строка помещалась */
  .table-actions { gap: 4px; flex-wrap: wrap; }
  .table-actions .btn { font-size: 10px; padding: 2px 5px; border-radius: 6px; }
  .table-wrap td .badge { font-size: 9px; padding: 2px 6px; }
  .table-wrap td .badge-attracted { font-size: 9px; padding: 1px 5px; margin-left: 3px; }

  /* Страница «Детали отчёта»: компактный заголовок и карточки-статистики */
  .page-head { gap: 10px; margin-bottom: 14px; }
  .page-head h3 { font-size: 16px; }
  .page-head .badge { font-size: 10px; }
  .page-head .btn { font-size: 10px; padding: 3px 7px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 12px 10px; }
  .stat-card .stat-val { font-size: 15px; }
  .stat-card .stat-label { font-size: 10px; }

  /* Таблица отчёта: long names («Имя и город», «Байер», «Админ», «СМ»)
     переносятся — таблица становится уже, zoom крупнее. min-width:1000px
     сбрасывается, чтобы структура не превышала карточку */
  .rep-det { min-width: 0 !important; }
  .rep-det thead th { font-size: 9px; padding: 3px 4px; }
  .rep-det tbody td { font-size: 10px; padding: 2px 3px; }
  .rep-det tbody td:nth-child(2),
  .rep-det tbody td:nth-child(3),
  .rep-det tbody td:nth-child(4),
  .rep-det tbody td:nth-child(5) {
    white-space: normal; word-break: break-word;
  }

  /* «Расходы»: компактный заголовок карточки */
  .chart-head h4 { font-size: 13px; }
}
/* ═══ МОЯ КОМАНДА СМ (ДОП): блок на дашборде, мобильная карточка ═══ */
.team-card { margin-bottom: 18px; }
.team-card .chart-head { padding-bottom: 6px; }
.team-card .table-wrap { margin: 0; }
@media (max-width: 768px) {
  .team-card { width: 100%; }
}

/* ═══ «МОЯ КОМАНДА» СМ: мобильные карточки (Card View) ═══
   Десктоп — таблица (.team-table). На телефонах (≤600px) — вертикальные
   карточки (.team-cards): ФИО, отправки, оборот, комиссия СМ 5% по каждой
   «девочке» + итоговая плашка сверху. */
.team-cards { display: none; }
.team-table { display: block; }
.team-total-card {
  background: linear-gradient(135deg, rgba(79,139,255,.16), rgba(56,212,160,.12));
  border: 1px solid rgba(79,139,255,.28);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.team-total-card .tc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.team-total-card .tc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-2);
}
.team-total-card .tc-row b { font-size: 15px; color: var(--text-1); }
.team-total-card .tc-row + .tc-row { border-top: 1px dashed var(--border); }

.team-card-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.team-card-item .tc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.team-card-item .tc-idx {
  flex: 0 0 auto;
  min-width: 22px;
  color: var(--text-3);
  font-weight: 600;
  font-size: 12px;
}
.team-card-item .tc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-2);
}
.team-card-item .tc-row + .tc-row { border-top: 1px dashed var(--border); }
.team-card-item .tc-label { color: var(--text-3); }
.team-card-item .tc-val { font-weight: 600; color: var(--text-1); }
.team-card-item .tc-row--accent .tc-val { color: var(--accent); font-weight: 700; }
.team-card-item.team-card-inactive { opacity: .6; }
.team-badge-inactive {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-3);
  background: var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .team-cards { display: flex; flex-direction: column; }
  .team-table { display: none !important; }
}

/* ═══ «МОЯ КОМАНДА» СМ: фильтр дат на мобилке ═══
   Два date-инпута занимают по половине ширины, быстрые кнопки —
   в ряд по 3 на всю ширину. */
@media (max-width: 600px) {
  .team-card .filter-bar {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
  }
  .team-card .filter-bar .filter-label { font-size: 12px; }
  .team-card .filter-bar .form-input {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 12px;
    padding: 8px 8px;
  }
  .team-card .filter-bar .btn-sm {
    grid-column: span 4;
    width: 100%;
    padding: 9px 8px;
    font-size: 12px;
  }
}