/* app-theme.css */

/* =====================  THEME TOKENS  ===================== */
:root{
  --accent:#0095da;

  /* DARK (default) - ЦВЕТА С ВАШЕГО СКРИНШОТА */
  --bg:#313338;      /* Основной фон (угольный) */
  --panel:#383a40;   /* Панели (чуть светлее) */
  --text:#dbdee1;    /* Основной текст (светло-серый) */
  --muted:#949ba4;   /* Приглушенный текст (серый) */
  --border:rgba(255,255,255,.12);

  /* компактные неоморфные тени — смягчены в 2 раза */
  --neu-dark:rgba(0,0,0,.5);
  --neu-light:rgba(255,255,255,.1);
  --shadow-out: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
  --shadow-in:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
  --shadow-raised: inset -1px -1px 3px var(--neu-dark), inset 1px 1px 3px var(--neu-light), 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);

  --radius:14px;
  --dur:.6s;
  --hover-outline: color-mix(in srgb, var(--accent) 45%, transparent);

  /* Scrollbars (defaults for dark) */
  --scroll-thumb: rgba(255,255,255,.25);
  --scroll-track: rgba(0,0,0,.22);

  /* Градиент для шкал (зелёный → жёлтый → красный) */
  --meter-grad: linear-gradient(90deg, #2ecc71 0%, #ffd166 50%, #ff4d4d 100%);

  /* Цвета и альфа для спарклайна и индикаторов */
  --spark-c1:#2ecc71;
  --spark-c2:#ffd166;
  --spark-c3:#ff4d4d;
  --spark-alpha:.28;

  /* Для полос метрик */
  --meter-green:#2ecc71;
  --meter-yellow:#ffd166;
  --meter-red:#ff4d4d;

  /* Трек шкалы */
  --meter-track: color-mix(in srgb, var(--accent) 8%, var(--panel));

  /* ====== MAPS ====== */
  --map-dark-filter: invert(90%) hue-rotate(180deg) saturate(0.8) brightness(0.9) contrast(0.95);
}
:root[data-theme="light"]{
  --bg:#e9eef5;
  --panel:#e9eef5;
  --text:#2b3b4a;
  --muted:#647587;
  --border:rgba(8,29,44,.10);

  --neu-dark:#c9d1da;
  --neu-light:#ffffff;
  /* те же «вдвое мягче» значения для светлой темы */
  --shadow-out: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
  --shadow-in:  inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
  --shadow-raised: inset -1px -1px 3px var(--neu-dark), inset 1px 1px 3px var(--neu-light), 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);

  /* светлые скроллбары */
  --scroll-thumb:#c9d1da;
  --scroll-track:#f0f3f7;

  /* тот же градиент шкал */
  --meter-grad: linear-gradient(90deg, #2ecc71 0%, #ffd166 50%, #ff4d4d 100%);

  /* цвета подзаливки спарклайна в светлой теме */
  --spark-c1:#2ecc71;
  --spark-c2:#e2b34f;
  --spark-c3:#ff4d4d;
  --spark-alpha:.24;

  --meter-green:#2ecc71;
  --meter-yellow:#e2b34f;
  --meter-red:#ff4d4d;

  --meter-track: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
html{color-scheme:dark}
:root[data-theme="light"] html{color-scheme:light}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* скрытый текст для aria — полностью прячем даже в мобильных WebKit */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; border:0;
}

/* плавные переходы */
:root, body, .wdg-topbar, .auth,
.button, .textfield>div, .chip, .alert, .tooltip__text,
.switch__slider, .switch-alt__slider, .radio__checkmark, .checkbox__checkmark,
.slider__input, .theme-switch__track, .switch, .theme-toggle, .theme-toggle__indicator, .theme-toggle__button {
  transition: background-color var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, box-shadow var(--dur) ease, filter var(--dur) ease;
}
/* кросс-фейд */
.theme-animating::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:var(--bg); opacity:.001; animation:themeFade var(--dur) ease;
}
@keyframes themeFade{ from{opacity:.45} to{opacity:0} }

/* =====================  ВСПОМОГАТЕЛЬНЫЕ НЕО-СТИЛИ  ===================== */
.neu-sunken, .shadow--sunken{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-in);
}

/* =====================  WIDGETS & GRIDSTACK ===================== */
.grid-stack-item-content {
  background-color: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow-out);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  color: var(--text); /* Наследуем цвет текста */
}
.grid-stack-item-content h3 {
  margin:.25rem 0 .75rem; font-size:16px;
  padding-right: 30px; /* Оставляем место для ручки */
}
.table-scroll {
  flex-grow: 1; /* Таблица растягивается */
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.table-scroll::-webkit-scrollbar{ width:10px; height:10px }
.table-scroll::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius:8px }
.table-scroll::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:8px }

/* «подъём» карточки при наведении */
.grid-stack > .grid-stack-item > .grid-stack-item-content{
  will-change: transform, box-shadow;
  transition: transform .25s ease, box-shadow var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease !important;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised), 0 0 0 1px var(--hover-outline);
}

/* Ручка для перетаскивания (на случай, если где-то используете .grid-stack-item-handle) */
.grid-stack-item-handle {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab;
  user-select: none;
  z-index: 10;
  transition: background-color .3s ease;
}
.grid-stack-item-handle:hover { background: rgba(0,0,0,0.15); }
.grid-stack-item-handle:active { cursor: grabbing; }
.grid-stack-item-handle svg { fill: currentColor; opacity: 0.6; }

/* =====================  TOPBAR  ===================== */
.wdg-topbar{
  position:sticky; top:0; z-index:9;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto;
  align-items:center; gap:.8rem;                      /* компактнее — лучше влезает */
  padding:.55rem .7rem; margin:.55rem;
  background:var(--panel); border-radius:10px; border:1px solid var(--border);
  box-shadow: var(--shadow-out);
  min-height: 52px; /* базовая высота */
  overflow:hidden;                                    /* ничего не вылезает наружу */
}
.wdg-topbar__title{ white-space:nowrap; }
.wdg-topbar__right{
  display:flex; align-items:center; gap:.6rem;
  min-width:0;                                     /* разрешаем сжиматься */
  justify-self:end;
  flex-wrap:nowrap;
}
.wdg-topbar__user{opacity:.85; white-space:nowrap}

.wdg-topbar__btn {
  padding: 0.42rem .9rem;
  font-size: 0.85rem;
  border-radius: 10px;
}

/* Блок статистики между title и правой частью */
.wdg-topbar__stats{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;        /* критично, чтобы колонка сжималась */
  width: 100%;
  display:flex; align-items:stretch; gap:.8rem;
  overflow: hidden;

  opacity: 0;
  pointer-events:none;
  margin-block: 0;

  transition: opacity .22s ease, margin-block .22s ease;
}
.wdg-topbar[data-expanded="true"] .wdg-topbar__stats{
  opacity: 1;
  pointer-events:auto;
  margin-block: .25rem;
}

/* внутренний контейнер, который анимируем по высоте */
.tb-anim{
  height:0;
  overflow:hidden;
  transition: height .28s ease;
  width:100%;
}

.tb-wrap{
  display:flex; align-items:center; gap:.9rem;
  padding:12px 10px;      /* больше отступы сверху/снизу */
  border-radius:12px;
  width:100%;
  min-width:0;
}

.tb-group{
  display:grid; grid-template-rows:auto 1fr auto; align-items:center;
  gap:.25rem;
  min-width: 180px;
}
.tb-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.tb-label{ opacity:.85; font-size:.9rem; }
.tb-scale{ display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.8rem; }
.tb-scale > span{ min-width:6ch; text-align:right; font-variant-numeric: tabular-nums; }

.tb-stack{
  display:flex; flex-direction:column; gap:6px;
  max-height: 42px;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.tb-stack::-webkit-scrollbar{ width:8px; height:8px }
.tb-stack::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius:8px }
.tb-stack::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:8px }

