/* Shared theme for every Ride Tracker page. Values come from PassTracker's
   ui/theme/Theme.kt and Spacing.kt; see THEME.md before changing anything. */

/* ─── LIGHT (default) ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --primary:                #2E7D32;
  --on-primary:             #FFFFFF;
  --primary-container:      #B8F5B1;
  --on-primary-container:   #002204;
  --secondary:              #0277BD;
  --on-secondary:           #FFFFFF;
  --secondary-container:    #CDE5FF;
  --on-secondary-container: #001D36;
  --tertiary:               #FFC107;
  --on-tertiary:            #000000;
  --tertiary-container:     #FFE08A;
  --on-tertiary-container:  #261A00;
  --error:                  #D32F2F;
  --on-error:               #FFFFFF;
  --error-container:        #FFDAD6;
  --on-error-container:     #410002;

  --bg:                     #F7FBF6;
  --on-surface:             #1A1C1A;
  --on-surface-variant:     #414941;
  --surface-variant:        #DDE5DA;
  --outline:                #717971;
  --outline-variant:        #C1C9BF;
  --surface-lowest:         #FFFFFF;
  --surface-low:            #F1F5F0;
  --surface-container:      #EBF0EA;
  --surface-high:           #E5EAE4;
  --surface-highest:        #DFE4DE;

  --cat-admission:          #8E24AA;
  --cat-drink:              #2E7D32;
  --cat-meal:               #0277BD;
  --cat-parking:            #E09B00;
  --cat-savings:            #00897B;
  --cat-preg:               #C2185B;  /* web-only, see THEME.md §1 */

  --scrim:                  rgb(0 0 0 / .45);
}

/* ─── DARK ────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:                #60AD5E;
    --on-primary:             #003909;
    --primary-container:      #005005;
    --on-primary-container:   #B8F5B1;
    --secondary:              #58A5F0;
    --on-secondary:           #003351;
    --secondary-container:    #004C8C;
    --on-secondary-container: #CDE5FF;
    --tertiary-container:     #5C4300;
    --on-tertiary-container:  #FFE08A;
    --error-container:        #93000A;
    --on-error-container:     #FFDAD6;

    --bg:                     #0D1B0F;
    --on-surface:             #E2F5E3;
    --on-surface-variant:     #BFCABD;
    --surface-variant:        #2F4231;
    --outline:                #8A9488;
    --outline-variant:        #3A4A3B;
    --surface-lowest:         #08130A;
    --surface-low:            #142417;
    --surface-container:      #18291B;
    --surface-high:           #1F3322;
    --surface-highest:        #263B29;

    --cat-admission:          #CE93D8;
    --cat-drink:              #81C784;
    --cat-meal:               #64B5F6;
    --cat-parking:            #FFCA28;
    --cat-savings:            #4DB6AC;
    --cat-preg:               #F48FB1;

    --scrim:                  rgb(0 0 0 / .7);
  }
}

/* ─── TYPE, SHAPE, SPACING ────────────────────────────────────────────────── */
:root {
  --font-body:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Option B: condensed display face for titles only. For option A (system
     font everywhere) set this to var(--font-body) and drop the font link. */
  --font-title: "Barlow Condensed", var(--font-body);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-xxl: 32px;

  --top-bar-h: 56px;
  --page-max:  960px;
  /* Side padding that keeps full-width bands aligned to the centred page column. */
  --gutter: max(16px, calc((100% - var(--page-max)) / 2 + 16px));
}

/* ─── BASE ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--radius-pill); }

/* ─── COMPONENTS (web versions of PassTracker's Kit.kt, see THEME.md §5) ─── */

/* Top bar (ScreenTopBar) */
.top-bar {
  position: sticky; top: 0; z-index: 100;
  height: var(--top-bar-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-bottom: 1px solid var(--outline-variant);
}
.top-bar-title {
  font-family: var(--font-title); font-size: 22px; font-weight: 800; line-height: 28px;
  color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-bar-title span { color: var(--on-surface-variant); font-size: 16px; font-weight: 600; }
.top-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Sync status pill */
.sync-pill {
  font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .4px;
  padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--surface-high); color: var(--on-surface-variant);
  transition: background .2s, color .2s;
}
.sync-pill.syncing { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.sync-pill.ok      { background: var(--primary-container);  color: var(--on-primary-container); }
.sync-pill.error   { background: var(--error-container);    color: var(--on-error-container); }

/* Section nav under the top bar (admin pages) */
.subnav {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 8px var(--gutter); border-bottom: 1px solid var(--outline-variant);
}
.subnav::-webkit-scrollbar { display: none; }

/* Buttons: filled (default), tonal, outline; .btn-sm for compact rows */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: color-mix(in srgb, var(--primary) 88%, var(--on-primary)); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-tonal:hover { background: color-mix(in srgb, var(--secondary-container) 88%, var(--on-secondary-container)); }
.btn-outline { background: transparent; color: var(--on-surface); border-color: var(--outline-variant); }
.btn-outline:hover { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 12px; line-height: 16px; }

/* Chips: links, or filter chips wrapping a checkbox */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface);
  font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.chip:has(input:checked),
.chip[aria-current="page"] {
  background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent;
}
.chip:has(input:checked)::before { content: '✓'; font-weight: 700; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip-row::-webkit-scrollbar { display: none; }
}

/* Card (AppCard) */
.card { background: var(--surface-container); border-radius: var(--radius-md); overflow: hidden; }

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