/* ═══════════════════════════════════════════════════════════════════════════════
   TourKit  –  Shared Stylesheet
   Used by: app/index.php and the per-feature CSS that follows it.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Design tokens live in /assets/tokens.css, linked before this file by every
   page that uses it. Do not redeclare them here — two copies is what that
   file exists to prevent. (TKF-226) */

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




html, body { height: 100%; background: var(--bg0); font-family: var(--font-text); color: var(--txt); font-size: var(--fs-base); overflow: hidden; }
button { font-family: inherit; }

/* Prose inside a data panel. A panel-level --font-data is right for the many
   numeric readouts it wraps (#analysis-panel sets it for ~140 rules), but it
   lands on the headings, tabs and controls too, which are prose. Inheritance
   loses to any direct rule, so naming them here is enough. (TKF-226) */
h1, h2, h3, h4, h5, h6,
.tab, .tab-icon, .analysis-tab, .analysis-subtab,
legend, label, optgroup {
  font-family: var(--font-text);
}


/* ── Native date/time pickers — TourKit dark look ──
   Browsers inherit their own chrome for these inputs; set color-scheme so the
   native popover renders dark, filter the calendar glyph to amber, and apply
   base colors so every date field across the app matches without each
   feature having to restyle it. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
  background: var(--bg0);
  border: 1px solid var(--bdr);
  color: var(--txt);
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-base);
  transition: border-color 120ms, box-shadow 120ms;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  outline: none;
  border-color: var(--amber-ink);
  box-shadow: 0 0 0 2px rgba(var(--amber-wash), 0.25);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(3) hue-rotate(5deg);
  cursor: pointer;
  opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Layout ── */
#app      { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
#header   { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--bg1); border-bottom: 1px solid var(--bdr); flex-shrink: 0; }
#statusbar{ padding: 8px 18px; background: var(--bg1); border-bottom: 1px solid var(--bdr); font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#main     { display: flex; flex: 1; overflow: hidden; }
#sidebar  { width: 220px; flex-shrink: 0; background: var(--bg1); border-right: 1px solid var(--bdr); padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
#content  { flex: 1; padding: 14px; display: flex; flex-direction: column; overflow: hidden; }

/* ── Header ── */


.logo      { font-size: var(--fs-xxl); letter-spacing: 12px; color: var(--amber-ink) !important; text-transform: uppercase; font-weight: 700; white-space: nowrap; text-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
.divider   { flex: 1; height: 1px; background: linear-gradient(to right, color-mix(in srgb, var(--bg1) 20%, transparent), transparent); }
.site-nav  { display: flex; gap: 4px; flex-shrink: 0; }
.nav-link  { font-size: var(--fs-xs); letter-spacing: 1.5px; color: var(--dim2); text-decoration: none; text-transform: uppercase; border: 1px solid var(--bdr); border-radius: 4px; padding: 6px 12px; transition: all .15s; white-space: nowrap; }
.nav-link:hover { color: var(--amber-ink); border-color: var(--amber-ink); }
.nav-link.active { color: var(--amber-ink); border-color: var(--amber-ink); background: rgba(var(--amber-wash), 0.09); font-weight: 600; }
#tabs      { display: flex; gap: 2px; background: var(--bg3); border-radius: 6px; padding: 3px; margin-bottom: 4px; }
.tab       { flex: 1; padding: 7px 9px; border-radius: 4px; font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all .15s; color: var(--txt); border: 1px solid transparent; background: transparent; text-align: center; text-decoration: none; }
.tab:hover { color: var(--amber-ink); border-color: var(--amber-ink); }
.tab.active{ background: var(--amber); color: var(--on-amber); font-weight: 600; border-color: var(--amber); }
.tab.active:hover { color: var(--bg0); }

/* ── Status bar ── */
#status-arrow { opacity: .4; }

/* ── Sidebar labels ── */
.sidebar-label { font-size: var(--fs-micro); letter-spacing: 3px; color: var(--dim); text-transform: uppercase; padding-left: 2px; margin-bottom: 2px; }

/* ── Zone rows (live zone display in ERG controller) ── */
.zone-row { display: flex; align-items: center; gap: 7px; padding: 4px 5px; border-radius: 4px; margin-bottom: 2px; border: 1px solid transparent; transition: all .2s; }
.zone-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.zone-lbl { font-size: var(--fs-xs); color: var(--dim2); flex: 1; }
.zone-rng { font-size: var(--fs-xs); color: var(--dim3); }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 2px; }

/* ── Animations ── */
@keyframes spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }