/* Dayos — Brutalist editorial showroom on warm gray
   Admin dashboard styling for LW Churches API */

:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-paper-white: #ffffff;
  --color-warm-canvas: #e5e5e5;
  --color-mist-gray: #f3f3f3;
  --color-ash: #c6c6c6;
  --color-smoke: #979797;
  --color-slate: #444444;
  --color-graphite: #2f2f2f;
  --color-mint-chip: #d1ffca;
  --color-voltage-yellow: #fff100;

  /* Typography — Font Families (substitutes) */
  --font-suisseintlcond: 'Bebas Neue', 'Anton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlmono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-subheading-lg: 20px;
  --text-heading-sm: 28px;
  --text-heading: 40px;
  --text-heading-lg: 48px;
  --text-display: 80px;
  --text-display-xl: 130px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 64px;

  /* Surfaces */
  --surface-canvas: #e5e5e5;
  --surface-card: #ffffff;
  --surface-inverted: #000000;
  --surface-mist: #f3f3f3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--color-warm-canvas);
  color: var(--color-carbon-black);
  font-family: var(--font-suisseintl);
  font-size: var(--text-body);
  line-height: 1.25;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
  width: 100%;
}

.section { padding: var(--spacing-40) 0; }
.section-lg { padding: var(--spacing-80) 0; }

/* ---------- Top nav ---------- */

.nav {
  min-height: 5rem;
  display: flex;
  align-items: center;
  background: var(--color-warm-canvas);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--spacing-16) 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
}

.nav-pill {
  background: var(--color-paper-white);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}
.nav-pill a {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-slate);
  letter-spacing: -0.01em;
  transition: color .15s;
  white-space: nowrap;
}
.nav-pill a:hover { color: var(--color-carbon-black); }
.nav-pill a.active { color: var(--color-carbon-black); font-weight: 500; }

.brand {
  font-family: var(--font-suisseintlcond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.nav-right { display: flex; align-items: center; gap: var(--spacing-16); flex-shrink: 0; }

/* Mobile hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  background: var(--color-paper-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px;
  cursor: pointer;
  color: var(--color-carbon-black);
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: var(--color-mist-gray); }

/* Mobile dropdown menu — hidden on desktop */
.nav-mobile { display: none; }

/* ---------- Typography ---------- */

.display {
  font-family: var(--font-suisseintlcond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.display-xl { font-size: clamp(48px, 11vw, var(--text-display-xl)); }
.display-lg { font-size: clamp(40px, 8vw, var(--text-display)); }
.display-md { font-size: clamp(32px, 5vw, var(--text-heading-lg)); line-height: 0.9; }

.heading {
  font-family: var(--font-suisseintl);
  font-weight: 450;
  text-transform: uppercase;
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading-sm {
  font-family: var(--font-suisseintl);
  font-weight: 450;
  text-transform: uppercase;
  font-size: var(--text-heading-sm);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.subheading {
  font-size: var(--text-subheading);
  font-weight: 500;
  line-height: 1.33;
}

.mono {
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  line-height: 1.6;
}

.muted { color: var(--color-smoke); }
.slate { color: var(--color-slate); }

/* ---------- Cards ---------- */

.card {
  background: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-24);
}

.card-lg { border-radius: var(--radius-full-2); padding: var(--spacing-40); }

.card-inverted {
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-24);
}

.card-top-arc { border-radius: 64px 64px 0 0; }

.card-mist { background: var(--color-mist-gray); border-radius: var(--radius-3xl-2); padding: var(--spacing-24); }

/* ---------- Tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-mint-chip);
  color: var(--color-carbon-black);
  border-radius: var(--radius-full-2);
  padding: 4px 12px;
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
}

.tag-mono {
  background: var(--color-mist-gray);
  color: var(--color-slate);
}

.tag-yellow { background: var(--color-voltage-yellow); }

.tag-dark { background: var(--color-carbon-black); color: var(--color-paper-white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-suisseintl);
  font-weight: 500;
  font-size: var(--text-body);
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}

.btn-dark { background: var(--color-carbon-black); color: var(--color-paper-white); }
.btn-dark:hover { background: var(--color-graphite); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--color-slate);
  color: var(--color-slate);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}
.btn-ghost:hover { border-color: var(--color-carbon-black); color: var(--color-carbon-black); }

.btn-text {
  background: none;
  border: none;
  color: var(--color-carbon-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 0;
  border-radius: 0;
}
.btn-text:hover { text-decoration: none; }

.btn-sm { padding: 8px 14px; font-size: var(--text-body-sm); }
.btn-mint { background: var(--color-mint-chip); color: var(--color-carbon-black); }
.btn-mint:hover { background: #bdfab2; }

.btn-danger { background: transparent; color: #b00020; border: 1.5px solid #b00020; border-radius: var(--radius-md); padding: 8px 14px; font-size: var(--text-body-sm); }
.btn-danger:hover { background: #b00020; color: #fff; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-16); }

.label {
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.input, .select, .textarea {
  background: var(--color-paper-white);
  border: 1.5px solid var(--color-ash);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-family: var(--font-suisseintl);
  font-size: var(--text-body);
  color: var(--color-carbon-black);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-carbon-black);
}

/* ---------- Tables / lists ---------- */

.row-list { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  background: var(--color-paper-white);
  border-radius: var(--radius-3xl);
  margin-bottom: var(--spacing-8);
  flex-wrap: wrap;
}
.row:hover { background: var(--color-mist-gray); }

.row-title { font-weight: 500; font-size: var(--text-body); }
.row-meta { font-family: var(--font-suisseintlmono); font-size: var(--text-caption); color: var(--color-smoke); word-break: break-word; }

.row-actions { display: flex; align-items: center; gap: var(--spacing-8); flex-shrink: 0; }

/* ---------- Stat grid ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-16);
}

.stat {
  background: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-24);
}
.stat-num {
  font-family: var(--font-suisseintlcond);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.stat-label {
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-slate);
  margin-top: 8px;
}

/* ---------- Breadcrumb ---------- */

.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-slate);
  margin-bottom: var(--spacing-16);
}
.crumb a:hover { color: var(--color-carbon-black); text-decoration: underline; }
.crumb .sep { color: var(--color-ash); }

/* ---------- Hierarchy explorer ---------- */

.hier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-16);
}

