/* ====== Design tokens ====== */
:root{
  --bg: #0a0f1a;
  --bg-2: #0f1626;
  --panel: #121a2b;
  --panel-2: #0e1524;
  --border: #1e2a47;
  --muted: #9fb0c6;
  --text: #e8edf3;
  --brand: #4f8cff;
  --brand-2: #7aa8ff;
  --accent: #22d3ee;
  --danger: #ff8181;
  --success: #2dd4bf;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text); background:
    radial-gradient(1200px 600px at 100% -10%, rgba(79,140,255,.08), transparent 70%),
    radial-gradient(800px 400px at -10% 110%, rgba(34,211,238,.06), transparent 60%),
    var(--bg);
}

/* ====== Topbar ====== */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(13,19,34,.75), rgba(13,19,34,.55));
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
}
.brand-badge{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 6px 18px rgba(79,140,255,.35);
}
.spacer{flex:1}
.topbar .project-switch select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:26px;           /* место под стрелку */
  background:
    var(--panel-2)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23a8b3cf" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>')
    no-repeat right 10px center / 14px 14px;
}

.auth-card button {
  margin-top:18px;   /* отступ от поля пароля */
}



.userbox{
  display:flex;
  align-items:center;
  gap:14px;              /* отступ между email и кнопкой */
}
.user-email{
  color:var(--muted);
  font-size:14px;
}
.btn-logout{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #b91c1c, #dc2626);
  color:#fff;
  border-radius:8px;
  padding:6px 12px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background .2s ease, transform .15s ease;
  box-shadow:0 3px 8px rgba(220,38,38,.25);
  border:1px solid rgba(255,255,255,.05);
}
.btn-logout:hover{
  background:linear-gradient(135deg, #dc2626, #ef4444);
  transform:translateY(-1px);
}

.logout{color:var(--danger)}
.header-actions{
  display:flex;
  align-items:center;
  gap:18px;              /* расстояние между блоками */
}

/* ====== Layout ====== */
.page{display:grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 56px)}
.page.sidebar-collapsed{grid-template-columns: 72px 1fr}
.sidebar{
  background:var(--panel-2); border-right:1px solid var(--border);
  padding:14px; position:relative;
}
.sidebar .toggle{
  position:absolute; right:-14px; top:14px;
  width:28px; height:28px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  display:grid; place-items:center; cursor:pointer;
  box-shadow: var(--shadow);
}
.sidebar nav ul{list-style:none; margin:0; padding:0}
.sidebar li{margin:6px 0}
.sidebar a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05));
  border:1px solid transparent;
  transition:all .18s ease;
  font-size:14px;          /* уменьшили размер шрифта */
  line-height:1.2;
  white-space:nowrap;      /* не переносить текст */
  overflow:hidden;
  text-overflow:ellipsis;  /* троеточие при переполнении */
}
.sidebar a:hover{transform: translateY(-1px); border-color:var(--border)}
.sidebar li.active a{background:linear-gradient(180deg, rgba(79,140,255,.18), rgba(79,140,255,.06)); border-color:#2b4274}

.content{padding:22px 26px}

/* ====== Cards / blocks ====== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12)), var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow);
}
.card + .card{margin-top:16px}
.card h3{margin:0 0 8px 0; font-size:18px}
.muted{color:var(--muted)}

/* ====== Forms / buttons ====== */
label{display:block; margin:10px 0 6px}
input, select, button{
  font:inherit;
}
input, select{
  width:100%; padding:10px 12px; border-radius:10px;
  background:#0b1220; color:var(--text);
  border:1px solid var(--border);
}
button{
  padding:10px 14px; border-radius:10px; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; box-shadow: 0 6px 18px rgba(79,140,255,.35);
  transition: transform .12s ease;
}
button:hover{transform: translateY(-1px)}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text);
  box-shadow:none;
}

/* ====== Auth ====== */
.auth-card{
  width:min(420px, 92vw);
  margin:80px auto;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12)), var(--panel);
  border:1px solid var(--border); padding:22px; border-radius:16px; box-shadow: var(--shadow);
}
.auth-card h2{margin:0 0 12px}
.error{ background:#3b1e1e; border:1px solid #6a2a2a; color:#ffc8c8; padding:8px; border-radius:10px; margin-bottom:10px}

/* ====== Helpers for reports (на будущее) ====== */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:14px}
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
}
.table th,.table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--border)}
.table thead th{
  background:linear-gradient(180deg, rgba(79,140,255,.14), rgba(79,140,255,.04));
  font-weight:600;
}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.table tr:last-child td{border-bottom:none}

.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#0c1422}
.badge.success{border-color:#134e4a; color:#a7f3d0; background:#052725}
.badge.warn{border-color:#5b4b19; color:#fde68a; background:#241d07}

/* ====== Responsive ====== */
@media (max-width: 920px){
  .page{grid-template-columns: 72px 1fr}
}



/* ====== UsersList ====== */

/* Подсветка активности пользователей */
.row-active  { background: rgba(34, 197, 94, .08); }   /* < 7 дней */
.row-inactive{ background: rgba(239, 68, 68, .08); }   /* >= 7 дней */
.row-active td,
.row-inactive td{ border-bottom-color: var(--border); }
.th-sort {
  color: inherit;                /* сохраняем базовый цвет таблицы */
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.th-sort:hover {
  text-decoration: underline;    /* лёгкое подчёркивание при наведении */
}
.th-sort:visited,
.th-sort:active {
  color: inherit;                /* не меняет цвет после клика */
}
/* Заголовки-линки в таблице: цвет как у текста, без смены после клика */
.table thead a.th-sort,
.table thead a.th-sort:visited,
.table thead a.th-sort:active {
  color: inherit !important;
  text-decoration: none;
  font-weight: 600;
}
.table thead a.th-sort:hover {
  text-decoration: underline;
}
/* Фильтры: контейнеры управляют шириной; инпуты/селекты растягиваются внутри */
.toolbar > div { flex: 0 0 auto; }        /* не тянем по контенту остальным */
.toolbar .field { width: 220px; }         /* дефолтная ширина поля */
.toolbar .field input,
.toolbar .field select { width: 100%; }   /* элемент занимает весь контейнер */