/* =============================================================================
   PlaceFinder — design system
   -----------------------------------------------------------------------------
   Single source of truth for tokens, primitives, and responsive rules.
   Pages may add page-specific CSS in their own <style>; they MUST NOT redefine
   the variables in :root — they should use these tokens.

   Breakpoints (mobile-first; pages apply styles for max-width via @media):
     - 720px : tablet portrait / large phone  → switch nav to drawer, stack rows
     - 480px : phone                          → tighten padding, smaller header
     - 360px : small phone                    → prevent horizontal scroll
   ============================================================================= */

:root {
  /* Surface */
  --bg:        #0f1419;
  --panel:     #1a1f29;
  --panel-2:   #232a36;
  --border:    #2c3441;

  /* Foreground */
  --fg:        #e6ebf2;
  --fg-dim:    #9aa4b2;

  /* Accent */
  --accent:    #ff6b35;
  --accent-2:  #ffaa66;

  /* Status */
  --ok:        #5fd97f;
  --warn:      #f5c451;
  --err:       #ff5f6d;

  /* Effects */
  --shadow:    0 8px 24px rgba(0,0,0,.35);
  --radius:    12px;
  --radius-sm: 8px;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;               /* flex-column page chrome needs a viewport-height parent */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  /* Font smoothing at root (better-typography #17) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pages use header (fixed) + main (flex:1) chrome; body must be a
   column flex container for that to fill the viewport. */
body { display: flex; flex-direction: column; }

/* Visible focus ring for keyboard users, everywhere (better-a11y #2) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   Page chrome — header + main layout.
   Pages render their own <header> (or call PF.renderHeader from common.js);
   main uses these tokens.
   ============================================================================ */

main {
  flex: 1 1 auto;
  padding: 24px;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

/* ============================================================================
   Primitives
   ============================================================================ */

/* pf-card — settings-style block. White-on-dark surface, padded, rounded. */
.pf-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

/* pf-row — horizontal label/control row, used inside .pf-card.
   Stacks vertically on mobile (<=720px). */
.pf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pf-row:last-child { border-bottom: 0; }
.pf-row .pf-label { font-weight: 600; }
.pf-row .pf-desc  { color: var(--fg-dim); font-size: 13px; }
.pf-row .pf-grow  { flex: 1; }

/* pf-badge — small inline pill used in header status indicators. */
.pf-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--fg-dim);
  margin-right: 4px;
}
.pf-badge.ok    { color: var(--ok);    border-color: rgba(95,217,127,.3); background: rgba(95,217,127,.08); }
.pf-badge.warn  { color: var(--warn);  border-color: rgba(245,196,81,.3); background: rgba(245,196,81,.08); }
.pf-badge.err   { color: var(--err);   border-color: rgba(255,95,109,.3); background: rgba(255,95,109,.08); }

/* pf-table-wrap — wraps any <table> to provide horizontal scroll on narrow
   viewports without breaking desktop layouts. The inner table keeps its
   intrinsic column widths and scrolls under the wrapper. */
.pf-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  /* The table itself keeps the border so the corners read as a single
     rounded card on desktop. */
}
.pf-table-wrap > table {
  border-radius: 0; /* parent owns the corners */
}

/* pf-empty — used by tables with no data. */
.pf-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--fg-dim);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.pf-empty a { color: var(--accent-2); }

/* ============================================================================
   Glass surfaces (baked, GPU-free)
   ----------------------------------------------------------------------------
   Two flavours:
     .pf-glass     — dark translucent surface for panels NOT over a map
                     (toolbar, cards, sidebar, modal). No blur — nothing to
                     blur behind them; the "glass" look comes from the
                     translucent fill + baked top highlight (border-top).
     .pf-glass-map — panel sitting ON TOP of a map. Uses a pre-baked PNG
                     (glass/panel-*.png) captured at build time from a real
                     backdrop-filter over real OSM tiles, so the client does
                     zero blur work. Sizes MUST match the PNG (fixed px).
   Both: 0 backdrop-filter, 0 blur shadows, only borders + rgba fills.
   ============================================================================ */
.pf-glass {
  background: rgba(20, 24, 33, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.20);
  contain: layout paint;
}

