/* =====================================================================
   Стили админ-панели. Макет — CSS GRID (сайдбар + контент),
   карточки KPI и таблицы также на grid.
   ===================================================================== */

:root {
    --a-primary: #0d4a8f;
    --a-dark:    #0b2c52;
    --a-bg:      #eef1f7;
    --a-card:    #fff;
    --a-border:  #e2e6ee;
    --a-muted:   #6b7280;
    --a-accent:  #f0a500;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
    background: var(--a-bg); color: #1f2733;

    /* --- CSS GRID: сайдбар | основная область --- */
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar content";
}
a { color: var(--a-primary); text-decoration: none; }

/* ---------- Сайдбар ---------- */
.a-sidebar {
    grid-area: sidebar;
    background: var(--a-dark); color: #cdd9ea;
    display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
    padding: 18px 0;
}
.a-brand { padding: 0 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.a-brand b { color:#fff; font-size: 16px; display:block; }
.a-brand span { font-size: 12px; opacity:.7; }
.a-menu { list-style: none; display: grid; gap: 2px; padding: 14px 10px; align-content: start; }
.a-menu a {
    display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center;
    color:#cdd9ea; padding: 11px 14px; border-radius: 9px; font-size: 14.5px;
}
.a-menu a:hover, .a-menu a.active { background: rgba(255,255,255,.12); color:#fff; }
.a-menu .ic { text-align: center; }
.a-foot { padding: 0 20px; font-size: 12px; opacity:.6; }

/* ---------- Топбар ---------- */
.a-topbar {
    grid-area: topbar;
    background: #fff; border-bottom: 1px solid var(--a-border);
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    padding: 0 22px; gap: 16px;
}
.a-topbar h1 { font-size: 18px; color: var(--a-dark); }
.a-topbar .right { display: grid; grid-auto-flow: column; gap: 12px; align-items: center; font-size: 14px; }

/* ---------- Контент ---------- */
.a-content { grid-area: content; padding: 24px; overflow: auto; }

/* KPI-карточки: CSS GRID */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 26px;
}
.kpi {
    background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 14px; padding: 20px; box-shadow: 0 6px 18px rgba(13,74,143,.07);
    display: grid; gap: 6px;
}
.kpi .v { font-size: 30px; font-weight: 800; color: var(--a-primary); }
.kpi .k { color: var(--a-muted); font-size: 13.5px; }
.kpi.accent { border-top: 4px solid var(--a-accent); }

.panel {
    background: var(--a-card); border: 1px solid var(--a-border);
    border-radius: 14px; padding: 20px; margin-bottom: 22px;
    box-shadow: 0 6px 18px rgba(13,74,143,.07);
}
.panel-head {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    margin-bottom: 16px; gap: 12px;
}
.panel-head h2 { font-size: 18px; color: var(--a-dark); }

/* Таблица */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--a-border); }
th { background: #f5f7fb; color: var(--a-dark); font-weight: 700; }
tr:hover td { background: #fafbfe; }
.table-wrap { overflow-x: auto; }

/* Формы в админке */
.a-form { display: grid; gap: 14px; max-width: 720px; }
.a-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-form label { font-size: 13.5px; font-weight: 600; display: grid; gap: 5px; }
.a-form input, .a-form select, .a-form textarea {
    border: 1px solid var(--a-border); border-radius: 8px; padding: 10px 11px;
    font-size: 14.5px; font-family: inherit; width: 100%; background:#fff;
}
.a-form textarea { min-height: 110px; resize: vertical; }
.a-form input:focus, .a-form select:focus, .a-form textarea:focus {
    outline: 2px solid var(--a-primary); border-color: transparent;
}

.btn {
    display: inline-block; background: var(--a-primary); color:#fff;
    border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer;
    font-size: 14px; font-family: inherit;
}
.btn:hover { filter: brightness(1.08); }
.btn.sec { background: #e6eaf2; color: #33415a; }
.btn.warn { background: #cf4040; }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.actions-cell { display: grid; grid-auto-flow: column; gap: 6px; justify-content: start; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 700; display: inline-block; }
.badge.green  { background: #e6f6ec; color: #1c6b3c; }
.badge.red    { background: #fdeaea; color: #9b2c2c; }
.badge.amber  { background: #fdf3da; color: #8a6300; }
.badge.blue   { background: #e8f0fb; color: #1b4a86; }
.badge.gray   { background: #eceff3; color: #5b6573; }

.alert { border-radius: 10px; padding: 13px 16px; margin-bottom: 16px; font-size: 14.5px; }
.alert.success { background: #e6f6ec; color: #1c6b3c; border: 1px solid #b9e3c8; }
.alert.error   { background: #fdeaea; color: #9b2c2c; border: 1px solid #f3c4c4; }

/* Экран входа: CSS GRID по центру */
body.login-page {
    grid-template-columns: 1fr; grid-template-rows: 1fr;
    grid-template-areas: "login"; place-items: center;
    background: linear-gradient(120deg, #0d4a8f, #0b2c52);
}
.login-box {
    grid-area: login; background:#fff; border-radius: 16px;
    padding: 34px; width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
    display: grid; gap: 16px;
}
.login-box h1 { font-size: 20px; color: var(--a-dark); text-align: center; }
.login-box .logo {
    width: 56px; height: 56px; border-radius: 50%; background: var(--a-accent);
    color: var(--a-dark); display: grid; place-items: center;
    font-weight: 800; font-size: 22px; margin: 0 auto;
}

@media (max-width: 860px) {
    body { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
    .a-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; width: 230px; z-index: 50;
        transform: translateX(-100%); transition: .25s;
    }
    .a-sidebar.open { transform: none; }
    .a-form .grid2 { grid-template-columns: 1fr; }
}