/* ===== from style.css ===== */
/* ==========================================================
   Подключаю шрифт (использую PT Sans Caption — читается отлично)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');

/* ==========================================================
   Глобальные переменные темы (единый источник цветов)
   ========================================================== */
:root{
  --c-000: #fff;
  --c-00bcd4: #00bcd4;
  --c-09141d42: #09141d42;
  --c-0c0f17: #0c0f17;
  --c-0e0f14: #0e0f14;
  --c-0f1118: #0f1118;
  --c-10131c: #10131c;
  --c-13deb9: #13deb9;
  --c-141824: #141824;
  --c-15172b: #15172b;
  --c-161821: #161821;
  --c-161821bd: #161821bd;
  --c-1b1e2a: #1b1e2a;
  --c-1b1e2a82: #1b1e2a82;
  --c-1b3c48: #86dfcdcc;
  --c-1b3c48d4: #1b3c48d4;
  --c-2196f3: #2196f3;
  --c-222: #222;
  --c-242736: #242736;
  --c-303245: #303245;
  --c-333: #333;
  --c-3b82f6: #3b82f6;
  --c-3cff9a: #3cff9a;
  --c-3f68f9: #3f68f9;
  --c-4caf50: #4caf50;
  --c-4da3ff: #4da3ff;
  --c-64b5f6: #64b5f6;
  --c-79ab40: #79ab40;
  --c-7f7f7f: #7f7f7f;
  --c-808080: #808080;
  --c-808097: #808097;
  --c-8341ef: #8341ef;
  --c-888: #888;
  --c-8a8a8a: #8a8a8a;
  --c-8bc34a: #8bc34a;
  --c-9aa0b3: #9aa0b3;
  --c-9ad1ff: #9ad1ff;
  --c-9b9b9b: #9b9b9b;
  --c-a3a9bb: #a3a9bb;
  --c-aaa: #aaa;
  --c-b6b6b6: #b6b6b6;
  --c-bbb: #bbb;
  --c-bdbdbd: #bdbdbd;
  --c-ccc: #ccc;
  --c-cfcfcf: #cfcfcf;
  --c-cfd8dc: #cfd8dc;
  --c-d7d7d7: #d7d7d7;
  --c-ddd: #ddd;
  --c-e0e0e0: #e0e0e0;
  --c-e4002b: #e4002b;
  --c-e4002ba3: #e4002ba3;
  --c-e7e7e7: #e7e7e7;
  --c-eaeaf0: #eaeaf0;
  --c-eb469f: #eb469f;
  --c-eee: #eee;
  --c-f44336: #f44336;
  --c-f5f5f5: #f5f5f5;
  --c-fa896b: #fa896b;
  --c-ff4d4d: #ff4d4d;
  --c-ff5722: #ff5722;
  --c-ff5c4d: #ff5c4d;
  --c-ff6b6b: #ff6b6b;
  --c-ff9800: #ff9800;
  --c-ffb3b3: #ffb3b3;
  --c-ffc0cb: #ffc0cb;
  --c-ffc107: #ffc107;
  --c-ffd2d8: #ffd2d8;
  --c-ffeb3b: #ffeb3b;
  --c-fff: #fff;
  --c-ffffff: #ffffff;
  --rgb-192130: rgb(192130);
  --rgb-2531313/15%: rgb(2531313/15%);
  --rgb-33150243/64%: rgb(33150243/64%);
  --rgb-363954: rgb(363954);
  --rgb-7617580/59%: rgb(7617580/59%);
  --rgba-0_0_0_p1: rgba(0,0,0,.1);
  --rgba-0_0_0_p25: rgba(0,0,0,.25);
  --rgba-0_0_0_p28: rgba(0,0,0,.28);
  --rgba-0_0_0_p35: rgba(0,0,0,.35);
  --rgba-0_0_0_p45: rgba(0,0,0,.45);
  --rgba-0_0_0_p55: rgba(0,0,0,.55);
  --rgba-0_0_0_0p45: rgba(0,0,0,0.45);
  --rgba-0_0_0_0p55: rgba(0,0,0,0.55);
  --rgba-0_0_0_0p65: rgba(0,0,0,0.65);
  --rgba-154_209_255_p35: rgba(154,209,255,.35);
  --rgba-20_22_30_0p92: rgba(20,22,30,0.92);
  --rgba-20_22_30_0p96: rgba(20,22,30,0.96);
  --rgba-228_0_43_p10: rgba(228,0,43,.10);
  --rgba-228_0_43_p12: rgba(228,0,43,.12);
  --rgba-228_0_43_p25: rgba(228,0,43,.25);
  --rgba-228_0_43_p28: rgba(228,0,43,.28);
  --rgba-228_0_43_p35: rgba(228,0,43,.35);
  --rgba-228_0_43_p55: rgba(228,0,43,.55);
  --rgba-228_0_43_p65: rgba(228,0,43,.65);
  --rgba-228_0_43_0: rgba(228,0,43,0);
  --rgba-228_0_43_0p12: rgba(228,0,43,0.12);
  --rgba-228_0_43_0p55: rgba(228,0,43,0.55);
  --rgba-244_67_54_p12: rgba(244,67,54,.12);
  --rgba-244_67_54_p45: rgba(244,67,54,.45);
  --rgba-244_67_54_0p12: rgba(244,67,54,0.12);
  --rgba-244_67_54_0p25: rgba(244,67,54,0.25);
  --rgba-244_67_54_0p35: rgba(244,67,54,0.35);
  --rgba-244_67_54_0p8: rgba(244,67,54,0.8);
  --rgba-255_255_255_p02: rgba(255,255,255,.02);
  --rgba-255_255_255_p03: rgba(255,255,255,.03);
  --rgba-255_255_255_p05: rgba(255,255,255,.05);
  --rgba-255_255_255_p06: rgba(255,255,255,.06);
  --rgba-255_255_255_p08: rgba(255,255,255,.08);
  --rgba-255_255_255_p10: rgba(255,255,255,.10);
  --rgba-255_255_255_p12: rgba(255,255,255,.12);
  --rgba-255_255_255_p20: rgba(255,255,255,.20);
  --rgba-255_255_255_p25: rgba(255,255,255,.25);
  --rgba-255_255_255_p35: rgba(255,255,255,.35);
  --rgba-255_255_255_0p02: rgba(255,255,255,0.02);
  --rgba-255_255_255_0p03: rgba(255,255,255,0.03);
  --rgba-255_255_255_0p04: rgba(255,255,255,0.04);
  --rgba-255_255_255_0p06: rgba(255,255,255,0.06);
  --rgba-255_255_255_0p08: rgba(255,255,255,0.08);
  --rgba-255_255_255_0p12: rgba(255,255,255,0.12);
  --rgba-255_255_255_0p14: rgba(255,255,255,0.14);
  --rgba-255_255_255_0p15: rgba(255,255,255,0.15);
  --rgba-255_255_255_0p45: rgba(255,255,255,0.45);
  --rgba-76_175_80_0p25: rgba(76,175,80,0.25);
  --rgba-76_175_80_0p35: rgba(76,175,80,0.35);
  --rgba-76_175_80_0p4: rgba(76,175,80,0.4);
  --rgba-76_175_80_0p9: rgba(76,175,80,0.9);

  /* Иконка темы */
  --theme-toggle-i: #3F51B5;

  /* legacy aliases */
  --bg: var(--c-0e0f14);
  --card: var(--c-161821);
  --border: var(--c-242736);
  --text: var(--c-eaeaf0);
  --muted: var(--c-9aa0b3);
  --accent: var(--c-4da3ff);
  --accent2: var(--c-e4002b);
  --light_green: var(--c-8bc34a);
}



/* ==========================================================
   LIGHT THEME (toggle via <html data-theme="light">)
========================================================== */
:root[data-theme="light"]{
  /* базовые поверхности */
  --c-0e0f14: #f6f7fb;   /* общий фон */
  --c-1b1e2a: #ffffff;   /* светлая часть градиента */
  --c-0f1118: #ffffff;   /* поля/карточки */
  --c-161821: #ffffff;   /* card */
  --c-141824: #f3f4f6;   /* вторичные кнопки/блоки */
  --c-0c0f17: #f9fafb;

  /* Иконка темы */
  --theme-toggle-i: #FF9800;

  /* границы */
  --c-242736: #e5e7eb;
  --border: var(--c-242736);

  /* текст */
  --c-eaeaf0: #111827;
  --text: var(--c-eaeaf0);
  --c-9aa0b3: #6b7280;
  --muted: var(--c-9aa0b3);

  /* “стекло”/оверлеи */
  --c-09141d42: rgba(0,0,0,.12);

  /* эти rgba у тебя используются в topnav/pagination/modal */
  --rgba-20_22_30_0p92: rgba(255,255,255,.92);
  --rgba-20_22_30_0p96: rgba(255,255,255,.96);

  /* тени */
  --rgba-0_0_0_p25: rgba(0,0,0,.10);
  --rgba-0_0_0_p35: rgba(0,0,0,.12);
  --rgba-0_0_0_0p45: rgba(0,0,0,0.12);
  --rgba-0_0_0_p55: rgba(0,0,0,.18);

  /* чтобы активный/hover выглядел мягче */
  --rgba-255_255_255_0p06: rgba(0,0,0,0.04);
  --rgba-255_255_255_0p08: rgba(0,0,0,0.06);
  --rgba-255_255_255_0p12: rgba(0,0,0,0.08);
  --rgba-255_255_255_0p14: rgba(0,0,0,0.10);
  --rgba-255_255_255_0p15: rgba(0,0,0,0.10);
  --rgba-255_255_255_0p04: rgba(0,0,0,0.03);
  --rgba-255_255_255_p03: rgba(0,0,0,0.03);
  --rgba-255_255_255_p05: rgba(0,0,0,0.05);
  --rgba-255_255_255_p08: rgba(0,0,0,0.08);
  --rgba-255_255_255_p10: rgba(0,0,0,0.10);
  --rgba-255_255_255_p12: rgba(0,0,0,0.12);
  --rgba-255_255_255_p20: rgba(0,0,0,0.16);
  --rgba-255_255_255_p25: rgba(0,0,0,0.18);
  --rgba-255_255_255_p35: rgba(0,0,0,0.22);
}

/* фон страницы: в light будет бело-серый градиент, потому что переменные выше поменяются */
:root[data-theme="light"] body{
  background: radial-gradient(var(--c-1b1e2a), var(--c-0e0f14) 70%);
}

/* ссылки/текст в выпадающем "Ещё" — чтобы не были белесые */
:root[data-theme="light"] .nav-more-menu a{
  color: var(--text);
}
:root[data-theme="light"] .nav-more-menu a:hover{
  color: var(--text);
}

/* таблицы в light — заголовки читаемее */
:root[data-theme="light"] th{
  background: var(--card);
}




/* ==========================================================
   Reset + базовая типографика
   ========================================================== */
*{
  box-sizing:border-box;

  /* оставил Inter как fallback, но основной шрифт — PT Sans Caption */
  font-family: Inter, system-ui, "PT Sans Caption", sans-serif;
}

body{
  margin:0;

  /* фон с лёгкой “дымкой”, чтобы карточки выделялись */
  background: radial-gradient(var(--c-1b1e2a), var(--c-0e0f14) 70%);

  color:var(--text);
  font-size: 15px;
  line-height: 1.27 !important;
}

/* ==========================================================
   Scrollbar: прячу скроллбар, но прокрутка остаётся
   (чтобы интерфейс выглядел аккуратно)
   ========================================================== */

/* старую кастомизацию оставляю закомментированной — на всякий случай */
/*
#customScrollbar::-webkit-scrollbar-track { background-color: var(--c-f5f5f5); }
#customScrollbar::-webkit-scrollbar { width: 15px; }
#customScrollbar::-webkit-scrollbar-thumb { background-color: var(--accent2); }
*/

.scrollbar{
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* плавная прокрутка на iOS */
  scrollbar-width: 0;                 /* Firefox */
}

.scrollbar::-webkit-scrollbar{
  display: none; /* Chrome/Edge/Safari */
}