.col-card {
  background: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-16);
  max-height: 70vh;
  overflow-y: auto;
}

.col-title {
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-slate);
  padding: 0 8px 12px;
  position: sticky;
  top: 0;
  background: var(--color-paper-white);
}

.col-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--text-body-sm);
}
.col-item:hover { background: var(--color-mist-gray); }
.col-item.selected { background: var(--color-carbon-black); color: var(--color-paper-white); }
.col-item .count {
  font-family: var(--font-suisseintlmono);
  font-size: 11px;
  opacity: .6;
}

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
}
.login-card {
  width: 100%;
  max-width: 440px;
}

/* ---------- Misc ---------- */

.flash {
  background: var(--color-mint-chip);
  color: var(--color-carbon-black);
  border-radius: var(--radius-3xl);
  padding: 12px 20px;
  margin-bottom: var(--spacing-16);
  font-size: var(--text-body-sm);
  font-weight: 500;
}
.flash-error { background: #ffd6d6; }

.divider { height: 1px; background: var(--color-ash); margin: var(--spacing-24) 0; }

.empty {
  padding: var(--spacing-40);
  text-align: center;
  color: var(--color-smoke);
  font-family: var(--font-suisseintlmono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

[x-cloak] { display: none !important; }

/* Inline edit form inside a row */
.row-form { display: flex; gap: 8px; align-items: center; width: 100%; }
.row-form .input { flex: 1; }

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

/* ---------- Responsive ---------- */

/* Tablet and small desktop */
@media (max-width: 960px) {
  :root {
    --page-max-width: 100%;
    --section-gap: 64px;
  }
  .card-lg { padding: var(--spacing-24); }
  .section { padding: var(--spacing-24) 0; }
  .stat-num { font-size: 56px; }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --spacing-40: 24px;
    --spacing-80: 40px;
    --card-padding: 16px;
  }

  .container { padding: 0 var(--spacing-16); }

  /* Nav: hamburger menu on mobile */
  .nav { min-height: auto; padding: 12px 0; }
  .nav-inner { flex-wrap: nowrap; }
  .nav-pill { display: none; }
  .nav-right { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile dropdown menu */
  .nav-mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-paper-white);
    border-top: 1px solid var(--color-ash);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 8px 0;
    z-index: 49;
  }
  .nav-mobile a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-slate);
    transition: background .15s, color .15s;
  }
  .nav-mobile a:hover, .nav-mobile a.active {
    background: var(--color-mist-gray);
    color: var(--color-carbon-black);
  }
  .nav-mobile-divider {
    height: 1px;
    background: var(--color-ash);
    margin: 8px 24px;
  }
  .nav-mobile-user {
    padding: 8px 24px 12px;
  }
  .nav-mobile-signout {
    color: #b00020 !important;
    font-weight: 500;
  }

  /* Headings */
  .heading { font-size: 28px; }
  .heading-sm { font-size: 22px; }
  .stat-num { font-size: 42px; }

  /* Cards */
  .card { padding: var(--spacing-16); border-radius: var(--radius-3xl); }
  .card-lg { padding: var(--spacing-16); border-radius: var(--radius-3xl); }

  /* Rows: stack content + actions vertically */
  .row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .row-actions { justify-content: flex-end; flex-wrap: wrap; }

  /* Stat grid: 2 columns on mobile */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { padding: 16px; }

  /* Hierarchy grid: single column */
  .hier-grid { grid-template-columns: 1fr; }
  .col-card { max-height: 50vh; }

  /* Login card */
  .login-wrap { padding: var(--spacing-16); }
  .login-card { max-width: 100%; }

  /* Forms: inline forms stack */
  .row-form { flex-direction: column; align-items: stretch; gap: 8px; }
  .row-form .input { width: 100%; }

  /* Breadcrumbs */
  .crumb { font-size: 11px; gap: 6px; }

  /* Flash messages */
  .flash { padding: 10px 14px; font-size: 13px; }

  /* Buttons: full width on mobile for primary actions */
  .btn { font-size: 14px; padding: 10px 16px; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }

  /* Tags */
  .tag { font-size: 11px; padding: 3px 10px; }
}

/* Small phones */
@media (max-width: 420px) {
  .container { padding: 0 12px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: 36px; }
  .display-md { font-size: 28px; }
  .brand { font-size: 22px; }
  .card { padding: 14px; border-radius: 20px; }
  .row { padding: 12px 14px; }
  .nav-mobile a { padding: 12px 16px; font-size: 14px; }
  .nav-mobile-divider { margin: 6px 16px; }
  .nav-mobile-user { padding: 6px 16px 10px; }
}

/* Touch: disable hover-only effects */
@media (hover: none) {
  .row:hover { background: var(--color-paper-white); }
  .col-item:hover { background: transparent; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}