/* ── Inter (локальний, static/vendor/inter) — 3 ваги під «Airy»:
   400 body, 500 акценти/кнопки, 600 заголовки. Без CDN (CSP/PA). ── */
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("../vendor/inter/inter-400.da03732a27e1.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("../vendor/inter/inter-500.51205681a1ba.woff2") format("woff2");
}
@font-face {
    font-family: "Inter"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("../vendor/inter/inter-600.2ede57db1a3a.woff2") format("woff2");
}

/* ── Theme tokens ─────────────────────────────────────────────
   Редизайн «Airy»: повітря, тонка рамка, мʼякі радіуси, легка вага,
   приглушений teal-акцент замість кислотного #00c896. Severity-кольори
   (crit/warn/info) — окрема вісь від акценту. ── */
:root {
    --sidebar-w: 17.5rem;
    --radius: 0.75rem;       /* базовий (картки/панелі) */
    --radius-sm: 0.5rem;     /* кнопки, дрібні контроли */
    --gap: 1.25rem;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
    --bg: #0e1119;
    --surface: #161a24;
    --surface-2: #1c222e;
    --border: #262d3a;
    --text: #e4e8f0;
    --text-muted: #8a94a8;
    --accent: #3ba88f;
    --accent-soft: #3ba88f22;   /* напівпрозора заливка для hover/фонів */
    --on-accent: #0b1a15;       /* текст поверх суцільної акцент-заливки */
    /* Активний стан («ти тут») — золото, окрема семантика від акценту-дії. */
    --active: #d6a94e;
    --active-soft: #d6a94e26;
    /* severity — колір несе важливість (не акцент). Насичені, не бліді. */
    --crit: #e05a4f; --crit-soft: #e05a4f1a;
    --warn: #e6a23c; --warn-soft: #e6a23c1a;
    --info: #3b82f6; --info-soft: #3b82f61a;
    /* «додав/плюс» (додатковий день, відпрацювання) — зелений, окремо від акценту. */
    --add: #22c55e; --add-soft: #22c55e1a;
    /* Фонова картинка: оверлей поверх (напівпрозорий --bg) + розмиття. */
    --bg-overlay: #0e1119cc;
    --bg-blur: 6px;
}

[data-theme="light"] {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-2: #eef1f8;
    --border: #dce1ec;
    --text: #1a1e2c;
    --text-muted: #5f6782;
    --accent: #2c8f78;
    --accent-soft: #2c8f7818;
    --on-accent: #ffffff;       /* світла тема: білий текст поверх акценту */
    --active: #b8892e;
    --active-soft: #b8892e1c;
    --crit: #e05a4f; --crit-soft: #e05a4f14;
    --warn: #e6a23c; --warn-soft: #e6a23c14;
    --info: #3b82f6; --info-soft: #3b82f614;
    --add: #16a34a; --add-soft: #16a34a14;
    --bg-overlay: #f4f6fbcc;
    --bg-blur: 6px;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Thin themed scrollbars ───────────────────────────────── */
* {
    scrollbar-width: thin;                              /* Firefox */
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }    /* Chrome/Edge */
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
    border: 2px solid var(--bg);                        /* inset look */
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
*::-webkit-scrollbar-corner { background: transparent; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;        /* rem base */
    font-weight: 400;       /* Airy: базова вага легка, не bold */
    line-height: 1.5;
    letter-spacing: -0.003em;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Фонова картинка — окремий фіксований шар за контентом (не блюримо текст,
   не скролиться). Оверлей із --bg притишує яскравість, щоб інтерфейс читався.
   opacity/blur/затемнення — робочі ручки, крутимо далі. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
                url("../img/bg.c53f589736c2.jpg") center / cover no-repeat fixed;
    filter: blur(var(--bg-blur));
}

/* ── Topbar (height follows content, not hardcoded) ───────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    padding: 0.5rem var(--gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topbar__title {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}
/* «Головна | <заголовок>» — посилання у стилі самого напису, відділене рискою. */
/* «Головна» — предок breadcrumb: приглушена (клікабельна), акцент на hover. */
/* Лого-жираф — прямокутний, як є: висота під топбар, ширина натуральна. */
.topbar__brand { display: inline-flex; margin-right: 0.7rem; flex-shrink: 0; }
.topbar__logo {
    height: 1.9rem; width: auto; display: block;
    padding-right: 0.35rem;        /* трохи білого повітря справа (зливається з фоном png) */
    background: #fff;
    border-radius: 6px;
}

.topbar__home {
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.12s;
}
.topbar__home:hover { color: var(--accent); }
/* Поточна сторінка — виразна (де ти зараз). */
.topbar__here { color: var(--text); }
.topbar__sep {
    margin: 0 0.5rem;
    color: var(--text-muted);
    font-weight: 400;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar__user {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__logout {
    margin: 0;
    display: flex;
    align-items: center;
}

/* ── Round icon buttons (theme / logout) ──────────────────── */
.icon-btn,
.theme-toggle,
.topbar__logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.topbar__logout-btn:hover { border-color: #ff7b7b; color: #ff7b7b; }

.theme-toggle__icon--light { display: none; }
[data-theme="light"] .theme-toggle__icon--dark { display: none; }
[data-theme="light"] .theme-toggle__icon--light { display: inline; }

/* ── Layout: content + right sidebar ──────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    gap: var(--gap);
    padding: var(--gap);
    align-items: start;
}

.content { min-width: 0; }

.layout--no-sidebar { grid-template-columns: 1fr; }

/* ── Right sidebar (own independent scroll when it grows) ──── */
.sidebar {
    position: sticky;
    /* липне ПІД топбар: його реальну висоту міряє JS -> --topbar-h (фолбек 0). */
    top: calc(var(--topbar-h, 0px) + var(--gap));
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-height: calc(100vh - var(--topbar-h, 0px) - 2 * var(--gap));
    overflow-y: auto;
}

.sidebar__block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

/* Блок «профіль»: аватар (веде на свою картку) + кнопка сповіщень під ним. */
.sidebar__profile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sidebar-avatar {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 2.4rem;
    text-decoration: none;
    transition: border-color 0.1s ease;
}
.sidebar-avatar:hover { border-color: var(--accent); }
.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar__title {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar__body { min-height: 2.5rem; }

/* ── Responsive: sidebar drops below on narrow screens ────── */
@media (max-width: 56.25rem) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}