:root{
  --bg:#0f1318;
  --panel:#151b22;
  --panel-2:#0f141a;
  --muted:#8a97a6;
  --text:#e6eef8;
  --accent:#3ea6ff;
  --danger:#ff5f5f;
  --border:#202a35;
  --card:#111820;
  --shadow:0 10px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background:var(--bg);
}

/* Шапка с профилем/кнопками */
.dashboard-header {
  position: sticky;
  position: -webkit-sticky; /* iOS */
  top: 0;
  z-index: 50;
  background: #0f1216;      /* ваш фон */
  backdrop-filter: saturate(1.2) blur(6px);
}

/* Панель с метриками (если она отдельно) */
.stats-bar {
  position: sticky;
  position: -webkit-sticky;
  top: 56px;                 /* ниже header, подгоните под вашу высоту */
  z-index: 45;
  background: #0f1216;
}

/* Контейнер, в котором скроллится вся страница: у родителя sticky НЕ должно быть overflow:hidden */
html, body, .page-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Если таблица в собственном скролле и нужен "залипающий" заголовок таблицы */
.table-wrap {
  max-height: 70vh;          /* как у вас */
  overflow: auto;
}
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0f1216;
}

.topbar{
  position: sticky;
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:linear-gradient(180deg,var(--panel),var(--panel-2));
  top: 0;
  z-index:1000;
}
.brand{font-weight:700; letter-spacing:.3px}
.actions{margin-left:auto; display:flex; gap:8px}

