/* ============================================================================
   Assist — стили кабинета.
   Дизайн-система ds/assist: тёплая бумажная палитра, индиго-бренд, глиняный
   акцент. Токены ниже — единственный источник правды по цвету, радиусам и
   теням; в шаблонах цвета не хардкодим.
   Макеты: холст «Концепты лендинга Assist», ряд «Кабинет организатора».
   ========================================================================= */

:root{
  /* поверхности */
  --bg:#faf7f2; --surface:#fff; --surface-sunken:#f3efe8; --line:#e8e1d6;
  /* текст */
  --ink:#221d2b; --ink-muted:#6a6478;
  /* бренд и акцент */
  --brand:#4f46e5; --brand-strong:#3f37c9; --brand-soft:#eef0fe; --on-brand:#fff;
  --accent:#c25a22; --accent-2:#f0945a; --accent-strong:#a8481a; --accent-soft:#fbeee4;
  /* статусы */
  --success:#15873f; --success-strong:#147a39; --success-soft:#e7f4ec;
  --warning:#b45309; --warning-soft:#fdf1e0;
  --danger:#c23030; --danger-strong:#a92525; --danger-soft:#fbeaea;
  /* форма */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(33,29,43,.06);
  --shadow-md:0 6px 20px rgba(33,29,43,.10);
  --shadow-lg:0 24px 60px rgba(33,29,43,.16);
  /* шрифты (файлы — в /static/fonts, подключены в fonts.css) */
  --font-sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Onest',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;}
/* Место под скроллбар резервируем всегда: иначе центрированная раскладка
   прыгает при переходе между короткой и длинной страницей. */
html{scrollbar-gutter:stable;overflow-y:scroll;}
body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;}
h1{font-size:28px;font-weight:700;letter-spacing:-.02em;}
h2{font-size:18px;font-weight:600;letter-spacing:-.01em;}
h3{font-size:15px;font-weight:600;}
a{color:var(--brand);text-decoration:none;transition:color .12s;}
a:hover{color:var(--brand-strong);}
p{margin:0 0 12px;}

/* ---------- Каркас: тёмное меню слева, контент справа ---------- */
.app{display:flex;align-items:stretch;min-height:100vh;max-width:1560px;margin:0 auto;}
.side{flex:0 0 236px;width:236px;background:var(--ink);color:#efeaf4;padding:20px 14px;display:flex;flex-direction:column;gap:3px;}
.side .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;}
.side .brand svg{flex:0 0 26px;}
.side a{display:flex;align-items:center;gap:10px;color:#cfc8da;font-size:14.5px;font-weight:500;padding:10px 12px;border-radius:var(--r-sm);}
.side a:hover{background:rgba(255,255,255,.08);color:#fff;}
.side a.on{background:var(--brand);color:#fff;}
.side a svg{width:17px;height:17px;flex:0 0 17px;}
.side .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--accent-2);color:#3a1d0b;border-radius:var(--r-pill);padding:1px 7px;}
.side .sp{flex:1;}
.side .who{font-size:12px;color:#9c94ad;padding:8px 12px 2px;word-break:break-all;}
.side a.logout{color:#e9a6a6;}
.content{flex:1;min-width:0;padding:28px 34px 48px;}

/* шапка страницы */
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}
.top .sub{color:var(--ink-muted);font-size:14.5px;margin-top:4px;}
.crumb{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-muted);margin-bottom:14px;}
.crumb:hover{color:var(--ink);}

/* ---------- Кнопки: пилюли ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:1;padding:11px 18px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;background:var(--brand);color:var(--on-brand);transition:filter .14s,background .14s;}
.btn:hover,a.btn:hover{filter:brightness(.93);color:var(--on-brand);}
.btn svg{width:15px;height:15px;flex:0 0 15px;}
.btn--sec,.btn.sec{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--sec:hover,.btn.sec:hover,a.btn.sec:hover{filter:none;background:var(--surface-sunken);color:var(--ink);}
.btn--ghost,.btn.danger{background:transparent;color:var(--danger);border-color:var(--line);}
.btn--ghost:hover,.btn.danger:hover,a.btn.danger:hover{filter:none;background:var(--danger-soft);color:var(--danger);}
.btn--ok,.btn.ok{background:var(--success-strong);color:#fff;}
.btn--ok:hover,.btn.ok:hover,a.btn.ok:hover{filter:brightness(.93);color:#fff;}
.btn--sm,.btn.sm{padding:8px 14px;font-size:13px;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;}

/* кнопка-иконка (действия в таблицах) */
.ico-btn{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink-muted);}
.ico-btn svg{width:17px;height:17px;}
.ico-btn:hover{background:var(--surface-sunken);}
.ico-btn.ok{color:var(--success-strong);} .ico-btn.ok:hover{background:var(--success-soft);}
.ico-btn.no{color:var(--danger);} .ico-btn.no:hover{background:var(--danger-soft);}

/* ---------- Пилюли-статусы ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;padding:6px 11px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-strong);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px;}
.pill--pay,.pill--on{background:var(--success-soft);color:var(--success-strong);}
.pill--wait,.pill--warn{background:var(--warning-soft);color:var(--warning);}
.pill--seats,.pill--new{background:var(--accent-soft);color:var(--accent-strong);}
.pill--off{background:var(--surface-sunken);color:var(--ink-muted);}
.pill--err{background:var(--danger-soft);color:var(--danger-strong);}

/* ---------- Полоска фактов (подписка: срок, сумма, карта) ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:16px;padding:14px 16px;background:var(--surface-sunken);border-radius:var(--r-md);}
.facts span{display:block;font-size:12px;color:var(--ink-muted);margin-bottom:2px;}
.facts b{font-family:var(--font-mono);font-size:15px;font-weight:500;}

/* ---------- Карточки ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:18px;}
.card > :last-child{margin-bottom:0;}
.chead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.hint,.muted{color:var(--ink-muted);font-size:13.5px;}
.hint{margin:6px 0 0;}

/* ---------- Плитки-метрики ---------- */
.tiles,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:22px;}
.tile,.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:17px 18px;}
.tile .n,.stat .n{font-family:var(--font-mono);font-weight:500;font-size:28px;line-height:1.15;}
.tile .l,.stat .l{font-size:13px;color:var(--ink-muted);margin-top:2px;}
.tile .d{font-size:12.5px;font-weight:600;margin-top:6px;color:var(--success-strong);}
.tile .d.flat{color:var(--ink-muted);}

