/* ── 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);
}

/* ── Не-прод середовище: зелений стенд, синя локалка ───────────
   Клас на <body> ставить users.context_processors.environment за ENV_LABEL
   із .env; на проді змінної немає -> клас порожній і топбар звичайний.
   Ті самі кольори несе favicon (див. base.html), щоб вкладки не плутались. ── */
.env-dev .topbar {
    background: var(--add-soft);
    border-bottom: 2px solid var(--add);
}

.env-local .topbar {
    background: var(--info-soft);
    border-bottom: 2px solid var(--info);
}

.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;
}

/* Мотиваційна фраза дня (ТЗ 2.2): у вільному центрі топбару. margin:auto штовхає
   її від назви й від actions; обрізаємо довгі фрази, щоб не ламали рядок. */
.topbar__motivation {
    margin: 0 auto;
    min-width: 0;
    max-width: 40rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--active);
}

.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;
}

/* Блок «профіль»: кнопка сповіщень (manager+). Аватар переїхав у топбар. */
.sidebar__profile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* Аватар юзера у топбарі: малий квадрат перед іменем. Веде на власну картку;
   настрій дня (ТЗ 5) — тултип [data-tip] при наведенні (емодзі поверх прибрано). */
.topbar-avatar {
    /* position: relative — якір для тултипа настрою [data-tip] (той позиціонується
       absolute відносно носія). overflow тут НЕ ставимо: він обрізав би тултип, що
       малюється над аватаркою — округлення несе сам <img>. */
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.1s ease;
}
.topbar-avatar:hover { border-color: var(--accent); }
.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.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; }
}


/* ── Модалка вибору настрою (ТЗ 5) — блокуюча, глобальна ── */
.mood-modal__box { max-width: 34rem; text-align: center; }
.mood-modal__title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 1.25rem; }
.mood-modal__options {
    display: flex; justify-content: center; flex-wrap: nowrap; gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.mood-opt {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    flex: 1 1 0; min-width: 0; padding: 0.75rem 0.3rem;
    background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.mood-opt:hover { border-color: var(--accent); }
.mood-opt.is-selected { border-color: var(--active); background: var(--active-soft); color: var(--text); }
.mood-opt__emoji { font-size: 1.9rem; line-height: 1; }
.mood-opt__label { font-size: 0.72rem; }
.mood-modal__message { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; margin-bottom: 1.25rem; }
.mood-modal__message > span { font-size: 0.8rem; color: var(--text-muted); }
.mood-modal__message input {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; color: var(--text);
}
.mood-modal__message input:focus { outline: none; border-color: var(--accent); }
.mood-modal .modal__actions { justify-content: center; }

/* Модалка готовності до відключень (ТЗ 6) — близнюк модалки настрою, але 3 варіанти
   з описами: стовпчиком (опис довгий, у ряд не влазить), іконка ліворуч. */
.power-modal__box { max-width: 34rem; }
.power-modal__title { font-size: 1.1rem; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 1.25rem; }
.power-modal__options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.power-opt {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 0.75rem; row-gap: 0.15rem; text-align: left; padding: 0.75rem 0.9rem;
    background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); cursor: pointer;
}
.power-opt:hover { border-color: var(--accent); }
.power-opt.is-selected { border-color: var(--active); background: var(--active-soft); }
.power-opt__icon { grid-row: span 2; font-size: 1.5rem; }
.power-opt--ready .power-opt__icon { color: var(--add); }
.power-opt--partial .power-opt__icon { color: var(--warn); }
.power-opt--not_ready .power-opt__icon { color: var(--crit); }
.power-opt__label { font-weight: 600; }
.power-opt__desc { font-size: 0.78rem; color: var(--text-muted); }
.power-modal .modal__actions { justify-content: center; }