/* OxTrack — application styles layered on top of Materialize CSS.
 * Theme tokens are declared as CSS custom properties so values can be
 * rewritten at runtime from `js/app.js` based on UI_PRIMARY_COLOR /
 * UI_ACCENT_COLOR / UI_THEME_DEFAULT.
 */

:root {
  --ox-primary:    #3f51b5;
  --ox-primary-on: #ffffff;
  --ox-accent:     #ffc107;
  --ox-accent-on:  #1f1500;
  --ox-bg:         #ffffff;
  --ox-surface:    #fafafa;
  --ox-surface-on: #1f1f1f;
  --ox-divider:    rgba(0, 0, 0, 0.12);
  --ox-muted:      rgba(0, 0, 0, 0.6);

  --ox-elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --ox-elev-2: 0 2px 4px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.08);

  --ox-appbar-height:    56px;
  --ox-bottomnav-height: 64px;
  --ox-content-max-width: 720px;

  --ox-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ox-safe-top:    env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
  --ox-bg:         #121212;
  --ox-surface:    #1e1e1e;
  --ox-surface-on: #f1f1f1;
  --ox-divider:    rgba(255, 255, 255, 0.12);
  --ox-muted:      rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ox-bg);
  color: var(--ox-surface-on);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- Top app bar ----------------------------------------------- */
.ox-appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ox-primary);
  color: var(--ox-primary-on);
  box-shadow: var(--ox-elev-1);
  padding-top: var(--ox-safe-top);
}
.ox-appbar-inner {
  display: flex;
  align-items: center;
  height: var(--ox-appbar-height);
  padding: 0 16px;
  max-width: var(--ox-content-max-width);
  margin: 0 auto;
}
.ox-appbar-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.0125em;
}
.ox-appbar-spacer { flex: 1; }
.ox-appbar-action { display: flex; align-items: center; gap: 8px; }

/* ---- Main / view container ------------------------------------- */
.ox-main {
  max-width: var(--ox-content-max-width);
  margin: 0 auto;
  padding: 16px 16px calc(var(--ox-bottomnav-height) + var(--ox-safe-bottom) + 24px);
  min-height: calc(100vh - var(--ox-appbar-height));
}
.ox-view[hidden] { display: none; }

.ox-placeholder {
  background: var(--ox-surface);
  color: var(--ox-muted);
  border: 1px dashed var(--ox-divider);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  font-size: 0.95rem;
}

/* ---- Bottom navigation ----------------------------------------- */
.ox-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  background: var(--ox-surface);
  border-top: 1px solid var(--ox-divider);
  box-shadow: 0 -1px 3px rgba(0,0,0,.06);
  padding-bottom: var(--ox-safe-bottom);
}
.ox-bottomnav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--ox-bottomnav-height);
  text-decoration: none;
  color: var(--ox-muted);
  font-size: 0.72rem;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease;
}
.ox-bottomnav-tab .material-icons { font-size: 24px; }
.ox-bottomnav-tab[aria-current="page"] { color: var(--ox-primary); }
.ox-bottomnav-tab:focus-visible {
  outline: 2px solid var(--ox-primary);
  outline-offset: -4px;
  border-radius: 4px;
}
.ox-bottomnav-label {
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ---- Tablet+ ---------------------------------------------------- */
@media (min-width: 720px) {
  .ox-bottomnav {
    border-radius: 16px 16px 0 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--ox-content-max-width);
  }
}

/* ---- Fatal-error overlay (used by app.js if config fails) ------ */
.ox-fatal {
  padding: 24px;
  font-family: system-ui, sans-serif;
}
.ox-fatal h2 { color: #b00020; margin: 0 0 12px; }
.ox-fatal pre {
  white-space: pre-wrap;
  background: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}