/* ==========================================================
   Базовые контейнеры/карточки/сетка
   ========================================================== */
.container{
  max-width: 100%;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 85px 15px 15px 15px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 15px;
  margin-bottom: 15px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: center;
}

/* ==========================================================
   Таблицы (общий стиль для страниц с данными)
   ========================================================== */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

th{
  font-weight: 500;
  background:var(--card);
}

th, td{
  padding:8px;
  text-align:left;
  border:1px solid var(--border);
}

td ul{
  margin:0;
  padding-left:18px;
}

/* ==========================================================
   Фильтры (строка фильтрации)
   ========================================================== */
.filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: nowrap;
  margin-top:10px;
  padding-bottom: 15px;
}

/* ==========================================================
   Типографика/ссылки
   ========================================================== */
h3{ font-weight: 500; }

a{
  color: var(--accent2);
  text-decoration: none;
}
a:hover{ text-decoration: none; }

/* ==========================================================
   RADIO (кнопки-таблетки)
   ========================================================== */
.radio{
  display:flex;
  gap:10px;
}

.radio label{
  flex: 1;
  background: var(--c-1b1e2a);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;

  display:flex;
  padding: 5px;
  cursor:pointer;

  justify-content: space-evenly;
  align-items: center;
}

.radio input{ display:none; }

/* “активное” состояние — подсвечиваю красным */
.radio input:checked + span{
  display:block;
  background: var(--c-e4002b);
  border-radius: 10px;
  width: 100%;
  padding: 10px 0;
  color: var(--c-000);
  font-weight: 500;
}

/* картинки где-то в интерфейсе маленькие */
img{ width: 25%; }

/* ==========================================================
   Общие поля ввода (делаю единый стиль по проекту)
   ========================================================== */
input, select, textarea{
  width: 100% !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--c-0f1118) !important;
  color: var(--text);
}

/* фокус — красная подсветка (как в остальных местах) */
input:focus, input:active,
textarea:focus, textarea:active,
select:focus, select:active{
  background: var(--c-1b1e2a) !important;
  border-color: var(--c-e4002ba3) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .20rem var(--rgb-2531313/15%) !important;
}

/* placeholder — делаю читабельным */
::placeholder{ color: var(--text); }

/* ==========================================================
   Блок “услуги” (визуальные плашки)
   ========================================================== */
.usl div{
  background-color: var(--border);
  border-radius: 10px;
  padding: 7px;
  text-align: center;
}

.usltb{
  display:block;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 0 15px 0;
}

/* ==========================================================
   COLLAPSE / группы (раскрывающиеся блоки)
   ========================================================== */
.group{
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* заголовок кликабельный */
.group h3{
  margin: 0;
  padding: 16px;
  cursor: pointer;
  background: var(--border);

  display:flex;
  justify-content: space-between;
  align-items: center;
}

/* содержимое по умолчанию скрыто */
.group-content{
  display: none;
  padding: 14px;
  grid-gap: 12px;
}

/* в открытом состоянии показываю сеткой */
.group.open .group-content{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(325px, 0.3fr));
}

/* стрелка */
.arrow i{ color: var(--c-e4002b); }
.group.open > h3 .arrow{
  transform: rotate(180deg); /* когда открыто — стрелка вверх */
}

/* ==========================================================
   iOS SWITCH (мой кастомный переключатель)
   ========================================================== */
.check.ios-switch{
  display:flex;
  gap: 12px;
  width: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--c-0f1118);
  cursor: pointer;
  align-items: center;
  width: auto; /* внизу у тебя было, оставляю в одном месте */
}
.check.ios-switch span{
  color: var(--text);
}

/* реальный checkbox скрываю — кликаем по label */
.check.ios-switch input{
  display:none;
}

/* фон переключателя */
.check.ios-switch .cb{
  position: relative;
  width: 40px;
  height: 20px;
  background: var(--border);
  border-radius: 11px;
  transition: background .25s ease;
  flex-shrink: 0;
}

/* кружок (ползунок) */
.check.ios-switch .cb::after{
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--c-fff);
  border-radius: 50%;
  transition: transform .25s ease;
}

/* ВКЛ — красный фон и сдвиг кружка */
.check.ios-switch input:checked + .cb{
  background: var(--c-e4002b);
}
.check.ios-switch input:checked + .cb::after{
  transform: translateX(19px);
}

/* подпись рядом со свитчом */
.check.ios-switch .title{
  color: var(--text);
}

/* ==========================================================
   Пагинация/кнопки страниц
   ========================================================== */
.custom-page{
  background:transparent;
  border:1px solid var(--accent2);
  color:var(--accent2);
  padding: 5px 10px;
  border-radius:14px;
  text-decoration: none;
  cursor:pointer;
  font-weight: 500;
  transition:.2s;
}
.custom-page:hover{
  background:var(--accent2);
  color:var(--c-000);
}

/* ==========================================================
   TOTAL (фиксированная нижняя панель итогов)
   ========================================================== */
.total{
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding: 10px 35px;
  border: 1px solid var(--border);
  border-radius: 15px 15px 0 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 10px 15px 15px var(--rgba-0_0_0_0p45);
}

.total_left{
  display:flex;
  width: 400px;
  justify-content: space-between;
}

.total_right{
  display:flex;
  width: 250px;
  justify-content: space-between;
}

.total strong{
  font-size:45px;
  color:var(--accent2);
}

/* кнопки */
.save-btn{
  background: var(--light_green);
  border-radius: 10px;
  padding: 10px;
  font-weight: 500;
  border: 0;
  color: var(--c-000);
}
.save-btn:hover{
  transition: .2s;
  cursor: pointer;
  opacity: 0.8;
}

.reset-btn{
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: .2s;
}
.reset-btn:hover{
  background: var(--accent2);
  color: var(--c-000);
  opacity: 0.8;
}

/* ==========================================================
   Wheel counter (кнопки + инпут количества колёс)
   ========================================================== */
.wheel-counter{
/*  display:flex;
  align-items:center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;*/
}

.wheel-counter button{
  background: transparent;
  border: none;
  color: var(--accent2);
  width: 45px;
  height: 45px;
  border-radius: 10px;
  padding: 5px 0;
  cursor: pointer;
  transition: 0.2s;
}
.wheel-counter button:hover{ background: var(--c-1b1e2a); }

.wheel-counter input{
  text-align: center;

  /* тут специально ломаю “универсальные” input-стили,
     чтобы выглядело как сегмент между двумя кнопками */
  border-radius: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: 0 !important;
  border-right: 0 !important;

  width: 100px !important;
  padding: 7px !important;

  background: var(--c-0f1118);
  color: var(--text);
}

/* ==========================================================
   Repair highlight (сейчас пусто, но оставляю для расширения)
   ========================================================== */
.check.repair-highlight{
  display:flex;
  width:100%;
  flex-direction: column;
}

/* ==========================================================
   SIDEBAR (левое меню) + overlay через body.sidebar-open
   ========================================================== */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  width: 450px;
  height: 100vh;

  background: var(--card, var(--c-1b1e2a));
  border-right: 1px solid var(--border, var(--c-333));

  transform: translateX(-100%);
  transition: transform 0.3s ease;

  z-index: 1000;
  padding: 20px;
}

/* открыт */
.sidebar.open{ transform: translateX(0); }

/* затемнение фона (через pseudo-element у body) */
body.sidebar-open:before{
  content: " ";
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;

  background-color: var(--c-09141d42);
  backdrop-filter: blur(3px);

  z-index: 900;
}

/* header сайдбара */
.sidebar-header{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 20px;
  margin-bottom: 30px;
}
.sidebar-header img{ width: 145px; }

/* навигация внутри */
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 14px;
  margin-bottom: 10px;

  border-radius: 12px;
  color: var(--text, var(--c-fff));
  text-decoration: none;
  font-size: 18px;

  transition: background 0.2s;
}
.sidebar-nav a:hover{ background: var(--border, var(--c-333)); }

/* ==========================================================
   BURGER (кнопка открытия сайдбара)
   ========================================================== */
.sidebar-toggle{
  width: 55px;
  height: 50px;

  background: var(--rgba-20_22_30_0p92);
  backdrop-filter: blur(6px);

  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;

  box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
  cursor: pointer;

  position: fixed;
  top: 20px;
  left: 20px;

  z-index: 1100;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: left 0.3s ease;
}

/* линии бургера */
.burger,
.burger::before,
.burger::after{
  display:block;
  background-color: var(--c-e4002b);
  height: 3px;
  width: 41px;
  position: absolute;
  transition: all 0.3s ease;
}

.burger::before{ content:''; top: -13px; }
.burger::after{ content:''; top:  13px; }

.sidebar-toggle:hover{
  background: var(--border);
  border-radius: 10px;
}

/* когда меню открыто — превращаю бургер в крестик */
body.sidebar-open .burger{ background-color: transparent; }

body.sidebar-open .burger::before{
  transform: rotate(45deg) translate(0, 0);
  top: 0;
}

body.sidebar-open .burger::after{
  transform: rotate(-45deg) translate(0, 0);
  top: 0;
}

/* двигаю кнопку вместе с сайдбаром (чтобы не перекрывалась) */
body.sidebar-open .sidebar-toggle{
  left: 370px; /* ширина sidebar + отступ */
}

/* контейнер можно “сдвигать” визуально (по желанию) */
body.sidebar-open .container{
  margin-left: auto;
  transition: margin-left 0.3s ease;
}

/* ==========================================================
   TOP NAV + dropdown “Ещё”
   ========================================================== */
.topnav, .topnav-links{ overflow: visible !important; }
.topnav-account-flex{ display:flex; }
.topnav-account-flex img{
  width: 55px;
  height: 55px;
  background-color: var(--border);
  border-radius: 50%;
  padding: 5px;
  margin: 2px 10px 0 0;
}

/* блок “Ещё” */
.nav-more{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* кнопка “Ещё” стилизована как ссылка */
.nav-more-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 12px;

  background: transparent;
  border: 1px solid transparent;

  cursor: pointer;
  color: inherit;
  font: inherit;

  transition: background .18s ease, border-color .18s ease;
}
.nav-more-btn:hover{
  background: var(--border);
  border-color: var(--border);
}

/* небольшой “мостик”, чтобы меню не закрывалось при движении курсора */
.nav-more::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:100%;
  height:12px;
}

/* выпадающее меню */
.nav-more-menu{
  position: absolute;
  top: 100%;
  margin-top: 8px;

  min-width: 240px;

  background: var(--rgba-20_22_30_0p96);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;

  box-shadow: 0 16px 40px var(--rgba-0_0_0_0p45);

  display: none;
  z-index: 99999;
}

.nav-more-menu a{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  color: var(--c-cfd8dc);
  text-decoration: none;
}
.nav-more-menu a:hover{
  background: var(--rgba-255_255_255_0p06);
  color: var(--c-fff);
}

/* hover-open на десктопе */
@media (hover:hover){
  .nav-more:hover .nav-more-menu,
  .nav-more .nav-more-menu:hover{
    display:block;
  }
}

/* click-open (если открываю через JS классом open) */
.nav-more.open .nav-more-menu{ display:block; }

/* ==========================================================
   Alert (мой кастомный toast)
   ========================================================== */
.custom-alert{
  position: fixed;
  bottom: 10px;
  right: 20px;

  background: var(--c-1b1e2a);
  color: var(--text);

  padding: 13px 10px;
  border-radius: 12px;

  display:flex;
  align-items:center;
  gap: 10px;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition: .3s;
  z-index: 99999999;
}

.custom-alert.show{
  opacity: 1;
  transform: translateY(0);
}

/* типы уведомлений — меняю цвет полоски слева */
.custom-alert.success { border-left: 4px solid var(--c-3cff9a); }
.custom-alert.error   { border-left: 4px solid var(--c-ff4d4d); }
.custom-alert.info    { border-left: 4px solid var(--c-2196f3); }
.custom-alert.warn    { border-left: 4px solid var(--c-ffc107); }

.custom-alert i{
  position: relative;
  top: 3px;
}

