/* ── Megapixlz Client Portal — Stripe-Inspired Design System ──────── */
/* Fonts loaded via Google Fonts in base.html: Source Sans 3 + Source Code Pro */

:root {
  /* Primary */
  --color-brand: #533afd;
  --color-brand-hover: #4434d4;
  --color-brand-dark: #1c1e54;
  --color-brand-light: rgba(83, 58, 253, 0.10);

  /* Text */
  --color-navy: #061b31;
  --color-slate: #64748d;
  --color-slate-dark: #273951;

  /* Surfaces */
  --color-white: #ffffff;
  --color-bg: #f8f9fc;
  --color-border: #e5edf5;
  --color-border-focus: #533afd;

  /* Status colors */
  --color-new-bg: rgba(83, 58, 253, 0.12);
  --color-new-text: #533afd;
  --color-reviewed-bg: rgba(245, 158, 11, 0.12);
  --color-reviewed-text: #b45309;
  --color-scheduled-bg: rgba(14, 165, 233, 0.12);
  --color-scheduled-text: #0369a1;
  --color-shooting-bg: rgba(99, 102, 241, 0.12);
  --color-shooting-text: #4338ca;
  --color-editing-bg: rgba(168, 85, 247, 0.12);
  --color-editing-text: #7c3aed;
  --color-delivered-bg: rgba(21, 190, 83, 0.12);
  --color-delivered-text: #108c3d;
  --color-declined-bg: rgba(239, 68, 68, 0.12);
  --color-declined-text: #b91c1c;

  /* Shadows — Stripe's blue-tinted multi-layer */
  --shadow-card: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
                rgba(0, 0, 0, 0.10) 0px 18px 36px -18px;
  --shadow-elevated: rgba(3, 3, 39, 0.25) 0px 14px 21px -14px,
                     rgba(0, 0, 0, 0.10) 0px 8px 17px -8px;
  --shadow-ambient: rgba(23, 23, 23, 0.06) 0px 3px 6px;
  --shadow-hover: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px,
                  rgba(0, 0, 0, 0.15) 0px 18px 36px -18px;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing & Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ── Reset & Base ──────────────────────────────────────────────────── */

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

body {
  font-family: var(--font-sans);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ── Typography ────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-feature-settings: "ss01"; }

.text-display { font-size: 3rem; font-weight: 300; line-height: 1.10; letter-spacing: -0.96px; }
.text-heading { font-size: 2rem; font-weight: 300; line-height: 1.12; letter-spacing: -0.64px; }
.text-subheading { font-size: 1.375rem; font-weight: 300; line-height: 1.10; letter-spacing: -0.22px; }
.text-body-lg { font-size: 1.125rem; font-weight: 300; line-height: 1.45; }
.text-body { font-size: 1rem; font-weight: 300; line-height: 1.50; }
.text-sm { font-size: 0.875rem; font-weight: 400; }
.text-xs { font-size: 0.75rem; font-weight: 400; }
.text-label { color: var(--color-slate-dark); font-size: 0.875rem; font-weight: 400; }

/* ── Layout ────────────────────────────────────────────────────────── */

.container { max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.section { padding: 5rem 0; }
.section-lg { padding: 8rem 0; }

/* ── Header ────────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: 4rem;
}

.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.brand { font-size: 1.25rem; font-weight: 300; letter-spacing: -0.3px; color: var(--color-navy); text-decoration: none; font-feature-settings: "ss01"; }
.brand:hover { color: var(--color-brand); }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { color: var(--color-navy); text-decoration: none; font-size: 0.875rem; font-weight: 400; font-feature-settings: "ss01"; transition: color 0.15s; }
.nav-link:hover { color: var(--color-brand); }
.nav-link-admin { color: var(--color-brand); }
.nav-user { color: var(--color-slate); font-size: 0.875rem; font-feature-settings: "ss01"; }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 400;
  border-radius: var(--radius-sm); font-feature-settings: "ss01";
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  border: none;
}

.btn-primary { background: var(--color-brand); color: var(--color-white); }
.btn-primary:hover { background: var(--color-brand-hover); }

.btn-ghost { background: transparent; color: var(--color-brand); border: 1px solid var(--color-border); }
.btn-ghost:hover { background: var(--color-brand-light); }

.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* ── Cards ─────────────────────────────────────────────────────────── */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-hover); }

.card-dashed {
  border: 1px dashed var(--color-brand);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 3rem;
  text-align: center;
}

/* ── Forms ─────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.875rem; font-weight: 400; color: var(--color-slate-dark); margin-bottom: 0.375rem; font-feature-settings: "ss01"; }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.75rem;
  font-size: 1rem; font-weight: 300;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
  font-family: var(--font-sans);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-slate); }

.form-textarea { resize: vertical; min-height: 6rem; }

.form-select { appearance: none; background-image: url("data:image/svg+xml,..."); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ── Tables ────────────────────────────────────────────────────────── */