/* ---------- Лента активности ---------- */
.feed{display:flex;flex-direction:column;gap:8px;}
.feed .row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface-sunken);border-radius:var(--r-md);}
.feed .row .t{font-size:13.5px;flex:1;min-width:0;}
.feed .row time{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-muted);white-space:nowrap;}
.feed .empty{color:var(--ink-muted);font-size:14px;padding:6px 2px;}

/* ---------- Карточка мероприятия в списке ---------- */
.ev{display:flex;gap:26px;align-items:flex-start;padding:28px 0;}
.ev + .ev{border-top:1px solid var(--line);}
.ev .thumb{flex:0 0 156px;width:156px;height:196px;border-radius:var(--r-md);background:var(--brand-soft);color:#a9a4e8;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ev .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* Обложка целиком: вертикальная афиша не обрезается, поля заполняет фон. */
.ev .thumb--full img{object-fit:contain;}
.ev .thumb--full{background:var(--surface-sunken);}
.ev .ttl{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.ev .meta{font-family:var(--font-mono);font-size:13px;color:var(--ink-muted);margin:7px 0 18px;}
.ev .nums{display:flex;flex-wrap:wrap;gap:26px;font-size:12.5px;color:var(--ink-muted);}
.ev .nums b{display:block;font-family:var(--font-mono);font-weight:500;font-size:17px;color:var(--ink);}
.ev .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;}

/* ---------- Таблицы ---------- */
.tablebox{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);padding:0 12px 10px;white-space:nowrap;}
td{padding:12px;border-top:1px solid var(--line);}
tbody tr:hover{background:var(--surface-sunken);}
td.num,.num{font-family:var(--font-mono);}
tfoot td{border-top:2px solid var(--line);background:var(--surface-sunken);font-weight:600;}
td a{border-bottom:1px dotted var(--brand);border-radius:3px;padding:0 2px;}
td a:hover{background:var(--brand-soft);border-bottom-style:solid;}

/* ---------- Формы ---------- */
label{display:block;font-size:13px;font-weight:500;color:var(--ink-muted);margin:14px 0 5px;}
/* Поля ввода. input без атрибута type — это тоже текстовое поле (type=text по
   умолчанию): без :not([type]) такие поля остаются с системным видом, без
   радиуса и рамки. Специфичность держим равной .search input, чтобы поиск с
   его собственным оформлением не сломался. */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input:not([type]),select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--font-sans);font-size:14px;color:var(--ink);background:var(--surface);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);outline-offset:1px;border-color:var(--brand);}
input::placeholder,textarea::placeholder{color:#a79fb4;}
textarea{min-height:110px;resize:vertical;line-height:1.5;}
input[disabled],select[disabled]{background:var(--surface-sunken);color:var(--ink-muted);}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px;}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink);margin:0;}
.check input{width:17px;height:17px;flex:0 0 17px;margin-top:2px;accent-color:var(--brand);}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
form.inline{display:inline;}

