/* =========================================================================
   YO-LA.CRM — БАЗОВЫЕ ОБЩИЕ СТИЛИ ЯДРА
   Таблицы, кнопки, формы, фильтры, карточки, индикаторы, адаптив.
   Специфические стили — в css расширений (extensions/*/assets/css).
   Во вьюшках запрещены inline style — используем классы этого файла.
   ========================================================================= */

/* ---------- CSS ПЕРЕМЕННЫЕ (тёмная/светлая тема) ---------- */
:root {
  color-scheme: dark;
  --page: #0b1220;
  --surface: #111a2e;
  --surface-2: #15203a;
  --ink: #e6edf7;
  --ink-2: #c2cfe6;
  --muted: #93a4c3;
  --grid: #22304f;
  --border: #334267;
  --shadow-c: rgba(0,0,0,0.3);
  --accent: #ffb020;
  --accent-ink: #0b1220;
  --good: #2dd4bf;
  --critical: #ff5d5d;
  --sidebar-w: 240px;
}
html[data-theme="light"] {
  color-scheme: light;
  --page: #eef2fa;
  --surface: #ffffff;
  --surface-2: #f2f6fd;
  --ink: #0b1220;
  --ink-2: #263650;
  --muted: #5b6b8c;
  --grid: #dde5f3;
  --border: #c7d3e8;
  --shadow-c: rgba(11,18,32,0.08);
  --good: #0b8d7e;
  --critical: #e04545;
}
* { box-sizing: border-box; }
body {
  margin:0; display:flex; min-height:100vh;
  background:var(--page); color:var(--ink);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
}
a { color:var(--good); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- SIDEBAR ---------- */
#sidebar {
  width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; z-index:45;
  height:100vh; display:flex; flex-direction:column; gap:2px;
  padding:18px 12px 14px; background:var(--surface);
  border-right:1px solid var(--border); transition:width 0.12s;
  overflow:visible;
}
html.nav-collapsed #sidebar { width:62px; padding-left:7px; padding-right:7px; }
.side-zone { border-bottom:1px solid var(--grid); }
/* Лого */
.logo {
  display:flex; align-items:center; gap:9px; padding:4px 6px 14px;
  color:var(--ink); white-space:nowrap; cursor:default; user-select:none;
}
html.nav-collapsed .logo { justify-content:center; padding-left:0; padding-right:0; }
.logo-pulse { flex-shrink:0; display:block; color:var(--good); }
.logo-text { font-size:14px; font-weight:700; }
.logo-text span { color:var(--accent); }
/* Действия */
.side-actions {
  display:flex; gap:8px; padding:12px 6px;
}
html.nav-collapsed .side-actions { flex-direction:column; align-items:center; padding-left:0; padding-right:0; }
.icon-btn {
  width:34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0; margin:0; padding:0;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; color:var(--muted); cursor:pointer; box-shadow:none;
  position:relative;
}
.icon-btn:hover { color:var(--accent); border-color:var(--accent); }
.icon-btn::after {
  content:attr(data-tip); position:absolute; left:calc(100% + 12px);
  top:50%; transform:translateY(-50%); background:var(--surface-2);
  color:var(--ink); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 2px 8px var(--shadow-c); padding:6px 10px;
  font-family:inherit; font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:120;
}
.icon-btn:hover::after { opacity:1; }
.icon-btn:not([data-tip])::after { display:none; }
/* Иконки темы/сворачивания */
.ico-sun, html[data-theme="light"] .ico-moon { display:none; }
html[data-theme="light"] .ico-sun { display:block; }
.ico-expand, html.nav-collapsed .ico-collapse { display:none; }
html.nav-collapsed .ico-expand { display:block; }
/* Профиль */
.profile {
  display:flex; align-items:center; gap:10px; padding:12px 0;
  position:relative; color:inherit; text-decoration:none; cursor:pointer;
}
.profile:hover { color:var(--ink); }
html.nav-collapsed .profile { justify-content:center; padding-left:0; padding-right:0; }
.avatar {
  width:34px; height:34px; flex-shrink:0; display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
  border-radius:8px; font-size:15px; font-weight:700;
}
.profile-info { min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.profile-info b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-info small { color:var(--muted); font-size:11px; }
html.nav-collapsed .profile-info { display:none; }
/* Профиль → сайд-действие (ведёт на /profile) */
a.profile { text-decoration:none; border-radius:8px; padding:12px 6px; }
a.profile:hover { background:var(--surface-2); text-decoration:none; }
/* Блок выхода — тоже кнопка */
.logout-btn {
  display:flex; align-items:center; gap:10px; padding:8px 6px; margin-top:2px;
  color:var(--muted); cursor:pointer; border-radius:8px; font-size:13px;
}
.logout-btn:hover { color:var(--critical); background:var(--surface-2); }
html.nav-collapsed .logout-btn { justify-content:center; }
html.nav-collapsed .logout-btn span { display:none; }

/* ---------- НАВИГАЦИЯ ---------- */
.side-nav { display:flex; flex-direction:column; gap:2px; padding-top:8px; flex:1; min-height:0; overflow:visible; }
html:not(.nav-collapsed) .side-nav { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.side-nav::-webkit-scrollbar { width:6px; }
.side-nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.nav-group { display:flex; flex-direction:column; }
.nav-parent { cursor:pointer; user-select:none; }
.nav-parent .chev { margin-left:auto; flex-shrink:0; transition:transform 0.12s; color:var(--muted); }
.nav-group.open .nav-parent .chev { transform:rotate(90deg); }
.nav-sub { display:none; flex-direction:column; }
.nav-group.open .nav-sub { display:flex; }
.nav-sub .nav-item { padding-left:30px; }
html.nav-collapsed .nav-sub .nav-item { padding-left:9px; }
html.nav-collapsed .nav-parent .chev { display:none; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 9px;
  color:var(--muted); border-left:3px solid transparent; position:relative;
  white-space:nowrap; border-radius:0 8px 8px 0;
}
.nav-item:hover { color:var(--ink); text-decoration:none; }
.nav-item.active { color:var(--ink); background:var(--surface-2); border-left-color:var(--accent); }
.nav-icon { flex-shrink:0; width:20px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.nav-icon svg { display:block; width:18px; height:18px; }
.nav-label { font-size:14px; font-weight:500; }
html.nav-collapsed .nav-label,
html.nav-collapsed .logo-text,
html.nav-collapsed .profile-info,
html.nav-collapsed .logout-btn span { display:none; }
html.nav-collapsed .side-actions { border-bottom:none; }
html.nav-collapsed .profile { border-bottom:1px solid var(--grid); }

/* Подсказки у навигации — только при свёрнутом меню */
html.nav-collapsed .nav-item::after,
html.nav-collapsed .nav-parent::after,
html.nav-collapsed .logout-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-c);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 120;
}
html.nav-collapsed .nav-item:hover::after,
html.nav-collapsed .nav-parent:hover::after,
html.nav-collapsed .logout-btn:hover::after { opacity: 1; }

/* ---------- СТАНДАРТНЫЕ КНОПКИ (только иконка + подсказка) ---------- */
.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:none; border-radius:8px;
  cursor:pointer; position:relative; color:white;
  transition:opacity 0.15s;
}
.btn-icon:hover { opacity:0.85; }
.btn-icon::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px);
  left:50%; transform:translateX(-50%);
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--border); border-radius:6px;
  box-shadow:0 2px 8px var(--shadow-c);
  padding:4px 8px; font-size:11px; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:120;
}
.btn-icon:hover::after { opacity:1; }
.btn-icon-add { background:#28a745; }
.btn-icon-edit { background:#e8a817; }
.btn-icon-delete { background:#dc3545; }
.btn-icon-view { background:#667eea; }
.btn-icon-other { background:#6c757d; }
.btn-icon svg { display:block; width:16px; height:16px; fill:currentColor; }
.action-links { display:flex; gap:6px; flex-wrap:wrap; }
/* Для кнопок с текстом (сохранение/создание и т.п.) */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; border:none; cursor:pointer; transition:opacity 0.15s; color:white; }
.btn:hover { opacity:0.85; text-decoration:none; }
.btn-primary { background:#667eea; }
.btn-success { background:#28a745; }
.btn-danger { background:#dc3545; }
.btn-warning { background:#e8a817; color:#333; }
.btn-secondary { background:#6c757d; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- ФИЛЬТРЫ (прозрачные, в стиле источника) ---------- */
.filters-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:16px 20px; margin-bottom:20px;
}
.filter-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.filter-group { display:flex; flex-direction:column; gap:4px; }
.filter-group label { font-size:11px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
.filter-group select, .filter-group input {
  background:transparent; border:1px solid var(--border);
  border-radius:6px; padding:7px 10px; font-size:13px;
  color:var(--ink); outline:none; min-width:130px;
  transition:border-color 0.15s;
}
.filter-group select:focus, .filter-group input:focus { border-color:var(--accent); }
.filter-group select option { background:var(--surface); color:var(--ink); }
.filter-buttons { flex-direction:row; gap:6px; }

/* ---------- ТАБЛИЦЫ ---------- */
.table { width:100%; border-collapse:collapse; margin-top:12px; background:var(--surface); border-radius:10px; overflow:hidden; }
.table th, .table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--grid); font-size:13px; vertical-align:middle; }
.table th { background:var(--surface-2); font-weight:600; color:var(--muted); }
.table-container { overflow-x:auto; }

/* ---------- МОБИЛЬНАЯ ВЕРСИЯ ТАБЛИЦ ---------- */
.table-responsive { width:100%; }
@media (max-width:768px) {
  .table-responsive table, .table-responsive thead, .table-responsive tbody,
  .table-responsive th, .table-responsive td, .table-responsive tr { display:block; }
  .table-responsive thead tr { position:absolute; top:-9999px; left:-9999px; }
  .table-responsive td {
    border:none; position:relative; padding-left:50%!important;
    border-bottom:1px solid var(--grid); min-height:28px;
  }
  .table-responsive td:before {
    content:attr(data-label); position:absolute; left:10px; top:8px;
    width:45%; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted);
  }
}

/* ---------- БЭЙДЖИ ---------- */
.badge { padding:3px 8px; border-radius:8px; font-size:11px; display:inline-block; font-weight:600; }
.badge-pending, .badge-active, .badge-queued { background:color-mix(in srgb, #ffb020 20%, transparent); color:#ffb020; }
.badge-completed, .badge-in_work, .badge-ready { background:color-mix(in srgb, #2dd4bf 20%, transparent); color:#2dd4bf; }
.badge-rejected, .badge-notcomplect { background:color-mix(in srgb, #ff5d5d 20%, transparent); color:#ff5d5d; }
.badge-draft { background:color-mix(in srgb, #93a4c3 20%, transparent); color:var(--muted); }

/* ---------- КАРТОЧКИ ---------- */
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
.chart-card h3 { margin-top:0; margin-bottom:16px; font-size:16px; color:var(--ink); }
.form-section { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:20px; }
.form-section h3 { margin-top:0; margin-bottom:15px; font-size:16px; border-bottom:1px solid var(--grid); padding-bottom:8px; }

/* ---------- STATS-GRID (KPI) ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; }
.stat-value { font-size:26px; font-weight:700; color:var(--accent); }
.stat-label { color:var(--muted); margin-top:4px; font-size:12px; }
@media (max-width:768px) { .stats-grid { grid-template-columns:1fr 1fr!important; gap:8px; } }

/* ---------- PROGRESS-BAR ---------- */
.progress-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.progress-row .progress-label { min-width:130px; font-size:13px; }
.progress-bar { flex:1; max-width:250px; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width 0.5s; min-width:3px; }
.progress-count { min-width:50px; text-align:right; font-weight:600; font-size:12px; color:var(--muted); }
@media (max-width:768px) { .progress-row { flex-direction:column; align-items:flex-start; gap:4px; } .progress-row .progress-bar { width:100%; max-width:none; } }

/* ---------- ВКЛАДКИ ---------- */
.report-tabs-nav, .dashboard-tabs-nav, .tabs-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--grid); padding-bottom:8px; }
.report-tab, .dashboard-tab-btn, .tab-btn {
  background:transparent; border:1px solid transparent; padding:6px 14px;
  border-radius:6px; cursor:pointer; font-weight:500; font-size:12px; color:var(--muted);
}
.report-tab.active, .dashboard-tab-btn.active, .tab-btn.active { background:var(--surface-2); color:var(--ink); border-color:var(--border); }
.tab-btn.disabled { color:var(--muted); opacity:0.4; cursor:not-allowed; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.dashboard-tab-pane { display:none; }
.dashboard-tab-pane.active { display:block; }

/* ---------- ФОРМЫ ---------- */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-weight:500; margin-bottom:4px; font-size:12px; color:var(--muted); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; box-sizing:border-box;
  padding:8px 12px; border:1px solid var(--border); border-radius:6px;
  font-size:13px; background:var(--surface); color:var(--ink); outline:none;
  transition:border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-group select option { background:var(--surface); color:var(--ink); }
.form-actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
::placeholder { color:var(--muted); opacity:0.6; }
.required { color:var(--critical); }

/* ---------- АЛЕРТЫ ---------- */
.alert { padding:10px 14px; border-radius:8px; margin-bottom:15px; font-size:13px; }
.alert-error { background:color-mix(in srgb, #ff5d5d 15%, transparent); color:#ff5d5d; border:1px solid color-mix(in srgb, #ff5d5d 30%, transparent); }
.alert-info { background:color-mix(in srgb, #667eea 15%, transparent); color:#667eea; border:1px solid color-mix(in srgb, #667eea 30%, transparent); }
.text-muted { color:var(--muted); }
.text-danger { color:var(--critical); }
.text-success { color:var(--good); }

/* ---------- ПРОЧЕЕ ---------- */
.welcome-message {
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:12px; padding:30px; margin-bottom:25px;
}
.page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.page-header h1 { margin:0; font-size:20px; }
.table-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.form-header { margin-bottom:20px; }
.form-header h1 { margin-bottom:4px; font-size:20px; }

/* ===== АДАПТИВ САЙДБАРА ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width:768px) {
  #sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); z-index:999; width:280px; height:100%; overflow-y:auto; padding-top:50px; transition:transform 0.3s; }
  #sidebar.open { transform:translateX(0); }
  html.nav-collapsed #sidebar { width:280px; }
  .sidebar-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:998; }
  .sidebar-overlay.active { display:block; }
  .menu-toggle { display:block!important; position:fixed; top:12px; left:12px; z-index:1001; width:34px; height:34px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--ink); cursor:pointer; font-size:18px; box-shadow:0 2px 5px var(--shadow-c); }
  .content { margin-left:0!important; padding-top:56px; }
}
.menu-toggle { display:none; }