/* SimpliTrack theme on top of Pico — palette from design/simplitrack-mockups.
   Light palette on :root; dark palette re-declared under the same guards Pico
   uses, so the whole app (header included) follows the system theme. */
:root {
  --st-accent: #0e7c66;
  --st-accent-hover: #0a5f4e;
  --st-accent-tint: #f3faf7;
  --st-accent-border: #bfdcd2;
  --st-bg: #f6f6f3;
  --st-surface: #ffffff;
  --st-text: #1e2522;
  --st-muted: #68716c;
  --st-border: #e4e6e1;
  --st-error-bg: #fdecec;
  --st-error-text: #8a2323;

  --pico-primary: var(--st-accent);
  --pico-primary-hover: var(--st-accent-hover);
  --pico-primary-underline: var(--st-accent);
  --pico-background-color: var(--st-bg);
  --pico-color: var(--st-text);

  /* Tighter than Pico's defaults: these drive button/input/cell sizing. */
  --pico-spacing: 0.75rem;
  --pico-form-element-spacing-vertical: 0.35rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --st-accent: #35b295;
    --st-accent-hover: #4cc7aa;
    --st-accent-tint: #21302b;
    --st-accent-border: #2f5a4e;
    --st-bg: #131614;
    --st-surface: #1b1f1d;
    --st-text: #e6e9e5;
    --st-muted: #99a39d;
    --st-border: #2b302d;
    --st-error-bg: #3a2222;
    --st-error-text: #f0b0b0;

    --pico-primary: var(--st-accent);
    --pico-primary-hover: var(--st-accent-hover);
    --pico-primary-underline: var(--st-accent);
    --pico-background-color: var(--st-bg);
    --pico-color: var(--st-text);
  }
}

[data-theme='dark'] {
  --st-accent: #35b295;
  --st-accent-hover: #4cc7aa;
  --st-accent-tint: #21302b;
  --st-accent-border: #2f5a4e;
  --st-bg: #131614;
  --st-surface: #1b1f1d;
  --st-text: #e6e9e5;
  --st-muted: #99a39d;
  --st-border: #2b302d;
  --st-error-bg: #3a2222;
  --st-error-text: #f0b0b0;

  --pico-primary: var(--st-accent);
  --pico-primary-hover: var(--st-accent-hover);
  --pico-primary-underline: var(--st-accent);
  --pico-background-color: var(--st-bg);
  --pico-color: var(--st-text);
}

body {
  font-size: 0.95rem;
  background: var(--st-bg);
}

/* Top bar (matches design/simplitrack-mockups) */
.st-header {
  background: var(--st-surface);
  border-bottom: 1px solid var(--st-border);
  margin-bottom: 1.5rem;
}

.st-header nav {
  min-height: 3.4rem;
}

.st-header nav ul {
  gap: 0.9rem;
}

.st-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  letter-spacing: -0.2px;
  margin-right: 0.9rem;
}

.st-nav-link {
  color: var(--st-muted);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 1rem 0.15rem calc(1rem - 2px);
  border-bottom: 2px solid transparent;
}

.st-nav-link:hover {
  color: var(--st-text);
  text-decoration: none;
}

.st-nav-link.active {
  color: var(--st-text);
  font-weight: 600;
  border-bottom-color: var(--st-accent);
}

.st-avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--st-accent-tint);
  border: 1px solid var(--st-accent-border);
  color: var(--st-accent);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-me {
  line-height: 1.2;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--st-text);
}

.st-me small {
  font-weight: 400;
  color: var(--st-muted);
}

.st-nav-side {
  font-size: 0.85rem;
  color: var(--st-muted);
  text-decoration: none;
}

.st-nav-side:hover {
  color: var(--st-accent);
}

.st-footer {
  text-align: center;
  color: var(--st-muted);
  padding: 2rem 0 1.25rem;
}

/* Save/Cancel rows on edit forms: equal-height, equal-width controls */
.st-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.st-form-actions > * {
  flex: 1;
  margin: 0;
}

.st-form-actions [role='button'] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Branding above signed-out (auth) pages */
.st-auth-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin-top: 3.5rem;
  font-size: 1.35rem;
  letter-spacing: -0.3px;
  color: var(--st-text);
}

.st-auth-card {
  max-width: 26rem;
  margin: 1.5rem auto 3rem;
}

/* Landing/login split (from design/simplitrack-mockups Landing artboard) */
.st-landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--st-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 2.5rem 0;
  min-height: 34rem;
}

.st-landing-pitch {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.st-landing-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  letter-spacing: -0.3px;
  margin-bottom: 2.2rem;
}

.st-landing-pitch h1 {
  font-size: 2.3rem;
  line-height: 1.12;
  letter-spacing: -0.8px;
  margin-bottom: 1rem;
  text-wrap: pretty;
}

.st-landing-sub {
  color: var(--st-muted);
  line-height: 1.55;
  margin-bottom: 2rem;
  text-wrap: pretty;
}

.st-landing-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.st-landing-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
}

.st-landing-foot {
  color: var(--st-muted);
}

.st-landing-panel {
  background: var(--st-surface);
  border-left: 1px solid var(--st-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.st-landing-card {
  width: 100%;
  max-width: 22rem;
}

.st-landing-card small {
  color: var(--st-muted);
  line-height: 1.5;
  display: block;
  margin-top: 0.75rem;
}

.st-landing-card hr {
  margin: 1.5rem 0 1.25rem;
}

.st-interest strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.st-interest-row {
  display: flex;
  gap: 0.5rem;
}

.st-interest-row input {
  flex: 1;
  margin: 0;
}

.st-interest-row button {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.st-interest small {
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .st-landing {
    grid-template-columns: 1fr;
  }

  .st-landing-panel {
    border-left: none;
    border-top: 1px solid var(--st-border);
  }
}

/* Page toolbars: nav/actions row above content */
.st-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.st-toolbar > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.st-toolbar button,
.st-toolbar [role='button'] {
  width: auto;
  margin: 0;
  white-space: nowrap;
}

/* Day links in the week grid header read as text, not links */
thead th a {
  color: inherit;
  text-decoration: none;
}

thead th a:hover {
  color: var(--st-accent);
  text-decoration: underline;
}

/* Compact data tables */
table {
  font-size: 0.875rem;
}

table th,
table td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
}

td form,
td p {
  margin: 0;
}

td input,
td select,
td button,
td [role='button'] {
  margin-bottom: 0;
}

/* Row action buttons: inline, auto-width, one line, no vertical stretch */
.st-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
}

.st-actions form {
  margin: 0;
}

.st-actions button,
.st-actions [role='button'] {
  width: auto;
  margin: 0;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
}

.st-actions select {
  width: auto;
  margin: 0;
  padding: 0.15rem 1.8rem 0.15rem 0.5rem;
  font-size: 0.8rem;
}

.st-flash {
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

.st-flash-error {
  background: var(--st-error-bg);
  color: var(--st-error-text);
}

.st-flash-success {
  background: var(--st-accent-tint);
  color: var(--st-accent);
}