/* Задаём общую цветовую палитру админки. */
:root { --blue:#1769e0; --blue-dark:#0f4ca8; --green:#159b68; --red:#dc4c4c; --ink:#172235; --muted:#6f7a8d; --line:#dfe4ec; --background:#f2f5f9; --panel:#ffffff; --shadow:0 14px 38px rgba(26,39,60,.09); }
/* Учитываем границы внутри размеров элементов. */
* { box-sizing:border-box; }
/* Оформляем всё приложение и убираем стандартные отступы. */
body { margin:0; color:var(--ink); background:var(--background); font-family:Inter,Arial,sans-serif; }
/* Полностью скрываем неактивные элементы. */
.hidden { display:none !important; }
/* Центрируем форму входа на весь экран. */
.login-screen { display:grid; min-height:100vh; padding:24px; place-items:center; background:radial-gradient(circle at top left,#dbeafe,transparent 44%),#eef2f7; }
/* Оформляем белую карточку входа. */
.login-card { display:grid; width:min(420px,100%); gap:17px; padding:34px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
/* Настраиваем заголовок входа. */
.login-card h1 { margin:5px 0 -8px; font-size:27px; }
/* Настраиваем пояснение формы. */
.login-card p { margin:0 0 5px; color:var(--muted); line-height:1.5; }
/* Оформляем логотип. */
.logo { display:flex; align-items:center; gap:10px; color:var(--blue-dark); font-size:20px; font-weight:900; }
/* Оформляем знак логотипа. */
.logo span { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; color:#fff; background:var(--blue); }
/* Перекрашиваем текст логотипа на тёмном фоне. */
.logo.light { color:#fff; }
/* Оформляем подписи полей. */
label { display:grid; gap:7px; color:#445066; font-size:13px; font-weight:800; }
/* Оформляем поля и селекторы. */
input,select { width:100%; min-width:0; border:1px solid #ccd5e2; padding:12px 13px; border-radius:11px; outline:none; color:var(--ink); background:#fff; font:inherit; }
/* Выделяем активное поле. */
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,105,224,.12); }
/* Создаём общий стиль кнопки. */
.button { border:0; padding:12px 16px; border-radius:11px; color:#fff; background:#59677c; font:inherit; font-weight:850; cursor:pointer; }
/* Оформляем основное действие. */
.button.primary { background:var(--blue); }
/* Оформляем красное действие. */
.button.danger,.button.logout { background:var(--red); }
/* Оформляем компактную кнопку таблицы. */
.button.small { padding:7px 10px; font-size:12px; }
/* Показываем ошибку формы. */
.form-error { padding:11px; border-radius:10px; color:#a52828; background:#fff0f0; font-size:13px; font-weight:750; }
/* Разделяем боковое меню и содержимое. */
.admin-shell { display:grid; min-height:100vh; grid-template-columns:245px minmax(0,1fr); }
/* Закрепляем тёмное боковое меню. */
.sidebar { position:sticky; top:0; display:flex; height:100vh; padding:23px 17px; flex-direction:column; background:#111a29; }
/* Располагаем кнопки меню столбцом. */
.navigation { display:grid; gap:6px; margin-top:30px; }
/* Оформляем кнопку раздела. */
.nav-button { border:0; padding:12px 13px; border-radius:10px; color:#aebbd0; background:transparent; font:inherit; font-weight:800; text-align:left; cursor:pointer; }
/* Выделяем открытый раздел. */
.nav-button.active { color:#fff; background:var(--blue); }
/* Прижимаем выход к низу. */
.logout { margin-top:auto; }
/* Ограничиваем ширину рабочей области. */
.content { width:100%; max-width:1500px; padding:30px; }
/* Располагаем заголовок и пользователя рядом. */
.page-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
/* Настраиваем заголовок раздела. */
.page-header h1 { margin:0 0 5px; font-size:31px; }
/* Настраиваем пояснение раздела. */
.page-header p { margin:0; color:var(--muted); }
/* Оформляем имя администратора. */
.user-badge { padding:10px 13px; border:1px solid #cfe0fa; border-radius:999px; color:var(--blue-dark); background:#edf4ff; font-size:13px; font-weight:800; }
/* Скрываем закрытые рабочие разделы. */
.section { display:none; }
/* Показываем открытый раздел. */
.section.active { display:grid; gap:18px; }
/* Оформляем универсальную белую панель. */
.panel { border:1px solid var(--line); padding:20px; border-radius:17px; background:var(--panel); box-shadow:var(--shadow); }
/* Убираем верхний отступ заголовка панели. */
.panel h2 { margin:0 0 14px; }
/* Создаём сетку сводных показателей. */
.stats { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:15px; }
/* Оформляем одну карточку показателя. */
.stat { padding:19px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
/* Оформляем число показателя. */
.stat strong { display:block; margin-top:7px; font-size:31px; }
/* Оформляем подпись показателя. */
.stat span { color:var(--muted); font-size:13px; font-weight:800; }
/* Оформляем успешное состояние API. */
.system-state { color:var(--green); font-weight:850; }
/* Располагаем поля формы в адаптивную сетку. */
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)) auto; align-items:end; gap:14px; }
/* Упрощаем короткую форму. */
.form-grid.compact { grid-template-columns:minmax(240px,1fr) auto; }
/* Разрешаем широкой форме водителя больше колонок. */
.form-grid.wide { grid-template-columns:repeat(4,minmax(170px,1fr)); }
/* Разрешаем горизонтальную прокрутку широкой таблицы. */
.table-wrap { overflow-x:auto; }
/* Оформляем таблицу данных. */
table { width:100%; border-collapse:collapse; }
/* Оформляем ячейки таблицы. */
th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
/* Оформляем заголовки колонок. */
th { color:var(--muted); font-size:11px; text-transform:uppercase; }
/* Убираем линию последней строки. */
tr:last-child td { border-bottom:0; }
/* Оформляем метку состояния. */
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; color:#08784e; background:#ecfaf4; font-size:11px; font-weight:850; }
/* Оформляем выключенное состояние. */
.badge.off { color:#a52828; background:#fff0f0; }
/* Оформляем цветной круг статуса. */
.color-dot { display:inline-block; width:11px; height:11px; margin-right:7px; border-radius:50%; }
/* Оформляем пустой список. */
.empty { padding:30px; color:var(--muted); text-align:center; }
/* Оформляем всплывающее сообщение. */
.toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:380px; padding:14px 17px; border-radius:12px; color:#fff; background:#172235; box-shadow:var(--shadow); }
/* Адаптируем админку под планшеты. */
@media (max-width:1050px) { .stats{grid-template-columns:repeat(2,1fr)} .form-grid,.form-grid.wide{grid-template-columns:repeat(2,1fr)} }
/* Адаптируем админку под телефоны. */
@media (max-width:720px) { .admin-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.navigation{grid-template-columns:repeat(2,1fr)}.logout{margin-top:18px}.content{padding:18px}.page-header{align-items:flex-start;flex-direction:column}.form-grid,.form-grid.wide,.form-grid.compact{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr} }