/* кнопка “Сохранить” в состоянии busy (анимация прогресса) */
#saveCustomBtn.is-busy{
  position: relative;
  overflow: hidden;
  pointer-events: none;
  cursor: not-allowed;
  opacity: .45;
}

#saveCustomBtn.is-busy::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  height: 47px;
  width: 100%;

  background: var(--rgba-0_0_0_p28);
  transform: translateX(-100%);

  animation: saveBtnProgress 2s linear forwards;
}

@keyframes saveBtnProgress{
  to { transform: translateX(0); }
}

/* ==========================================================
   TOP NAV (фиксированная верхняя панель)
   ========================================================== */
.topnav{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 2500;

  display:flex;
  align-items:center;
  gap: 14px;

  background: var(--rgba-20_22_30_0p92);
  backdrop-filter: blur(6px);

  border: 1px solid var(--border);
  border-radius: 0 0 15px 15px;

  padding: 5px 12px;

  box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
}

/* левый блок (логотип/заголовок) */
.topnav-left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.topnav-logo{ width: 120px; height: auto; }

.topnav-title{
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* ссылки в навигации */
.topnav-links{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 1 1 auto;

  overflow-x: auto;
  padding: 4px 6px;

  scrollbar-width: none;
}
.topnav-links::-webkit-scrollbar{ width:0; height:0; }

.topnav-links a{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  margin: 5px 0;

  border-radius: 12px;

  color: var(--text);
  text-decoration:none;
  white-space: nowrap;

  border: 1px solid transparent;
  transition: .15s;
}

.topnav-links a:hover{ background: var(--border); }

.topnav-links a.active{
  background: var(--border);
  border-color: var(--border);
}

.topnav-links i{ position: relative; top: 2px; }
.topnav-extra {width: 250px;}

/* аккаунт справа */
.topnav-account{
  flex: 0 0 auto;

  display:flex;
  flex-direction: column;
  gap: 2px;

  padding-left: 10px;
  border-left: 1px solid var(--border);
  min-width: 210px;
}

.account-role{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.account-role.dev{ color: var(--c-ffc0cb); }
.account-role.admin{ color:var(--c-ff9800); }
.account-role.user{ color:var(--c-64b5f6); }
.account-name{ color:var(--text); }
.account-email{
  color:var(--c-2196f3);
  opacity: .9;
  word-break: break-all;
}
.theme-toggle {
  background-color: var(--border);
  border-radius: 10px;
  border: 0;
  padding: 7px; 
}
.theme-toggle i {
  font-size: 17px;
  color: var(--theme-toggle-i);
}

/* бургер для мобилки */
.topnav-burger{
  display:none;
  flex: 0 0 auto;

  width: 44px;
  height: 44px;

  border-radius: 12px;
  border: 1px solid var(--border);

  background: transparent;
  cursor:pointer;
}

.topnav-burger span{
  display:block;
  height: 3px;
  width: 22px;
  background: var(--accent2);
  margin: 5px auto;
  border-radius: 2px;
}

/* адаптив: на мобильных меню прячется в выпадающий блок */
@media (max-width: 980px){
  .topnav{
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 10px;
  }

  .topnav-title{ display:none; }
  .topnav-logo{ width: 95px; }

  .topnav-account{ min-width: 170px; }
  .topnav-burger{ display:block; }

  .topnav-links{
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% + 10px);

    background: var(--rgba-20_22_30_0p96);
    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: 0 12px 35px var(--rgba-0_0_0_0p55);

    padding: 10px;
    display: none;

    flex-direction: column;
    align-items: stretch;
    gap: 8px;

    max-height: 70vh;
    overflow: auto;
  }

  .topnav-links.open{ display:flex; }
  .topnav-links a{ justify-content: flex-start; }
}

/* ==========================================================
   KPI карточки / панели графиков (анимация появления)
   ========================================================== */
.section-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  font-style: italic;
  text-transform: uppercase;
  padding-bottom: 10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 6px 10px;
  border-radius: 15px;

  border:1px solid var(--rgba-255_255_255_p08);
  background: var(--rgba-255_255_255_p03);

  font-size: 12px;
  color:var(--text);
}

.date-range{ display:flex; align-items:center; gap:8px; }

.custom-reset{
  background: transparent;
  border:1px solid var(--accent2);
  color:var(--accent2);

  height:35px;
  padding:3px 10px;

  border-radius:10px;
  cursor:pointer;

  font-weight:700;
  transition:.2s;
}

button.custom-submit{
  background: var(--accent2);
  height:35px;

  color:var(--c-000);
  border:none;

  border-radius:10px;
  padding:8px 20px;

  cursor:pointer;
  transition:.2s;

  font-weight:600;
}

.custom-reset:hover{ transform: translateY(-1px); }
.custom-submit:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* KPI grid */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap:12px;
  margin-top: 14px;
}

@media (max-width: 1200px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media (max-width: 520px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

.kpi-card{
  position:relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  overflow:hidden;

  box-shadow: 0 18px 60px var(--rgba-0_0_0_p25);

  /* анимация reveal */
  transform: translateY(8px);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}
.kpi-card.show{ transform: translateY(0); opacity: 1; }

.kpi-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }

.kpi-icon{
  width: 50px;
  height: 50px;
  border-radius: 14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--rgba-228_0_43_p12);
  border: 1px solid var(--rgba-228_0_43_p35);
}
.kpi-icon i{ color:var(--c-e4002b); font-size: 25px; }

.kpi-title{
  color:var(--text);
  font-weight:700;
  font-size: 12px;

  text-transform: uppercase;
  letter-spacing: .7px;
}

.kpi-value{ margin-top: 10px; font-size: 22px; font-weight: 900; }
.kpi-sub{ margin-top: 4px; font-size: 12px; color:var(--c-7f7f7f); }

.kpi-glow{
  position:absolute;
  inset:-120px -120px auto auto;

  width: 220px;
  height: 220px;

  background: radial-gradient(circle at 30% 30%, var(--rgba-228_0_43_p25), var(--rgba-228_0_43_0));
  pointer-events:none;
}

/* панели графиков */
.grid-charts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 1000px){
  .grid-charts{ grid-template-columns: 1fr; }
}

.panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;

  box-shadow: 0 18px 60px var(--rgba-0_0_0_p25);

  transform: translateY(10px);
  opacity:0;
  transition: transform .55s ease, opacity .55s ease;
}
.panel.show{ transform: translateY(0); opacity: 1; }

.panel h3{
  margin:0 0 8px 0;
  font-size: 16px;
  font-weight: 850;
}
.panel .hint{
  margin:0 0 12px 0;
  color:var(--c-808080);
  font-size: 12px;
}

.chart-wrap{ height: 340px; }
.chart-wrap canvas{
  width:100% !important;
  height:100% !important;
}

/* ==========================================================
   Salary block (блок зарплаты)
   ========================================================== */
.salary-block{
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;

  box-shadow: 0 18px 60px var(--rgba-0_0_0_p25);

  transform: translateY(10px);
  opacity:0;
  transition: transform .55s ease, opacity .55s ease;
}
.salary-block.show{ transform: translateY(0); opacity: 1; }

.salary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.salary-title{
  display:flex;
  align-items:center;
  gap:10px;

  font-size: 18px;
  font-weight: 900;
}

.salary-kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.salary-kpi{
  display:flex;
  flex-direction:column;
  gap:2px;

  padding: 8px 10px;

  border:1px solid var(--rgba-255_255_255_p08);
  background: var(--rgba-255_255_255_p03);

  border-radius: 15px;
  font-size: 12px;
  color:var(--text);
}
.salary-kpi b{ color:var(--text); font-size: 13px; }

.salary-table{
  width:100%;
  border-collapse: collapse;
}

.salary-table th,
.salary-table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--rgba-255_255_255_0p06);
  text-align:left;
}

.salary-table thead th{
  color:var(--text);
  font-weight:800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.salary-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 6px 10px;
  border-radius: 999px;

  border:1px solid var(--rgba-228_0_43_p28);
  background: var(--rgba-228_0_43_p10);
  color:var(--c-e4002b);

  font-weight:800;
  font-size: 12px;
}

/* ==========================================================
   Flatpickr: правлю внешний вид (у тебя это для календаря)
   ========================================================== */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  background: transparent !important;
  color: var(--c-000) !important;
  font-size: 15px !important;
  padding: 0 !important;
  border: none !important;
}

.flatpickr-current-month .numInputWrapper{
  position: relative !important;
  bottom: 20px !important;
}

/* ==========================================================
   НИЖЕ — твои стили для страницы прайсов/групп/модалок
   (оставил структуру, но сделал понятные комментарии)
   ========================================================== */

/* layout: слева список групп, справа контент */
.page-wrap{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  margin-top: 12px;
}

/* (перекрываю .card, потому что для этой страницы другой фон) */
.card{
  background:var(--c-0f1118);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.card h3{
  margin:0 0 10px 0;
  font-size:16px;
  color:var(--text);
}

.muted{ color:var(--c-8a8a8a); font-size: 13px; }



    /* =========================================================
       BUTTONS
    ========================================================= */
.btn{
  padding:5px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-141824);
  color:var(--text);
  cursor:pointer;
  transition: .15s;
}    
    .btn:hover{ transform: translateY(-1px); }

    .btn-primary{
      border-color: var(--rgba-228_0_43_p55);
      background:var(--c-e4002b);
      color:var(--c-fff);
    }
    .btn-primary:hover{ filter: brightness(1.05); }

    .btn-danger{ border-color: var(--rgba-244_67_54_p45); }
    .btn-danger:hover{ background: var(--rgba-244_67_54_p12); }

    .btn-row{ display:flex; gap:10px; flex-wrap: wrap; }









/* inputs */
.input, .select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-0f1118);
  color:var(--text);
  outline:none;
}
.input:focus, .select:focus{
  border-color:var(--c-e4002b);
  box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
}

/* список групп */
.groups{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.group{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}

.group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  cursor:pointer;
  background:var(--c-0f1118);
}

.group-head .title{ font-weight:700; }

.group-head .badge{
  font-size: 15px;
  color:var(--c-9ad1ff);
  border:1px solid var(--rgba-154_209_255_p35);
  padding:3px 8px;
  border-radius: 999px;
}

.group-body{ display:none; padding: 10px; background:var(--c-0c0f17); }
.group.open .group-body{ display:block; }

/* строка услуги */
.srv{
  display:grid;
  grid-template-columns: 1fr 110px 130px 120px 270px;
  gap:10px;
  align-items:center;

  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:8px;

  background: var(--c-1b1e2a);

  cursor: grab; /* у меня тут drag-n-drop */
}
.srv.dragging{ opacity:.55; transform: scale(.995); }

.srv .stitle{ font-weight:700; }
.srv .meta{ font-size:12px; color: var(--light_green); margin-top:4px; }

.srv .drag-handle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:8px;

  cursor: grab;
  user-select:none;

  color:var(--c-9ad1ff);
  font-weight:700;
}

/* кнопки внутри строки */
.small-btn{
  padding:7px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-141824);
  cursor:pointer;
  color:var(--text);
}
.small-btn:hover{ filter: brightness(1.05); } /* transform: было пустое — убрал */

.small-btn.danger{ border-color: var(--rgba-244_67_54_p45); }
.small-btn.danger:hover{ background: var(--rgba-244_67_54_p12); }

/* инпут цены */
.price-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-0f1118);
  color:var(--text);
  text-align:center;
}
.price-input:focus{
  border-color:var(--c-e4002b);
  box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
  outline:none;
}

/* подсветка группы при drag-over */
.group-body.drag-over{
  outline: 2px dashed var(--rgba-154_209_255_p35);
  outline-offset: 6px;
  border-radius: 12px;
}

/* modal (общая) */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background: var(--rgba-0_0_0_p55);
  z-index: 4000;

  align-items:center;
  justify-content:center;
  padding: 20px;
}

/* show-состояние */
.modal.show{
  display:flex;

  /* у меня тут отдельный бэкдроп */
  background-color: transparent;
  backdrop-filter: blur(3px);
}

