/* Оформление дашборда: светлый фон с размытым цветным пятном и карточки
   «матовое стекло». Подключается после Tailwind, поэтому часть правил
   переопределяет готовые утилиты в шаблонах (main .bg-white и т. п.) —
   так все страницы получают общий вид без правки каждой вёрстки. */

:root{
  --bg:#f2f1ef;
  --ink:#1b1b1a;
  --ink-2:#6b6a66;
  --ink-3:#9c9a94;
  --line:rgba(27,27,26,.07);
  --glass:rgba(255,255,255,.52);
  --up:#16a34a; --up-bg:#e8f7ed;
  --down:#dc2626; --down-bg:#fdeaea;
  --warn:#b45309; --warn-bg:#fff3da;
  --accent:#ffd84d;
  --r-lg:24px; --r-md:18px; --r-sm:13px;
  --shadow:0 10px 36px rgba(27,27,26,.08), 0 2px 6px rgba(27,27,26,.04),
          inset 0 1px 0 rgba(255,255,255,.62);
  --glass-blur:blur(30px) saturate(180%);
}

html{overflow-x:hidden}
body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg) !important; color:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}
/* Пятно за содержимым: главная черта оформления */
body::before{
  content:''; position:fixed; z-index:0; pointer-events:none;
  top:-6vh; left:50%; transform:translateX(-50%);
  width:min(1500px, 128vw); height:min(1020px, 92vh);
  background:
    radial-gradient(42% 46% at 48% 38%, #ffb02e 0%, rgba(255,176,46,0) 68%),
    radial-gradient(38% 40% at 62% 30%, #ffe14d 0%, rgba(255,225,77,0) 70%),
    radial-gradient(34% 36% at 30% 56%, #ff8a3d 0%, rgba(255,138,61,0) 72%);
  filter:blur(58px);
}
body::after{
  content:''; position:fixed; z-index:0; pointer-events:none;
  bottom:-22vh; left:42%; transform:translateX(-50%);
  width:min(1000px, 96vw); height:min(700px, 70vh);
  background:radial-gradient(40% 44% at 50% 50%, #8fb6ff 0%, rgba(143,182,255,0) 70%);
  filter:blur(60px); opacity:.55;
}
header, main, aside, #sidebar-backdrop, #toast-container{position:relative; z-index:1}

/* ——— карточки: переопределяют белые блоки из шаблонов ——— */
main .bg-white, .glass{
  /* background-color отдельно от background-image: иначе блик стирается */
  background-color:var(--glass) !important;
  background-image:linear-gradient(145deg, rgba(255,255,255,.4), rgba(255,255,255,0) 58%) !important;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.6);
}
main .rounded-xl, main .rounded-lg{border-radius:var(--r-lg) !important}
main .shadow, main .shadow-sm{box-shadow:var(--shadow) !important}
main .card:hover{box-shadow:0 14px 42px rgba(27,27,26,.1) !important}
main .bg-gray-50{background:transparent !important}
main .bg-gray-100{background:rgba(27,27,26,.05) !important}
main .border-gray-200, main .divide-gray-200 > *, main .divide-gray-100 > *{border-color:var(--line) !important}
main .text-gray-800, main .text-gray-900{color:var(--ink) !important}
main .text-gray-600, main .text-gray-700{color:var(--ink-2) !important}
main .text-gray-500{color:var(--ink-2) !important}
main .text-gray-400{color:var(--ink-3) !important}
main .hover\:bg-gray-50:hover{background:rgba(255,255,255,.45) !important}

h1{letter-spacing:-.8px}
main h1.text-2xl{font-size:32px; font-weight:600; letter-spacing:-.9px}
main h2{letter-spacing:-.3px}
main table{font-size:13px}
main thead th{font-size:11.5px; color:var(--ink-3) !important; font-weight:700}

/* ——— верхняя панель ——— */
.topbar{
  display:flex; align-items:center; gap:12px;
  background-color:var(--glass);
  background-image:linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,0) 62%);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.6); border-radius:999px;
  padding:9px 13px; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:14.5px; white-space:nowrap}
.brand .mark{width:24px;height:24px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.navpill{
  display:flex; align-items:center; gap:2px; background:rgba(27,27,26,.045);
  border-radius:999px; padding:4px; margin:0 auto; max-width:100%;
  overflow-x:auto; scrollbar-width:none;
}
.navpill::-webkit-scrollbar{display:none}
.navpill a{
  display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink-2);
  font-size:13px; font-weight:600; padding:7px 11px; border-radius:999px; white-space:nowrap;
}
.navpill a:hover{color:var(--ink)}
.navpill a.on{background:rgba(255,255,255,.78); color:var(--ink);
  box-shadow:0 2px 8px rgba(27,27,26,.1)}
