/* "Resilient Field Logic" design system (see the DESIGN.md files under
   Stitch-Design) - Deep Forest Green ink + Safety Yellow CTAs, tuned for
   field legibility. */
:root {
  --color-bg: #f8f9f9; /* neutral-bg */
  --color-surface: #ffffff; /* surface-container-lowest */
  --color-surface-alt: #efeeeb; /* surface-container - column/section headers */
  --color-text: #1b1c1a; /* on-surface */
  --color-muted: #434843; /* on-surface-variant */
  --color-border: #edf2f4; /* field-gray */
  --color-ink: #061b0e; /* primary - headings, high-emphasis text */
  --color-primary: #1b3022; /* primary-container - dark green buttons/badges */
  --color-primary-dark: #0b2013;
  --color-accent: #fdbc13; /* secondary-container - Safety Yellow, primary CTAs */
  --color-accent-ink: #1b1c1a; /* text on yellow */
  --color-success: #27ae60; /* status-arrived */
  --color-warning: #e67e22; /* safety-orange */
  --color-danger: #ba1a1a; /* error */
  --color-sync: #3498db; /* sync-active */
  --radius: 8px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-headline: "Hanken Grotesk", var(--font);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-headline); color: var(--color-ink); font-weight: 700; }

/* dvh (not vh) so iOS Safari's collapsing/expanding address bar doesn't
   leave a gap or cause jumpy resizing - Android Chrome isn't as sensitive
   to this, which is part of why these pages felt less polished on iPhone. */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

/* Header/sidebar/bottom-nav chrome now lives directly in base.html as
   Tailwind markup (see the design system head block) - this file only
   covers the shared component classes (.card, .btn, tables, forms, etc.)
   still used by pages not yet migrated to the new Tailwind-based layout. */

/* Wide tables scroll within their own box instead of breaking the page
   layout on narrow screens - see .table-scroll usage in list templates. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 480px; }

@media (max-width: 768px) {
  .auth-card { padding: 1.25rem; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  padding: 1rem;
}
.auth-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
}
.auth-card h1 { font-size: 1.25rem; margin-top: 0; }

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; margin-top: 0.75rem; }
input, select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
/* iOS Safari auto-zooms the page on focusing any field under 16px - Android
   Chrome doesn't, which is what made mobile feel inconsistent between the
   two. Tailwind utility classes like text-sm/text-xs (0,1,0 specificity)
   otherwise win over the element-selector rule above (0,0,1), so this is
   pinned with !important to guarantee no input anywhere ever zooms iOS. */
input, select, textarea { font-size: 16px !important; }
input.keycode-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; }

/* Touch-friendly checkboxes/radios everywhere (overrides the width:100%
   rule above via type-selector specificity) - default browser checkboxes
   are ~13px, too small to reliably tap on a phone. */
input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Primary Action: Safety Yellow bg, dark text - high-contrast, impossible
   to miss, per the design system's Buttons & Critical Actions spec. */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  margin-top: 1rem;
  transition: transform 0.15s ease;
}
button:hover, .btn:hover { background: #e5aa0f; }
button:active, .btn:active { transform: scale(0.97); }

/* Secondary: Deep Forest Green bg, white text. */
button.dark, .btn.dark { background: var(--color-primary); color: #fff; }
button.dark:hover, .btn.dark:hover { background: var(--color-primary-dark); }

/* Ghost/Tertiary: outline only. */
button.secondary, .btn.secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border); font-weight: 600; }
button.secondary:hover, .btn.secondary:hover { background: var(--color-surface-alt); }

.error-banner {
  background: #fdecea;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.hint { color: var(--color-muted); font-size: 0.8rem; margin-top: 0.25rem; }

/* "Back to X" navigation links - previously bare <a> tags falling back to
   the browser's default blue/underlined look, which doesn't match this
   app's design system and doesn't read as navigation vs. body text. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
}
.back-link:hover { color: var(--color-ink); }

/* Links that download/open an actual file (Contract files, SAF/Invoice
   attachments under /media/...) - distinct from a "Print" link that just
   opens another in-app page, so it's clear before clicking whether this
   leaves the app or not. */
.file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.file-link:hover { background: var(--color-border); }
.file-link::before { content: "\1F4CE"; font-size: 0.85em; }

/* Column show/hide (accounts/list.html's Columns menu) - a distinct name
   from Tailwind's own .hidden (also loaded on every page via base.html's
   CDN script) since this one is toggled per-column-index by JS, not a
   one-off visibility flag. */
.col-hidden { display: none !important; }

.column-menu {
  position: absolute;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6rem;
  margin-top: 0.3rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  min-width: 190px;
}
.column-menu label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
/* Zebra striping + hover - helps track a row across a wide table without a
   mouse cursor to anchor on, and gives clickable rows (onclick="window.location=..."
   in accounts/list.html and similar) a visual affordance they're tappable. */
table tbody tr:nth-child(even) { background: var(--color-surface-alt); }
table tbody tr:hover { background: var(--color-border); }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.near, .badge.available { background: #e3f6ea; color: var(--color-success); }
.badge.far, .badge.fully-booked { background: #fdecea; color: var(--color-danger); }
.badge.near-full { background: #fff6e0; color: var(--color-warning); }

/* List Toolbar - the search/filter/page-size row above a paginated data
   table (e.g. accounts/list.html). Resets the block-level button/input
   defaults above (width:100%, margin-top:1rem) so controls sit inline and
   vertically centered instead of stacking. */
.list-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  margin: 1rem 0 0.6rem;
}
.list-toolbar__search { position: relative; flex: 1 1 260px; min-width: 200px; }
.list-toolbar__search svg {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}
.list-toolbar__search input {
  width: 100%;
  margin: 0;
  padding-left: 2.1rem;
  background: var(--color-surface);
}
.list-toolbar select {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  background: var(--color-surface);
}
.list-toolbar button, .list-toolbar .btn {
  margin: 0;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.55rem 1.1rem;
}
.list-toolbar .btn.ghost {
  background: transparent;
  color: var(--color-muted);
  font-weight: 600;
  padding: 0.55rem 0.5rem;
}
.list-toolbar .btn.ghost:hover { color: var(--color-ink); background: transparent; }

.list-summary { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 0.75rem; }

/* Pagination bar - Prev / page indicator / Next below a paginated table. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.pagination a { color: var(--color-ink); border: 1px solid var(--color-border); background: var(--color-surface); }
.pagination a:hover { background: var(--color-surface-alt); }
.pagination span.disabled { color: var(--color-muted); opacity: 0.45; }
.pagination .page-info { color: var(--color-muted); font-weight: 600; }