.table-container {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.75rem; font-weight: 400; color: var(--color-slate-dark);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-feature-settings: "ss01";
  background: var(--color-brand-light);
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: 1rem;
  font-size: 0.875rem; font-weight: 300;
  border-bottom: 1px solid var(--color-border);
  font-feature-settings: "ss01";
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover { background: rgba(83, 58, 253, 0.02); }

.table-sm th, .table-sm td { padding: 0.625rem 0.875rem; }

/* ── Status badges ─────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem; font-weight: 400;
  border-radius: var(--radius-sm);
  font-feature-settings: "ss01";
}

/* ── Hero section ──────────────────────────────────────────────────── */

.hero { text-align: center; padding: 8rem 0 6rem; }
.hero-title { font-size: 3rem; font-weight: 300; line-height: 1.10; letter-spacing: -0.96px; color: var(--color-navy); font-feature-settings: "ss01"; }
.hero-subtitle { margin-top: 1rem; font-size: 1.125rem; font-weight: 300; line-height: 1.45; color: var(--color-slate); max-width: 36rem; margin-inline: auto; font-feature-settings: "ss01"; }
.hero-actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; }

/* ── Email login form on landing ──────────────────────────────────── */

.or-divider {
  margin: 2rem 0 1rem;
  font-size: 0.8125rem; font-weight: 400; color: var(--color-slate);
  font-feature-settings: "ss01";
}

.email-login-form {
  max-width: 360px; margin: 0 auto;
}

.mode-toggle {
  display: flex; gap: 0; margin-bottom: 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.mode-btn {
  flex: 1; padding: 0.5rem 1rem;
  font-size: 0.8125rem; font-weight: 400; color: var(--color-slate);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans);
  font-feature-settings: "ss01";
  transition: background 0.15s, color 0.15s;
}
.mode-btn:not(:last-child) { border-right: 1px solid var(--color-border); }
.mode-btn.active {
  background: var(--color-brand); color: var(--color-white);
}

.flash-error {
  max-width: 360px; margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem; font-weight: 400; color: var(--color-declined-text);
  background: var(--color-declined-bg);
  border-radius: var(--radius-sm);
  font-feature-settings: "ss01";
}

.h-captcha {
  margin: 0 auto 1.25rem;
  display: flex; justify-content: center;
}

/* ── Dark section ──────────────────────────────────────────────────── */

.dark-section {
  background: var(--color-brand-dark);
  color: var(--color-white);
  padding: 5rem 0;
  text-align: center;
}
.dark-section-title { font-size: 2rem; font-weight: 300; letter-spacing: -0.64px; color: var(--color-white); font-feature-settings: "ss01"; }
.dark-section-body { margin-top: 1rem; font-size: 1.125rem; font-weight: 300; color: rgba(255, 255, 255, 0.70); font-feature-settings: "ss01"; }

/* ── Feature grid ──────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.5rem 8rem;
}
.feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.feature-icon {
  width: 2.5rem; height: 2.5rem;
  background: var(--color-brand-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}
.feature-title {
  font-size: 1.375rem; font-weight: 300;
  letter-spacing: -0.22px;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  font-feature-settings: "ss01";
}
.feature-body { font-size: 1rem; font-weight: 300; color: var(--color-slate); line-height: 1.5; font-feature-settings: "ss01"; }

/* ── Empty state ───────────────────────────────────────────────────── */

.empty-state { text-align: center; padding: 3rem 2rem; }
.empty-icon {
  width: 3rem; height: 3rem;
  background: rgba(83, 58, 253, 0.08);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.empty-title { font-size: 1rem; font-weight: 300; color: var(--color-slate-dark); margin-bottom: 0.375rem; font-feature-settings: "ss01"; }
.empty-body { font-size: 0.875rem; color: var(--color-slate); margin-bottom: 1.5rem; font-feature-settings: "ss01"; }

/* ── Success state ─────────────────────────────────────────────────── */

.success-state { text-align: center; padding: 5rem 2rem; }
.success-circle {
  width: 4rem; height: 4rem;
  background: rgba(21, 190, 83, 0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--color-border);
  margin-top: 6rem;
  padding: 2rem 0;
  text-align: center;
}
.footer-text { font-size: 0.75rem; color: var(--color-slate); font-feature-settings: "ss01"; }

/* ── Utility ───────────────────────────────────────────────────────── */

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-auto { margin-inline: auto; }
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Admin panel extras ────────────────────────────────────────────── */

.admin-status-select {
  font-size: 0.75rem; font-weight: 400;
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  font-feature-settings: "ss01";
}
.admin-status-select:focus { outline: none; border-color: var(--color-brand); }

.admin-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 400;
  border-radius: var(--radius-sm);
}

.zoho-result:hover { background: var(--color-brand-light); }

/* ── Section ────────────────────────────────────────────────────────── */

.section { padding: 3rem 0 2rem; }
.container { max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.text-heading { font-size: 2rem; font-weight: 300; letter-spacing: -0.64px; color: var(--color-navy); font-feature-settings: "ss01"; }
.text-body { font-size: 0.875rem; font-weight: 300; color: var(--color-slate); font-feature-settings: "ss01"; }
.text-body-lg { font-size: 1.125rem; font-weight: 300; color: var(--color-slate); font-feature-settings: "ss01"; }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.text-subheading { font-size: 1.25rem; font-weight: 300; color: var(--color-navy); font-feature-settings: "ss01"; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .text-display { font-size: 2rem; }
  .text-heading { font-size: 1.5rem; }
  .feature-grid, .form-row, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 5rem 0 3rem; }
  .table { font-size: 0.8125rem; }
  .nav { gap: 0.75rem; }
}