/* ─────────────────────────────────────────────────────────────────────────
   Shared application chrome — the TOP BAR (header) and LEFT NAV.

   Single source of truth for the two elements that stay constant on every
   page. Every template links this file LAST in <head> (after its own inline
   <style>), so these rules win the cascade and the header + sidebar render
   pixel-identically across all screens. This file declares the design tokens
   it needs, so it never depends on a page having defined them.

   NOTE: if you change the header/sidebar, change it HERE — not in a page's
   inline <style>. Inline chrome rules (if any remain) are superseded by this
   file and editing them will appear to do nothing.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --navy: #08262c;
  --bg: #f5f5f5;
  --border: #e6e6e6;
  --text: #3a3a3a;
  --muted: #6b7590;
  --radius: 8px;
  --radius-btn: 4px;
  --shadow: 0 1px 3px rgba(8, 38, 44, .06);
  --header-h: 66px;
}

/* Shell layout */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Left nav */
.left-nav { width: 72px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; z-index: 12; }
.left-nav::-webkit-scrollbar { width: 0; }
.left-nav-top { width: 100%; min-height: var(--header-h); background: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.left-nav-grid { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 2px; }
.left-nav-grid span { display: block; width: 4px; height: 4px; border-radius: 1px; background: #fff; }
.left-nav-list { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 4px 0 16px; }
.left-nav-item { width: 100%; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text); text-align: center; text-decoration: none; border-left: 3px solid transparent; transition: background .15s; }
.left-nav-item:hover { background: var(--bg); }
.left-nav-item.active { border-left-color: var(--navy); background: var(--bg); }
.left-nav-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--text); opacity: .7; }
.left-nav-item.active .left-nav-icon { opacity: 1; }
.left-nav-label { font-size: 9px; line-height: 1.2; font-weight: 500; color: var(--text); display: flex; flex-direction: column; align-items: center; }
.left-nav-label span { display: block; }

/* Header (top bar) */
header { background: #fff; position: relative; padding: 0 27px; height: 67px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 10; }
header::before { content: ''; position: absolute; inset: 0; background: url('/static/header-bg.png') center/cover no-repeat; opacity: .3; pointer-events: none; }
header > * { position: relative; z-index: 1; }
.topbar-logo { height: 40px; width: auto; flex-shrink: 0; }
.topbar-divider { width: 1px; height: 27px; background: rgba(8, 38, 44, .25); margin: 0 4px; }
.topbar-app-label { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: .08em; color: #08262c; white-space: nowrap; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* User menu + dropdown */
.user-menu { position: relative; }
.user-menu-btn { background: none; border: none; font-family: inherit; font-size: 13px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-btn); transition: background .15s; }
.user-menu-btn:hover { background: rgba(0, 0, 0, .05); }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); display: none; }
.user-avatar.loaded { display: block; }
.user-initials { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-avatar.loaded + .user-initials { display: none; }
.user-caret { font-size: 10px; opacity: .6; }
.user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); min-width: 180px; z-index: 20; overflow: hidden; }
.user-menu.open .user-dropdown { display: block; }
.user-dropdown a { display: block; padding: 10px 16px; font-size: 13px; color: var(--text); text-decoration: none; transition: background .15s; }
.user-dropdown a:hover { background: var(--bg); }
.user-dropdown-team { padding: 8px 16px 10px; border-bottom: 1px solid var(--border); }
.user-dropdown-team label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.user-dropdown-team select { width: 100%; font-family: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; }
