/* Общий стиль «тёмное стекло + лайм» для всей админки. Подключается после основных стилей и только переопределяет вид:
   разметка, данные и логика страниц не меняются. Образец — страница «Точки» (tochki.js). */
:root{
  --gold:#c8f135;--gold-d:#b6dd22;
  --glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.08);--gline:rgba(255,255,255,.10);--gline2:rgba(255,255,255,.16);
  --gshadow:0 8px 32px rgba(0,0,0,.35);
  --gease:cubic-bezier(.23,1,.32,1);
}
body{background:
  radial-gradient(900px 520px at 8% -8%,rgba(200,241,53,.07),transparent 60%),
  radial-gradient(800px 520px at 100% 0,rgba(90,169,255,.06),transparent 60%),
  var(--bg);background-attachment:fixed}

/* верхняя панель: стекло вместо плоской плашки */
.top{background:rgba(12,12,16,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--gline)}
.month,.act,.sg{background:var(--glass);border:1px solid var(--gline)}
.ib:hover{background:var(--glass2)}
.sg a.on,.sg button.on{background:var(--gold);color:var(--ink);box-shadow:0 0 0 1px rgba(200,241,53,.35),0 4px 14px rgba(200,241,53,.18)}
.sg a:hover:not(.on),.sg button:hover:not(.on){background:rgba(255,255,255,.05)}

/* карточки */
.card,.sx-card,.al,.sheet .it,.sl-g,.lo-u{background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card,.sx-card{border-radius:20px;box-shadow:var(--gshadow)}
.sheet{background:rgba(20,20,26,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-color:var(--gline2)}
.sheet .grab{background:var(--gline2)}
.lo-card{background:rgba(26,26,34,.94);border:1px solid var(--gline2);backdrop-filter:blur(22px)}
.row + .row{border-top-color:rgba(255,255,255,.07)}
hr{border-top-color:var(--gline)}

/* цветные плитки */
.tint{border-radius:20px;box-shadow:var(--gshadow)}

/* полосы, чипы, подписи */
.bar{background:rgba(255,255,255,.08)}
.chip{background:rgba(255,255,255,.07);border:1px solid var(--gline)}
.chip.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.chip.sw.on{background:rgba(200,241,53,.12);color:var(--tx);border-color:var(--gold)}
.tag{background:rgba(255,255,255,.08)}
.al.warn{border-color:rgba(255,159,67,.45)}.al.warn i{background:var(--orange)}
.al.bad{border-color:rgba(255,92,108,.45)}
.al.info{border-color:rgba(90,169,255,.4)}
.stk .sg,.shb{background:var(--glass);border:1px solid var(--gline);border-left:3px solid var(--gold)}

/* поля ввода */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{background:rgba(255,255,255,.06);border:1px solid var(--gline);color:var(--tx);border-radius:12px;transition:border-color .16s var(--gease),box-shadow .16s var(--gease)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{outline:0;border-color:rgba(200,241,53,.55);box-shadow:0 0 0 3px rgba(200,241,53,.15)}

/* отклик кликабельных карточек */
.card[onclick],.sx-card[onclick],button.sx-card{transition:transform .16s var(--gease),border-color .16s,background .16s}
@media(hover:hover) and (pointer:fine){.card[onclick]:hover,button.sx-card:hover{border-color:var(--gline2);background:var(--glass2)}}
.card[onclick]:active,button.sx-card:active{transform:scale(.985)}

@media(prefers-reduced-motion:reduce){.card[onclick],.sx-card[onclick],button.sx-card{transition:none}}
@media(max-width:640px){.card,.sx-card{border-radius:16px}}

/* шапка страницы с кнопкой действия: воздух до содержимого */
.adm-hd{margin-bottom:16px}
.adm-hd:empty{display:none;margin:0}

/* карточки страниц, у которых свои встроенные стили: приводим к стеклу */
body .pj-app,body .mh-l,body .mm-g,body .wh-card,body .zo-c,body .dr-st,body .zq-c,body .zq-cp,body .dt-t,body .adm-k,body .od-card,body .od-sec,body .sc-it,body .sx-kpi,body .ld-card,body .scf-cat,body .adm-it,body .sx-side,body .sx-bar{background:var(--glass);border:1px solid var(--gline)}
body .wh-card,body .zq-c,body .zq-cp,body .sx-kpi,body .ld-card,body .sx-side,body .sx-bar{box-shadow:var(--gshadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body .sx-kpi,body .ld-card{border-radius:20px}
/* переключатели и панели управления */
body .dr-tabs,body .dr-sub,body .tm-seg,body .adm-ch,body .gs-m,body .gs-st,body .zp-ctl{background:var(--glass);border:1px solid var(--gline)}
body .adm-k,body .od-cl,body .sl-b{border-color:var(--gline)}

/* строки списков: кнопки уходят под название, если не хватает ширины (узкие колонки «Проекты» и др.) */
@media(min-width:901px) and (min-height:521px){body .adm-it{flex-wrap:wrap}body .adm-it>.adm-r{flex:1 1 150px;min-width:150px}body .adm-it>.adm-b{margin-left:auto}}

/* телефон: без тяжёлого размытия и фиксированного фона (плавная прокрутка на слабых устройствах) */
@media(max-width:640px){
  body{background-attachment:scroll}
  body .card,body .sx-card,body .al,body .sheet .it,body .sl-g,body .lo-u,body .wh-card,body .zq-c,body .zq-cp,body .sx-kpi,body .ld-card,body .sx-side,body .sx-bar,.tp-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.07)}
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,12,16,.94)}
}

/* вкладки раздела «Люди» на телефоне: одна прокручиваемая строка, без переноса и обрезки */
@media(max-width:640px){
  body .sx .chips.adm-ch.rh-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;max-width:100%;justify-content:flex-start!important}
  body .sx .chips.adm-ch.rh-chips::-webkit-scrollbar{display:none}
  body .sx .chips.adm-ch.rh-chips>*{flex:none;white-space:nowrap}
}