.usercard{display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.02)}
.usercard .avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; background:#1b2430}
.usercard .meta .row{display:flex; align-items:center; gap:8px}
.name{font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.online{background:#52ff81}
.dot.offline{background:#777}

.container{max-width:1200px; margin:18px auto; padding:0 16px}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow)}
.input-grid{display:grid; gap:12px}
.input-group label{display:block; color:var(--muted); margin-bottom:6px}
.rowed{display:flex; gap:8px}
input,select,button{
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  background:#0d141b; color:var(--text)
}
input::placeholder{color:#55606d}
button{cursor:pointer}
button.primary{background:var(--accent); border-color:rgba(255,255,255,.12); color:#05131f; font-weight:700}
button.ghost{background:#0d141b}
button.ghost.danger{border-color:#3b1f1f; color:#ff9a9a}
button:disabled{opacity:.6; cursor:not-allowed}

.log{font-family:ui-monospace,Consolas,Menlo,monospace; background:#0c1117; border:1px dashed var(--border); color:#a7b5c4; border-radius:10px; padding:10px; margin-top:10px; white-space:pre-wrap; min-height:40px}

.controls{display:flex; align-items:center; gap:12px; margin:16px 0}
.control{display:flex; align-items:center; gap:8px}
.muted{color:var(--muted)}
.spacer{flex:1}

.stats{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow)}
.metric{font-size:22px; font-weight:800; margin-top:6px}

.table-wrap{margin-top:10px; border:1px solid var(--border); border-radius:14px; overflow:auto; box-shadow:var(--shadow); max-height:72vh}
table{width:100%; border-collapse:separate; border-spacing:0}
thead{background:#0e1319}
th,td{padding:12px; border-bottom:1px solid var(--border)}
tbody tr:hover{background:rgba(255,255,255,.02)}
th:first-child, td:first-child{padding-left:18px}
th:last-child, td:last-child{padding-right:18px}

.foot{max-width:1200px; margin:16px auto; padding:0 16px; color:var(--muted)}

.table-wrap thead,
.table-wrap thead th{
  position: sticky;
  top: 0;            /* прилипание к верху СВОЕГО скролл-контейнера */
  z-index: 2;        /* ниже, чем .topbar */
}

.table-wrap thead{
  background: inherit;   /* или ваш тёмный цвет, если фон прозрачный */
}

/* ===== Mobile tweaks (TMA / iPhone SE) ===== */
@media (max-width: 620px){
  .topbar .actions button{ padding:6px 10px; font-size:12px; border-radius:8px; }
  .usercard, .usercard.inline{ padding:6px 8px; }
  .usercard .avatar{ width:28px; height:28px; }
  .usercard .name{ font-size:13px; }
  .usercard .muted{ font-size:11px; }
  .controls{ gap:8px; flex-wrap:wrap; }
  .controls .control{ width:100%; }
  #manualDailyBtn{ width:100%; }
  .stats{ display:grid; grid-template-columns: repeat(2, minmax(140px,1fr)); gap:8px; }
  .stats .card{ padding:10px; }
  .stats .metric{ font-size:16px; }
  .table-wrap{ max-height:72vh; }
  .table-wrap table{ font-size:12px; }
  .table-wrap th, .table-wrap td{ padding:10px 12px; }
    /* контейнер селектов */
  .controls{
    display: flex;
    flex-direction: column;          /* по одному ряду */
    align-items: stretch;
    gap: 8px;
    padding-right: 8px;              /* подогнать к правому паддингу карточки */
  }

  /* один ряд: [label] [select] — сжимается по контенту и уезжает вправо */
  .controls .control{
    display: grid !important;
    grid-template-columns: auto minmax(180px, 260px); /* лейбл + селект фикс. min/max */
    align-items: center;
    column-gap: 10px;
    width: 99% !important;         /* перебиваем ширину 100% из старых правил */
    margin-left: auto;               /* прижимаем ряд к правому краю */
    max-width: calc(100% - 8px);     /* не выходить за контейнер */
  }

  /* лейбл должен быть виден */
  .controls .control label{
    display: inline !important;
    white-space: nowrap;
  }

  /* селект не на всю ширину, а аккуратный — и тоже прижат вправо */
  .controls .control select{
    width: auto !important;
    min-width: 180px;
    max-width: 260px;
    justify-self: end;               /* правая колонка сетки — к правому краю */
  }

  .table-wrap{
    max-height: 72vh !important;   /* или ваше значение */
    overflow: auto !important;
  }

  /* остальное мобильное поведение оставляем как было */
  #manualDailyBtn{ width:100%; }     /* ручная проверка — во всю ширину ниже */
}

@media (max-width: 996px) and (min-width: 621px){
  .topbar .actions button{ padding:6px 10px; font-size:12px; border-radius:8px; }
  .usercard, .usercard.inline{ padding:6px 8px; }
  .usercard .avatar{ width:28px; height:28px; }
  .usercard .name{ font-size:13px; }
  .usercard .muted{ font-size:11px; }
  .controls{ gap:8px; flex-wrap:wrap; }
  .controls .control{ width:100%; }
  #manualDailyBtn{ width:100%; }
  .stats{ display:grid; grid-template-columns: repeat(3, minmax(140px,1fr)); gap:8px; }
  .stats .card{ padding:10px; }
  .stats .metric{ font-size:16px; }
  .table-wrap{ max-height:72vh; }
  .table-wrap table{ font-size:12px; }
  .table-wrap th, .table-wrap td{ padding:10px 12px; }
  .controls{
    display: flex;
    flex-direction: column;          /* по одному ряду */
    align-items: stretch;
    gap: 8px;
    padding-right: 8px;              /* подогнать к правому паддингу карточки */
  }

  /* один ряд: [label] [select] — сжимается по контенту и уезжает вправо */
  .controls .control{
    display: grid !important;
    grid-template-columns: auto minmax(180px, 260px); /* лейбл + селект фикс. min/max */
    align-items: center;
    column-gap: 10px;
    width: 99% !important;         /* перебиваем ширину 100% из старых правил */
    margin-left: auto;               /* прижимаем ряд к правому краю */
    max-width: calc(100% - 8px);     /* не выходить за контейнер */
  }

  /* лейбл должен быть виден */
  .controls .control label{
    display: inline !important;
    white-space: nowrap;
  }

  /* селект не на всю ширину, а аккуратный — и тоже прижат вправо */
  .controls .control select{
    width: auto !important;
    min-width: 180px;
    max-width: 260px;
    justify-self: end;               /* правая колонка сетки — к правому краю */
  }
}

/* Center align table cells by default; keep name column left */
.table-wrap table th, .table-wrap table td{ text-align:center; }
.table-wrap table th:nth-child(2), .table-wrap table td:nth-child(2){ text-align:left; }
/* Vertical separators */
.table-wrap table th:not(:last-child),
.table-wrap table td:not(:last-child){ border-right:1px solid var(--border); }


@media (max-width: 555px){
  .rowed{ flex-direction: column; gap:8px; }
  .rowed > *{ width:100%; }
  .rowed button.primary{ width:100%; }
}

.delta{
  font-size:12px;
  margin-top:4px;
  color:var(--muted);
}
.delta.positive{ color:#3ddc84; } /* green */
.delta.negative{ color:var(--danger); }
.delta.neutral{ color:var(--muted); }