/* base.css — переменные тем, сброс, типографика, компоненты */

/* ── Тёмная тема ── */
:root, :root[data-theme="dark"] {
  --bg-page:        #0a0e17;
  --bg-panel:       rgba(18,25,42,0.80);
  --bg-panel-solid: #121926;
  --bg-input:       rgba(0,0,0,0.35);
  --bg-hover:       rgba(255,255,255,0.06);
  --bg-active:      rgba(255,255,255,0.10);
  --text-primary:   #e8edf7;
  --text-secondary: #7d8aa3;
  --text-muted:     #4a5568;
  --accent:         #ff8a4c;
  --accent-2:       #ffb877;
  --accent-soft:    rgba(255,138,76,0.14);
  --accent-hover:   rgba(255,138,76,0.22);
  --color-ok:       #3ad08a;
  --color-warn:     #f5a623;
  --color-danger:   #ff3b3b;
  --color-info:     #4a90d9;
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.16);
  --border-accent:  rgba(255,138,76,0.40);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.40);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.50);
  --shadow-lg:  0 18px 50px rgba(0,0,0,0.65);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --slot-regular: #3a7bd5;
  --slot-special: #7c3aed;
  --slot-theme:   #16a34a;
  --slot-rubric:  #0891b2;
  --slot-disco:   #d97706;
  --slot-event:   #dc2626;
  --slot-nonstop: #6b7280;
  /* Кастом-чекбокс и селект */
  --check-bg:   #1e2a3a;
  --check-tick: #ff8a4c;
  --select-bg:  #141f30;
}

/* ── Светлая тема ── */
:root[data-theme="light"] {
  --bg-page:        #f0f2f7;
  --bg-panel:       rgba(255,255,255,0.90);
  --bg-panel-solid: #ffffff;
  --bg-input:       rgba(0,0,0,0.04);
  --bg-hover:       rgba(0,0,0,0.04);
  --bg-active:      rgba(0,0,0,0.08);
  --text-primary:   #1a202c;
  --text-secondary: #4a5568;
  --text-muted:     #a0aec0;
  --accent:         #e8601a;
  --accent-2:       #f07520;
  --accent-soft:    rgba(232,96,26,0.10);
  --accent-hover:   rgba(232,96,26,0.18);
  --color-ok:       #1a9e5f;
  --color-warn:     #c47d0e;
  --color-danger:   #cc2020;
  --color-info:     #2563eb;
  --border:         rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);
  --border-accent:  rgba(232,96,26,0.35);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.10);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.14);
  --shadow-lg:  0 18px 50px rgba(0,0,0,0.18);
  --slot-regular: #2563eb;
  --slot-special: #7c3aed;
  --slot-theme:   #16a34a;
  --slot-rubric:  #0891b2;
  --slot-disco:   #d97706;
  --slot-event:   #dc2626;
  --slot-nonstop: #6b7280;
  --check-bg:   #e8edf7;
  --check-tick: #e8601a;
  --select-bg:  #f8f9fc;
}