/* телефон: подразделы группы (Долги / Платежи / Бюджет) — одна общая плашка-переключатель */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  body .sn-s{display:inline-flex!important;gap:2px;padding:4px!important;border-radius:16px;background:var(--glass);border:1px solid var(--gline);max-width:calc(100% - 14px);overflow-x:auto}
  body .sn button{border:0!important;background:transparent!important;height:36px;border-radius:12px;padding:0 14px}
  body .sn button.on{background:var(--gold)!important;color:#10100a!important;box-shadow:0 4px 14px rgba(200,241,53,.18)}

  /* нижняя панель админа: вкладки слева, «Ещё» — отдельная лаймовая кнопка справа с тремя полосками */
  html body .sx.adm nav.sx-tabs.sx-tabs{display:flex!important;align-items:center;gap:4px;background:rgba(24,24,32,.78)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--gline)!important;border-radius:22px!important;padding:6px!important}
  html body .sx.adm nav.sx-tabs.sx-tabs button{flex:1 1 0}
  html body .sx.adm nav.sx-tabs.sx-tabs button:last-child{flex:none;width:54px;height:46px;padding:0!important;border-radius:16px;background:var(--gold)!important;color:#10100a;justify-content:center;margin-left:2px}
  html body .sx.adm nav.sx-tabs.sx-tabs button:last-child svg,html body .sx.adm nav.sx-tabs.sx-tabs button:last-child .tx{display:none}
  html body .sx.adm nav.sx-tabs.sx-tabs button:last-child::before{content:'';display:block;width:22px;height:16px;border-radius:2px;background:linear-gradient(#10100a,#10100a) 0 0/100% 3px no-repeat,linear-gradient(#10100a,#10100a) 0 50%/100% 3px no-repeat,linear-gradient(#10100a,#10100a) 0 100%/100% 3px no-repeat}
  html body .sx.adm nav.sx-tabs.sx-tabs button:last-child:active{transform:scale(.94)}
  html body .sx.adm nav.sx-tabs.sx-tabs button:last-child.on{box-shadow:0 0 0 2px rgba(200,241,53,.35)}
}

/* боковое меню админа: «Выйти» сразу под последним пунктом списка, а не прижато к низу */
html body .adm .sx-side>.sx-nav{flex:0 1 auto}
html body .adm .sx-side .sx-out{margin-top:6px}

/* переход между экранами (телефон): содержимое въезжает с лёгким объёмным наклоном, панель и шапка стоят на месте */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  .nav-f{animation:navF3 .32s cubic-bezier(.23,1,.32,1) both!important}.nav-b{animation:navB3 .32s cubic-bezier(.23,1,.32,1) both!important}
  @keyframes navF3{from{opacity:.3;transform:perspective(1800px) translateX(9%) rotateY(-8deg) scale(.96)}to{opacity:1;transform:none}}
  @keyframes navB3{from{opacity:.3;transform:perspective(1800px) translateX(-9%) rotateY(8deg) scale(.96)}to{opacity:1;transform:none}}
}

/* списки (клиенты, платежи, ремонт, логи…): каждая строка — отдельная стеклянная плитка */
body .adm-list{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;display:flex;flex-direction:column;gap:8px}
body .adm-list .adm-it{padding:14px 16px;border:1px solid var(--gline)!important;border-radius:18px;background:var(--glass)}
body .adm-list .adm-it+.adm-it{border-top:1px solid var(--gline)!important}
body .adm-b button,body .adm-b-one{background:rgba(255,255,255,.08);border:1px solid var(--gline);border-radius:12px;color:var(--tx)}
body .adm-b .dn,body .adm-b-one.dn{color:#fb7185}
body .adm-tag{background:rgba(255,255,255,.08);border:1px solid var(--gline)}
body .adm-tag.ok{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.3)}body .adm-tag.bad{background:rgba(244,63,94,.16);border-color:rgba(244,63,94,.3)}
@media(max-width:900px),(max-height:520px) and (orientation:landscape){body .adm-it{flex-direction:column;gap:10px}body .adm-r{align-items:flex-start;text-align:left}body .adm-b{justify-content:flex-start}}

/* когда включён барабан, старая нижняя панель скрыта полностью (перебивает её же стили выше) */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  html.has-drum body .sx.adm nav.sx-tabs.sx-tabs,html.has-drum body .sx nav.sx-tabs.sx-tabs,html.has-drum body .mobile-nav-portal .tabbar,html.has-drum body .mobile-nav-portal nav.sx-tabs{display:none!important}
}