/* ---------- Фильтры, переключатели, вкладки ---------- */
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:18px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-size:13px;font-weight:500;color:var(--ink-muted);background:transparent;border:1px solid transparent;border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;font-family:var(--font-sans);}
.chip:hover{background:var(--surface-sunken);color:var(--ink);}
.chip.on{background:var(--ink);color:var(--bg);}
.chip .n{font-family:var(--font-mono);font-size:11.5px;opacity:.75;margin-left:5px;}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;}
.search input{border:0;outline:0;font-family:var(--font-sans);font-size:13.5px;color:var(--ink);background:transparent;width:220px;}
.search input::-webkit-search-cancel-button{cursor:pointer;}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;}
.seg button{border:0;background:var(--surface);padding:8px 14px;cursor:pointer;font-family:var(--font-sans);font-size:13px;color:var(--ink-muted);}
.seg button.on{background:var(--ink);color:var(--bg);font-weight:600;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.tabs button{border:0;background:transparent;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--ink-muted);padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabs button:hover{color:var(--ink);}
.tabs button.on{color:var(--ink);border-bottom-color:var(--brand);}
.tabs .cnt{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink-muted);margin-left:5px;}

/* ---------- Две колонки: подменю + содержимое (настройки) ---------- */
.cols{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start;}
.subnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:20px;}
.subnav a{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--ink);padding:11px 13px;border-radius:var(--r-sm);}
.subnav a:hover{background:var(--surface-sunken);color:var(--ink);}
.subnav a.on{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:600;}
.subnav a svg{width:16px;height:16px;flex:0 0 16px;color:var(--ink-muted);}
.subnav a.on svg{color:var(--brand);}

/* ---------- Полоса состояния подключений ---------- */
/* Шапка карточки с иконкой: подключения в настройках. Отдельно от .chead —
   та выравнивает заголовок и кнопку по краям. */
.sechead{display:flex;align-items:flex-start;gap:13px;margin-bottom:4px;}
.sechead .ico{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;}
.sechead .tt{flex:1;min-width:0;}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;}
.acts .help{font-size:13px;color:var(--ink-muted);border-bottom:1px dotted var(--ink-muted);}
.acts .help:hover{color:var(--ink);}
.note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:var(--r-md);font-size:13.5px;}
.note svg{flex:0 0 17px;margin-top:2px;}
.note--warn{background:var(--warning-soft);color:#7c3a06;}
.note--info{background:var(--surface-sunken);color:var(--ink);}
.steps{display:flex;flex-direction:column;gap:2px;margin-top:16px;}
.steps a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-md);color:var(--ink);font-size:14.5px;}
.steps a:hover{background:var(--surface-sunken);color:var(--ink);}
.steps .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--font-mono);font-size:12px;display:flex;align-items:center;justify-content:center;}
.steps .tx{flex:1;min-width:0;}
.faq details{border-top:1px solid var(--line);padding:13px 0;}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;font-size:14.5px;font-weight:500;}
.strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 16px;margin-bottom:22px;}
.strip .lbl{font-size:13px;color:var(--ink-muted);margin-right:4px;}

/* ---------- Сообщения ---------- */
.note{display:flex;gap:9px;align-items:flex-start;border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;margin:14px 0 0;}
.note svg{flex:0 0 17px;width:17px;height:17px;margin-top:2px;}
.note--ok{background:var(--success-soft);color:var(--success-strong);}
.note--warn{background:var(--warning-soft);color:#7c3a06;}
.note--err{background:var(--danger-soft);color:var(--danger-strong);}

/* ---------- Загрузка файлов ---------- */
.dropzone{border:2px dashed var(--line);border-radius:var(--r-md);padding:18px;text-align:center;cursor:pointer;background:var(--surface-sunken);transition:border-color .12s,background .12s;}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft);}
.dropzone .dz-link{color:var(--brand);text-decoration:underline;}
.dropzone img{max-width:100%;max-height:220px;border-radius:var(--r-sm);margin:0 auto 10px;display:block;}

/* ---------- Модальное окно ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(33,29,43,.5);display:none;align-items:center;justify-content:center;z-index:50;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:26px;max-width:430px;width:calc(100% - 32px);box-shadow:var(--shadow-lg);}
.modal h3{margin:0 0 10px;font-size:19px;}
.modal p{margin:0 0 20px;color:var(--ink-muted);}
.modal .row{justify-content:flex-end;}

/* ---------- Мелочи ---------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sp{flex:1;}

/* ---------- Узкий экран ---------- */
@media (max-width:980px){
  .app{flex-direction:column;min-height:0;}
  .side{flex:none;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:12px;}
  .side .brand{padding:6px 10px;}
  .side .sp,.side .who{display:none;}
  .content{padding:20px 16px 36px;}
  .cols{grid-template-columns:minmax(0,1fr);}
  .subnav{position:static;flex-direction:row;flex-wrap:wrap;}
  .ev{flex-direction:column;}
  .ev .thumb{width:100%;flex:none;height:220px;}
  .tabs{overflow-x:auto;}
}