/* Личный кабинет в стиле инсталлятора «Маяк в ночи»: тёмная атмосфера + стекло + свечение.
   Слой поверх тёмной DaisyUI-темы intelbit. Не затрагивает login/setup (там .inst перекрывает). */

@import "/static/css/fonts.css";

:root {
  --cab-blue: #2f73d8;
  --cab-blue-deep: #1856A7;
  --cab-beacon: #ff8a4c;
  --cab-line: rgba(255,255,255,.08);
  --cab-glass: rgba(255,255,255,.035);
}

body { background: #05070d; }

/* Атмосферный фон с орбами (фиксирован за контентом) */
.cab-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(47,115,216,.16), transparent 60%),
    radial-gradient(900px 600px at 108% 112%, rgba(255,138,76,.10), transparent 55%),
    linear-gradient(160deg, #070a12, #05070d 55%, #04060b); }
.cab-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.cab-orb.o1 { width: 420px; height: 420px; left: -120px; top: -120px; background: radial-gradient(circle, rgba(47,115,216,.5), transparent 70%); }
.cab-orb.o2 { width: 360px; height: 360px; right: -120px; bottom: -120px; background: radial-gradient(circle, rgba(255,138,76,.32), transparent 70%); }
body > .flex { position: relative; z-index: 1; }

/* Сетка-фон под карточками + подсветка под курсором */
.cab-grid, .cab-grid-glow { position:absolute; inset:0; pointer-events:none; }
.cab-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
}
.cab-grid-glow {
  --mx: 50%; --my: 40%;
  background-image:
    linear-gradient(rgba(47,115,216,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,115,216,.7) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(250px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
  mask-image: radial-gradient(250px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.4) 45%, transparent 72%);
  transition: opacity .3s; opacity:0;
}
.cab-grid-glow.on { opacity:1; }

/* Шрифты-заголовки */
h1, .card-title { font-family: 'Unbounded', sans-serif; font-weight: 600; letter-spacing: .2px; }

/* Боковое меню — стекло */
aside {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)) !important;
  border-right: 1px solid var(--cab-line) !important;
  backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%);
}
aside .bg-brand-mark { box-shadow: 0 0 0 4px rgba(255,138,76,.12), 0 0 18px 3px rgba(255,138,76,.6); }
nav a { transition: .2s; }
nav a:hover { background: rgba(255,255,255,.05) !important; }
nav a.bg-primary {
  background: linear-gradient(135deg, var(--cab-blue), var(--cab-blue-deep)) !important;
  box-shadow: 0 0 0 1px rgba(47,115,216,.4), 0 6px 22px -6px rgba(47,115,216,.7);
}

/* Шапка — стекло */
header {
  background: rgba(10,14,22,.55) !important;
  border-bottom: 1px solid var(--cab-line) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

/* Карты — стекло с мягким свечением */
.card {
  background: var(--cab-glass) !important;
  border: 1px solid var(--cab-line) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(255,255,255,.14) !important; }

/* Поля ввода — фокус-свечение */
.input, .select, .textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--cab-line) !important;
  color: var(--color-base-content);
}
.input:focus, .select:focus, .textarea:focus, .input:focus-within {
  border-color: rgba(47,115,216,.7) !important;
  box-shadow: 0 0 0 4px rgba(47,115,216,.15), 0 0 24px -6px rgba(47,115,216,.5) !important;
  outline: none;
}

/* Кнопки */
.btn-primary {
  background: linear-gradient(135deg, var(--cab-blue), var(--cab-blue-deep)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 8px 26px -10px rgba(47,115,216,.8), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -10px rgba(47,115,216,1), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.07) !important; }

/* Светофор/бейджи — лёгкое свечение состояния */
.bg-success { box-shadow: 0 0 14px 1px rgba(46,160,90,.7); }
.bg-error { box-shadow: 0 0 14px 1px rgba(255,92,94,.6); }

/* Таблицы */
.table th { color: var(--color-base-content); opacity: .6; }
.table td, .table th { border-color: var(--cab-line) !important; }

/* Ссылки SSE-мониторинга и т.п. */
a.link-primary { color: var(--cab-blue); }

