/* =====================================================================
   Suzuki Family Apps - shared design system (suite.css) v1
   Source of truth: family-portal/static/suite.css
   Copied into every app's static/ folder by scripts/sync_suite_css.py.
   Mobile first: base rules target phones, @media (min-width) scales up.
   Each app keeps its own accent colour by setting --suite-accent.
   ===================================================================== */
:root {
  --suite-accent: #6366f1;
  --suite-accent-soft: color-mix(in srgb, var(--suite-accent) 12%, white);
  --suite-bg: #f8fafc;
  --suite-surface: #ffffff;
  --suite-surface-2: #f1f5f9;
  --suite-border: #e2e8f0;
  --suite-text: #0f172a;
  --suite-muted: #64748b;
  --suite-good: #10b981;
  --suite-warn: #f59e0b;
  --suite-bad: #ef4444;
  --suite-radius: 12px;
  --suite-radius-sm: 8px;
  --suite-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --suite-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --suite-tap: 44px;           /* minimum touch target */
  --suite-gutter: 12px;        /* page side padding on phones */
}
@media (min-width: 768px) { :root { --suite-gutter: 24px; } }

/* ---------- Base (all apps) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--suite-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; }
/* Prevent one wide child from stretching a whole grid/flex layout on phones */
main > *, .suite-page > * { min-width: 0; }
/* iOS zooms into inputs smaller than 16px */
input, select, textarea { font-size: max(16px, 1em); }
@media (min-width: 768px) { input, select, textarea { font-size: inherit; } }
[hidden] { display: none !important; }

/* ---------- Unified header ---------- */
.suite-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--suite-surface); border-bottom: 1px solid var(--suite-border);
  padding: env(safe-area-inset-top) var(--suite-gutter) 0;
}
.suite-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0;
}
.suite-portal {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--suite-surface-2); border: 1px solid var(--suite-border);
  color: var(--suite-text); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.suite-portal:hover { background: var(--suite-border); }
.suite-title {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--suite-text); text-decoration: none;
}
.suite-app-icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--suite-accent-soft);
}
.suite-app-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-user {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--suite-text); max-width: 140px;
}
.suite-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-user-full { display: none; }
@media (min-width: 768px) { .suite-user-full { display: inline; } .suite-user-first { display: none; } }
.suite-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--suite-accent); color: #fff; font-size: 0.85rem; font-weight: 700;
}
.suite-signout {
  flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: var(--suite-surface); border: 1px solid var(--suite-border); color: var(--suite-text);
  font: inherit; font-size: 0.85rem; font-weight: 600;
}
/* App-specific actions live on their own scrollable row under the title on phones */
.suite-actions {
  display: flex; align-items: center; gap: 8px; max-width: 1200px; margin: 0 auto; padding: 0 0 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.suite-actions::-webkit-scrollbar { display: none; }
.suite-actions > * { flex: 0 0 auto; }
.suite-actions:empty { display: none; }
/* Phones: the header scrolls away with the page so the whole screen is available for content */
@media (max-width: 767px) { .suite-header { position: static; } }

/* "Family Portal" on tablets and up, "Portal" on phones so the app title keeps room */
.suite-portal-short { display: none; }
@media (max-width: 767px) { .suite-portal-full { display: none; } .suite-portal-short { display: inline; } .suite-portal { padding: 0 10px; } }
/* Phones: row 1 = portal button, app title, avatar. Sign out moves to the actions row. */
@media (max-width: 767px) {
  .suite-user .suite-signout { display: none; }
  .suite-user-name { display: none; }
}
@media (min-width: 768px) { .suite-signout-m { display: none !important; } }

/* ---------- Components ---------- */
.suite-select {
  min-height: 36px; padding: 0 10px; border-radius: var(--suite-radius-sm);
  border: 1px solid var(--suite-border); background: var(--suite-surface); color: var(--suite-text);
  font: inherit; font-size: 0.85rem; font-weight: 600; max-width: 100%;
}
.suite-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--suite-tap); padding: 0 16px; border-radius: var(--suite-radius-sm);
  background: var(--suite-surface); color: var(--suite-text); border: 1px solid var(--suite-border);
  font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.suite-btn:hover:not(:disabled) { background: var(--suite-surface-2); }
.suite-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.suite-btn.primary { background: var(--suite-accent); border-color: var(--suite-accent); color: #fff; }
.suite-btn.primary:hover:not(:disabled) { filter: brightness(0.92); background: var(--suite-accent); }
.suite-btn.danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.suite-btn.sm { min-height: 36px; padding: 0 12px; font-size: 0.85rem; }
@media (min-width: 768px) { .suite-btn { min-height: 38px; } .suite-btn.sm { min-height: 32px; } }

.suite-card {
  background: var(--suite-surface); border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius); padding: 14px; box-shadow: var(--suite-shadow);
}
@media (min-width: 768px) { .suite-card { padding: 20px; } }

.suite-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--suite-muted); }

/* Wrap any wide table: it scrolls inside the card instead of stretching the page */
.suite-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Modal: full-height sheet on phones, centred dialog on larger screens */
.suite-modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgb(15 23 42 / 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.suite-modal {
  background: var(--suite-surface); width: 100%; max-height: 94dvh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 16px var(--suite-gutter) calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .suite-modal-overlay { align-items: center; padding: 24px; }
  .suite-modal { max-width: 900px; border-radius: 16px; max-height: 90vh; padding: 24px; }
}