/* окно */
.modal-box{
  width: 760px;
  max-width: 95vw;

  background:var(--c-0f1118);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.modal-head .x{
  cursor:pointer;
  font-size: 22px;
  color:var(--c-aaa);
}
.modal-head .x:hover{ color:var(--c-ff6b6b); }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hr{ height:1px; background: var(--border); margin: 12px 0; }

/* адаптив для прайса */
@media (max-width: 1000px){
  .page-wrap{ grid-template-columns: 1fr; }
  .srv{ grid-template-columns: 1fr 110px 1fr; }
}

/* ==========================================================
   Account info fixed (инфа о пользователе справа сверху)
   ========================================================== */
.account-info{
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 2000;

  display: flex;
  flex-direction: column;
  gap: 4px;

  background: var(--rgba-20_22_30_0p92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 14px;

  padding: 10px 14px;
  box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);

  font-size: 13px;
  line-height: 1.3;
}

.account-role{ color: var(--c-8bc34a); text-transform: uppercase; letter-spacing: .5px; }
.account-role.admin{ color: var(--c-ff9800); }
.account-role.user{ color: var(--c-64b5f6); }

@media (max-width: 768px){
  .account-info{
    top: 10px;
    right: 10px;
    padding: 8px 12px;
  }
}

/* ==========================================================
   Календарь / статусы дней (work/vacation/…)
   ========================================================== */
.calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.day{ padding:10px; border-radius:10px; cursor:pointer; min-height:70px; }
.day .num{ font-weight:500; font-size:21px; }
.day .salary{ font-size:12px; opacity:.8; margin-top:3px; }

/* карточки дней */
.day_off{
  border: 1px solid var(--border);
  background: var(--rgba-255_255_255_0p04);
  color: var(--c-ccc);
  margin: 3px;
}
.work{ background:var(--c-4caf50); color:var(--c-fff); margin: 3px; }
.vacation{ background:var(--c-2196f3); color:var(--c-fff); margin: 3px; }
.sick{ background:var(--c-f44336); color:var(--c-fff); margin: 3px; }
.holiday{ background:var(--c-00bcd4); color:var(--c-fff); margin: 3px; }

.weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  font-size: 19px;
  text-align:center;
  font-weight:bold;
  margin-bottom:5px;
}

.calendar-grid{
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;

  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;

  padding: 60px 20px 20px 20px;
  margin-top: -55px;
}

/* модалка календаря (отдельная) */
.modal.open{ display:flex; } /* совместимо с другой логикой открытия */

#modalDate{ margin: 0 0 25px 0; }

/* выбор статуса */
.status-options{ display:flex; flex-direction: row; gap: 6px; }

.status-option{
  display:flex;
  align-items:center;

  cursor:pointer;
  padding: 6px 10px;
  border-radius: 6px;

  background: var(--c-222);
  color: var(--c-fff);

  transition: background 0.2s;
  user-select:none;
}
.status-option input{ display:none; }
.status-option span{ display:flex; align-items:center; justify-content:center; }
.status-option input:checked + span{ font-weight: 500; color: var(--text); }

.status-option.work{ background: var(--c-4caf50); }
.status-option.day_off{ background: var(--c-0f1118); border: 1px solid var(--border); }
.status-option.vacation{ background: var(--c-2196f3); }
.status-option.holiday{ background: var(--c-00bcd4); }
.status-option.sick{ background: var(--c-f44336); }

/* выходные подсвечиваю красным */
.weekend{ color: var(--accent2) !important; }

/* форма (месяц + кнопки) */
form{
  display:flex;
  width: 445px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.month-wrapper{
  position: relative;
  width: 220px;
  padding-right: 60px;
}

.month-wrapper input{
  width: 145px;
  margin-left: 15px;
}

/* прячу стандартную иконку month picker (оставляю свою) */
input[type="month"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  cursor: pointer;
}

/* своя иконка календаря */
.calendar-icon{
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 18px;
  color: var(--c-4caf50);
}

/* “подкрашиваю” системный индикатор если вдруг не скрыт */
input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(1) sepia(1) saturate(5) hue-rotate(90deg);
}

/* ==========================================================
   Pagination bar (фиксированная панель снизу по центру)
   ========================================================== */
.pagination-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;

  background: var(--rgba-20_22_30_0p92);
  backdrop-filter: blur(6px);

  border: 1px solid var(--border);
  border-radius: 16px;

  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 8px;

  z-index: 9999;
}

.pagination-bar a,
.pagination-bar span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width: 36px;
  height: 34px;
  padding: 0 10px;

  border-radius: 10px;
  border: 1px solid var(--border);

  text-decoration:none;
  color:var(--c-fff);

  background: var(--rgba-255_255_255_0p04);
  font-weight: 500;
}

.pagination-bar a:hover{ background: var(--rgba-255_255_255_0p08); }
.pagination-bar .active{ background: var(--accent2); border-color: var(--border); }
.pagination-bar .disabled{ opacity:.45; pointer-events:none; }
.pagination-bar .dots{ border:0; background:transparent; min-width: 20px; padding: 0 4px; color:var(--c-aaa); }
.pagination-bar .page-info{ color:var(--c-aaa); margin-left: 6px; white-space: nowrap; }

/* ==========================================================
   animation (reveal) — универсальная анимация появления
   ========================================================== */

/* любой блок с классом .animation будет плавно появляться */
.animation{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.animation.show{
  opacity: 1;
  transform: translateY(0);
}

/* уважаю настройку “уменьшить анимацию” */
@media (prefers-reduced-motion: reduce){
  .animation{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== from accounting.css ===== */
button.custom-submit {
    background: var(--accent2);
    color: var(--c-000);
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    cursor: pointer;
    transition: 0.2s;
}

button.custom-submit:hover {
  background: var(--c-e4002b);
  color: var(--c-fff);
}

button.custom-submit-add {
    background: var(--c-8bc34a);
    color: var(--c-000);
    font-weight: 500;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    cursor: pointer;
    transition: 0.2s;
}

button.custom-submit-add:hover {
  background: var(--c-79ab40);
}

.wheel-counter input {
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  width: 100px;
  padding: 6px !important;
  background: var(--c-0f1118);
  color: var(--text);
}

.wheel-counter input:active,
.wheel-counter input:focus,

.modal-box textarea {
  border-radius: 8px;
  border: 1px solid var(--border);
  width: auto;
  height: 75px;
  padding: 7px;
  background: var(--card);
  color: var(--text);
}

.modal-box textarea:active,
.modal-box textarea:focus,
.modal-box textarea:focus-visible {
  border: 1px solid var(--c-e4002b) !important;
  outline: 0;
}

.wheel-counter input[type="text"] {
  width: 100%;
  max-width: 200px; /* или любую удобную */
}

::placeholder {
  color: var(--text);
}
.wheel-counter input[type="date"] {
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  width: 150px;        /* можно подстроить */
  padding: 7px;
  background: var(--c-0f1118);
  color: var(--text);
  cursor: pointer;
}

.wheel-counter input[type="date"]:focus {
  border: 1px solid var(--c-e4002b) !important;
  outline: 0;
}

/* placeholder стилизуется как обычный текст, но в date он может не работать в некоторых браузерах */
.wheel-counter input[type="date"]::placeholder {
  color: var(--text);
}

/* убрать стрелки в Chrome/Edge (не влияет на календарь, только на input как number) */
.wheel-counter input::-webkit-inner-spin-button,
.wheel-counter input::-webkit-calendar-picker-indicator {
  display: block;
  -webkit-appearance: none;
}
.wheel-counter button {
    background: var(--c-1b1e2a82);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--accent2);
    font-size: 11px;
    width: auto;
    height: auto;
    padding: 8px 10px;
    cursor: pointer;
    transition: 0.2s;
}
.custom-reset
 {
    background: transparent;
    border: 1px solid var(--accent2);
    color: var(--accent2);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: .2s;
}
.custom-reset:hover
 {
    background: var(--accent2);
    color: var(--c-000);
}
.custom-excel
 {
    display: flex;
    background: transparent;
    border: 1px solid var(--c-8bc34a);
    color: var(--c-8bc34a);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: .2s;
}
.custom-excel:hover
 {
    background: var(--c-8bc34a);
    color: var(--c-000);
}
.toggle-services-btn
 {
    display: flex;
    background: transparent;
    border: 1px solid var(--c-4caf50);
    color: var(--c-4caf50);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 400;
    transition: .2s;
    justify-content: center;
}
.toggle-services-btn:hover
 {
    background: var(--c-4caf50);
    color: var(--c-000);
}

td ul
 {
    margin: 0;
    padding-left: 3px;
    width: 255px;
}
li
 {
    display: flex;
    unicode-bidi: isolate;
    list-style: none;
    background: var(--c-0f1118);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px 10px;
    margin: 3px;
    align-items: center;
    font-size: 13px;
    justify-content: flex-start;
}
ul {
    display: flex;
    width: 200px;
    padding-left: 18px;
    justify-content: flex-start;
    flex-direction: column;
}
.services-list .more-services {
  margin-top: 5px;
}

/* можно добавить плавное раскрытие через transition */
.services-list .more-services {
  transition: all 0.3s ease;
}
.date-range {
    display: flex;
    gap: 5px;
    background: var(--c-1b1e2a);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 10px;
    color: var(--text);
    width: 285px;
    height: 42px;
    align-items: center;
}

.date-range input {
  text-align: center;
  border-radius: 0 !important;
  border: 0 !important;
  width: 210px !important;
  margin-top: 7px;
  padding: 6px !important;
  background: var(--c-1b1e2a) !important;
  color: var(--text);
}

.date-range i {
    position: relative;
    color: var(--accent2);
    cursor: pointer;
    font-size: 18px;
    top: 12px;
}

.date-range:focus-within {
  border-color: var(--c-e4002b);
}

.clear-date {
  opacity: 0.6;
  top: 2px !important;
}
.clear-date:hover {
  opacity: 1;
}


/* ===== inline <style> from pages/account.php ===== */
/**
 * Локальные стили для страницы кабинета.
 * Здесь я не выношу в общий CSS, потому что:
 * - это отдельная страница
 * - стили специфичные
 */

.card { background:var(--c-0f1118); border:1px solid var(--border); border-radius:16px; padding:16px; margin-top:14px; }
label { display:block; color:var(--text); margin: 10px 0 6px;}
input { width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--c-0f1118); color:var(--c-fff); }

.small { font-size: 13px; color: var(--c-a3a9bb); margin-top: 6px; }
.hr { height:1px; background: var(--rgba-255_255_255_0p08); margin: 14px 0; }

/* мини-тост уведомление */
.custom-alert {
  position: fixed;
  bottom: 30px;
  right: 20px;
  padding: 10px 14px;
  border-radius: 10px;
  background:var(--c-333);
  color:var(--c-fff);
  z-index:4000;
  border:1px solid var(--rgba-255_255_255_0p15);
}
.custom-alert.success { background: var(--rgba-76_175_80_0p25); }
.custom-alert.error { background: var(--rgba-244_67_54_0p25); }

/* шапка карточки */
.topline { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.profile-head { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.profile-left { display:flex; gap:14px; align-items:center; }

/* key-value блоки */
.kv { display:grid; grid-template-columns: 320px 1fr; gap:10px; margin-top:10px; }
@media (max-width: 820px) { .kv { grid-template-columns: 1fr; } }
.kv .k { color:var(--c-aaa); font-size:13px; }
.kv .v { color:var(--c-fff); word-break: break-word; }

/* бейджи статусов */
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.badge { font-size:15px; padding:6px 10px; border-radius:999px; border:1px solid var(--rgba-255_255_255_0p14); background: var(--rgba-255_255_255_0p04); }
.badge.ok { border-color: var(--rgba-76_175_80_0p35); }
.badge.err { border-color: var(--rgba-244_67_54_0p35); }
.badge.mute { opacity: .85; }


/* ===== inline <style> from pages/accounting.php ===== */
/**
 * Небольшая правка селекта месяцев в flatpickr.
 * Плюс стили кнопки удаления, чтобы выглядело “как иконка”.
 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  color: var(--c-000) !important;
  font-size: 15px !important;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 .5ch !important;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: 0 !important;
  box-shadow: none !important;
}
.flatpickr-current-month .numInputWrapper { display: none; }

.delete-order-btn {
  background: none;
  color: var(--accent2);
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}
.delete-order-btn:hover { background: var(--card) !important; }

/* ===== inline <style> from pages/clients.php ===== */
/* поле поиска чуть шире */
    .search-input{
      width: 260px;
      border-radius: 10px;
    }

    /* маленькие "чипы" (если понадобятся) */
    .badge{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 8px; border-radius:999px;
      border:1px solid var(--border);
      background: var(--rgba-255_255_255_0p03);
      color:var(--text); font-size:12px;
    }

    td.phone{ white-space:nowrap; }


/* ===== inline <style> from pages/login.php ===== */
/* =========================
       Мини-страница логина (без лишнего bootstrap)
    ========================= */

    .auth-wrap{
      min-height: 55vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 24px;
    }
    .auth-card{
      width: 420px;
      max-width: 95vw;
      background: var(--c-0f1118);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 20px 60px var(--rgba-0_0_0_0p55);
    }
    .auth-title{
      margin: 0 0 6px 0;
      font-size: 22px;
      font-weight: 700;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .auth-subtitle{
      margin: 0 0 18px 0;
      color: var(--c-8a8a8a);
      font-size: 14px;
    }
    .auth-alert{
      border: 1px solid var(--rgba-244_67_54_0p35);
      background: var(--rgba-244_67_54_0p12);
      color: var(--c-ffb3b3);
      padding: 10px 12px;
      border-radius: 12px;
      margin-bottom: 12px;
      font-size: 14px;
    }
    label{
      display:block;
      margin: 12px 0 6px;
      color: var(--text);
      font-weight: 500;
    }
    .input{
      width:100%;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--c-0f1118);
      color: var(--text);
      font-size: 15px;
      outline: none;
      transition: 0.15s ease;
    }
    .input:focus{
      border-color: var(--c-e4002b);
      box-shadow: 0 0 0 3px var(--rgba-228_0_43_0p12);
    }
    .meta{
      margin-top: 14px;
      display:flex;
      justify-content: space-between;
      gap:10px;
      color:var(--c-7f7f7f);
      font-size: 12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom: 14px;
      opacity: 0.95;
    }
    .brand .name{
      color: var(--c-e4002b);
      font-size: 25px;
      font-weight: 700;
      letter-spacing: 3.2px;
    }
    .brand .hint{
      font-size: 12px;
      color:var(--c-7f7f7f);
    }


/* ===== inline <style> from pages/online_booking.php ===== */
/* =========================
   БАЗОВЫЕ ПРАВКИ СТРАНИЦЫ
========================= */
body {
  margin: 0;
  background: radial-gradient(var(--c-1b1e2a), var(--c-0e0f14) 70%);
  color: var(--text);
  font-size: 15px;
}

a {
  color: var(--accent2);
  text-decoration: none;
}
.topnav { z-index: 999; }

/* Карточки у меня в проекте свои, поэтому bootstrap-card переопределяю */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--text);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.or-card { margin-top: 14px; }
#calendar { margin-top: 10px; }

/* Адаптивное выравнивание инпутов в модалке */
.row-gap { display:flex; gap:12px; flex-wrap:wrap; }
.row-gap > div { flex: 1 1 220px; min-width: 220px; }

.fc { --fc-today-bg-color: transparent !important; }

/* Month (dayGrid): убираем заливку сегодняшнего дня */
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background: transparent !important;
}

/* Week/Day (timeGrid): убираем заливку сегодняшней колонки */
.fc .fc-timegrid-col-bg .fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background: transparent !important;
}

