/* ShoeReminder – minimal, professional UI */
:root{
  --bg:#0b1020; /* page background (dark header) */
  --fg:#0b1325; /* cards background */
  --text:#e8edf5; /* main text on dark */
  --muted:#a6b0c3;
  --brand:#4ea1ff;
  --brand-2:#6effc8;
  --line:rgba(255,255,255,0.08);
  --shadow: 0 6px 24px rgba(0,0,0,0.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #11162b 60%);
  color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.container{width:100%; max-width:920px; margin:0 auto; padding:0 16px}
.flex{display:flex; align-items:center; gap:.75rem}
.small{font-size:.95rem}
.right{margin-left:auto}
.muted{color:var(--muted)}

/* Elements visible only to authenticated users: hidden by default until JS reveals them */
.authed-only{display:none !important}

.header{position:static; display:flex; align-items:center; justify-content:space-between; gap:.6rem; backdrop-filter:saturate(140%) blur(6px); background: rgba(11,16,32,0.8); border-bottom:1px solid var(--line)}
.header .brand{display:flex; align-items:center; gap:.6rem; padding:12px 0}
.header .brand img{width:28px; height:28px; border-radius:6px}
.header .title{font-weight:700; letter-spacing:.2px}
.header nav a{padding:.25rem .5rem; border-radius:6px}

main.container{padding:24px 16px 48px}

h1{font-size:1.9rem; margin:.2rem 0 1rem}
h2{font-size:1.3rem; margin:1.6rem 0 .6rem}
p{line-height:1.6}

.card{background:var(--fg); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow: var(--shadow)}
.list{list-style:none; padding:0; margin:0}
.list li{padding:10px 0; border-bottom:1px dashed var(--line)}
.list li:last-child{border-bottom:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer}
button, .btn button{background:linear-gradient(180deg, #2a72ff, #1b5fd8); color:white; border:none; border-radius:10px; padding:.6rem .9rem; font-weight:600; box-shadow:0 8px 20px rgba(42,114,255,.35); transition:transform .06s ease, box-shadow .2s ease}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button[disabled]{opacity:.6; cursor:not-allowed; filter:grayscale(20%)}

.btn.link{background:transparent; color:var(--text); border:1px solid var(--line); padding:.45rem .7rem; border-radius:8px}
.btn.link:hover{background:rgba(255,255,255,0.05)}

#gear-section label{display:flex; align-items:center; gap:.6rem}
#unit-select{background:#0c1530; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:.4rem .5rem}

footer{border-top:1px solid var(--line); padding:16px 0 32px; background: rgba(0,0,0,0.15)}

/* Footer legal links grouping */
.footer-legal{display:inline-flex; gap:.5rem; align-items:center}

/* Responsive: make footer content stack/wrap on small screens so links don't overflow */
@media (max-width:640px){
  footer .flex{flex-direction:column; align-items:flex-start; gap:.5rem}
  .footer-legal{margin-top:0.25rem; flex-wrap:wrap}
}

/* Pull-to-refresh indicator */
#ptr{position:fixed; top:0; left:0; right:0; height:60px; display:flex; justify-content:center; align-items:flex-end; pointer-events:none; transition:transform .18s ease; transform:translateY(-60px); z-index:2147483647; visibility:visible !important}
#ptr .bubble{background:#17203d; color:var(--text); border:1px solid var(--line); padding:.35rem .6rem; border-radius:999px; font-size:.9rem; box-shadow: var(--shadow)}
#ptr.active{transform:translateY(-30px)}
#ptr.refreshing{transform:translateY(0px)}

/* Activity specifics */
#activity-section button{margin: 0 .4rem .4rem 0}

/* Buttons for selecting shoes on activity page */
.activity-shoe{
  margin: 0 0.6rem 0.6rem 0; /* slightly larger gap to separate buttons */
  padding: .6rem .9rem; /* ensure tappable area matches primary buttons */
  border-radius: 10px;
  font-weight:600;
}

/* Responsive tweaks */
@media (max-width:640px){
  h1{font-size:1.6rem}
  .header .brand .title{display:none}
  /* Ensure shoe buttons wrap nicely on narrow screens */
  .activity-shoe{display:inline-block; width:auto}
}

/* Theme toggle styles + light theme variable overrides */
/* Light theme variables override the defaults when .light-theme is present on <html> */
html.light-theme,
:root.light-theme {
  --bg: #f5f7fb; /* light page background */
  --fg: #ffffff; /* card background */
  --text: #0b1020; /* main text on light */
  --muted: #5b6775;
  --brand: #2563eb;
  --brand-2: #06b6d4;
  --line: rgba(2,6,23,0.06);
  --shadow: 0 6px 24px rgba(2,6,23,0.06);
}

/* Light-mode component overrides to ensure good contrast and remove dark backgrounds */
html.light-theme body{
  /* Remove the dark gradient used in default theme; use a flat light background */
  background: var(--bg);
  background-image: none;
  color: var(--text);
}

html.light-theme .header{
  background: rgba(255,255,255,0.9); /* light header */
  border-bottom-color: var(--line);
}

html.light-theme #ptr .bubble{
  background: var(--fg); /* white card-style bubble */
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

html.light-theme #unit-select{
  background: #f3f6f9; /* subtle light input */
  color: var(--text);
  border: 1px solid var(--line);
}

html.light-theme footer{
  background: rgba(255,255,255,0.7);
  border-top-color: var(--line);
}

html.light-theme .btn.link:hover{ background: rgba(2,6,23,0.03); }

/* Theme toggle button (in header). Uses .btn.link styles but tuned for clarity */
#theme-toggle {
  font-weight:600;
  padding:.45rem .7rem;
  border-radius:8px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
}
#theme-toggle:hover { background: rgba(2,6,23,0.02); }
#theme-toggle[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--brand), #1b5fd8);
  color: white;
  box-shadow: 0 8px 20px rgba(42,114,255,.18);
}

/* Stronger light-mode safety overrides to avoid any black-on-black issues */
html.light-theme body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Make sure cards and surfaces are light and text is dark */
html.light-theme .card,
html.light-theme .list li,
html.light-theme .muted,
html.light-theme .log,
html.light-theme #content,
html.light-theme main.container {
  background: var(--fg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

/* Links and brand color should remain visible on light */
html.light-theme a,
html.light-theme a:visited {
  color: var(--brand) !important;
}

/* Primary link-style buttons in header and elsewhere */
html.light-theme .btn.link,
html.light-theme button.btn.link {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
html.light-theme .btn.link:hover { background: rgba(2,6,23,0.03) !important; }

/* Ensure primary buttons still have readable text */
html.light-theme button,
html.light-theme .btn button {
  color: white !important;
}

/* Ensure inputs and selects are readable */
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* Ensure pull-to-refresh bubble and other small components show on light */
html.light-theme #ptr .bubble { background: var(--fg) !important; color: var(--text) !important; }

/* Ensure header controls are legible */
html.light-theme .header .brand img { filter: none; }
html.light-theme .header .title { color: var(--text) !important; }
html.light-theme .header nav a { color: var(--text) !important; }

/* Make sure icon/emoji toggles remain visible */
html.light-theme #theme-toggle { color: var(--text) !important; }

/* Small tweak: ensure list separators are visible */
html.light-theme .list li { border-bottom-color: var(--line) !important; }

/* End of safety overrides */