/* ═══════════════════════════════════════════════════════════════════════════
   shared.css — kaanib.net platform
   Loaded by every page. Contains:
     1. @font-face declarations
     2. Canonical CSS variables (light default + dark override)
     3. Box-sizing reset
     4. Sidebar, hamburger & mobile nav (authenticated pages)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face { font-family:'Plus Jakarta Sans'; src:url('/css/fonts/PlusJakartaSans-Regular.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('/css/fonts/PlusJakartaSans-Medium.woff2')    format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('/css/fonts/PlusJakartaSans-SemiBold.woff2')  format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('/css/fonts/PlusJakartaSans-Bold.woff2')      format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('/css/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ── CSS Variables — light mode defaults ─────────────────────────────────── */
:root {
    --brand:   #f97316;
    --brand-d: #ea6a08;
    --text:    #0a0a0a;
    --muted:   #777;
    --line:    #e8e8e8;
    --bg:      #f2f2f2;
    --surface: #ffffff;
    --danger:  #ef4444;
    --ok:      #22c55e;
    --btn-bg:  #0a0a0a;
    --btn-fg:  #ffffff;
    --font:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --radius:  8px;
    --shadow:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
html.theme-dark {
    --text:    #f0f0f0;
    --muted:   #98989d;
    --line:    #3a3a3c;
    --bg:      #1a1a1c;
    --surface: #2a2a2c;
    --btn-bg:  #f0f0f0;
    --btn-fg:  #0a0a0a;
    --shadow:  0 1px 3px rgba(0,0,0,.4);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

/* ── Sidebar layout ──────────────────────────────────────────────────────── */
html.db, html.db body { height: 100%; overflow: hidden; }
.db-wrap { display: flex; flex: 1; height: 100%; overflow: hidden; }
.db-sidebar {
    width: 210px; flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; overflow: hidden;
    transition: background .25s, border-color .25s;
}
.db-sidebar-logo {
    height: 54px; display: flex; align-items: center;
    padding: 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.db-sidebar-logo .vp-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }

.db-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.db-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; text-decoration: none;
    font-size: 13px; font-weight: 500; color: var(--muted);
    transition: background .15s, color .15s; white-space: nowrap;
}
.db-nav-item i { font-size: 16px; flex-shrink: 0; }
.db-nav-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.db-nav-item.active  { background: var(--bg); color: var(--text); }
.db-nav-item.primary { background: var(--brand); color: #fff; }
.db-nav-item.primary:hover { background: var(--brand-d); color: #fff; text-decoration: none; }

.db-sidebar-user { padding: 10px 8px; border-top: 1px solid var(--line); flex-shrink: 0; position: relative; }
.db-user-pill {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px; border: none; background: none;
    cursor: pointer; color: var(--text); text-align: left; transition: background .15s;
}
.db-user-pill:hover { background: var(--bg); }
.db-user-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.db-user-info { flex: 1; min-width: 0; }
.db-user-name { display: block; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-user-role { display: block; font-size: 11px; color: var(--muted); }
.db-user-pill i { font-size: 15px; color: var(--muted); flex-shrink: 0; }
.db-user-dropdown {
    position: absolute; bottom: 58px; left: 8px; right: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    transform: translateY(6px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none; z-index: 200;
}
.db-user-dropdown.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.db-user-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 13px; font-weight: 500;
    color: var(--text); text-decoration: none; transition: background .15s;
}
.db-user-dropdown-item:first-child { border-radius: 10px 10px 0 0; }
.db-user-dropdown-item:last-child  { border-radius: 0 0 10px 10px; }
.db-user-dropdown-item:hover { background: var(--bg); text-decoration: none; }
.db-user-dropdown-item i { font-size: 15px; color: var(--muted); }
.db-user-dropdown-item--danger { color: rgba(239,68,68,.85); }
.db-user-dropdown-item--danger i { color: rgba(239,68,68,.85); }
.db-user-dropdown-item--danger:hover { background: rgba(239,68,68,.06); }
.db-user-dropdown-sep { height: 1px; background: var(--line); }

.db-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.db-body .vp-header { flex-shrink: 0; }
.db-body .vp-logo    { display: none; }
.db-body .vp-btn     { display: none; }
.db-body .vp-username { display: none; }
.db-main { flex: 1; overflow-y: auto; }
.db-page-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* Theme toggle icon states */
#dashThemeToggle .icon-sun  { display: none; }
#dashThemeToggle .icon-moon { display: block; }
html.theme-dark #dashThemeToggle .icon-sun  { display: block; }
html.theme-dark #dashThemeToggle .icon-moon { display: none; }

/* ── Hamburger + mobile menu ─────────────────────────────────────────────── */
.vp-hamburger {
    display: none;
    background: none; border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 8px; cursor: pointer;
    color: var(--text); align-items: center; justify-content: center;
    transition: border-color .2s;
}
.vp-hamburger:hover { border-color: var(--brand); color: var(--brand); }
.vp-mobile-menu {
    display: none;
    position: absolute; top: 54px; left: 0; right: 0; z-index: 200;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    transform: translateY(-8px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}
.vp-mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.vp-mobile-menu-inner { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.vp-mobile-menu-user {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
    padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.vp-mobile-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: 8px; text-decoration: none;
    font-size: 14px; font-weight: 600; color: var(--text); transition: background .15s;
}
.vp-mobile-menu-item:hover { background: var(--bg); text-decoration: none; }
.vp-mobile-menu-item--primary { color: var(--brand); }
.vp-mobile-menu-item--danger  { color: rgba(239,68,68,.8); }
.vp-mobile-menu-item--danger:hover { background: rgba(239,68,68,.08); }

/* ── Responsive: mobile sidebar collapse ─────────────────────────────────── */
@media (max-width: 900px) {
    html.db, html.db body { overflow: auto; height: auto; }
    .db-wrap { display: block; height: auto; }
    .db-sidebar { display: none; }
    .db-body { display: block; overflow: visible; }
    .db-body .vp-logo { display: flex; text-decoration: none; }
    .db-page-title { display: none; }
    .db-main { overflow-y: visible; }
    .vp-username { display: none; }
    .vp-btn { display: none !important; }
    .vp-hamburger { display: inline-flex; }
    .vp-mobile-menu { display: block; }
    .vp-header { padding: 0 12px; }
}