/* На всякий: шапка "сегодня" */
.fc .fc-col-header-cell.fc-day-today {
  background: transparent !important;
}

/* =========================
   FULLCALENDAR: ВНЕШНИЙ ВИД (под стиль проекта)
========================= */
.fc { color: var(--c-e7e7e7); }
.fc .fc-toolbar-title { color: var(--c-fff); }
.fc .fc-button { border-radius: 10px; }
.fc .fc-timegrid-slot { height: 4.1em; }
.fc .fc-timegrid-slot:hover { background: var(--rgba-255_255_255_0p06); }

.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: var(--border);
}

.fc .fc-col-header-cell-cushion { padding: 10px 6px; color:var(--text); text-decoration: none; }
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion { color:var(--c-bdbdbd); }

/* Я подсветку выделения диапазона не использую */
.fc .fc-highlight { background: transparent; }

/* В dayGrid фон я делаю через var(--border) */
.fc .fc-daygrid-day-frame { background-color: var(--border); }

/* =========================
   MODAL (bootstrap) под темную тему
========================= */
.modal { background-color: var(--c-09141d42); backdrop-filter: blur(3px); }
.modal-content { background: var(--c-0f1118); color: var(--c-fff); border: 1px solid var(--border); border-radius: 16px; }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-xl { top: 15%; }

/* Инпуты/селекты в одном стиле */
.form-control, .form-select {
  background: var(--rgba-255_255_255_0p06);
  border: 1px solid var(--rgba-255_255_255_0p12);
  color: var(--c-fff);
  border-radius: 12px;
}
.form-control::placeholder { color: var(--rgba-255_255_255_0p45); }

table { margin-top: 0; }

/* FullCalendar кнопки тоже подгоняю */
.fc .fc-button-primary {
  background-color: var(--border);
  border-color: transparent;
  color: var(--text);
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:disabled,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--border);
  border-color: transparent;
  color: var(--text);
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none;
}

/* =========================
   NAV LINKS (переопределение под проект)
========================= */
.topnav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: .15s;
}

/* ===== Активный пункт меню ===== */
.topnav-links a {
  color: var(--text-color);
  transition: 0.2s ease;
}

.topnav-links a i {
  transition: 0.2s ease;
}

/* активная ссылка */
.topnav-links a.nav-active {
  color: inherit;
  font-weight: 500;
}

/* активная иконка */
.topnav-links a.nav-active i {
  color: var(--accent2);
}

/* активная кнопка "Ещё" */
.nav-more-btn.nav-active,
.nav-more-btn.nav-active i{
  color: var(--accent2);
}

/* активный пункт внутри выпадающего меню */
.nav-more-menu a.nav-active,
.nav-more-menu a.nav-active i{
  color: var(--accent2);
}

/* =========================
   ALERT (у меня общий компонент, просто ниже подвинул)
========================= */
.custom-alert { bottom: 20px; }

/* =========================
   EVENT UI (кастомная верстка события)
========================= */

/* Время события + иконка справа */
.fc .rz-ev-time {
  display: flex;
  background: #1ab394;
  border-radius: 0 10px 0 0;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0 0 5px;
  font-size: 13px;
}

/* Иконка статуса */
.fc .rz-ev-time i {
  position: relative;
  font-size: 14px;
  opacity: .9;
  top: 3px;
  right: 7px;
}

/* Комментарий в одну строку с троеточием */
.fc .rz-ev-comment {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  opacity: .85;
  color: var(--text);
  font-weight: 500;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Заголовок (имя/номер авто и т.д.) */
.fc .rz-ev-title{
  color: var(--text);
  line-height:1.55;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Прозрачный контейнер события + тени убрал */
.fc-v-event { background: transparent; border: 0;font-size: 13px;}
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link { box-shadow: none; }

/* Внутренняя "полоска" события */
.fc-timegrid-event .fc-event-main {
  background-color: var(--c-1b3c48);
  border-radius: 3px 10px 10px 3px;
  color: var(--c-13deb9);
  border-left: 4px solid var(--c-13deb9);
  padding: 0;
}

/* Верхняя полоска времени */
.fc-timegrid-event .fc-event-time {
  width: 102.333%;
  background: var(--c-1b3c48);
  border-radius: 0 15px 0 0;
  padding: 0 5px;
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--c-13deb9);
  font-size: 14px;
}

/* Нижняя часть */
.fc-v-event .fc-event-title-container {
  width: 102.333%;
  background: var(--c-1b3c48d4);
  border-radius: 0 0 15px 0;
  padding: 0 5px;
}
.fc-v-event .fc-event-title { color: var(--c-fa896b); }

/* Номер сегодняшнего дня подсвечиваю вручную в JS, но тут оставил под общий стиль */
.fc .fc-day-today .fc-daygrid-day-number,
.fc .fc .fc-day-today .fc-col-header-cell-cushion {
  background: var(--c-161821) !important;
  width: 100%;
}

/* Небольшая правка заголовков на больших экранах */
@media (min-width: 1200px) {
  .h2, h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
  }
}


/* ===== inline <style> from pages/packages.php ===== */
/* =========================================================
   CSS: Layout / UI
   ========================================================= */

/* ---- layout ---- */
.packages-wrap{
  display:grid;
  grid-template-columns: 320px 1fr; /* слева список, справа детали */
  gap: 18px;
  margin-top: 12px;
}
.card{
  background:var(--c-0f1118);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.card h3{
  width: 175px;
  margin:0 0 10px 0;
  font-size:16px;
  color:var(--text);
}
.muted{ color:var(--c-8a8a8a); font-size: 13px; }

/* ---- list ---- */
.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: auto;
  overflow:auto;
  padding-right: 4px;
}

/* карточка пакета */
.pkg{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  background:var(--c-1b1e2a);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  flex-direction:column; /* чтобы текст и свитч шли колонкой */
}
.pkg.active{
  border-color: var(--rgba-228_0_43_p65);
  box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
}
.pkg .name{ font-weight:700; }
.pkg .desc{ font-size:12px; color:var(--c-8a8a8a); margin-top:3px; }
.pkg .badge{ font-size:15px; }

/* ---- items (услуги в пакете) ---- */
.items{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.item{
  display:grid;
  grid-template-columns: 1fr 140px 120px 110px;
  gap:10px;
  align-items:center;
  padding:10px;
  background:var(--c-1b1e2a);
  border:1px solid var(--border);
  border-radius:12px;
}
.item .title{ font-weight:700; }
.item .meta{ font-size:12px; color:var(--c-8bc34a); margin-top:4px; }

/* маленькие кнопки */
.small-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-141824);
  cursor:pointer;
  color:var(--text);
}
.small-btn:hover{ filter: brightness(1.05); }
.small-btn.danger{ border-color: var(--rgba-244_67_54_p45); }
.small-btn.danger:hover{ background: var(--rgba-244_67_54_p12); }

/* ---- inputs ---- */
.input, .select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--c-0f1118);
  color:var(--text);
  outline:none;
}
.input:focus, .select:focus{
  border-color:var(--c-e4002b);
  box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
}

/* ---- modal ---- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background: var(--rgba-0_0_0_p55);
  z-index:3000;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal.show{
  background-color: transparent;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  backdrop-filter: blur(3px);
  display:flex;
}
.modal-box{
  width:720px;
  max-width:95vw;
  background:var(--c-0f1118);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.modal-head .x{
  cursor:pointer;
  font-size:22px;
  color:var(--c-aaa);
}
.modal-head .x:hover{ color:var(--c-ff6b6b); }
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.hr{ height:1px; background: var(--border); margin: 12px 0; }

/* ---- alert ---- */
.custom-alert{
  position: fixed;
  bottom: 140px;
  right: 20px;
  background: var(--c-1b1e2a);
  color: var(--text);
  padding: 14px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: .3s;
  z-index: 9999;
}
.custom-alert.show{
  opacity: 1;
  transform: translateY(0);
}
.custom-alert.success{ border-left: 4px solid var(--c-3cff9a); }
.custom-alert.error{   border-left: 4px solid var(--c-ff4d4d); }
.custom-alert.info{    border-left: 4px solid var(--accent2); }

.custom-alert i{
  position: relative;
  font-size: 18px;
  top: 3px;
}

