/* ============================================================
   Mobile Admin (Raptor) — тема оформления
   Bootstrap 5.1 + индиго-акцент. Подключается после bootstrap.min.css.
   Без npm/сборки: один статический файл.
   ============================================================ */

:root {
  --brand: #4f46e5;          /* indigo-600 */
  --brand-rgb: 79, 70, 229;
  --brand-700: #4338ca;
  --brand-50: #eef2ff;
  --app-bg: #f4f6fb;
  --surface: #ffffff;
  --border: #e7e9f2;
  --ink: #1f2533;
  --muted: #6b7280;
  --radius: .375rem;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-md: 0 6px 22px rgba(16, 24, 40, .09);
}

/* ---------- База / типографика ---------- */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--app-bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Раскладка: грид во всю высоту с липкой шапкой ---------- */
/* На страницах-гридах вьюпорт фиксирован, прокрутка — внутри карточки таблицы. */
body.grid-mode { height: 100vh; overflow: hidden; }
main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.grid-card { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; }
.grid-card > .table-responsive { flex: 1 1 auto; min-height: 0; overflow: auto; }
.grid-card thead th { position: sticky; top: 0; z-index: 2; background: #f8f9fd; }

h1, h2, h3, .h4, .h5 { font-weight: 600; letter-spacing: -.01em; }

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

/* ---------- Навбар ---------- */
.navbar.bg-dark {
  background: linear-gradient(90deg, #1b1f3a 0%, #14162a 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: #fff;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), #8b80ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(var(--brand-rgb), .55);
}
.navbar .nav-link {
  color: rgba(255, 255, 255, .72) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: .4rem .85rem !important;
  margin: 0 .1rem;
  transition: background-color .15s, color .15s;
}
.navbar .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .09); }
.navbar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), #6d62f0);
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .45);
}

/* ---------- Карточки ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card:hover.shadow-sm { box-shadow: var(--shadow-md) !important; transition: box-shadow .2s; }

/* ---------- Таблицы ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--ink); }
.table > thead th,
.table-light th {
  background: #f8f9fd;
  color: var(--muted);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  padding: .75rem .75rem;
  white-space: nowrap;
}
.table > thead th a { color: var(--muted); }
.table > thead th a:hover { color: var(--brand); }
.table td { padding: .7rem .75rem; vertical-align: middle; border-color: #f0f1f6; }
/* зебра — подсветка через одну строку (в стиле темы, не дефолтный серый) */
.table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #f3f5fb; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--brand-50); }
/* фикс-раскладка: колонки делят ширину, длинный текст режется по доступному месту (без гориз. скролла) */
.table-fixed { table-layout: fixed; }

/* Панель фильтра, которую вставляет table-filter.js */
.table-toolbar {
  background: #fbfcff;
  border-bottom: 1px solid var(--border) !important;
  padding: .7rem .9rem !important;
}

/* ---------- Кнопки ---------- */
.btn { border-radius: var(--radius); font-weight: 500; }
.btn-sm { border-radius: var(--radius); }
.btn-dark, .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(var(--brand-rgb), .25);
}
.btn-dark:hover, .btn-primary:hover,
.btn-dark:focus, .btn-primary:focus {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.btn-dark:active, .btn-primary:active,
.btn-check:checked + .btn-dark {
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
}
.btn-outline-secondary { border-color: var(--border); color: #4b5563; }
.btn-outline-secondary:hover { background: #f3f4f8; color: var(--ink); border-color: #cdd2e0; }

/* ---------- Формы ---------- */
.form-control, .form-select {
  border-radius: var(--radius);
  border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}
.form-label { font-weight: 500; color: #374151; margin-bottom: .35rem; }

/* ---------- Бейджи статусов ---------- */
.badge { font-weight: 600; }
.badge.status-on, .badge.status-off {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  border-radius: 999px;
  padding: .35em .7em;
  font-size: .74rem;
}
.badge.status-on { background: #e7f7ee; color: #157347; }
.badge.status-off { background: #fdecec; color: #c0392b; }
.status-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; display: inline-block; }
/* мягкая перекраска на случай старой разметки bg-success/bg-danger */
.badge.bg-success { background: #e7f7ee !important; color: #157347 !important; }
.badge.bg-danger { background: #fdecec !important; color: #c0392b !important; }

/* ---------- Пагинация ---------- */
.page-link { color: var(--brand); border-color: var(--border); border-radius: var(--radius); margin: 0 2px; }
.page-link:hover { background: var(--brand-50); color: var(--brand-700); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.page-item.disabled .page-link { color: #aab; }

/* ---------- Прогресс (дашборд) ---------- */
.progress { background-color: #eef0f6; border-radius: 999px; }
.progress-bar { background-color: var(--brand); }

/* ---------- Модалки ---------- */
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.modal-header, .modal-footer { border-color: var(--border); }

/* ---------- Алерты (flash) ---------- */
.alert-warning {
  background: #fff8e6;
  border: 1px solid #ffe3a3;
  color: #8a5a00;
  border-radius: var(--radius);
}

/* ---------- Футер ---------- */
footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

/* ---------- Экран входа ---------- */
.auth-bg {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #e9ecff 0%, var(--app-bg) 55%);
  display: flex;
  align-items: center;
}
.auth-card { border: 1px solid var(--border); border-radius: .5rem; box-shadow: var(--shadow-md); overflow: hidden; }
.auth-card .auth-accent { height: 5px; background: linear-gradient(90deg, var(--brand), #8b80ff); }

/* ============================================================
   Адаптация под мобильные / планшеты
   ============================================================ */
/* На узких экранах (там же, где сворачивается меню, < lg) отключаем фикс-высоту
   грида: страница прокручивается обычным образом, а не «внутри карточки таблицы».
   Иначе на телефоне дашборд+фильтр+таблица не влезают, а скролла нет. */
@media (max-width: 991.98px) {
  body.grid-mode { height: auto; overflow: visible; }
  body.grid-mode main { display: block; }
  .grid-card { display: block; min-height: 0; }
  .grid-card > .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid-card thead th { position: static; }
  /* «Серверы»: фикс-раскладка на узком экране сжимает колонки и «Наименование» наезжает на соседей.
     Переходим на авто-раскладку + горизонтальный скролл; LINK-колонки ограничиваем по ширине. */
  .grid-card table.table-fixed { table-layout: auto; width: auto; min-width: 100%; }
  .grid-card table.table-fixed td { white-space: nowrap; }
  .grid-card table.table-fixed td .text-truncate { display: inline-block; max-width: 44vw; vertical-align: middle; }
}

/* Телефоны: больше места под контент, фильтр гридов — в столбик на всю ширину. */
@media (max-width: 575.98px) {
  main.container-fluid { padding-left: .8rem !important; padding-right: .8rem !important; margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .card-body { padding: .85rem; }
  /* фильтры гридов (форма Users/Sms + тулбар Организаций/ПЦН/Серверов):
     все поля и кнопки — на всю ширину отдельными строками; счётчик над кнопками; кнопки крупнее для пальца */
  form.card-body.flex-row .form-control,
  form.card-body.flex-row .form-select,
  form.card-body.flex-row .btn,
  .table-toolbar .form-control,
  .table-toolbar .form-select,
  .table-toolbar .btn { flex: 1 1 100%; max-width: none !important; width: 100% !important; }
  form.card-body.flex-row .ms-auto,
  .table-toolbar .ms-auto { margin-left: 0 !important; order: 1; }
  form.card-body.flex-row .btn,
  .table-toolbar .btn { order: 2; padding: .55rem .75rem; font-size: 1rem; }
}