/* Khaadim shared shell: reset, palette, header/nav, hero, flash, footer.
   Page-specific styles stay in each template and may override these rules
   (templates link this file before their own <style> block). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:#2d3a52; --teal:#0e3535; --gold:#c9a014; --gold-dark:#a8870f;
  --gold-bg:#fdf6e3; --footer:#374162; --footer-lo:#2d3455;
  --white:#fff; --light:#f5f6fa; --border:#dde2ea; --text:#333; --muted:#666;
}

body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--light); color:var(--text); min-height:100vh; display:flex; flex-direction:column; }

/* ── Top strip + site header ── */
.topstrip { height:5px; background:var(--navy); }
.site-header { background:var(--white); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.logo, .site-header .logo { display:flex; align-items:center; gap:12px; }
.logo-img { height:56px; width:auto; display:block; }
.logo-text span { font-size:0.78rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
.header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.user-pill { display:flex; align-items:center; }
.user-pill img { width:30px; height:30px; border-radius:50%; border:2px solid var(--gold); display:block; }
.user-initial { width:30px; height:30px; border-radius:50%; border:2px solid var(--gold); background:var(--navy); color:var(--white); font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ── Nav links + tooltips ── */
.nav-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; color:var(--muted); text-decoration:none; border:none; background:transparent; transition:color 0.15s; position:relative; }
.nav-link i { font-size:0.95rem; }
.nav-link:hover { color:var(--navy); }
.nav-link.active { color:var(--gold-dark); }
.nav-link.active:hover { color:var(--gold-dark); }
.nav-link::after { content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:4px 10px; border-radius:4px; font-size:0.7rem; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s; z-index:200; }
.nav-link::before { content:''; position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); border:4px solid transparent; border-bottom-color:var(--navy); opacity:0; pointer-events:none; transition:opacity 0.15s; z-index:200; }
.nav-link:hover::after, .nav-link:hover::before { opacity:1; }

/* ── Avatar dropdown ── */
.avatar-wrap { position:relative; }
.user-pill, .user-initial { cursor:pointer; }
.avatar-menu { position:absolute; top:calc(100% + 10px); right:0; background:var(--white); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.12); min-width:150px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity 0.15s, transform 0.15s; transform:translateY(-4px); z-index:300; }
.avatar-menu.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.avatar-menu-item { display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:0.82rem; font-weight:500; text-decoration:none; transition:background 0.1s; color:var(--text); }
.avatar-menu-item.danger { color:#dc2626; }
.avatar-menu-item.danger:hover { background:#fff1f1; }

/* ── Hero ── */
.hero { background:var(--teal); color:var(--white); text-align:center; padding:14px 20px 12px; }
.hero h1 { font-size:1.25rem; font-weight:700; }
.hero p { margin-top:4px; font-size:0.8rem; color:rgba(255,255,255,0.65); }
.gold-line { display:block; width:40px; height:3px; background:var(--gold); margin:8px auto 0; border-radius:2px; }

/* ── Flash messages ── */
.flash { padding:10px 16px; border-radius:6px; margin-bottom:16px; font-size:0.88rem; font-weight:600; }
.flash-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.flash-error   { background:#fef2f2; color:#c0392b; border:1px solid #fecaca; }

/* ── Footer ── */
.footer-bottom { background:var(--footer-lo); text-align:center; padding:10px; font-size:0.7rem; color:rgba(255,255,255,0.35); margin-top:auto; }

/* ── Mobile header: tighter icons so all nav links fit one row ── */
@media (max-width:600px) {
  .site-header { padding:10px 12px; gap:8px; }
  .logo, .site-header .logo { gap:8px; }
  .logo-img { height:40px; }
  .logo-text span { font-size:0.68rem; letter-spacing:0.06em; }
  .header-right { gap:4px; }
  .nav-link { width:28px; height:28px; }
  .nav-link i { font-size:0.85rem; }
  .user-pill img, .user-initial { width:28px; height:28px; }
}