/* ============ МОЛЕКУЛЫ — каркас панели ============ */

/* ---------- Шапка панели ---------- */
.panel-header{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; gap:14px;
  min-height:76px; padding:10px clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line); background:var(--header-bg);
  backdrop-filter:blur(8px);
}
.panel-header .brand{font-family:"Unbounded",sans-serif; font-weight:680; font-size:.95rem; letter-spacing:-0.02em}
.panel-header .brand span{color:var(--red)}
.panel-header .spacer{flex:1}

/* ---------- Сайдбар (desktop) ---------- */
.shell{display:grid; grid-template-columns:minmax(0,1fr); min-height:100vh}
.sidebar{
  display:none; flex-direction:column; gap:4px;
  padding:20px 14px; border-right:1px solid var(--line);
  background:var(--page); position:sticky; top:0; height:100vh;
}
.side-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px;
  font-weight:600; font-size:.95rem; color:var(--ink);
  transition:background var(--t-fast) ease;
}
.side-link .icon{width:22px; height:22px; color:var(--muted); transition:color var(--t-fast) ease}
.side-link:hover{background:var(--surface-soft)}
.side-link[aria-current="page"]{background:var(--surface); box-shadow:inset 0 0 0 2px var(--ink)}
.side-link[aria-current="page"] .icon{color:var(--red)}
.side-group{
  margin:14px 4px 6px; font-family:"JetBrains Mono",monospace;
  font-size:.66rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Таббар (mobile) ---------- */
.tabbar{
  position:fixed; z-index:80; left:0; right:0; bottom:0;
  display:none; grid-auto-flow:column; gap:2px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top:2px solid var(--ink); background:var(--surface);
}
.tabbar a{
  display:grid; place-items:center; gap:3px;
  padding:7px 4px; border-radius:12px;
  font-size:.66rem; font-weight:700; color:var(--muted);
  transition:background var(--t-fast) ease, color var(--t-fast) ease;
}
.tabbar a .icon{width:22px; height:22px}
.tabbar a[aria-current="page"]{color:var(--ink); background:var(--surface-soft)}
.tabbar a[aria-current="page"] .icon{color:var(--red)}
.tabbar a:active{transform:scale(.97)}

/* Переключение каркаса — после базовых правил, чтобы медиа-запросы выигрывали каскад */
@media(min-width:1024px){
  .shell{grid-template-columns:240px minmax(0,1fr)}
  .sidebar{display:flex}
}
@media(max-width:1023px){
  .tabbar{display:grid}
}

/* ---------- Карточка услуги ---------- */
.service-card{
  position:relative; isolation:isolate;
  display:grid; gap:14px;
  padding:clamp(20px,2.2vw,28px);
  border:0; border-radius:var(--radius-card);
  background:transparent;
  transition:transform var(--t-fast) ease;
  --r:var(--radius-card); --shift:10px; /* средние/малые карточки: тень на 20% компактнее */
  --shadow-color:var(--accent,var(--aqua));
}
.service-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:var(--r) var(--r) calc(var(--r) + var(--shift)) var(--r);
  background:var(--shadow-color);
  translate:0 0; opacity:0;
  transition:translate var(--t-fast) ease, opacity var(--t-fast) ease;
}
.service-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:var(--r); background:var(--surface); border:2px solid var(--ink);
}
.service-card:hover{transform:translate(-4px,-4px)}
.service-card:hover::before{translate:var(--shift) var(--shift); opacity:1}
.service-card .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.service-card .domain{font-family:"Unbounded",sans-serif; font-weight:650; font-size:clamp(1.05rem,1.5vw,1.35rem); letter-spacing:-0.02em; overflow-wrap:anywhere}
.service-card .plan{font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.service-card .stats{display:flex; gap:22px; flex-wrap:wrap}
.service-card .foot{display:flex; gap:10px; margin-top:4px}

/* ---------- Стат-строка в карточке ---------- */
.stat{display:grid; gap:2px; min-width:88px}
.stat .k{font-family:"JetBrains Mono",monospace; font-size:.64rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:"JetBrains Mono",monospace; font-size:.9rem; font-weight:750}

/* ---------- Логотип (канон borzoihost-day/night.svg) ---------- */
.brand-logo{display:block; height:34px; width:auto}
@media(min-width:1024px){ .brand-logo{height:40px} }
/* шкала размеров логотипа */
.brand-logo-sm{height:22px}
.brand-logo-lg{height:56px}
.brand-logo-hero{height:80px}

/* ---------- Каркас страницы панели ---------- */
.page{padding:clamp(20px,3vw,36px) clamp(18px,3vw,32px) 120px; display:grid; grid-template-columns:minmax(0,1fr); gap:26px}
@media(min-width:1024px){ .page{padding-bottom:56px} }
.page-head{display:grid; gap:18px}
@media(min-width:760px){
  .page-head{grid-template-columns:minmax(0,1fr) auto; align-items:end}
}
.page-head h1{font-size:clamp(1.6rem,3vw,2.3rem); font-weight:750}
.page-head .sub{color:var(--muted); margin-top:6px; font-size:.95rem}
.page-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
@media(max-width:759px){
  .page-actions{display:grid; width:100%}
  .page-actions .btn{width:100%}
}
.services{display:grid; gap:18px}
@media(min-width:760px){ .services{grid-template-columns:1fr 1fr} }
@media(min-width:1400px){ .services{grid-template-columns:repeat(3,1fr)} }
.section-title{font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* ---------- Журнал событий: строка раскрывается по клику ---------- */
.actlog{
  display:grid; border:2px solid var(--ink);
  border-radius:var(--radius-alert); background:var(--surface); overflow:hidden;
}
.act{border-top:1px solid var(--line)}
.act:first-child{border-top:0}
/* цветная полоска статуса слева в свёрнутой строке */
.act-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--act-tone,var(--aqua));
}
.act-row{position:relative; padding-left:calc(clamp(14px,2vw,20px) + 8px)}
.act-ok{--act-tone:var(--aqua)}
.act-warn{--act-tone:var(--yellow)}
.act-err{--act-tone:var(--red)}
.act-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 14px; align-items:center;
  padding:14px clamp(14px,2vw,20px);
  cursor:pointer; list-style:none;
  transition:background var(--t-fast) ease;
}
.act-row::-webkit-details-marker{display:none}
.act-row:hover{background:var(--surface-soft)}
.act[open] .act-row{background:var(--surface-soft)}
.act-time{font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:750; color:var(--muted)}
.act-event{font-weight:750}
.act-obj{font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:600; color:var(--muted); display:none}
.act-res{display:none}
.act-chev{width:20px; height:20px; color:var(--muted); transition:rotate var(--t-fast) ease}
.act[open] .act-chev{rotate:180deg}
.act-body{
  display:grid; gap:10px;
  padding:10px clamp(14px,2vw,20px) 16px calc(clamp(14px,2vw,20px) + 8px);
  border-top:1px dashed var(--line);
}
.act-kv{display:flex; align-items:baseline; gap:12px; font-size:.92rem}
.act-kv b{
  flex:0 0 110px;
  font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
@media(min-width:760px){
  .act-row{grid-template-columns:64px minmax(0,1.3fr) minmax(0,1fr) auto auto}
  .act-obj{display:block}
  .act-res{display:block}
  .act-kv.kv-mob{display:none}
}

/* тональные акценты карточки услуги (тень, не текст) */
.service-card.accent-yellow{--accent:var(--yellow)}
.service-card.accent-red{--accent:var(--red)}
.service-card.accent-blue{--accent:var(--blue)}
.service-card .domain{color:var(--ink)}
.service-card .plan{color:var(--muted)}
.service-card .stat .v{color:var(--ink)}

/* блок с заголовком раздела + контент */
.page-block{display:grid; gap:14px}

/* квадратная малая кнопка-иконка */
.btn-icon-sm{width:44px; min-height:44px}

/* логотип в шапке панели — только мобила (на ПК он в сайдбаре) */
.panel-header .brand-link{display:flex; align-items:center}
@media(min-width:1024px){ .panel-header .brand-link{display:none} }

/* контентная колонка каркаса */
.shell-content{min-width:0}

/* логотип в сайдбаре */
.sidebar .brand-link{margin:0 4px 14px; display:block}

/* ---------- Переключатель User Stories над контентом ---------- */
.us-switch{
  display:grid; gap:14px; padding:16px;
  border:2px dashed var(--line); border-radius:var(--radius-card);
}
.us-switch-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.us-list{display:flex; flex-wrap:wrap; gap:8px; flex:1 1 100%; min-width:0}
.us-chip{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:750;
  color:var(--muted); background:var(--surface);
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.us-chip:hover{border-color:var(--ink); color:var(--ink)}
.us-chip[aria-selected="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.us-desc{font-size:.88rem; color:var(--muted); max-width:76ch}
.us-desc b{color:var(--ink); font-weight:750}

/* ---------- Детальный вид услуги (U3) ---------- */
.detail-grid{display:grid; gap:18px}
@media(min-width:900px){.detail-grid{grid-template-columns:1.2fr .8fr}}
.kv-list{display:grid; gap:8px}
.kv-list .act-kv b{flex-basis:140px}

/* ---------- Формы в карточке ---------- */
.form-grid{display:grid; gap:16px}
@media(min-width:560px){.form-grid-2{grid-template-columns:1fr 1fr}}

/* ---------- Панель: формы внутри карточек, футеры, поиск, селекты ---------- */
.form-row{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.card .foot{margin-top:16px}
.empty .foot{justify-content:center}
.stats{display:flex; gap:22px; flex-wrap:wrap}
.card .stats{margin-top:8px}
.search-field{min-width:220px}
.select-auto{width:auto; min-width:170px}
.card .kv-list,.service-card .kv-list{margin-top:14px}

/* Табы роли в шапке — только ПК; на мобиле роль переключается в us-switch */
@media(max-width:759px){.panel-header .tabs{display:none}}
#screenHost{min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:26px}

/* ---------- Файловый менеджер и крошки ---------- */
.crumbs{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:750; color:var(--muted); margin-bottom:14px}
.crumbs .icon{width:18px; height:18px}
.crumbs b{color:var(--ink)}
.fm-tree{display:grid; gap:2px}
.fm-row{display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:var(--radius-control); font-weight:600; color:var(--ink); transition:background var(--t-fast) ease}
.fm-row:hover{background:var(--surface-soft)}
.fm-row[aria-current="page"]{background:var(--surface); box-shadow:inset 0 0 0 2px var(--ink)}
.fm-row .icon{width:20px; height:20px; color:var(--muted)}
.fm-row[aria-current="page"] .icon{color:var(--red)}
.fm-l1{margin-left:18px}
.fm-l2{margin-left:36px}
.textarea-mono{font-family:"JetBrains Mono",monospace; font-size:.85rem; line-height:1.55}
.card > * + .form-grid{margin-top:14px}
.sidebar{overflow-y:auto}
.table .icon{width:18px; height:18px; vertical-align:-3px}
.foot .icon{width:16px; height:16px; vertical-align:-2px}

/* ---------- Метрики — компактные карточки в одну строку ---------- */
/* .services.metrics: на ПК столько колонок, сколько влезает (мин. 210px),
   на мобильном — правила в design/mobile.css */
.services.metrics{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}

/* ---------- Компактная таблица с разворотом ---------- */
/* .tbl-wrap > .table-scroll + .tbl-expander. На ПК все колонки видимы,
   кнопка разворота скрыта; на мобильном колонки .t-extra скрыты до разворота */
.tbl-wrap{position:relative}
.tbl-expander{display:none}

/* ---------- Состояния экрана — блок в каждой user story ---------- */
/* словарь состояний: Загрузка / Пусто / Успех / Ошибка / Отказ / Приостановлено */
.states{
  display:grid; gap:12px; padding:16px;
  border:2px dashed var(--line); border-radius:var(--radius-alert);
}
.states-list{display:grid}
.state-row{
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  gap:2px 16px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--line);
}
.state-row:first-child{border-top:0; padding-top:0}
.state-when{display:block; font-weight:750; font-size:.92rem}
.state-ui{display:block; color:var(--muted); font-size:.84rem}
@media(max-width:559px){
  .state-row{grid-template-columns:1fr; gap:4px; padding:10px 0}
  .state-row .chip{justify-self:start}
}

/* ---------- Переключатель вида списка: карточки / таблица ---------- */
/* .view-scope объединяет оба вида; иконки-вкладки .view-tabs живут в page-actions,
   переключение делает панель JS по data-vt / data-view; выбранный вид хранится
   в localStorage отдельно для каждого экрана (bz-view-<id>) */
.view-scope{display:grid; gap:26px}

/* ---------- Панель действий таблицы (только ПК; на мобильном скрыта в mobile.css) ---------- */
.tbl-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; margin-bottom:10px;
  border:2px solid var(--ink); border-radius:var(--radius-alert);
  background:var(--surface);
}
.tbl-sel{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.tbl-actions{display:flex; gap:6px; align-items:center; margin-left:auto}

/* ---------- Выбор строк в таблице ---------- */
.table .t-check{width:40px; text-align:center}
.t-check input{
  width:18px; height:18px; margin:0; vertical-align:middle; cursor:pointer;
  appearance:none; border:2px solid var(--ink); border-radius:6px;
  background:var(--surface); transition:background var(--t-fast) ease;
}
.t-check input:checked{
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.t-check input:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px}

/* ---------- ViewToggle: иконки-вкладки вида списка (выбор хранится в браузере) ---------- */
.tab-icon{padding:4px 6px; border-radius:8px}
.tab-icon .icon{width:18px; height:18px; display:block}
.tab-icon[aria-selected="true"]{background:transparent; color:var(--red)}
.view-tabs{flex:none; width:auto; border:0; background:transparent; padding:0; gap:2px}
.view-tabs .tab:hover{background:transparent; color:var(--red)}

/* ---------- Действия строки: иконки с тултипом .tip, видны по ховеру или выделению ---------- */
.table tbody tr{transition:background-color var(--t-fast) ease}
.table .t-acts{width:1%; white-space:nowrap; text-align:right}
.row-acts{display:inline-flex; gap:6px; opacity:0; visibility:hidden; transition:opacity var(--t-fast) ease, visibility var(--t-fast) ease}
.table tbody tr:hover .row-acts,
.table tbody tr.row-sel .row-acts{opacity:1; visibility:visible}
.table tbody tr.row-sel{background:var(--surface-soft)}

/* ---------- Имя объекта в таблице — ссылка на свойства ---------- */
.row-open{font-weight:750; white-space:nowrap}
.card.flash{outline:2px solid var(--red); outline-offset:4px}