/* кликабельные строки (Перекуп/Недокуп и др.): без белой рамки вплотную к тексту — мягкая подсветка с отступом */
body .pur .pr.cl{padding:10px 12px;margin:0 -12px;border-radius:14px}
body .pur .pr.cl:hover{background:rgba(255,255,255,.05);box-shadow:none}
@media(hover:hover) and (pointer:fine){body .pur .pr.cl:hover{box-shadow:0 0 0 1px rgba(200,241,53,.35)}}
body .pur .pr.cl:active{background:rgba(200,241,53,.08);transform:none}
body .pur .pr.cl:focus-visible{outline:2px solid rgba(200,241,53,.55);outline-offset:2px}
/* после нажатия на телефоне рамка не «залипает» */
@media(hover:none){body .pur .pr.cl:hover{background:transparent;box-shadow:none}}
*{-webkit-tap-highlight-color:transparent}

/* вход новой страницы после барабана — «раскрытие» как у приложения на iPhone: страница вырастает снизу из скруглённой карточки и разворачивается на весь экран */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  .dw-f,.dw-b{animation:drOpen .56s cubic-bezier(.32,.72,0,1) both;transform-origin:50% 88vh;will-change:transform,clip-path}
  .dw-f{--dx:5%}.dw-b{--dx:-5%}
  @keyframes drOpen{
    0%{opacity:0;transform:translate(var(--dx),7%) scale(.88);clip-path:inset(14% 7% 18% 7% round 46px)}
    30%{opacity:1}
    100%{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}
  }
}
@media(prefers-reduced-motion:reduce){.dw-f,.dw-b{animation:none}}