.navpill a svg, .chip svg, .iconbtn svg, .drawer a svg{
  width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.topright{display:flex; align-items:center; gap:7px}
.iconbtn{
  width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative;flex:none;
}
.iconbtn:hover{color:var(--ink)}
.iconbtn .cnt{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--down); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center;
}
.mode-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;white-space:nowrap}
.mode-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.mode-live{background:var(--down-bg); color:#b91c1c}
.mode-dry{background:var(--warn-bg); color:var(--warn)}
.mode-sandbox{background:#e8f0fe; color:#1d4ed8}

/* ——— заголовок страницы и действия ——— */
.pagehead{display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin:26px 0 22px}
.pagehead h1{font-size:33px; font-weight:600; letter-spacing:-.9px; margin:0 0 6px; color:var(--ink)}
.pagehead p{margin:0; color:var(--ink-2); font-size:13.5px}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; align-items:center}
.actions.top{justify-content:flex-end}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background-color:var(--glass);
  background-image:linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,0) 62%);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.6); border-radius:999px;
  padding:9px 15px; font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap;
  box-shadow:0 4px 14px rgba(27,27,26,.06); cursor:pointer; text-decoration:none;
}
.chip:hover{background:rgba(255,255,255,.8)}
.chip.accent{background:var(--accent); border-color:rgba(0,0,0,.06)}
.chip.danger{background:var(--down-bg); color:#b91c1c; border-color:rgba(220,38,38,.18)}
.chip.go{background:var(--up-bg); color:#15803d; border-color:rgba(22,163,74,.18)}
.chip input[type=text]{background:transparent; border:0; outline:none; font:inherit; width:150px}

/* ——— KPI ——— */
.kpi .lbl{font-size:12.5px; color:var(--ink-2); font-weight:600; display:flex; align-items:center}
.kpi .val{font-size:26px; font-weight:700; letter-spacing:-.9px; margin:8px 0 0; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.kpi .cap{font-size:11.5px; color:var(--ink-3); margin:6px 0 0}
.dots{margin-left:auto; color:var(--ink-3); font-weight:700; letter-spacing:1px}
.delta{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px}
.delta.up{background:var(--up-bg); color:var(--up)}
.delta.down{background:var(--down-bg); color:var(--down)}
.spark{display:flex; align-items:flex-end; gap:3px; height:42px; margin-top:14px}
.spark i{flex:1 1 auto; max-width:14px; border-radius:2px; background:#d9d7d2; display:block; min-height:2px}
.spark i.g{background:#34c06a} .spark i.r{background:#ef5350}
.spark-empty{height:42px; margin-top:14px; display:flex; align-items:center; font-size:11.5px; color:var(--ink-3)}

/* ——— датчик и строки состояния ——— */
.card .sub{font-size:12.5px; color:var(--ink-3); margin:2px 0 14px}
.gauge{display:grid; place-items:center; margin:2px 0 16px; position:relative}
.gauge svg{width:100%; max-width:250px; height:auto}
.gauge .mid{position:absolute; top:50%; text-align:center}
.gauge .mid span{display:block; font-size:12px; color:var(--ink-2); font-weight:600}
.gauge .mid b{display:block; font-size:28px; font-weight:700; letter-spacing:-1px; margin-top:2px}
.list-rows{background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-md); overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.list-rows > div{display:flex; align-items:center; gap:9px; padding:11px 14px;
  font-size:13px; border-bottom:1px solid rgba(255,255,255,.5)}
.list-rows > div:last-child{border-bottom:0}
.list-rows .nm{font-weight:600; min-width:0}
.list-rows .pill{margin-left:auto; flex:none; max-width:55%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.list-rows .mark{width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-3)}
.list-rows .mark.ok{background:#34c06a} .list-rows .mark.warn{background:#f2994a}
.list-rows .mark.bad{background:#ef5350} .list-rows .mark.mute{background:#cfccc6}

/* ——— пилюли-статусы ——— */
.pill{font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; display:inline-block}
.pill.ok{background:var(--up-bg); color:var(--up)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--down-bg); color:var(--down)}
.pill.mute{background:rgba(27,27,26,.06); color:var(--ink-2)}
/* старые бейджи из шаблонов приводим к тому же виду */
main .rounded-full{border-radius:999px !important}
main .bg-green-100{background:var(--up-bg) !important} main .text-green-700{color:var(--up) !important}
main .bg-red-100{background:var(--down-bg) !important}  main .text-red-700{color:var(--down) !important}
main .text-green-600{color:var(--up) !important} main .text-red-600{color:var(--down) !important}
main .bg-blue-500{background:#4a90e2 !important}
main .bg-gray-200{background:rgba(27,27,26,.1) !important}

/* ——— мобильный ящик меню ——— */
.drawer{
  position:fixed; top:0; left:0; height:100dvh; width:270px; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--line); box-shadow:0 0 50px rgba(27,27,26,.12);
  transform:translateX(-100%); transition:transform .2s; display:flex; flex-direction:column;
  padding:14px 12px; gap:3px; overflow-y:auto;
}
.drawer.open{transform:none}
.drawer a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-2);
  font-size:14px; font-weight:600; padding:10px 12px; border-radius:var(--r-sm);
}
.drawer a.on{background:rgba(27,27,26,.06); color:var(--ink)}
.drawer a .cnt{margin-left:auto; background:var(--down); color:#fff; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px}
body.menu-open{overflow:hidden}

/* на узком экране освобождаем место под меню: название — только в ящике */
@media (max-width:1340px){ .topbar > .brand{display:none} }
@media (max-width:1100px){ .navpill{display:none} }
@media (max-width:700px){
  /* на телефоне пятно мельче, иначе заливает весь экран */
  body::before{width:min(720px, 150vw); height:46vh; top:-2vh; filter:blur(50px); opacity:.62}
  body::after{opacity:.3}
  .pagehead h1{font-size:26px}
  .actions{margin-left:0}
  /* правый край пилюль должен быть общим, иначе строки идут лесенкой */
  .list-rows .pill{max-width:58%; white-space:normal; text-align:right; line-height:1.35}
  /* вертикальный ритм на телефоне плотнее */
  main.pt-6{padding-top:.6rem}
  .pagehead{margin:18px 0 16px}
  /* на телефоне кнопки управления — в столбик во всю ширину: иначе строки
     разной длины выстраиваются лесенкой */
  .actions.top{flex-direction:column; align-items:stretch; gap:8px}
  .actions.top > form{display:flex; flex-direction:column; gap:8px; width:100%}
  .actions.top .chip{justify-content:center; width:100%}
  .actions.top label.chip input[type=text]{width:100%; text-align:center}
  .actions.top > .pill{text-align:center}
  main h1.text-2xl{font-size:26px}
}