/* ---- scrollbar packages list ---- */
#packagesList{
  scrollbar-width: thin;
  scrollbar-color: var(--rgba-255_255_255_p25) transparent;
}
#packagesList::-webkit-scrollbar{ width: 8px; }
#packagesList::-webkit-scrollbar-track{ background: transparent; }
#packagesList::-webkit-scrollbar-thumb{
  background: var(--rgba-255_255_255_p20);
  border-radius: 999px;
}
#packagesList::-webkit-scrollbar-thumb:hover{
  background: var(--rgba-255_255_255_p35);
}

/* ===== inline <style> from pages/positions.php ===== */
/* ===== таблица ===== */
    .table-wrap { margin-top: 15px; }
    table { width: 100%; border-collapse: collapse; }
    thead th { text-align:left; padding: 12px; border-bottom: 1px solid var(--border); color:var(--text); font-weight:600; }
    tbody td { padding: 12px; border-bottom: 1px solid var(--rgba-255_255_255_0p06); color: var(--text); vertical-align: middle; }

    /* ===== верхняя панель ===== */
    .topbar { display:flex; justify-content: space-between; align-items:center; gap:10px; flex-wrap:wrap; }

    /* ===== кнопки действий строки ===== */
    .action-btn { background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:10px; }
    .action-btn.edit { color:var(--c-64b5f6); }
    .action-btn.del { color:var(--c-e4002b); }
    .action-btn:hover {background: var(--card);}

    /* ===== модалка ===== */
    .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: var(--rgba-0_0_0_0p65); z-index:3000; }
    .modal.show {background-color: transparent;left: 0;top: 0;width: 100vw;height: 100vh;backdrop-filter: blur(3px);display: flex;}
    .modal-dialog { width: 520px; max-width: 94vw; background:var(--c-0f1118); border:1px solid var(--border); border-radius: 16px; padding: 16px; }
    .modal-header { display:flex; justify-content:space-between; align-items:center; padding-bottom: 10px; border-bottom: 1px solid var(--rgba-255_255_255_0p08); margin-bottom: 12px; }
    .modal-title { margin:0;color: var(--text);font-size: 18px; font-weight:700; }
    .modal-body input, .modal-body select {
      width:100%; padding:10px; border-radius:10px; border:1px solid var(--border);
      background:var(--c-0f1118); color:var(--text);
    }
    .modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; }

    /* ===== алерт (локальный) ===== */
    .custom-alert { position: fixed; bottom: 30px; right: 20px; padding: 10px 14px; border-radius: 10px; background:var(--c-333); color:var(--c-fff); z-index:4000; border:1px solid var(--rgba-255_255_255_0p15); }
    .custom-alert.success { background: var(--rgba-76_175_80_0p25); }
    .custom-alert.error { background: var(--rgba-244_67_54_0p25); }

    /* ===== статус ===== */
    .badge { padding: 4px 10px; border-radius: 999px; font-size: 15px; border: 1px solid var(--border); display:inline-block; }

    /* ===== пагинация (как в users/regions) ===== */
    .pagination-bar{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--rgba-20_22_30_0p92);
      backdrop-filter: blur(6px);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
      z-index: 10;
    }
    .pagination-bar a,
    .pagination-bar span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      text-decoration:none;
      color: var(--text);
      background: var(--rgba-255_255_255_0p02);
      user-select:none;
    }
    .pagination-bar a:hover{ background: var(--rgba-255_255_255_0p06); }
    .pagination-bar .active{ background: var(--border); font-weight:600; }
    .pagination-bar .disabled{ opacity:.4; cursor:default; }
    .pagination-bar .dots{ border:none; background:transparent; min-width:auto; padding:0 2px; }
    .pagination-bar .page-info{ margin-left:10px; color:var(--c-aaa); border:none; background:transparent; }


/* ===== inline <style> from pages/product_types.php ===== */
/* локальные стили страницы (без фанатизма, чтобы не лезть в общий css) */
    .topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .card{ background:var(--rgba-255_255_255_p03); border:1px solid var(--rgba-255_255_255_p08); border-radius:14px; padding:14px; }

    /* верхняя форма добавления */
    .grid {display: grid;width: auto;grid-template-columns: auto 250px 250px 305px;gap: 10px;}

    /* строка списка (каждый type) */
    .row{
      display:grid;
      grid-template-columns: 210px 1fr 365px 665px 0;
      gap:10px;
      align-items:center;
      padding:10px 0;
      border-bottom:1px solid var(--rgba-255_255_255_p06);
    }
    .row:last-child{ border-bottom:none; }

    .muted{ opacity:.75; font-size:12px; }
    input{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--rgba-255_255_255_p12);
      background:var(--rgba-0_0_0_p25);
      color:inherit;
    }

    .actions{ display:flex; gap:8px; justify-content:flex-end; }

    /* шапка таблицы */
    .hdr{
      display:grid;
      grid-template-columns: 215px 1fr 365px 100px 560px;
      gap:10px;
      padding-bottom:10px;
      margin-bottom:8px;
      border-bottom:1px solid var(--rgba-255_255_255_p10);
      font-size:12px;
      opacity:.8;
    }

    .code{ font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ===== inline <style> from pages/regions.php ===== */
/* ===== таблица ===== */
    .table-wrap { margin-top: 15px; }
    table { width:100%; border-collapse:collapse; }
    thead th { text-align:left; padding:12px; border-bottom:1px solid var(--border); color:var(--text); font-weight:600; }
    tbody td  { padding:12px; border-bottom:1px solid var(--rgba-255_255_255_0p06); color:var(--text); vertical-align:middle; }

    /* ===== бейдж статуса ===== */
    .badge { padding:4px 10px; border-radius:999px; font-size:15px; border:1px solid var(--border); display:inline-block; }
    .badge.off { color:var(--c-ffb3b3); background: var(--rgba-244_67_54_0p12); }

    /* ===== верхняя панель страницы ===== */
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

    /* ===== кнопки действий в строке ===== */
    .action-btn { background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:10px; }
    .action-btn.edit { color:var(--c-64b5f6); }
    .action-btn.del  { color:var(--c-e4002b); }
    .action-btn:hover { background: var(--card); }

    /* ===== модалка ===== */
    .modal {
      position:fixed; inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: var(--rgba-0_0_0_0p65);
      z-index:3000;
    }
    .modal.show{
      background-color: transparent;
      left: 0; top: 0;
      width: 100vw; height: 100vh;
      backdrop-filter: blur(3px);
      display: flex;
    }
    .modal-dialog {
      width: 520px; max-width: 94vw;
      background:var(--c-0f1118);
      border:1px solid var(--border);
      border-radius:16px;
      padding:16px;
    }
    .modal-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding-bottom:10px;
      border-bottom:1px solid var(--rgba-255_255_255_0p08);
      margin-bottom:12px;
    }
    .modal-title { margin:0; font-size:18px; font-weight:700; }
    .modal-body input,
    .modal-body select {
      width:100%;
      padding:10px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--c-0f1118);
      color:var(--c-fff);
    }

    .modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
    .small { font-size:12px; color:var(--c-888); margin-top:6px; }

    /* у тебя алерт общий, тут просто подправляю позицию */
    /* уведомления: не переопределяю здесь, чтобы работал show/hide */

    /* ===== пагинация (фикс снизу) ===== */
    .pagination-bar{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;

      display:flex;
      align-items:center;
      gap: 8px;

      padding: 10px 14px;
      background: var(--rgba-20_22_30_0p92);
      backdrop-filter: blur(6px);

      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
      z-index: 10;
    }
    .pagination-bar a,
    .pagination-bar span{
      display:inline-flex;
      align-items:center;
      justify-content:center;

      min-width: 34px;
      height: 34px;
      padding: 0 10px;

      border-radius: 12px;
      border: 1px solid var(--border);
      text-decoration:none;

      color: var(--text);
      background: var(--rgba-255_255_255_0p02);
      user-select:none;
    }
    .pagination-bar a:hover{ background: var(--rgba-255_255_255_0p06); }
    .pagination-bar .active{ background: var(--border); font-weight:600; }
    .pagination-bar .disabled{ opacity:.4; cursor:default; }
    .pagination-bar .dots{ border:none; background:transparent; min-width:auto; padding:0 2px; }
    .pagination-bar .page-info{ margin-left:10px; color:var(--c-aaa); border:none; background:transparent; }

/* ===== inline <style> from pages/sales.php ===== */
/**
 * Тут стили только для модалки продаж и пагинации
 * (чтобы не конфликтовало с остальными страницами)
 */

/* ===== SALE MODAL (no conflicts) ===== */
.sale-modal-backdrop{
  position:fixed; inset:0;
  background:var(--rgba-0_0_0_p55);
  display:none !important;
  align-items:center; justify-content:center;
  z-index:99999 !important;
}
.sale-modal-backdrop.is-open{
  display:flex !important;
}

.sale-modal{
  display:block !important;
  position:relative;
  width:min(1275px, 95vw);
  overflow:auto;
  background: var(--card, var(--c-0f1118));
  border:1px solid var(--border, var(--rgba-255_255_255_p12));
  border-radius:16px;
  padding: 20px;
  box-shadow: 0 20px 60px var(--rgba-0_0_0_p45);
}

.items-head, .item-row{
  display:grid;
  grid-template-columns: 1.4fr .6fr .7fr .7fr .6fr .25fr;
  gap:10px;
  align-items:center;
}
.items-head{
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  padding: 15px 0 0 10px;
  margin-bottom: 7px;
}
.item-row{
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:10px;
  background: var(--rgba-255_255_255_p02);
}
.item-row input, .item-row select{
  width:100%;
  border:1px solid var(--border);
  background: var(--rgba-0_0_0_p1);
  color: var(--text);
  border-radius: 12px;
  padding:10px 12px;
  outline:none;
}
.item-row .trash{
  background:none;border:none;cursor:pointer;color:var(--accent2);
  padding:6px 10px;border-radius:10px;
}
.item-row .trash:hover{ background: var(--rgba-255_255_255_p05); }

.summary-box{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;
  padding:12px; border:1px solid var(--border); border-radius:14px;
}
.item-row .trash i{ font-size: 20px; }
.summary-box b{ color:var(--text); }

.checkbox-line{
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.checkbox-line input{ transform: scale(1.1); }

.item-row .gift-switch{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.item-row .gift-switch span{
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}

/* ===== pagination bar (фикс снизу) ===== */
.pagination-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--rgba-20_22_30_0p92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
  z-index: 10;
}
.pagination-bar a,
.pagination-bar span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration:none;
  color: var(--text);
  background: var(--rgba-255_255_255_0p02);
}
.pagination-bar a:hover{ background: var(--rgba-255_255_255_0p06); }
.pagination-bar .active{
  background: var(--border);
  border-color: var(--border);
  font-weight: 600;
}
.pagination-bar .disabled{
  opacity: .4;
  cursor: default;
}
.pagination-bar .dots{
  border:none;
  background: transparent;
  min-width: auto;
  padding: 0 2px;
}
.pagination-bar .page-info{
  margin-left: 10px;
  color: var(--c-aaa);
  border:none;
  background: transparent;
  padding: 0 4px;
  height: auto;
}