/* Шкалы: трек + заливка, чтобы на мобилах точно рисовалось */
.meter{
  position:relative;
  width: 130px;
  height: 10px;        /* чуть выше — лучше видно */
  border:1px solid var(--border);
  border-radius: 999px;
  background: var(--meter-track);
  box-shadow: var(--shadow-in);
  overflow:hidden;

  /* fallback-заливка трека по переменной --p (0..1), если вдруг width у fill не сработает */
  background-image:
    linear-gradient(
      to right,
      var(--fill-color, #2ecc71) 0,
      var(--fill-color, #2ecc71) calc(var(--p,0) * 100%),
      transparent calc(var(--p,0) * 100%)
    );
}
.tb-stack .meter,
.meter--ram,
.meter--net{ width: 100%; } /* тянемся по ширине контейнера */

.meter__fill{
  position:absolute; left:0; top:0;
  height:100%; width:0%;
  display:block;
  background: var(--fill-color, var(--meter-grad));
  background-color: var(--fill-color, transparent); /* Fallback для WebKit */
  transition: width .22s ease, background-color .22s ease, background .22s ease, transform .01s;
  will-change: width, background-color;
  min-width: 2px; /* видно даже при малых значениях на мобиле */
}

.tb-avg{ font-size:.9rem; opacity:.9; white-space:nowrap; }
.tb-val.tb-tabnum{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "tnum"; }

/* Спарклайн справа; на узких экранах скрываем */
.tb-spark{
  display:flex; align-items:center; gap:.5rem;
  min-width: 260px; max-width: 360px;
}
#tb-spark{ display:block; width:320px; height:34px; }
.tb-controls{ display:flex; align-items:center; gap:.4rem; }

/* селекты под один стиль */
.tb-select,
.tb-metric-select{
  padding:.35rem .6rem;
  border-radius:10px;
  background:var(--panel);
  box-shadow: var(--shadow-out);
  border:1px solid var(--border);
  color:var(--text);
}
.tb-select:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.tb-select:focus,.tb-select:active{ outline:none; box-shadow: var(--shadow-raised), 0 0 0 2px var(--hover-outline) }
.tb-periods{ display:none }
.tb-period.is-active{ color:var(--accent); box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }

/* адаптив */
@media (max-width: 1180px){
  .wdg-topbar{ grid-template-columns: 1fr auto; grid-template-rows:auto auto }
  .wdg-topbar__stats{ grid-column:1/-1; grid-row:2; min-width:0; width:100%; flex-wrap:wrap }
  .tb-spark{ display:none }
  .tb-wrap{ flex-wrap:wrap; width:100% }
}
@media (max-width: 920px){
  .tb-group{ min-width: 45% }
  .meter{ width:auto; flex:1; min-width:140px }
  .wdg-topbar__right{ gap:.6rem }
}
@media (max-width: 680px){
  .tb-group{ min-width: 100% }
  .tb-stack{ max-height:none }
  .tb-label{ font-size:.92rem }
  .tb-scale{ font-size:.8rem }
  .tb-avg, .tb-val{ font-size:.92rem }
  .wdg-topbar{ gap:.55rem }
  .wdg-topbar__btn{ padding:.38rem .8rem; font-size:.82rem }
  .wdg-topbar__toggle{ width:34px; height:30px }
  .theme-toggle{ --width:68px }
}
@media (max-width: 420px){
  .wdg-topbar{ padding:.5rem .6rem; margin:.5rem }
  .wdg-topbar__right{ gap:.45rem }
  .tb-wrap{ gap:.7rem; padding:12px 8px }
  .meter{ height:10px }
}

/* hoverable общая “обводка” */
.hoverable:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.hoverable:focus, .hoverable:focus-within{ outline:none; box-shadow: var(--shadow-out), 0 0 0 2px var(--hover-outline) }

/* ==== КНОПКА-СВЕРАЧИВАТЕЛЬ (в стиле ваших кнопок, маленькая) ==== */
.wdg-topbar__toggle{
  padding:0; width:40px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:0; cursor:pointer;
  color:var(--muted); background:var(--panel); box-shadow: var(--shadow-out);
}
.wdg-topbar__toggle:hover{ color:var(--accent); box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.wdg-topbar__toggle:active{ box-shadow: var(--shadow-in) }
.wdg-topbar__toggle svg{ width:18px; height:18px; opacity:.9; }
.wdg-topbar:not([data-expanded="true"]) .wdg-topbar__toggle .ico-up{ display:none }
.wdg-topbar[data-expanded="true"] .wdg-topbar__toggle .ico-down{ display:none }

/* =====================  ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ  ===================== */
.theme-toggle{
  --hue:220deg; --accent-hue:200deg; --width:86px; --easing:cubic-bezier(1,0,1,1);
  position:relative; display:flex; align-items:center; cursor:pointer;
  width:var(--width); height:calc(var(--width)/2.6); border-radius:var(--width);
  background:var(--panel); box-shadow: var(--shadow-raised);
  padding:0 8px; isolation:isolate;
}
.theme-toggle input{ display:none }
.theme-toggle__indicator{
  position:absolute; width:40%; height:60%; top:20%; border-radius:12px; display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 1px hsl(var(--hue) 20% 15% / 30%), inset 0 0 1.5px 1px hsl(var(--hue) 20% 15% / 30%), inset 0 0 2.5px 1px hsl(var(--hue) 20% 45% / 30%);
  transition: all var(--dur) var(--easing); z-index:0;
}
.theme-toggle__indicator.left{
  --hue: var(--accent-hue);
  left:10%; border-radius:100px 0 0 100px; overflow:hidden;
  background: var(--bg);
}
.theme-toggle__indicator.left::after{
  content:""; position:absolute; inset:0; opacity:.32;
  background: radial-gradient(120% 120% at 30% 50%, rgba(255,255,255,.325), transparent 60%);
}
.theme-toggle__indicator.right{
  right:10%; border-radius:0 100px 100px 0;
  background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 72%) 70%, hsl(var(--hue) 20% 66%));
}
:root:not([data-theme="light"]) .theme-toggle__indicator.right{
  background-image: linear-gradient(180deg, #4d5057, #383a40 60%, #313338 85%);
}
.theme-toggle__icon{ width:16px; height:16px; pointer-events:none; opacity:.9 }
:root:not([data-theme="light"]) .theme-toggle__indicator.left .theme-toggle__icon{ color:#7dc3ff }
:root:not([data-theme="light"]) .theme-toggle__indicator.right .theme-toggle__icon{ color:#ffd166 }
:root[data-theme="light"] .theme-toggle__indicator.left .theme-toggle__icon{ color:#0095da }
:root[data-theme="light"] .theme-toggle__indicator.right .theme-toggle__icon{ color:#bcc6d1 }

.theme-toggle__button{
  position:absolute; z-index:1; left:4%; top:13%;
  width:48%; height:74%;
  display: block;
  padding: 0;
  border-radius:999px; overflow:hidden;
  background-image: linear-gradient(160deg, hsl(var(--hue) 20% 96%) 40%, hsl(var(--hue) 20% 70%) 70%);
  box-shadow: 1px 1px 2px hsl(var(--hue) 18% 50% / 40%), 2px 4px 4px hsl(var(--hue) 18% 40% / 30%);
  transition: left var(--dur) var(--easing), transform var(--dur) ease, box-shadow var(--dur) ease, background-image var(--dur) ease;
}
.theme-toggle__button::before,
.theme-toggle__button::after{
  content:""; position:absolute; top:12%; width:42%; height:76%;
  border-radius:50%;
  background: linear-gradient(-50deg, hsl(var(--hue) 20% 96%) 20%, hsl(var(--hue) 20% 85%) 80%);
  box-shadow: inset 0.5px 0.5px 1px hsl(var(--hue) 20% 85%);
}
.theme-toggle__button::before{ left:6% }
.theme-toggle__button::after{ right:6%;
  box-shadow: inset 0.5px 0.5px 1.5px hsl(var(--hue) 20% 70%)
}
.theme-toggle:hover .theme-toggle__button{ transform: translateY(-1px); box-shadow: 2px 4px 6px hsl(var(--hue) 18% 50% / 55%), 10px 18px 14px hsl(var(--hue) 18% 40% / 40%), 0 0 0 1px var(--hover-outline) inset }
.theme-toggle input:checked ~ .theme-toggle__button{ left:48% }
:root:not([data-theme="light"]) .theme-toggle__button{
  background-image: linear-gradient(160deg, #4d5057 35%, #383a40 75%);
  box-shadow: 1px 1px 2px rgba(0,0,0,.3), 2px 4px 4px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) .theme-toggle__button::before{
  background: linear-gradient(-50deg, #4d5057 20%, #383a40 80%);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.05);
}
:root:not([data-theme="light"]) .theme-toggle__button::after{
  background: linear-gradient(-50deg, #383a40 20%, #313338 80%);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.5);
}

/* =====================  КНОПКИ  ===================== */
.button{
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:var(--radius); padding:.9rem 2.1rem;
  color:var(--muted); background:var(--panel);
  box-shadow: var(--shadow-out);
}
.button:hover{ color:var(--accent); box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.button:active{ box-shadow: var(--shadow-in) }
.button--pill{ border-radius:28px }
.button--round,.button--square,.button--pin{ width:3rem; height:3rem; padding:0; display:inline-flex; align-items:center; justify-content:center }
.button--round{ border-radius:50% }
.button--square{ border-radius:12px }
.button--pin{ width:2rem; height:2rem; border-radius:50% }

/* =====================  TEXT FIELD  ===================== */
.textfield{ display:flex; flex-direction:column; gap:.35rem; width:100% }
.textfield>span{ font-size:.92rem }
.textfield>div{
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:var(--radius);
  background:var(--panel); box-shadow: var(--shadow-in);
}
.textfield>div:hover{ box-shadow: var(--shadow-in), 0 0 0 1px var(--hover-outline) }
.textfield input{ flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit }
.textfield input::placeholder{ color:#98a8b8 }
.textfield>div:focus-within{ box-shadow: var(--shadow-raised), 0 0 0 2px var(--hover-outline) }

/* =====================  CHECKBOX / RADIO / SWITCH-ы  ===================== */
.checkbox,.radio{ position:relative; display:inline-flex; margin-right:.6rem }
.checkbox__input,.radio__input{ position:absolute; opacity:0; width:0; height:0 }

.checkbox__checkmark{
  width:2.2rem; height:2.2rem; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); box-shadow: var(--shadow-out);
}
.checkbox__checkmark::after{
  content:""; border:solid #b1b9c3; border-width:0 3px 3px 0; transform:rotate(45deg); width:.7rem; height:1rem;
}
.checkbox__input:checked ~ .checkbox__checkmark{ box-shadow: var(--shadow-in) }
.checkbox__input:checked ~ .checkbox__checkmark::after{ border-color: var(--accent) }
.checkbox__checkmark:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }

.radio__checkmark{
  width:2rem; height:2rem; border-radius:50%; background:var(--panel); box-shadow: var(--shadow-out); position:relative;
}
.radio__checkmark::after{ content:""; position:absolute; inset:25%; border-radius:50%; background:#aab8c6 }
.radio__input:checked ~ .radio__checkmark{ box-shadow: var(--shadow-in) }
.radio__input:checked ~ .radio__checkmark::after{ background: var(--accent) }
.radio__checkmark:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }

/* узкие вспомогательные переключатели */
.switch, .switch-alt{ position:relative; display:inline-flex; width:4rem; height:2.2rem; margin-right:.6rem }
.switch__input, .switch-alt__input{ opacity:0; width:0; height:0 }
.switch__slider, .switch-alt__slider{
  position:absolute; inset:0; border-radius:20px; background:var(--panel); box-shadow: var(--shadow-out);
}
.switch__slider:hover, .switch-alt__slider:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.switch__slider::before, .switch-alt__slider::before{
  content:""; position:absolute; top:50%; left:.25rem; transform:translateY(-50%);
  width:1.8rem; height:1.8rem; border-radius:50%; background:var(--panel); box-shadow: var(--shadow-in);
  transition:.4s cubic-bezier(.85,.05,.18,1.35);
}
.switch__input:checked + .switch__slider{ background:var(--accent); box-shadow: var(--shadow-raised) }
.switch__input:checked + .switch__slider::before{ transform:translate(100%, -50%) }
.switch-alt__slider{ box-shadow: var(--shadow-raised) }
.switch-alt__input:checked + .switch-alt__slider::before{ transform:translate(100%, -50%) }

/* =====================  CHIPS / ALERT / TOOLTIP  ===================== */
.chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--panel); color:var(--text);
  padding:.7rem 1.1rem; border-radius:var(--radius); box-shadow: var(--shadow-out) }
.chip:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.chip__close{ border:0; background:transparent; cursor:pointer; color:inherit }

/* активный чип — как в матрице */
.chip.is-active{ color:var(--accent); box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }

.alert{
  position:relative; padding:1rem 1.25rem; border-radius:var(--radius);
  background:var(--panel); box-shadow: var(--raised);
}
.alert:hover{ box-shadow: var(--shadow-raised), 0 0 0 1px var(--hover-outline) }
.alert__icon{ color:var(--accent); vertical-align:-2px; margin-right:.6rem }

/* временная совместимость (если var(--raised) не определён) */
.alert{ box-shadow: var(--shadow-raised); }

.tooltip{ position:relative }
.tooltip__text{
  position:absolute; left:50%; transform:translateX(-50%); bottom:100%; margin-bottom:.6rem;
  padding:.35rem .6rem; border-radius:8px; white-space:nowrap; opacity:0; visibility:hidden;
  background:var(--panel); box-shadow: var(--shadow-out);
}
.tooltip:hover .tooltip__text, .tooltip--visible .tooltip__text{ opacity:1; visibility:visible }

/* =====================  SLIDER  ===================== */
.slider{ width:100% }
.slider__input{
  -webkit-appearance:none; appearance:none; width:100%; height:.8rem; border-radius:var(--radius);
  background: linear-gradient(to right, var(--accent) 50%, var(--panel) 50%);
  box-shadow: var(--shadow-out);
}
.slider__input:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.slider__input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--panel); box-shadow: var(--shadow-out);
}
.slider__input::-moz-range-thumb{
  width:1.5rem; height:1.5rem; border:none; border-radius:50%;
  background:var(--panel); box-shadow: var(--shadow-out);
}

/* =====================  BLOCKQUOTE ===================== */
.quote{
  padding:24px; background:var(--panel); border-radius:var(--radius);
  box-shadow: var(--shadow-out); position:relative;
}
.quote:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.quote::before{
  content:"“"; position:absolute; left:16px; top:8px; font-size:36px;
  background:#b1b1b1; -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:rgba(255,255,255,.5) 1px 2px 1px;
}

/* =====================  GRID / CARDS / TABLE  ===================== */
/* Таблица-клеточки (обычные виджеты) */
.wdg-table .table-scroll{overflow:auto; max-width:100%}
.wdg-table table{ width:100%; border-collapse:separate; border-spacing:10px; font-size:14px }
.wdg-table th, .wdg-table td{
  padding:10px 12px; text-align:center; white-space:nowrap; border-radius:10px;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  box-shadow: var(--shadow-out);
}
.wdg-table th:hover, .wdg-table td:hover{ box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }
.wdg-table thead th{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.wdg-table td{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.wdg-table td.unavailable{opacity:.35}

/* =====================  AUTH CARD ===================== */
.auth{
  width:min(480px,92vw); margin:10vh auto; border-radius:20px; padding:22px;
  background:var(--panel); border:1px solid var(--border); box-shadow: var(--shadow-out);
}

/* спрятать чужие фикс-хендлы */
body > *[style*="position: fixed"][style*="top: 0"][style*="left: 0"] { display:none !important }
#djDebug, .djdt-panel, .simplebar-track, .os-scrollbar, .os-scrollbar-handle { display:none !important }

/* Не стилизуем обертку GridStack, карточка рисуется внутри */
.grid-stack > .grid-stack-item > .grid-stack-item-content{
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* Карточка заполняет контентную зону */
.grid-stack-item-content .wdg-card{
  position: relative; /* чтобы правильно спозиционировать ручку */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ручка перетаскивания (шеститочие) */
.wdg-drag-handle{
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: var(--shadow-out);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab;
  user-select: none;
  z-index: 2;
  touch-action: none; /* важно для mobile drag */
}
.wdg-drag-handle:active { cursor: grabbing; }
.wdg-drag-handle:hover { box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline); }
.wdg-drag-handle * { pointer-events: none; } /* клики внутри — не прерывают drag */

/* таблица тянется внутри карточки */
.wdg-card .table-scroll{ flex: 1; overflow: auto; }

/* заголовок внутри карточки */
.grid-stack-item-content .wdg-card h3{ margin:.25rem 0 .75rem; font-size:16px; }

/* === Hide GridStack resize arrows but keep invisible hit zones === */
.grid-stack .ui-resizable-handle,
.grid-stack .gs-resize-handle{
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 0 !important; /* даже при :hover */
}
.grid-stack .ui-resizable-n, .grid-stack .gs-resize-handle-n { height: 8px;  top:   -4px; cursor: n-resize; }
.grid-stack .ui-resizable-s, .grid-stack .gs-resize-handle-s { height: 8px;  bottom:-4px; cursor: s-resize; }
.grid-stack .ui-resizable-e, .grid-stack .gs-resize-handle-e { width:  8px;  right: -4px; cursor: e-resize; }
.grid-stack .ui-resizable-w, .grid-stack .gs-resize-handle-w { width:  8px;  left:  -4px; cursor: w-resize; }
.grid-stack .ui-resizable-se, .grid-stack .gs-resize-handle-se,
.grid-stack .ui-resizable-ne, .grid-stack .gs-resize-handle-ne,
.grid-stack .ui-resizable-nw, .grid-stack .gs-resize-handle-nw,
.grid-stack .ui-resizable-sw, .grid-stack .gs-resize-handle-sw{
  width: 12px; height: 12px; opacity: 0 !important;
}
.grid-stack-item:hover .ui-resizable-handle,
.grid-stack-item:hover .gs-resize-handle{ opacity: 0 !important; }

/* =====================  ACCESS MATRIX (совместимость с прежним)  ===================== */
.wdg-access .table-scroll{ overflow:auto; max-width:100% }
.wdg-access .matrix-table{
  width:100%;
  border-collapse:separate;
  border-spacing:10px;
  font-size:14px;
}
.wdg-access .matrix-table th,
.wdg-access .matrix-table td{
  padding:10px 12px;
  text-align:center;
  white-space:nowrap;
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow: var(--shadow-out);
}
.wdg-access .matrix-table th:hover,
.wdg-access .matrix-table td:hover{
  box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline);
}
.wdg-access .matrix-table thead th{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  position: sticky; top: 0; z-index: 2;
}
.wdg-access .matrix-table .sticky-col{
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  padding-left: 14px;
}
.wdg-access .user-cell .dot{ margin-right:.5rem }
.wdg-access .dot{
  width:.6rem; height:.6rem; border-radius:50%; display:inline-block;
  box-shadow: inset 0 0 0 1px var(--border);
}
.wdg-access .dot--online{ background:#2ecc71 }
.wdg-access .dot--offline{ background:#636a73 }
.wdg-access .matrix-check{ display:inline-flex; align-items:center; justify-content:center; }
.wdg-access .matrix-check .checkbox__checkmark{ width:1.6rem; height:1.6rem; border-radius:8px }

/* =====================  ACCESS MATRIX (актуальный .wdg-access-matrix)  ===================== */
.wdg-access-matrix .accmx { display:flex; flex-direction:column; gap:.5rem; height:100%; }
.wdg-access-matrix .accmx__toolbar { display:flex; gap:.5rem; flex-wrap:wrap; }
.wdg-access-matrix .accmx__scroll { flex:1; overflow:auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.wdg-access-matrix .accmx__scroll::-webkit-scrollbar{ width:10px; height:10px }
.wdg-access-matrix .accmx__scroll::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); border-radius:8px }
.wdg-access-matrix .accmx__scroll::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:8px }

/* рамка — по размерам таблицы */
.accmx__box{
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-out);
  overflow: hidden; /* только внешние 4 угла */
}

/* таблица — ширина по контенту */
.accmx__table {
  display: inline-table;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.accmx__table th, .accmx__table td{
  padding:8px 10px; text-align:center; white-space:nowrap; background: transparent;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* «один пробел» вокруг текста — для резерва ширины */
.accmx__pad::before, .accmx__pad::after { content: "\00a0"; }

.accmx__table thead th{
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-top: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3;
  backdrop-filter: blur(2px);
}
.accmx__table tr > *:first-child { border-left: 1px solid var(--border); text-align:left; }
.accmx__table tr > *:last-child { border-right: none; }
.accmx__table tr:last-child > * { border-bottom: none; }

.accmx__th-name { position: sticky; left: 0; z-index: 4; }
.accmx__user { text-align:left; }
.accmx__table tbody th{ position: sticky; left: 0; z-index: 2; background: var(--panel); }

.accmx__dot{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block; box-shadow: inset 0 0 0 1px var(--border) }
.accmx__dot--on{ background:#2ecc71 } .accmx__dot--off{ background:#636a73 }

.accmx__check{ display:inline-flex; align-items:center; justify-content:center }
.accmx__check .checkbox__checkmark{ width:1.4rem; height:1.4rem; border-radius:6px }
/* уменьшенная галочка только в матрице */
.wdg-access-matrix .accmx__check .checkbox__checkmark::after{
  width:.55rem; height:.8rem; border-width:0 2px 2px 0;
}

/* чип-фильтры — как в проекте */
.accmx__filter{ cursor:pointer; border:0; }
.accmx__filter.is-active{ color:var(--accent); box-shadow: var(--shadow-out), 0 0 0 1px var(--hover-outline) }

/* =====================  MAPS (YAMAPS/LEAFLET/GOOGLE)  ===================== */

/* Универсальные контейнеры карт */
.map-container, .ymap-container, .scalc-map {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* Прямо указываем, что жесты должны обрабатываться внутри */
  touch-action: auto !important;
  pointer-events: auto !important;
}

/* Страховка, чтобы дочерние элементы карты тоже были интерактивны */
.map-container *, .ymap-container *, .scalc-map * {
  pointer-events: auto !important;
}

/* Yandex Maps: стили для тёмной темы */
:root[data-theme="dark"] [class*="ymaps-"][class*="ground-pane"] {
  filter: var(--map-dark-filter) !important;
}
:root[data-theme="dark"] [class*="ymaps-"][class*="copyrights-pane"] {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Yandex Maps: стили для светлой темы (сброс фильтров) */
:root[data-theme="light"] [class*="ymaps-"][class*="ground-pane"],
:root[data-theme="light"] [class*="ymaps-"][class*="copyrights-pane"] {
  filter: none !important;
}

/* === FIX: якорим и прибиваем ручку к правому верхнему углу === */
.grid-stack-item-content,
.grid-stack-item-content .wdg-card { position: relative; }

.wdg-drag-handle{
  right: 8px !important;
  left: auto !important;
  z-index: 50;            /* поверх заголовка/карты */
}