/* ===== появление содержимого новой страницы: карточки всплывают друг за другом ===== */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  :is(.dw-f,.dw-b) :is(#admBody,.hp-content,.ck,.tp,.adm-wrap>div)>*{animation:drRise .5s cubic-bezier(.22,1,.36,1) both}
  :is(.dw-f,.dw-b) :is(#admBody,.hp-content,.ck,.tp,.adm-wrap>div)>*:nth-child(2){animation-delay:.05s}
  :is(.dw-f,.dw-b) :is(#admBody,.hp-content,.ck,.tp,.adm-wrap>div)>*:nth-child(3){animation-delay:.1s}
  :is(.dw-f,.dw-b) :is(#admBody,.hp-content,.ck,.tp,.adm-wrap>div)>*:nth-child(4){animation-delay:.15s}
  :is(.dw-f,.dw-b) :is(#admBody,.hp-content,.ck,.tp,.adm-wrap>div)>*:nth-child(n+5){animation-delay:.2s}
  @keyframes drRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){:is(.dw-f,.dw-b) *{animation:none!important}}

/* ===== телефон в горизонтальном положении: вырез камеры, компактные отступы ===== */
@media(max-height:520px) and (orientation:landscape){
  body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  #drum{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:calc(env(safe-area-inset-bottom,0px) + 6px);height:46px}
  #drum .dw-w{height:46px;left:calc(76px + env(safe-area-inset-left,0px));right:calc(76px + env(safe-area-inset-right,0px))}
  #drum .dw-sel,#drum .dw-more{width:46px;height:46px;border-radius:17px}
  #drum .dw-sel{margin-left:-23px}
  #drum .dw-ic svg{width:26px;height:26px}
  #drum .dw-more{right:calc(12px + env(safe-area-inset-right,0px))}
  .wrap,.sx-main{padding-left:max(14px,env(safe-area-inset-left,0px))!important;padding-right:max(14px,env(safe-area-inset-right,0px))!important;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  .sx-bar{margin-top:calc(env(safe-area-inset-top,0px) + 4px)!important}
  .card,.sx-card,.tp-card{border-radius:16px}
  .tp-ks{grid-template-columns:repeat(4,minmax(0,1fr))}.tp-shs{grid-template-columns:repeat(3,minmax(0,1fr))}.tp-sel{display:none!important}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* барабан уже листает все страницы — дублирующие вкладки-подразделы (Долги/Платежи/Бюджет, Задачи/Клиенты/Ремонт…) не нужны */
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
  html.has-drum .sn{display:none!important}
}

/* кабинеты сотрудников: кнопка «Ещё» не нужна, барабан остаётся по центру */
#drum.dw-role .dw-more{display:none}

/* окна-шторки с формами: барабан уходит вниз и не закрывает поля и кнопки (у полноэкранных «Задач» остаётся) */
#drum{transition:opacity .25s ease,transform .35s cubic-bezier(.32,.72,0,1)}
html.sheet-open:has(#sheet:not(.full-tab)) #drum{opacity:0;transform:translateY(26px);pointer-events:none}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:#c8f135}

/* широкие таблицы на телефоне: строки достаточно широкие для всех столбцов, первый столбец (название) закреплён слева */
@media(max-width:700px),(max-height:520px) and (orientation:landscape){
  body .dr-tr:has(>div:nth-child(5)){min-width:700px}
  body .dr-tr:has(>div:nth-child(7)){min-width:860px}
  body .dr-tw .dr-tr>div:first-child{position:sticky;left:0;z-index:2;background:#22222b;padding:4px 8px 4px 0;margin-left:-4px;box-shadow:10px 0 10px -8px rgba(0,0,0,.65);border-radius:9px 0 0 9px}
  body .dr-tw .dr-th>div:first-child{background:#14141a;box-shadow:none}
  body .dr-tw .dr-tr.tot>div:first-child{background:#252b17}
}

/* «Витрина»: сортировка не обрезается, поиск и список одной высоты и в общем стиле */
body .em-tools{align-items:stretch}
body .em-sort{flex:none;min-width:150px}
body .em-sort select{padding-right:30px;text-overflow:ellipsis}
body .em-search input,body .em-sort select{background:rgba(255,255,255,.06);border-color:var(--gline)}
@media(max-width:700px){body .em-sort{min-width:136px}}

/* переключатель месяца (Платежи и др.): стрелки по бокам, название месяца по центру */
body .adm-mn{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;margin:0 auto 14px;padding:4px;border-radius:16px;background:var(--glass);border:1px solid var(--gline)}
body .adm-mn b{min-width:150px;text-align:center;font-size:15px;font-weight:800;text-transform:capitalize}
body .adm-mn button{width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--tx);font-size:22px;line-height:1;cursor:pointer;transition:background .16s,transform .12s}
body .adm-mn button:hover{background:rgba(255,255,255,.08)}body .adm-mn button:active{transform:scale(.92)}

/* «Итог месяца»: плитки расходов открывают список статей */
.tp-lg>div[data-k]{position:relative;cursor:pointer;transition:background .16s,transform .12s}
.tp-lg>div[data-k]::after{content:'›';position:absolute;right:12px;top:8px;color:var(--tx3);font-size:20px;line-height:1}
@media(hover:hover) and (pointer:fine){.tp-lg>div[data-k]:hover{background:rgba(255,255,255,.08)}}
.tp-lg>div[data-k]:active{transform:scale(.98)}.tp-lg>div[data-k]:focus-visible{outline:2px solid rgba(200,241,53,.55);outline-offset:2px}

/* ===== всё, что оставалось сплошным тёмным, — в стекло ===== */
/* крупные панели */
body .sx-bar,body .bdg,body .tn-p,body .sc-loading-list{background:var(--glass)!important;border:1px solid var(--gline)!important;box-shadow:var(--gshadow)}
@media(min-width:901px) and (min-height:521px){body .sx-bar,body .bdg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
/* вложенные плитки и строки */
body .bdg-free,body .zp-hf,body .sl-b,body .tn-cr,body .tn-gr,body .adm-k,body .dt-d.fu,body .lg-ddb,body .nm-more,body .salary-history-btn,body .dr-tr:not(.tot):not(.dr-th),body .st-r.avg,body [style*="background:var(--card2)"],body [style*="background: var(--card2)"]{background:rgba(255,255,255,.075)!important;border-color:var(--gline)}
body .dr-tr.tot{background:rgba(200,241,53,.07)!important}
/* поля ввода */
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body select,body textarea{background:rgba(255,255,255,.065)!important;border:1px solid var(--gline)!important}
body .adm-wrap .card,body .sx-main .card,body .sx-card{background:var(--glass)}
body .stq>div{background:rgba(255,255,255,.075)!important}
html body #app .sx>header.sx-bar.sx-bar.sx-bar{background:var(--glass)!important;border:1px solid var(--gline)!important}
body .dbx-big>div,body .dbx-tt>div{background:rgba(255,255,255,.075)!important;border:1px solid var(--gline)}

/* «Бюджет месяца» внутри «Точек»: встроенный блок без второй рамки */
.tp-bud .bdg{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;margin:0}
.tp-bud .bdg-row,.tp-bud .bdg-free{background:rgba(255,255,255,.05)}

/* единый переключатель месяца: свои стрелки месяца на страницах скрыты (кроме общего) */
.adm-mn:not(.gmn),.zp-ctl .zp-mo,.dr-mo{display:none!important}
body .adm-mn.gmn{display:flex;margin:0 auto 14px}
body .adm-mn button:disabled{opacity:.3;pointer-events:none}
#rh-mn:empty{display:none}

/* ЗП продавцов: выплата по половинам месяца */
.zps-hv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 12px}
.zps-hv>div{padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.075);border:1px solid var(--gline)}
.zps-hv small{display:block;font-size:11.5px;color:var(--tx3)}.zps-hv b{font-size:16px;font-weight:800}
.zps-hh{display:block;font-size:11px;color:var(--tx3);font-weight:600;margin-top:1px}
/* ЗП продавцов: по две карточки в ряд на большом экране, одна на телефоне */
body .zps-g{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start}
@media(max-width:700px){body .zps-g{grid-template-columns:1fr!important}}

/* ЗП продавцов: заголовок точки над группой карточек */
.zps-sh{display:flex;align-items:center;gap:10px;margin:20px 4px 10px;padding-bottom:8px;border-bottom:1px solid var(--gline)}
.zps-sh:first-of-type{margin-top:6px}
.zps-sh u{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.zps-sh b{font-size:19px;font-weight:800}.zps-sh span{margin-left:auto;font-size:13px;color:var(--tx3)}

/* единый переключатель месяца — простой, без рамки-формы; повторы на страницах скрыты */
body .adm-mn.gmn{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;gap:14px;margin:6px auto 16px}
body .adm-mn.gmn b{min-width:170px;font-size:18px;text-transform:none}
body .adm-mn.gmn button{width:40px;height:40px;border-radius:50%;background:transparent;border:0;color:var(--tx2)}
body .adm-mn.gmn button:hover{background:rgba(255,255,255,.08);color:var(--tx)}
body .adm-sm{display:none!important}