/* ===== inline <style> from pages/services_prices.php ===== */
/* =========================================================
       LAYOUT
    ========================================================= */

    /* общий грид: слева фильтры, справа список */
    .page-wrap{
      display:grid;
      grid-template-columns: 340px 1fr;
      gap: 18px;
      margin-top: 12px;
    }

    .card{
      background:var(--c-0f1118);
      border:1px solid var(--border);
      border-radius:14px;
      padding:14px;
    }

    .card h3{
      margin:0 0 10px 0;
      font-size:16px;
      color:var(--text);
    }

    .muted{ color:var(--c-8a8a8a); font-size: 13px; }

    /* =========================================================
       INPUTS
    ========================================================= */
    .input, .select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--c-0f1118);
      color:var(--text);
      outline:none;
    }
    .input:focus, .select:focus{
      border-color:var(--c-e4002b);
      box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
    }

    /* =========================================================
       GROUPS (категории)
    ========================================================= */
    .groups{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .group{
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
    }

    /* кликабельная шапка категории */
    .group-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:10px 12px;
      cursor:pointer;
      background:var(--c-0f1118);
    }
    .group-head .title{ font-weight:700; }
    .group-head .badge{
      font-size: 15px;
      color:var(--c-9ad1ff);
      border:1px solid var(--rgba-154_209_255_p35);
      padding:3px 8px;
      border-radius: 999px;
    }

    .group-body{ display:none; padding: 10px; background:var(--c-0c0f17); }
    .group.open .group-body{ display:block; }

    /* =========================================================
       SERVICE ROW
    ========================================================= */
    .srv{
      display:grid;
      grid-template-columns: 1fr 110px 130px 120px 270px;
      gap:10px;
      align-items:center;
      padding:10px;
      border:1px solid var(--border);
      border-radius:12px;
      margin-bottom:8px;
      background: var(--c-1b1e2a);
      cursor: grab; /* для DnD */
    }
    .srv.dragging{ opacity:.55; transform: scale(.995); }

    .srv .stitle{ font-weight:700; }
    .srv .meta{ font-size:12px; color:var(--c-8bc34a); margin-top:4px; }

    /* кнопки в строке */
    .small-btn{
      padding:7px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--c-141824);
      cursor:pointer;
      color:var(--text);
    }
    /* в исходнике было "transform:" без значения — убрал, иначе это просто мусор */
    .small-btn:hover{ filter: brightness(1.05); }
    .small-btn.danger{ border-color: var(--rgba-244_67_54_p45); }
    .small-btn.danger:hover{ background: var(--rgba-244_67_54_p12); }

    /* input цены */
    .price-input{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--c-0f1118);
      color:var(--text);
      text-align:center;
    }
    .price-input:focus{
      border-color:var(--c-e4002b);
      box-shadow: 0 0 0 3px var(--rgba-228_0_43_p10);
      outline:none;
    }

    /* ручка перетаскивания */
    .srv .drag-handle{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-right:8px;
      cursor: grab;
      user-select:none;
      color:var(--c-9ad1ff);
      font-weight:700;
    }

    /* подсветка зоны дропа */
    .group-body.drag-over{
      outline: 2px dashed var(--rgba-154_209_255_p35);
      outline-offset: 6px;
      border-radius: 12px;
    }

    /* =========================================================
       MODAL
    ========================================================= */
    .modal{
      display:none;
      position:fixed;
      inset:0;
      background: var(--rgba-0_0_0_p55);
      z-index: 4000;
      align-items:center;
      justify-content:center;
      padding: 20px;
    }
    .modal.show{
      display:flex;
      background-color: transparent;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      backdrop-filter: blur(3px);
    }
    .modal-box{
      width: 760px;
      max-width: 95vw;
      background:var(--c-0f1118);
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
    }
    .modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom: 10px;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .hr{ height:1px; background: var(--border); margin: 12px 0; }

    /* =========================================================
       ALERTS (тосты)
    ========================================================= */
    .custom-alert {
      position: fixed;
      bottom: 10px;
      right: 20px;
      background: var(--c-1b1e2a);
      color: var(--text);
      padding: 14px 18px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: .3s;
      z-index: 9999;
    }
    .custom-alert.show { opacity: 1; transform: translateY(0); }

    .custom-alert.success { border-left: 4px solid var(--c-3cff9a); }
    .custom-alert.error   { border-left: 4px solid var(--c-ff4d4d); }
    .custom-alert.info    { border-left: 4px solid var(--accent2); }

    .custom-alert i {
      position: relative;
      font-size: 18px;
      top: 3px;
    }

    /* адаптация под мобилку */
    @media (max-width: 1000px){
      .page-wrap{ grid-template-columns: 1fr; }
      .srv{ grid-template-columns: 1fr 110px 1fr; }
    }



/* ===== inline <style> from pages/users.php ===== */
/* ===== таблица пользователей ===== */
    .table-wrap { margin-top: 15px; }
    table { width: 100%; border-collapse: collapse; }
    thead th { text-align:left; padding: 12px; border-bottom: 1px solid var(--border); color:var(--text); font-weight:600; }
    tbody td { padding: 12px; border-bottom: 1px solid var(--rgba-255_255_255_0p06); color: var(--text); vertical-align: middle; }

    /* маленькие бейджи (роль/статус) */
    .badge {padding: 10px 10px;margin-right: 10px;border-radius: 10px;font-size: 15px;border: 1px solid var(--border);display: inline-block;}
    .badge.admin { color:var(--c-fff); background: var(--rgb-7617580/59%); }
    .badge.user  { color:var(--c-fff); background: var(--rgb-33150243/64%); }
    .badge.off   { color:var(--c-ffb3b3); background: var(--rgba-244_67_54_0p12); }
    .badge.dev { color:var(--c-fff); background-image: linear-gradient(90deg, var(--c-ff5c4d), var(--c-eb469f) 25%, var(--c-8341ef) 72%, var(--c-3f68f9)); }

    /* верхняя панель */
    .topbar { display:flex; justify-content: space-between; align-items:center; gap:10px; flex-wrap:wrap; }

    /* кнопки действий в таблице */
    .action-btn { background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:10px; }
    .action-btn.edit { color:var(--c-64b5f6); }
    .action-btn.del  { color:var(--c-e4002b); }
    .action-btn:hover { background: var(--card) }

    /* модалка */
    .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: var(--rgba-0_0_0_0p65); z-index:3000; }
    .modal.show { background-color: transparent; left: 0; top: 0; width: 100vw; height: 100vh; backdrop-filter: blur(3px); display: flex; }
    .modal-dialog { width: 550px; max-width: 94vw; background:var(--c-0f1118); border:1px solid var(--border); border-radius: 16px; padding: 16px; }
    .modal-header { display:flex; justify-content:space-between; align-items:center; padding-bottom: 10px; border-bottom: 1px solid var(--rgba-255_255_255_0p08); margin-bottom: 12px; }
    .modal-title { margin:0; font-size: 18px; font-weight:700; }
    .modal-body input, .modal-body select {
      width:100%; padding:10px; border-radius:10px; border:1px solid var(--border);
      background:var(--c-0f1118); color:var(--text);
    }
    .modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; }

    .small { font-size: 12px; color:var(--c-888); margin-top:6px; }

    /* уведомления (использую простые div) */
    /* уведомления: не переопределяю здесь, чтобы работал show/hide */

    /* ===== пагинация снизу фиксированная ===== */
    .pagination-bar{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--rgba-20_22_30_0p92);
      backdrop-filter: blur(6px);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 10px 30px var(--rgba-0_0_0_0p45);
      z-index: 10;
    }
    .pagination-bar a,
    .pagination-bar span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      text-decoration:none;
      color: var(--text);
      background: var(--rgba-255_255_255_0p02);
      user-select:none;
    }
    .pagination-bar a:hover{ background: var(--rgba-255_255_255_0p06); }
    .pagination-bar .active{ background: var(--border); font-weight:600; }
    .pagination-bar .disabled{ opacity:.4; cursor:default; }
    .pagination-bar .dots{ border:none; background:transparent; min-width:auto; padding:0 2px; }
    .pagination-bar .page-info{ margin-left:10px; color:var(--c-aaa); border:none; background:transparent; }


/* ===== generated from inline style="..." (auto-migrated) ===== */

.u-1386d503{margin:0}

.u-524b5ce5{font-size:18px; font-weight:700}

.u-f6e3d7fe{text-align:right}

.u-c56508cb{margin:0 0 10px 0}

.u-f20a8b74{margin-top:12px; display:flex; justify-content:flex-end; gap:10px}

.u-cc790ac2{color:var(--c-4caf50);padding-left: 5px;}

.u-475f2b6c{background: var(--border); border-color: var(--border)}

.u-b8bfea37{color: var(--c-e4002b)}

.u-abb5bf5f{max-width: 100%;padding: 20px}

.u-539fe016{border-radius: 10px}

.u-d08ae96f{width: 180px;border-radius: 10px}

.u-fa486ad4{width: 200px}

.u-3784d97c{border-radius: 10px;margin: 5px 5px}

.u-eb0eebcb{border-radius: 10px 0 0 10px;border-right: 0;border-left: 1px solid var(--border)}

.u-3b766c42{border-radius: 0}

.u-cc6404ff{border-radius: 0 10px 10px 0;border-left: 0;border-right: 1px solid var(--border)}

.u-ffe3aabf{width: 110px;border-radius: 0}

.u-a360cbe2{width: 215px;border-radius: 10px}

.u-5d401be2{width: 450px}

.u-10989f57{display:inline-flex;align-items:center;gap:8px;text-decoration:none}

.u-271ee7f3{position:relative;top:1px}

.u-e8dbada6{width: 250px}

.u-343bce01{width: 300px}

.u-c367548a{display:flex;align-items:center;gap:10px}

.u-1e29eefb{font-weight:500}

.u-2d425aa8{position:relative;top:2px}

.u-cb458930{display:none}

.u-ce2736f4{text-decoration:line-through;color:var(--c-888)}

.u-d5b75c60{color:var(--c-ff9800);font-weight:500}

.u-663bd61e{color:var(--c-8bc34a);font-weight:600;font-size:12px}

.u-e91ebd10{text-align:center; white-space:nowrap}

.u-e4e5bd2d{background:none;border:none;cursor:pointer;color:var(--accent2)}

.u-4de505fb{position:relative;top:3px}

.u-54781c2a{text-align:center;padding:20px;color:var(--c-888);font-weight:500}

.u-4eb23a89{color:var(--text)}

.u-6c945115{background: var(--c-8bc34a);border-radius: 5px;padding: 3px 5px;color: var(--text);font-weight: 500;}

.u-63b30b9d{background: var(--c-ff5722);border-radius: 5px;padding: 3px 5px;color: var(--text);font-weight: 500;}

.u-f537a9a7{width:220px;padding-right: 10px}

.u-dae6213c{width: 210px !important;padding: 6px !important}

.u-918b7c88{padding-right: 10px}

.u-2123b493{width: 232px}

.u-294bd78b{padding: 6px !important}

.u-99d17876{top: 20px;left: 142px;}

.u-a9ba6c9b{display: flex;padding: 20px 0 50px 0}

.u-4b935938{position: relative;top: 1px}

.u-cf5948e3{font-weight: 500}

.u-93d1d394{font-weight: 600}

.u-fcc24883{align-items:center; gap:10px}

.u-19995ea5{width: 194px !important;padding: 6px !important}

.u-be70d99e{width: 100%}

.u-e7e3d965{width: 160px}

.u-21c4ad8c{color:var(--c-888); font-size:12px; margin-top:4px}

.u-13076d95{text-align:center}

.u-284b8423{max-width:340px}

.u-18a332ce{text-align:center; padding: 20px; color:var(--c-888); font-weight:500}

.u-059af044{color: var(--c-8bc34a)}

.u-6449cced{color: var(--c-ff5722)}

.u-00c0df93{margin-right:12px}

.u-e50afb56{margin:10px 0; gap:10px; flex-wrap:wrap}

.u-04b4f2ce{padding: 7px}

.u-1f05513b{font-size:35px}

.u-49b89758{background: var(--c-0f1118) !important;border: 1px solid var(--border) !important;border-radius: 10px !important;padding: 10px !important}

.u-ccf26602{position: relative;width: 315px;right: 7px}

.u-6cf7e1e0{position: relative;top: 3px}

.u-88acce52{display: flex;height: 180px;flex-direction: column;width: auto;align-items: flex-end;margin-top: 40px;}

.u-e09cb089{position: relative;top: 2px}

.u-32be1e74{padding-left: 7px}

.u-fa3e1c7d{margin-bottom:12px}