.pf-glass-map {
  background-image: url('/glass/panel-search-1280.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  contain: layout paint;
}
@media (max-width: 720px) {
  .pf-glass-map { background-image: url('/glass/panel-search-375.png'); }
}

/* pf-btn — base for buttons; pages can add their own modifiers. */
.pf-btn {
  appearance: none;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.pf-btn:hover  { border-color: var(--accent); }
.pf-btn:disabled { opacity: .5; cursor: not-allowed; }
.pf-btn.primary { background: var(--accent); color: #1a1f29; border-color: var(--accent); font-weight: 700; }
.pf-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.pf-btn.danger  { background: #7a1f24; color: #fff; border: 0; font-weight: 700; padding: 8px 14px; }
.pf-btn.danger:hover { background: #a0202a; }

/* pf-input — used by selects / numbers in forms (settings, controls). */
.pf-input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.pf-input:focus { outline: none; border-color: var(--accent); }

/* pf-section-title — used by settings for the "h2 over card" pattern. */
.pf-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-dim);
  margin: 0 0 12px 0;
  font-weight: 700;
}

/* ============================================================================
   Toggle switch (.pf-switch) — same shape as settings.html uses today.
   ============================================================================ */
.pf-switch {
  position: relative;
  display: inline-block;
  width: 48px; height: 26px;
  flex: 0 0 auto;
}
.pf-switch input { opacity: 0; width: 0; height: 0; }
.pf-switch .pf-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #3a3f4a;
  border-radius: 26px;
  transition: .15s;
}
.pf-switch .pf-slider::before {
  content: "";
  position: absolute; height: 20px; width: 20px;
  left: 3px; top: 3px;
  background: #e6ebf2;
  border-radius: 50%;
  transition: .15s;
}
.pf-switch input:checked + .pf-slider         { background: var(--accent); }
.pf-switch input:checked + .pf-slider::before  { transform: translateX(22px); background: #1a1f29; }

/* ============================================================================
   Header / nav — shared rules. Used both by the static <header> in
   index.html and the JS-injected header from common.js (which injects
   matching CSS into <head> via injectSharedHeaderStyles()).
   ============================================================================ */
header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
header .logo {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #1a1f29;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
header h1   { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; }
header .sub { color: var(--fg-dim); font-size: 13px; }
header nav  { display: flex; gap: 6px; margin-left: 14px; }
header nav a {
  padding: 6px 14px; border-radius: 6px;
  font-size: 13px; color: var(--fg-dim);
  text-decoration: none; border: 1px solid transparent;
  white-space: nowrap;
}
header nav a:hover   { color: var(--fg); background: var(--panel-2); }
header nav a.active  { color: var(--fg); background: var(--panel-2); border-color: var(--accent); }
header .health, header .ml-backend-indicator {
  margin-left: 12px;
  font-size: 12px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
}
header .ml-backend-indicator .ml-backend-name { color: var(--accent-2); font-weight: 600; }

/* ============================================================================
   Responsive — mobile first.
   ============================================================================ */

/* ---- Tablet & large phone (<= 720px) ------------------------------------- */

/* Tablet portrait (768px): keep desktop nav but hide the noisy status
   chips (model/heading/top-K, ML backend indicator, backend-select label,
   track-status / track-btn, and the city-picker label) so the header
   doesn't overflow. JS-injected chips in common.js use IDs (#pf-health,
   #pf-ml) instead of .health — the same media query also matches them
   because of the [id] selectors below. */
@media (max-width: 960px) {
  header .health,
  header .ml-backend-indicator,
  header .backend-select-label,
  header .track-status,
  header .track-btn,
  #pf-health,
  #pf-ml,
  #city-picker-label {
    display: none !important;
  }
  /* Compact nav-link spacing on tablets so 5–6 links fit alongside the
     map style picker and city-picker without overflowing. */
  header nav    { gap: 2px; margin-left: 6px; }
  header nav a  { padding: 5px 8px; font-size: 12px; }
  /* City picker itself: on tablets show only the <select>, drop the
     "Город:" label so the chip doesn't push past the viewport. */
  .city-picker { margin-left: auto; gap: 4px; }
  .city-picker label { display: none; }
  .city-picker select { max-width: 140px; }
}

@media (max-width: 720px) {
  main { padding: 16px; }

  /* Header: tighter padding, hide desktop nav, show menu button. */
  header {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  header h1   { font-size: 14px; }
  header .sub { font-size: 11px; }
  header nav  { display: none; }
  header .ml-backend-indicator { display: none; }

  /* Settings: stack label/control rows vertically. */
  .pf-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pf-row .pf-desc { font-size: 12px; }
}

/* ---- Phone (<= 480px) ---------------------------------------------------- */
@media (max-width: 480px) {
  main { padding: 12px; }

  /* Tracks page toolbar wraps cleanly. */
  .toolbar { flex-wrap: wrap; }
  .toolbar h2 { font-size: 16px; }

  /* Table wrapper activates scroll earlier; show subtle scroll affordance. */
  .pf-table-wrap { box-shadow: inset -8px 0 8px -8px rgba(0,0,0,.4); }

  /* Settings: h2 sections and inputs full-width. */
  .pf-input { width: 100%; max-width: 280px; }
  button.pf-btn { width: auto; }
}

/* ---- Tiny phone (<= 360px) ----------------------------------------------- */
@media (max-width: 360px) {
  main { padding: 10px; }
  .pf-card { padding: 14px; }
}