/* Каркас web-трекера (Ф1.1). Візуальна мова взята з coo_dashboard/base.html.
   Тут — лише каркасні стилі (типографіка, dropdown, dark-оверрайди, адаптивність).
   Стилі сторінок даних (activity/raw/timeline) додаються у відповідних кроках Ф1.5+. */

/* ── МАСШТАБ: html-база для rem ── */
html { font-size: 75%; } /* 12px base → всі Tailwind rem -25% */

/* ── GLASS TOKENS ── */
:root {
  /* Фон сторінки — трохи тонований, дає текстуру для blur */
  --page-bg:          #f1f5f9;        /* slate-100 замість gray-50 */
  --sidebar-bg:       rgba(226,232,240,0.82);   /* slate-200 + opacity */
  --sidebar-border:   rgba(148,163,184,0.35);   /* slate-400 */

  /* Glass-картка (light) */
  --glass-bg:         rgba(255,255,255,0.65);
  --glass-blur:       12px;
  --glass-border:     rgba(255,255,255,0.55);
  --glass-shadow:     0 4px 24px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.04);
  --glass-radius:     14px;

  /* Акцент */
  --accent:           #2563eb;
  --accent-glow:      rgba(37,99,235,0.18);

  /* Масштаб */
  --base-font:        14px;
  --space-card:       0.75rem;        /* p-3 замість p-4 */
  --space-main-x:     1.25rem;        /* px-5 замість px-6 */
  --space-main-y:     1.25rem;        /* py-5 замість py-6 */
}

.dark {
  --page-bg:          #0b1120;        /* між gray-950 і slate-950 */
  --sidebar-bg:       rgba(15,23,42,0.85);      /* темніше фону */
  --sidebar-border:   rgba(51,65,85,0.5);

  /* Glass-картка (dark) */
  --glass-bg:         rgba(30,41,59,0.60);      /* slate-800 + opacity */
  --glass-blur:       14px;
  --glass-border:     rgba(71,85,105,0.40);     /* slate-600 */
  --glass-shadow:     0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.20);
  --glass-radius:     14px;

  --accent-glow:      rgba(37,99,235,0.25);
}

/* Dropdown CSS-змінні — світла / темна тема. */
:root {
    --dd-bg: #ffffff;
    --dd-border: #f9fafb;
    --dd-sep: #e5e7eb;
    --dd-text: #374151;
    --dd-hover: #f3f4f6;
}
.dark {
    --dd-bg: #1f2937;
    --dd-border: #374151;
    --dd-sep: #4b5563;
    --dd-text: #d1d5db;
    --dd-hover: #374151;
}

/* ── GLASS CLASSES ── */

/* Glass-картка — замінює bg-white/bg-gray-900 + border */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
/* C1-fix: fallback для браузерів без backdrop-filter (Safari 14–16.4, Chrome 76–111).
   @supports НЕ всередині .glass-card — CSS Nesting не підтримується у старих браузерах. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: rgba(255,255,255,0.92); }
  .dark .glass-card { background: rgba(30,41,59,0.95); }
}

/* Акцент-glow на активному пункті меню */
.nav-active-glow {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 8px;
}

/* Gradient accent — опційно, лише для кнопок/бейджів */
.btn-accent-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  box-shadow: 0 2px 12px rgba(37,99,235,0.30);
}

/* ── BODY ── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--page-bg) !important;
    font-size: var(--base-font);
    transition: background-color 0.2s, color 0.2s;
}

/* Dropdown-панель Адмінки (узгоджено з дашбордом). */
.dropdown-panel {
    background: var(--dd-bg);
    border: 1px solid var(--dd-sep);
}

/* Dark-mode глобальні оверрайди — Tailwind CDN не генерує dark: для include-частин динамічно,
   тож дублюємо ключові кольори, як у дашборді. */
