/* theme.css — shared modern visual theme for the photo gallery.
   Loaded LAST in <head> so it overrides each page's inline <style> on equal-
   specificity (single-class) selectors. Intentionally sets VISUAL props only
   (color/gradient/radius/shadow/typography/transition) — never display/position/
   flex/grid — so existing page layouts are preserved. Palette mirrors /ai-search. */

:root {
  --accent: #1f3060;
  --accent-d: #16244a;
  --accent-grad: linear-gradient(135deg, #1f3060 0%, #33529a 100%);
  --gold: #c9a63f;      /* logo gold — accents on navy/dark surfaces */
  --gold-d: #927619;    /* darker gold — accents/text on light surfaces */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #1a1d21;
  --muted: #6b7280;
  --border: #e7e9ee;
  --tint: #eef3ff;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg: 0 18px 40px rgba(16,24,40,.14);
}

/* Dark mode via OS preference + manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1117;
    --surface: #1a1d24;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --border: #2d3142;
    --tint: #1e2a3a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d24;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --border: #2d3142;
  --tint: #1e2a3a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.55);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif !important;
  background: radial-gradient(1200px 600px at 50% -10%, #eaf1ff 0%, var(--bg) 60%) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-d); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c7ccd6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab1bd; background-clip: content-box; }

/* ── Header ───────────────────────────────────────────────── */
.header {
  background: var(--accent-grad);
  box-shadow: 0 6px 20px rgba(31,48,96,.25);
  color: #fff;
  border-bottom: 3px solid var(--gold);   /* logo gold accent line */
}
.header h1, .header h2 { font-weight: 650; letter-spacing: .2px; }
.subtitle { color: rgba(255,255,255,.92); }

/* ── Nav / pill buttons ───────────────────────────────────── */
.btn-nav, .back-btn {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.btn-nav:hover, .back-btn:hover { background: rgba(255,255,255,.30); transform: translateY(-1px); }

/* ── Buttons (generic + named) ────────────────────────────── */
button, .btn, .albums-btn, .settings-btn, .upload-btn, .map-btn, .btn-primary {
  border-radius: var(--r); font-weight: 600; transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn, .btn-primary, .upload-btn {
  background: var(--accent-grad); color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(31,48,96,.30);
}
.btn:hover, .btn-primary:hover, .upload-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(31,48,96,.42); }
.btn-secondary {
  background: #fff; color: var(--accent-d); border: 1.5px solid var(--border); border-radius: var(--r); font-weight: 600;
}
.btn-secondary:hover { background: var(--tint); border-color: #cdd9ff; }
.albums-btn { border-radius: 999px; }
.logout-btn { border-radius: 999px; }

/* Wide desktop (>1400px): override pill radius so nav buttons are compact */
@media (min-width: 1401px) {
  .albums-btn, .logout-btn, .upload-btn, .settings-btn {
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    min-height: unset;
  }
}

/* ── Surfaces / cards ─────────────────────────────────────── */
.card, .stat-card, .photo-card, .info-box, .section, .filter-section,
.search-card, .modal-content, .scan-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stat-card { border-radius: var(--r); }
.photo-card { border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.photo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.info-box { background: var(--tint); border-color: #d6e2ff; }

/* ── Forms ────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=password], input[type=number],
input[type=email], select, textarea, .form-group input, .form-group select {
  border: 1.5px solid var(--border); border-radius: var(--r); outline: none;
  background: #fbfcfe; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=email]:focus, select:focus, textarea:focus,
.form-group input:focus, .form-group select:focus {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(31,48,96,.14);
}

/* ── Chips / tabs / pills ─────────────────────────────────── */
.chip {
  background: #fff; color: var(--accent-d); border: 1.5px solid var(--border);
  border-radius: 999px; font-weight: 600; transition: transform .14s, box-shadow .14s, background .14s, border-color .14s;
}
.chip:hover { transform: translateY(-2px); border-color: #cdd9ff; box-shadow: var(--shadow-sm); background: var(--tint); }
.chip.active { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(31,48,96,.35); }
.tab.active { color: var(--accent-d); border-bottom-color: var(--gold); }
.lib-badge { border-radius: 999px; }

/* ── Misc ─────────────────────────────────────────────────── */
.empty-state { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--muted); }
.spinner { border-color: var(--accent); border-top-color: transparent; }
.stat-value { color: var(--gold-d); font-weight: 700; }
.stat-label { color: var(--muted); }
.photo-name { color: var(--text); }
.status { color: var(--muted); }

/* ── Bottom mobile nav ────────────────────────────────────── */
.mobile-nav { box-shadow: 0 -4px 16px rgba(16,24,40,.10); }
.nav-item.active, .nav-item.active .nav-label, .nav-item.active .nav-icon { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Shared mobile header nav (auto-hamburger on all pages) ─────────────────
   theme.js injects a .header-menu-toggle into any .header that has
   .header-buttons (skipping pages that already ship their own toggle, e.g.
   the home page). On phones the button row collapses into a dropdown so every
   page's header looks the same. */
.header { position: relative; }
.header-menu-toggle { display: none; }
/* Hamburger kicks in at 1400px — covers laptops/tablets that can't fit all nav buttons */
@media (max-width: 1400px) {
  .header-menu-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: 22px; line-height: 1; padding: 6px 12px;
    border-radius: 10px; cursor: pointer; min-height: 44px; margin-left: auto;
    flex-shrink: 0;
  }
  .header-buttons {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 6px; padding: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28); z-index: 200;
    max-height: 82vh; overflow-y: auto; border-bottom: 3px solid var(--gold);
  }
  .header-buttons.show { display: flex; }
  .header-buttons a, .header-buttons button, .header-buttons label,
  .header-buttons .back-btn, .header-buttons .logout-btn, .header-buttons .btn-nav,
  .header-buttons .albums-btn, .header-buttons .settings-btn, .header-buttons .create-btn,
  .header-buttons .select-all-album-btn, .header-buttons .set-date-album-btn,
  .header-buttons .set-gps-album-btn, .header-buttons .delete-album-btn {
    width: 100%; text-align: left; background: #f1f3f4 !important; color: #202124 !important;
    border: none !important; border-radius: 8px; padding: 14px 16px !important;
    font-size: 15px !important; font-weight: 600; margin: 0 !important;
    box-shadow: none !important; white-space: normal;
  }
  .header-buttons select { width: 100%; padding: 12px 14px; }
}

/* ── Shared bottom tab bar (mobile) ────────────────────────────────────────
   theme.js injects .mobile-bottom-nav into any page that lacks it. Fixed,
   thumb-friendly primary nav shown on phones so every page is one tap away. */
.mobile-bottom-nav { display: none; }
.mobile-bottom-nav .nav-icon { display:block; font-size:18px; line-height:1.2; }
.mobile-bottom-nav .nav-label { display:block; font-size:10px; margin-top:2px; }
@media (max-width: 768px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  /* Floating pill: centered, narrower than the screen, lifted off the bottom. */
  .mobile-bottom-nav {
    display: flex; position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom, 14px));
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 28px); max-width: 420px; height: 60px;
    background: #fff; border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 10px 28px rgba(16,24,40,.24); z-index: 1000;
    padding: 4px; overflow: hidden; -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-decoration: none; color: #666;
    font-size: clamp(9px, 2.2vw, 11px);
    line-height: 1.1; cursor: pointer; border-radius: 14px;
    transition: background .2s, color .2s; min-width: 0;
  }
  .mobile-bottom-nav .nav-icon { font-size: clamp(16px, 4vw, 20px); }
  .mobile-bottom-nav .nav-label { font-size: clamp(9px, 2.2vw, 11px); white-space: nowrap; }
  .mobile-bottom-nav a:active { background: #e8eaed; }
  .mobile-bottom-nav a.active { color: #1f3060; background: rgba(201,166,63,.16); }
  .mobile-bottom-nav a.active .nav-icon { filter: drop-shadow(0 0 3px rgba(201,166,63,.6)); }
}
/* Narrower than 380px: tighten the pill so labels still fit */
@media (max-width: 380px) {
  .mobile-bottom-nav { width: calc(100% - 12px); border-radius: 16px; }
  .mobile-bottom-nav a { border-radius: 10px; }
}
[data-theme="dark"] .mobile-bottom-nav { background: var(--surface); box-shadow: 0 -2px 10px rgba(0,0,0,.5); }
[data-theme="dark"] .mobile-bottom-nav a { color: var(--muted); }
[data-theme="dark"] .mobile-bottom-nav a.active { color: #fff; background: rgba(255,255,255,.06); }

/* Shared header logo (injected by theme.js on every page's .header) */
.header-logo {
  height: 42px; width: 42px; border-radius: 50%; object-fit: cover;
  margin-right: 12px; flex-shrink: 0; vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
@media (max-width: 480px) { .header-logo { height: 36px; width: 36px; margin-right: 8px; } }