.u-c9642462{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

.u-e9e15537{opacity:.9}

.u-5e5f9d95{position: relative;top: 2px;color: var(--c-ffeb3b)}

.u-e634e6da{font-weight:600}

.u-d51702bf{margin-bottom:8px}

.u-aec9cb82{color:var(--c-ff9800)}

.u-a7409f75{margin-bottom:10px}

.u-c6adeaee{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}

.u-06ed15aa{margin-top:10px; display:none}

.u-c87b406f{display:block;margin-top:10px}

.u-002535c2{margin-top:35px}

.u-f6899734{margin-top:12px; justify-content:flex-end}

.u-1be5d793{padding:10px;color:var(--c-aaa)}

.u-70e57644{color: var(--c-9ad1ff)}

.u-f7ef9257{display:flex; justify-content:flex-end}

.u-510fe0d5{color:var(--c-888); padding:16px}

.u-875f2b84{color:var(--c-ffb3b3)}

.u-eff5e899{color:var(--c-aaa)}

.u-1b649a8e{color:var(--c-ffb3b3); padding:16px}

.u-7d17018b{font-weight:700; margin-bottom:10px}

.u-698bd3bd{display:block;padding:15px 0 5px 5px}

.u-6ec126cb{margin-left: 110px;margin-top: 35px}

.u-af337892{opacity:.7;padding:10px 4px}

.u-d4daa28a{color:var(--c-e4002b)}

.u-629657f8{padding:6px !important;max-width:280px}

.u-d294e9a2{color:var(--c-3b82f6)}

.u-73e6e0be{text-align:center; padding:16px; color:var(--c-888)}

.u-cc47d789{font-weight:900}

.u-553a645f{margin-top:14px}

/*.u-42d9ed8b{display:block;margin-top:14px}*/

.u-b4526548{grid-column:1 / -1}

.u-f61aa7a7{height:300px}

.u-ba60ce91{display: flex}

.u-83456371{margin-left:auto}

.u-df8c1743{margin-left:auto;color:var(--c-ff9800);font-size: 17px;font-weight:500}

.u-a12bcd5c{width: auto}

.u-3c857204{border-radius:10px}

.u-f3fddadc{width: 260px}

.u-cacc1c30{border-radius:10px;margin:5px 5px}

.u-e0249207{width:360px}

.u-a3bfcc9c{border-radius: 10px 0 0 10px;border-right:0;border-left:1px solid var(--border)}

.u-4867a582{width:130px;border-radius:0}

.u-33613e41{border-radius: 0 10px 10px 0;border-left:0;border-right:1px solid var(--border)}

.u-bff01079{width:110px;border-radius:0}

.u-0b171530{width:180px;border-radius:10px}

.u-69e6838d{width:220px}

.u-971aa718{text-decoration:none;display:inline-flex;align-items:center;gap:8px}

.u-d784ae2e{width: 330px}

.u-291674de{width:300px}

.u-3503bab9{display:flex;flex-direction:column;gap:6px}

.u-b76ea996{display:flex;unicode-bidi:isolate;list-style:none;background:var(--c-0f1118);border:1px solid var(--border);border-radius:10px;padding:3px 10px;margin:3px;align-items:center;font-size:13px;font-weight:500;justify-content:flex-start}

.u-25433056{display:none;line-height:1.45}

.u-729bf5f1{color:var(--c-ff9800);font-weight:600}

.u-655f03e9{color:var(--c-8bc34a);font-weight:600}

.u-28c9bab2{text-align:center;white-space:nowrap}

.u-e913c927{background:none;border:none;cursor:pointer;color:var(--c-8bc34a)}

.u-cc58d63d{background:none;border:none;cursor:pointer;color:var(--accent2);margin-left:10px}

.u-2592cc77{font-size:16px}

.u-07d9b5f3{display:grid;grid-template-columns: 1fr 1fr; gap:12px}

.u-01eccf47{color:var(--c-ffffff);font-size:16px;padding:15px 0 0 10px;margin-bottom:6px}

.u-7519d759{padding:10px 12px;border:1px solid var(--border);border-radius:12px}

.u-26530834{display:flex;flex-wrap:wrap;gap:10px}

.u-e74ae5c5{border:1px solid var(--border);border-radius:14px;padding:10px;margin-top:20px}

.u-d9917c17{width: 1234px;bottom: 20px}

.u-ecc31f69{width:100%;border:1px solid var(--border);background: var(--rgba-0_0_0_p1);color:var(--text);border-radius: 12px;padding:10px 12px;outline:none}

.u-86f1b2c3{display:flex;padding-top:15px;justify-content:flex-end}

.u-854f012a{margin-right: 20px}

.u-f297e404{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background: var(--rgba-255_255_255_p02)}

.u-cca18063{margin:10px 0}

.u-5371db16{margin-top:10px}

.u-bd416a69{display:flex; justify-content:space-between; align-items:center; gap:10px}

.u-a3568d82{padding-bottom: 15px}

.u-9e9522c2{position: relative;color: var(--c-ffffff);bottom: 5px;left: 5px}

.u-7dc2aede{margin-top:8px; display:none}

.u-9965c446{display: flex;gap: 10px;align-items: center;margin-top: 5px}

.u-74629e84{display:flex;gap:10px;align-items:center;margin-top: 8px;justify-content: flex-end}

.u-6b283c9e{padding:10px}

.u-b94066b8{color:var(--c-9ad1ff)}

.u-2937bfc9{margin-bottom:6px}

.u-74f982c3{padding: 10px 0}

.u-7fed92fe{display:flex; gap:8px; justify-content:flex-end}

.u-b103074d{display:block;width: 150px}

.u-1d568291{display:block;width: 95px}


/* ---- nav active (generated during refactor) ---- */
.nav-active{opacity:1;filter:brightness(1.15);}


/* === RZ ALERT FINAL OVERRIDE === */
.custom-alert{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.custom-alert.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* RZ alert final override: гарантированно скрываю уведомление без .show */
.custom-alert{
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.custom-alert.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}


/* === FINAL: custom-alert visibility fix === */
.custom-alert{
  /*
    ВАЖНО:
    Сам блок #customAlert присутствует на всех страницах (в layout_top.php),
    но по умолчанию он должен быть полностью скрыт, чтобы не "висеть" на экране.
    Поэтому тут именно display:none, а не только opacity.
  */
  display: none !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}
.custom-alert.show{
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}


/* =========================
   RZ Floating Labels (optional component)
   Используй когда нужно "прыгающее" название поля как в примере.
   Пример:
     <div class="rz-field">
       <input class="rz-input" placeholder=" " ...>
       <div class="rz-cut"></div>
       <label class="rz-placeholder">Имя</label>
     </div>
   Для select так же, только ставь class rz-select и placeholder=" ".
========================= */
.rz-field{position:relative;width:100%;height:46px;}
.rz-input,.rz-select{
  width: 100%;
  background: var(--c-1b1e2a) !important;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  font-size: 16px;
  outline: 0;
  padding: 10px 16px 0;
}
.rz-select{padding-top:14px;appearance:none;}
.rz-placeholder{
  display: block;
  margin: -65px 0 5px 5px;
  color: var(--text);
  font-weight: 500;
}

/* ==========================================================
   Custom Select (единый компонент вместо <select>)
========================================================== */
/*.options.rz-portal-options, .custom-select-options {position: absolute !important;}*/
.custom-select-wrapper{ position:relative; width:100%; }
.custom-select{
  position:relative;
  background:var(--c-0f1118);
  border:1px solid var(--border, var(--c-242736));
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
}
.custom-select::after{
  content: "\f13a"; /* пример: chevron-down */
  font-family: 'uicons-solid-rounded';
  font-size: 15px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  transition: transform .2s ease, color .2s ease;
  pointer-events: none;
}

.custom-select.open::after{
  transform: translateY(-50%) rotate(180deg);
  color: var(--c-e4002b);
}
.custom-select .selected{ display:block; }
.custom-select .options{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:50;
  min-width:160px;
  background:var(--c-0f1118);
  border:1px solid var(--border, var(--c-242736));
  border-radius:12px;
  padding:6px;
  box-shadow:0 10px 35px var(--rgba-0_0_0_p35);
  max-height:320px;
  overflow:auto;
}
.custom-select.open .options{ display:block; }
.custom-select .option{
  padding: 10px 12px;
  border-radius: 10px;
  margin: 5px;
  color: var(--text);
  font-weight: 500;
}
.custom-select .option:hover{ background:var(--rgba-255_255_255_p06); }
/* чтобы options реально скроллился */
.custom-select .options,
.custom-select-options,
.rz-portal-options{
  overflow: auto;
  scrollbar-gutter: stable; /* чтобы не прыгала ширина при появлении скролла */
}

/* Firefox */
.custom-select .options,
.custom-select-options,
.rz-portal-options{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

/* Chrome/Edge/Safari */
.custom-select .options::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar,
.rz-portal-options::-webkit-scrollbar{
  width: 10px;
}

.custom-select .options::-webkit-scrollbar-track,
.custom-select-options::-webkit-scrollbar-track,
.rz-portal-options::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
}

.custom-select .options::-webkit-scrollbar-thumb,
.custom-select-options::-webkit-scrollbar-thumb,
.rz-portal-options::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);     /* “паддинг” вокруг thumb */
  background-clip: padding-box;         /* чтобы border стал прозрачным зазором */
}

.custom-select .options::-webkit-scrollbar-thumb:hover,
.custom-select-options::-webkit-scrollbar-thumb:hover,
.rz-portal-options::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
  background-clip: padding-box;
}

/* ==========================================================
   Custom select (мой селект вместо стандартного)
   ========================================================== */
.custom-select-wrapper{ position: relative; width: 100%; }

.custom-select{
  background: var(--c-1b1e2a) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.custom-select .selected{
  background: var(--c-1b1e2a);
  padding: 0;
  color: var(--text);
  font-weight: 500;
  border-radius: 10px;
}

/* состояние “открыт” */
.custom-select.open .options{ display:block; }

.options.rz-portal-options,
.custom-select-options{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 10px 35px var(--rgba-0_0_0_p35) !important;
  overflow: auto !important;
  color: var(--text) !important;
  font-weight: 500;
}
.options.rz-portal-options .option,
.custom-select-options .option{
  border-radius: 10px !important;
  padding: 10px 15px !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.2s !important;
  color: var(--text) !important;
  font-weight: 500;

  /* как в обычном .custom-select .option */
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
}
.options.rz-portal-options .option:hover,
.custom-select-options .option:hover{ background: var(--accent2) !important; color:var(--c-000) !important; }

/* выбранный элемент в портале — тот же стиль, что и в обычном списке */
.options.rz-portal-options .option.selected,
.custom-select-options .option.selected{ background: var(--accent2) !important; color:var(--c-000) !important; }
  /* Локально выравниваю сетку/панели, не ломая глобальные стили проекта */
  .sa-card{ padding:16px; }
  .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: .2px;
    padding-bottom: 30px;
  }

  .sa-type{
    position: relative;
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    justify-content: flex-start;
    top: 25px;
    left: 2px;
    flex-direction: row;
    align-items: center;
  }
  .sa-radio{
    display:flex; align-items:center; gap:8px;
    margin:0; user-select:none;
  }
  .sa-disk select{ min-width:180px; }

  .sa-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap:25px 14px;
    margin-top:6px;
  }
  @media (max-width: 860px){
    .sa-grid{ grid-template-columns: 1fr; }
    .sa-disk{ margin-left:0; }
  }
  .sa-field {
    width: 100%;
  }

  /* чтобы select’ы выглядели ровно в сетке */
  .sa-grid select, .sa-grid input{
    width:100%;
  }

  /* блок итогов */
  .sa-total{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.06);
    flex-wrap:wrap;
  }
  .sa-total .sa-total-lines{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .sa-total .sa-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  /* чтобы крестик появлялся только когда поле заполнено — твой JS уже добавляет .has-value */
  .field-wrap{ position:relative; }
  .clear-btn{
    display: flex;
    position: absolute;
    width: 68px;
    background: transparent;
    color: var(--accent2);
    font-size: 25px;
    border: 0;
    margin-left: 150px;
    top: 37px;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: .65;
    justify-content: flex-end;
  }
  .field-wrap:not(.has-value) .clear-btn{ display:none; }
  #printBtn i {position: relative;top: 2px;}

  .page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .warning {
    width: 865px;
    color: var(--text);
    font-size: 14px;
    background-color: var(--c-141824);
    border-radius: 15px;
    border: 1px solid var(--border);
    padding: 7px;
  }
  #totalText {color: var(--rgba-76_175_80_0p9);}