.dark .bg-white { background-color: #1f2937 !important; }
.dark .bg-gray-50 { background-color: #111827 !important; }
.dark .bg-gray-100 { background-color: #374151 !important; }
.dark .border-gray-200 { border-color: #374151 !important; }
.dark .border-gray-100 { border-color: #2d3748 !important; }

/* Мобільна адаптивність каркасу. */
@media (max-width: 767px) {
    main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.75rem !important;
    }
    h1.text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
}

/* ── SIDEBAR ── */

/* Glass sidebar */
#tracker-sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sidebar-border) !important;
  /* transition ширини + мобільний overlay */
  transition: width 0.22s ease, transform 0.2s ease;
}

/* Sidebar sticky на десктопі — лишається у viewport при скролі контенту. */
@media (min-width: 768px) {
    #tracker-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

/* ── ICON-RAIL (COLLAPSED) ── */
/* M1-fix: collapsed-стан застосовується через ОБИДВА механізми:
   - .sidebar-collapsed на <aside> — JS-toggle під час роботи сторінки
   - html[data-sidebar-collapsed] — FOUC-safe ініціалізація з <head> (без DOMContentLoaded) */

/* Collapsed-стан на десктопі */
@media (min-width: 768px) {
  #tracker-sidebar.sidebar-collapsed,
  html[data-sidebar-collapsed] #tracker-sidebar {
    width: 3.5rem; /* 56px = w-14 */
  }
  #tracker-sidebar.sidebar-collapsed .sidebar-label,
  html[data-sidebar-collapsed] #tracker-sidebar .sidebar-label {
    display: none;
  }
  #tracker-sidebar.sidebar-collapsed [data-hide-collapsed],
  html[data-sidebar-collapsed] #tracker-sidebar [data-hide-collapsed] {
    display: none;
  }
  /* M2-fix: profile-menu у collapsed — floating panel справа від sidebar */
  #tracker-sidebar.sidebar-collapsed .profile-burger,
  html[data-sidebar-collapsed] #tracker-sidebar .profile-burger {
    position: relative;
  }
  #tracker-sidebar.sidebar-collapsed .profile-menu,
  html[data-sidebar-collapsed] #tracker-sidebar .profile-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: var(--dd-bg);
    border: 1px solid var(--dd-sep);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.12);
    z-index: 200;
    padding: 0.25rem;
    /* скасовуємо max-height анімацію (expanded-режим) — у floating вона не потрібна */
    overflow: visible !important;
    max-height: none !important;
    /* прихована поки не відкрита — через visibility, не max-height */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s 0.15s;
  }
  /* відкритий стан у collapsed */
  #tracker-sidebar.sidebar-collapsed .profile-burger.profile-burger--open .profile-menu,
  html[data-sidebar-collapsed] #tracker-sidebar .profile-burger.profile-burger--open .profile-menu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.15s ease;
  }
  /* Іконки центруються */
  #tracker-sidebar.sidebar-collapsed nav a,
  #tracker-sidebar.sidebar-collapsed .sidebar-icon-row,
  html[data-sidebar-collapsed] #tracker-sidebar nav a,
  html[data-sidebar-collapsed] #tracker-sidebar .sidebar-icon-row {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* Collapse-btn орієнтація + flip іконки (N4) */
  #tracker-sidebar.sidebar-collapsed #sidebar-collapse-btn,
  html[data-sidebar-collapsed] #tracker-sidebar #sidebar-collapse-btn {
    justify-content: center;
  }
  #tracker-sidebar.sidebar-collapsed #sidebar-collapse-btn svg,
  html[data-sidebar-collapsed] #tracker-sidebar #sidebar-collapse-btn svg {
    transform: rotate(180deg);
  }
  /* Бренд у collapsed */
  #tracker-sidebar.sidebar-collapsed .sidebar-brand-row,
  html[data-sidebar-collapsed] #tracker-sidebar .sidebar-brand-row {
    justify-content: center;
  }
  /* Profile burger trigger в collapsed */
  #tracker-sidebar.sidebar-collapsed .profile-burger button,
  html[data-sidebar-collapsed] #tracker-sidebar .profile-burger button {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* Theme toggle в collapsed */
  #tracker-sidebar.sidebar-collapsed .theme-toggle-row,
  html[data-sidebar-collapsed] #tracker-sidebar .theme-toggle-row {
    justify-content: center;
  }
  /* Підписи секцій ховаються */
  #tracker-sidebar.sidebar-collapsed .sidebar-section-label,
  html[data-sidebar-collapsed] #tracker-sidebar .sidebar-section-label {
    display: none;
  }
  /* Нижній блок (docs/raw) */
  #tracker-sidebar.sidebar-collapsed .sidebar-bottom-item,
  html[data-sidebar-collapsed] #tracker-sidebar .sidebar-bottom-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tooltip при hover на collapsed nav-item */
#tracker-sidebar.sidebar-collapsed nav a,
html[data-sidebar-collapsed] #tracker-sidebar nav a {
  position: relative;
}
#tracker-sidebar.sidebar-collapsed nav a::after,
html[data-sidebar-collapsed] #tracker-sidebar nav a::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,0.92);
  color: #f8fafc;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
#tracker-sidebar.sidebar-collapsed nav a:hover::after,
html[data-sidebar-collapsed] #tracker-sidebar nav a:hover::after {
  opacity: 1;
}

/* ── ПУ FLYOUT (батьківський пункт «ПУ» → підменю вправо) ── */
/* Підменю — position:fixed (а не absolute), бо <nav> має overflow-y:auto, що ріже
   absolute-нащадка по горизонталі. Координати (top/left) виставляє JS на mouseenter
   за rect тригера (як _schedule_popover). Видимість керується hover (CSS) — і на
   тригері, і на самому підменю (щоб курсор міг перейти на пункти без закриття). */
.pu-submenu {
  position: fixed;
  min-width: 200px;
  background: var(--dd-bg);
  border: 1px solid var(--dd-sep);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.12);
  z-index: 200;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0s 0.15s;
}
/* Прозорий «місток» перекриває зазор тригер↔підменю (fixed left=r.right+4). Без нього
   курсор на переході потрапляє в deadzone без :hover і підменю зникає. Pseudo = частина
   .pu-submenu, тож наведення на місток тримає :hover. */
.pu-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 12px;
  height: 100%;
}
.pu-flyout:hover > .pu-submenu,
.pu-submenu:hover {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.15s ease;
}
/* У collapsed-стані шеврон-вправо в тригері зайвий (label ховається) */
@media (min-width: 768px) {
  #tracker-sidebar.sidebar-collapsed .pu-flyout-trigger,
  html[data-sidebar-collapsed] #tracker-sidebar .pu-flyout-trigger {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Health-сторінка каркасу (Ф1.1 заглушка). */
.health h1 { color: #16a34a; }