/* Служебные страницы вне билдера: вход, «Пользователи» (app/users_page.py).
   До этапа 11 плана дизайн-системы стили
   жили строкой <style> в Python; теперь — здесь, только на токенах, а вид
   кнопок, полей, карточек, таблиц и бейджей дают компоненты ds/. Подключается
   после dashboard.css (_page_css() в app/main.py). */

/* ── Общий каркас ─────────────────────────────────────────────────────── */
.page{max-width:1100px; margin:0 auto; padding:var(--space-24) var(--space-16);}
.page-top{display:flex; align-items:center; gap:var(--space-12); flex-wrap:wrap; margin-bottom:var(--space-20);}
.page-top h1{flex:1; margin:0; font-size:var(--text-xl);}
.page-top a{color:var(--accent-text); text-decoration:none; font-size:var(--text-base);}
.page-card{padding:var(--space-16) var(--space-20); margin-bottom:var(--space-16);}
.page-card h2{font-size:var(--text-md); margin:0 0 var(--space-4);}
.page-sub{color:var(--muted-fg); font-size:var(--text-sm); margin:0 0 var(--space-12);}
@media (max-width:900px){
  .page-top h1{font-size:var(--text-lg);}
}

/* ── Вход ─────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
            padding:var(--space-20); box-sizing:border-box;}
.login-card{width:100%; max-width:var(--dialog-sm); padding:var(--space-24); box-sizing:border-box;}
.login-card h1{font-size:var(--text-lg); margin:0 0 var(--space-4);}
.login-sub{color:var(--muted-fg); font-size:var(--text-base); margin:0 0 var(--space-20);}
.login-form label{display:block; font-size:var(--text-sm); color:var(--muted-fg); margin:0 0 var(--space-6);}
.login-form .field{width:100%; margin-bottom:var(--space-14);}
.login-card .btn{width:100%;}
.login-err{color:var(--destructive); font-size:var(--text-base); margin:0 0 var(--space-14);}
.login-or{display:flex; align-items:center; gap:var(--space-10); color:var(--muted-fg); font-size:var(--text-sm);
          margin:var(--space-20) 0 var(--space-14);}
.login-or::before, .login-or::after{content:""; flex:1; border-top:1px solid var(--border);}
.login-wait{display:flex; gap:var(--space-12); align-items:flex-start; font-size:var(--text-base);
            line-height:var(--leading-normal);}
.login-wait[hidden], .login-tg[hidden], .login-tg-note[hidden]{display:none;}
.login-wait b{display:block; margin-bottom:var(--space-2);}
.login-wait a{color:var(--accent-text);}
.login-wait .spinner{font-size:var(--text-lg); margin-top:var(--space-2);}
.login-tg-note{font-size:var(--text-base); margin:var(--space-12) 0 0; color:var(--muted-fg);}
.login-tg-note.err{color:var(--destructive);}

/* ── «Пользователи» ───────────────────────────────────────────────────── */
.up-msg{margin-bottom:var(--space-16);}
.up-wrap{overflow-x:auto;}
.up-muted{color:var(--muted-fg); font-size:var(--text-sm);}
.up-id{font-variant-numeric:tabular-nums; color:var(--muted-fg);}
.up-ok{color:var(--ok);}
.up-bad{color:var(--destructive);}
.up-inline{display:inline-flex; gap:var(--space-6); align-items:center; margin:0;}
.up-actions{display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:center;}
.up-add{display:flex; gap:var(--space-8); flex-wrap:wrap; align-items:center;}
.up-add-wrap{margin-top:var(--space-14);}
.page-sub.up-after{margin:var(--space-8) 0 0;}
.up-add input[name=tg_id]{width:170px;}
.up-ua{max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.up-when{white-space:nowrap;}
.up-card input[type=password]{width:190px;}
.up-pw{flex-wrap:wrap;}
.card.up-secret{border-color:var(--accent);}
/* Моноширинный — чтобы «l» и «1», «O» и «0» в пароле не путались */
.up-pw-value{display:inline-block; font-family:var(--font-mono); font-size:var(--text-lg);
             padding:var(--space-8) var(--space-12); border-radius:var(--radius-md); background:var(--muted);
             user-select:all;}
.up-roles{display:flex; flex-direction:column; gap:var(--space-8);}
.up-role{border:1px solid var(--border); border-radius:var(--radius-md);}
.up-role-head{display:flex; gap:var(--space-6) var(--space-10); align-items:baseline; flex-wrap:wrap;
              padding:var(--space-10) var(--space-12); font-size:var(--text-base);}
.up-role-head .up-muted{flex:1; min-width:0;}
div.up-role-head{padding-left:var(--space-32);}   /* вровень с правимыми: у них стрелка */
summary.up-role-head{cursor:pointer; list-style:none;}
summary.up-role-head::-webkit-details-marker{display:none;}
summary.up-role-head::before{content:"›"; color:var(--muted-fg); display:inline-block; width:10px;
                             transition:transform var(--dur-fast);}
details[open] > summary.up-role-head::before{transform:rotate(90deg);}
.up-role-new summary b{color:var(--accent-text);}
.up-count{color:var(--muted-fg); font-size:var(--text-sm); white-space:nowrap;}
.up-role-form{display:flex; flex-direction:column; gap:var(--space-12);
              padding:var(--space-2) var(--space-12) var(--space-12) var(--space-32);}
.up-field{display:flex; gap:var(--space-8); align-items:center; flex-wrap:wrap; font-size:var(--text-base);}
.up-field input{width:260px; max-width:100%;}
.up-tabs-box{display:flex; flex-direction:column; gap:var(--space-6);}
.up-tabs{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:var(--space-4) var(--space-12);
         padding-left:var(--space-24);}
.up-check{font-size:var(--text-base);}
/* «Все вкладки» отмечены — поимённые галочки не действуют, сервер их не читает */
.up-role-form:has(.up-all input:checked) .up-tabs{opacity:.4; pointer-events:none;}
.up-role-del{padding:0 var(--space-12) var(--space-12) var(--space-32);}
@media (max-width:600px){
  .up-hide-m{display:none;}
  .page-card.up-card{padding:var(--space-14) var(--space-12);}
  /* Таблица шире телефона прятала кнопки за прокрутку: строка — сетка,
     сверху кто, ниже действия и итог на всю ширину */
  .up-table thead{display:none;}
  .up-table, .up-table tbody{display:block;}
  .up-table tr{display:grid; grid-template-columns:auto auto 1fr; gap:var(--space-4) var(--space-10); align-items:center;
               padding:var(--space-8) 0; border-bottom:1px solid var(--border);}
  .up-table td{padding:0; border:none;}
  .up-table td.up-hide-m{display:none;}
  .up-table td.up-span{grid-column:1 / -1;}
  .up-table td.up-span2{grid-column:1 / 3;}
  .up-table td.up-end{justify-self:end;}
  /* Поле на телефоне 16px (.field) — выбор роли шире, чем был, и выталкивал
     id и «Удалить» за край строки: ограничиваем, длинная роль обрежется */
  .up-table select.field{max-width:150px;}
  /* Поле нового пароля и две кнопки в ширину телефона не входят */
  .up-pw input[type=password]{flex:1 1 100%; width:auto;}
  .up-role-form, .up-role-del{padding-left:var(--space-12);}
  .up-tabs{grid-template-columns:1fr 1fr; padding-left:0;}
  .up-field input{flex:1 1 100%; width:auto;}
}

/* ── Панель проектов ──────────────────────────────────────────────────── */
.pp-note{margin:0 0 var(--space-16);}
.pp-head{display:flex; align-items:center; gap:var(--space-10); flex-wrap:wrap;}
.pp-head h2{flex:1; margin:0;}
.pp-open{color:var(--accent-text); text-decoration:none; font-size:var(--text-base);}
.page-sub.pp-sub{margin:var(--space-6) 0 var(--space-10);}
.pp-table{table-layout:fixed;}
.pp-table th:first-child{width:28%;}
.pp-table th:nth-child(2){width:32%;}
.pp-table td{vertical-align:top;}
.pp-err{color:var(--destructive); font-size:var(--text-sm); margin-top:var(--space-4); word-break:break-word;}
.pp-m{display:none;}
/* На телефоне колонка «Последний сбор» скрыта, а сбой сбора — под названием вкладки. */
@media (max-width:600px){
  .pp-table th:nth-child(3), .pp-table td:nth-child(3){display:none;}
  .pp-m{display:block;}
  .pp-table th:first-child{width:45%;}
  .pp-table th:nth-child(2){width:auto;}
}