/* ── Сброс ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body {
  font-family: "Helvetica Neue","Segoe UI",system-ui,-apple-system,sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
}
:root[data-theme="dark"] ::-webkit-scrollbar       { width:6px; height:6px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track  { background:transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb  { background:rgba(255,255,255,0.15); border-radius:3px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); }

/* ── Типографика ── */
h1{font-size:1.6rem;font-weight:800;letter-spacing:-0.3px;}
h2{font-size:1.2rem;font-weight:700;}
h3{font-size:1.0rem;font-weight:700;}
h4{font-size:0.875rem;font-weight:600;}
p{line-height:1.6;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Кнопки ── */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:0.875rem;font-weight:700;
  padding:9px 16px;border-radius:var(--radius-md);border:none;
  cursor:pointer;transition:transform 0.12s,filter 0.15s,opacity 0.15s;
  white-space:nowrap;text-decoration:none;
}
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a0f06; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:var(--bg-hover); color:var(--text-primary); border:1px solid var(--border-strong); }
.btn-ghost:hover { background:var(--bg-active); }
.btn-danger { background:var(--color-danger); color:#fff; }
.btn-danger:hover { filter:brightness(1.1); }
.btn-sm { font-size:0.78rem; padding:5px 10px; }

/* ── Поля ввода ── */
input[type="text"],input[type="password"],input[type="email"],input[type="search"],textarea {
  width:100%;background:var(--bg-input);border:1px solid var(--border-strong);
  color:var(--text-primary);padding:10px 12px;border-radius:var(--radius-sm);
  font-size:0.9rem;font-family:inherit;outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
}
input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
::placeholder { color:var(--text-muted); }
label { display:block;font-size:0.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:5px;letter-spacing:0.02em; }

/* ── Кастомный чекбокс ── */
.checkbox-wrap {
  display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; user-select:none;
  font-size:0.82rem; font-weight:500; color:var(--text-primary);
}
.checkbox-wrap input[type="checkbox"] { display:none; }
.checkbox-box {
  width:18px; height:18px; flex-shrink:0;
  background:var(--check-bg); border:1.5px solid var(--border-strong);
  border-radius:4px; display:flex; align-items:center; justify-content:center;
  transition:background 0.15s, border-color 0.15s;
}
.checkbox-wrap input:checked + .checkbox-box {
  background:var(--accent-soft); border-color:var(--accent);
}
.checkbox-box::after {
  content:'';display:none;
  width:10px;height:7px;
  border-left:2px solid var(--check-tick);
  border-bottom:2px solid var(--check-tick);
  transform:rotate(-45deg) translate(1px,-1px);
}
.checkbox-wrap input:checked + .checkbox-box::after { display:block; }

/* ── Кастомный select ── */
.custom-select-wrap { position:relative; }
.custom-select {
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--select-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d8aa3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--border-strong); color:var(--text-primary);
  padding:10px 36px 10px 12px; border-radius:var(--radius-sm);
  font-size:0.9rem; font-family:inherit; cursor:pointer; outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.custom-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.custom-select option { background:var(--bg-panel-solid); color:var(--text-primary); }

/* ── Панели ── */
.panel {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* ── Бейджи ── */
.badge { display:inline-block;font-size:0.72rem;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:0.03em; }
.badge-ok     { background:rgba(58,208,138,0.15); color:var(--color-ok); }
.badge-warn   { background:rgba(245,166,35,0.15);  color:var(--color-warn); }
.badge-danger { background:rgba(255,59,59,0.15);   color:var(--color-danger); }
.badge-info   { background:rgba(74,144,217,0.15);  color:var(--color-info); }
.badge-muted  { background:var(--bg-hover);         color:var(--text-secondary); }

/* ── Тосты ── */
#toast-container { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none; }
.toast { background:var(--bg-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:12px 20px;font-size:0.875rem;font-weight:600;box-shadow:var(--shadow-md);pointer-events:auto;opacity:0;transform:translateY(12px);transition:opacity 0.2s,transform 0.2s; }
.toast.show { opacity:1;transform:translateY(0); }
.toast.toast-ok    { border-color:var(--color-ok); }
.toast.toast-error { border-color:var(--color-danger); }
.toast.toast-warn  { border-color:var(--color-warn); }

/* ── Модалки ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.60);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity 0.2s;pointer-events:none; }
.modal-overlay.open { opacity:1;pointer-events:auto; }
.modal { background:var(--bg-panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:28px;min-width:320px;max-width:520px;width:90%;box-shadow:var(--shadow-lg);transform:scale(0.95);transition:transform 0.2s; }
.modal-overlay.open .modal { transform:scale(1); }
.modal-title { font-size:1.05rem;font-weight:800;margin-bottom:16px; }
.modal-footer { display:flex;gap:10px;justify-content:flex-end;margin-top:24px; }

/* ── Таблицы ── */
.table { width:100%;border-collapse:collapse;font-size:0.875rem; }
.table th { text-align:left;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-secondary);padding:8px 12px;border-bottom:1px solid var(--border); }
.table td { padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg-hover); }

/* ── Роли-теги ── */
.role-tag { display:inline-block;font-size:0.70rem;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.04em;text-transform:uppercase; }
.role-program_director { background:rgba(255,138,76,0.18);color:var(--accent); }
.role-deputy_pd        { background:rgba(255,184,119,0.18);color:var(--accent-2); }
.role-curator          { background:rgba(74,144,217,0.18);color:var(--color-info); }
.role-admin            { background:rgba(255,59,59,0.14);color:var(--color-danger); }
.role-dj               { background:rgba(58,208,138,0.14);color:var(--color-ok); }
.role-editor           { background:rgba(155,89,182,0.18);color:#b07ee8; }
.role-trainee          { background:rgba(245,166,35,0.14);color:var(--color-warn); }

/* ── Утилиты ── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.text-muted   { color:var(--text-secondary); }
.text-accent  { color:var(--accent); }
.text-ok      { color:var(--color-ok); }
.text-danger  { color:var(--color-danger); }
.text-warn    { color:var(--color-warn); }
.mt-1{margin-top:6px;}.mt-2{margin-top:12px;}.mt-3{margin-top:20px;}.mt-4{margin-top:32px;}
.flex{display:flex;}.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-1{gap:6px;}.gap-2{gap:12px;}.gap-3{gap:20px;}.flex-wrap{flex-wrap:wrap;}.ml-auto{margin-left:auto;}
.divider{height:1px;background:var(--border);margin:16px 0;}
.form-group{margin-bottom:14px;}
.loading-spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center;padding:48px 24px;color:var(--text-secondary);}
.empty-state-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:6px;}