/* Чистый CSS-dropdown (cab-select.js): меню absolute — контент не сдвигается; hover-подсветка. */
.cab-dd { position:relative; display:inline-block; min-width:120px; vertical-align:top; }
.cab-dd-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left; cursor:pointer; }
.cab-dd.open .cab-dd-trigger { border-color:rgba(47,115,216,.7) !important;
  box-shadow:0 0 0 4px rgba(47,115,216,.15), 0 0 26px -6px rgba(47,115,216,.5) !important; }
.cab-dd-lab { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cab-dd-chev { color:#9aa6bd; font-size:12px; flex:0 0 auto; transition:transform .2s; }
.cab-dd.open .cab-dd-chev { transform:rotate(180deg); }

.cab-dd-menu { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:100%; min-width:100%;
  display:none; background:#0d1421; border:1px solid var(--cab-line); border-radius:12px; padding:6px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.05);
  max-height:280px; overflow-y:auto; animation:cab-dd-in .14s ease; }
.cab-dd.open .cab-dd-menu { display:block; }
@keyframes cab-dd-in { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.cab-dd-item { padding:10px 13px; border-radius:8px; font-size:14.5px; cursor:pointer; color:var(--color-base-content); white-space:nowrap; transition:background .12s; }
.cab-dd-item:hover { background:rgba(47,115,216,.18); }
.cab-dd-item.sel { background:linear-gradient(135deg,var(--cab-blue),var(--cab-blue-deep)); color:#fff; }
.cab-dd-item.sel:hover { background:linear-gradient(135deg,var(--cab-blue),var(--cab-blue-deep)); }
.cab-dd-item.dis { color:#5c6a84; cursor:not-allowed; }
.cab-dd-item.dis:hover { background:transparent; }
/* Карточка с открытым дропдауном — над соседними (их backdrop-filter создаёт stacking context). */
.cab-dd-host { position:relative; z-index:40; }

/* ── Просторная airy-вёрстка форм/секций ЛК ───────────────────────── */
.cab-card { background: var(--cab-glass); border: 1px solid var(--cab-line); border-radius: 18px;
  backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%);
  box-shadow: 0 26px 64px -36px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 30px 32px; margin-bottom: 26px; transition: border-color .2s; }
.cab-card:hover { border-color: rgba(255,255,255,.13); }
.cab-h { font-family:'Unbounded',sans-serif; font-weight:600; font-size:18px; letter-spacing:.2px; margin-bottom:22px; }
.cab-h .cab-num { color: var(--cab-beacon); margin-right:8px; }

.cab-field { display:block; margin-bottom:22px; }
.cab-field:last-child { margin-bottom:0; }
.cab-label { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:#9aa6bd; margin-bottom:9px; }
.cab-input, .cab-select, .cab-textarea {
  width:100%; padding:13px 16px; font-size:15px; color:var(--color-base-content); font-family:inherit;
  background: rgba(255,255,255,.04); border:1px solid var(--cab-line); border-radius:12px; outline:none; transition:.2s; }
.cab-input::placeholder { color:#5c6a84; }
.cab-input[type=date] { color-scheme: dark; }
.cab-input:focus, .cab-select:focus, .cab-textarea:focus {
  border-color: rgba(47,115,216,.7); background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(47,115,216,.15), 0 0 26px -6px rgba(47,115,216,.5); }
.cab-textarea { resize:vertical; min-height:110px; line-height:1.6; }
.cab-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:680px){ .cab-grid2{ grid-template-columns:1fr } }
.cab-hint { font-size:12.5px; color:#5c6a84; margin-top:9px; line-height:1.5; }
.cab-mask { font-family:ui-monospace,monospace; color:#cfe0ff; background:rgba(47,115,216,.14); padding:1px 7px; border-radius:6px; font-size:13px; }

/* Песочница диалога (Фаза 3) */
.sbx-log { display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto; padding:4px; }
.sbx-msg { max-width:80%; padding:11px 15px; border-radius:14px; font-size:14.5px; line-height:1.5; }
.sbx-user { align-self:flex-end; background:linear-gradient(135deg,var(--cab-blue),var(--cab-blue-deep)); color:#fff; border-bottom-right-radius:4px; }
.sbx-eva { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--cab-line); border-bottom-left-radius:4px; }
.sbx-who { font-size:11px; opacity:.7; margin-bottom:3px; }
.sbx-text { white-space:pre-wrap; }
.sbx-meta { margin-top:8px; font-size:12px; color:#9aa6bd; }
.sbx-meta ul { margin:6px 0 0 16px; line-height:1.5; }
.sbx-score { color:var(--cab-beacon); font-size:11px; }

/* Тост «Сохранено» — держится 3с, плавно гаснет за 1.5с (4-15-24a) */
.cab-toast { animation: cab-toast-fade 4.5s ease forwards; }
@keyframes cab-toast-fade {
  0%, 66.6% { opacity: 1; }   /* 0–3с из 4.5с — держим */
  100% { opacity: 0; }        /* 3–4.5с — плавное затухание */
}

/* Неактивные контролы (уведомления: выкл чекбокс → гасим поля, 4-15-24a). Не disabled,
   чтобы значения всё же отправлялись формой — только визуально гасим + блок кликов. */
.ntf-off { opacity:.42; pointer-events:none; transition:opacity .15s; }

/* История изменений — аккордеон по секциям (нативный details, 4-15-24a) */
.hacc { margin-bottom:16px; }
.hacc-sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:18px 24px; font-family:'Unbounded',sans-serif; font-weight:600; font-size:17px; }
.hacc-sum::-webkit-details-marker { display:none; }
.hacc-sum::marker { content:''; }
.hacc-chev { display:inline-block; transition:transform .2s; color:var(--cab-blue); font-size:14px; }
.hacc[open] .hacc-chev { transform:rotate(90deg); }
.hacc-title { flex:0 0 auto; }
.hacc-key { color:#5c6a84; font-size:12px; font-weight:400; font-family:'Manrope',sans-serif; }
.hacc-count { margin-left:auto; background:rgba(47,115,216,.18); color:#cfe0ff; font-size:12px;
  font-weight:600; padding:2px 11px; border-radius:20px; }

/* Топбар со sticky-заголовком (U8) + бургер (U1), 4-15-24 */
.cab-topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px;
  padding:14px 24px; background:rgba(9,13,22,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cab-line);
}
.cab-title { font-family:'Unbounded',sans-serif; font-weight:600; font-size:24px; letter-spacing:.2px; }
.cab-burger { cursor:pointer; font-size:24px; line-height:1; padding:2px 8px; border-radius:8px; }
.cab-burger:hover { background:rgba(255,255,255,.06); }
@media (max-width:900px){ .cab-title { font-size:20px; } }

/* Адаптив: таблицы скроллятся, формы в один столбец на мобиле */
@media (max-width:820px){
  .cab-grid2 { grid-template-columns:1fr; }
  .cab-card { padding:22px 18px; }
  .table { min-width:640px; }  /* контейнер overflow-x:auto прокручивает */
}

.cab-actions { display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.cab-btn { font-family:inherit; font-weight:600; font-size:14px; padding:11px 22px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:.2s; text-decoration:none; display:inline-block; }
.cab-btn-primary { color:#fff; background:linear-gradient(135deg,var(--cab-blue),var(--cab-blue-deep));
  box-shadow:0 8px 26px -10px rgba(47,115,216,.8), inset 0 1px 0 rgba(255,255,255,.22); }
.cab-btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 36px -10px rgba(47,115,216,1), inset 0 1px 0 rgba(255,255,255,.28); }
.cab-btn-ghost { color:#9aa6bd; background:rgba(255,255,255,.03); border-color:var(--cab-line); }
.cab-btn-ghost:hover { color:#fff; background:rgba(255,255,255,.07); }

.cab-toggle { display:flex; align-items:center; gap:12px; cursor:pointer; font-size:14.5px; }
.cab-range { width:100%; accent-color: var(--cab-blue); height:6px; }

.cab-alert { padding:11px 14px; border-radius:11px; font-size:13.5px; display:inline-block; }
.cab-alert.ok { background:rgba(46,160,90,.14); border:1px solid rgba(46,160,90,.4); color:#9fe6bd; }
.cab-alert.err{ background:rgba(255,92,94,.14); border:1px solid rgba(255,92,94,.4); color:#ffb3b4; }
.cab-alert.warn{ background:rgba(224,146,47,.14); border:1px solid rgba(224,146,47,.4); color:#f3c88a; }