/* ============================================
   DESIGN TOKENS
   ============================================ 
   */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700;800&display=swap");
:root {
  /* Brand */
  --brand-0: #edf6f3;
  --brand-50: #e9f7f1;
  --brand-100: #cff0e1;
  --brand-200: #a3e2c6;
  --brand-300: #6cd3a6;
  --brand-400: #3ac58a;
  --brand-500: #25a27a;
  --brand-600: #1b7f5f;
  --brand-700: #14684d;
  --brand-800: #0f513c;
  --brand-900: #0a3a2b;

  /* Neutral */
  --neutral-0: #ffffff;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-500: #8d8d8d;
  --neutral-700: #444444;
  --neutral-900: #111111;

  /* Semantic */
  --color-danger: #db6810;
  --color-error: #dc2626;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;

  /* Semantic - Info */
  --info-50: #eff6ff;
  --info-200: #bfdbfe;
  --info-700: #1d4ed8;

  /* Semantic - Warning */
  --warning-50: #fff7ed;
  --warning-200: #fed7aa;
  --warning-800: #9a3412;

  /* Semantic - Error */
  --error-50: #fef2f2;
  --error-200: #fecaca;
  --error-700: #b91c1c;

  /* Typography */
  --font-family: "Roboto Slab", serif;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;

  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-32: 32px;

  /* Spacing */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;

  /* Shadows */
  --shadow-soft: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ============================================
     RESET & BASE
     ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  color: var(--neutral-700);
  background-color: var(--brand-50);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.dashboard-page .site-header,
.dashboard-page .site-footer {
  display: none;
}

main {
  flex: 1;
  background-color: var(--brand-0);
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

/* ============================================
     TYPOGRAPHY
     ============================================ */
.text-xs {
  font-size: var(--font-size-10);
}
.text-sm {
  font-size: var(--font-size-12);
}
.text-base {
  font-size: var(--font-size-16);
}
.text-lg {
  font-size: var(--font-size-18);
}
.text-xl {
  font-size: var(--font-size-20);
}
.text-2xl {
  font-size: var(--font-size-24);
}
.text-4xl {
  font-size: var(--font-size-40);
}

.font-regular {
  font-weight: var(--font-weight-400);
}
.font-medium {
  font-weight: var(--font-weight-500);
}
.font-semibold {
  font-weight: var(--font-weight-600);
}
.font-bold {
  font-weight: var(--font-weight-700);
}

.text-muted {
  color: var(--neutral-500);
}
.text-dark {
  color: var(--neutral-700);
}
.text-brand {
  color: var(--brand-600);
}
.text-danger {
  color: var(--color-danger);
}

/* ============================================
     LAYOUT
     ============================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-24);
}

/* ============================================
   COMPONENT: BUTTON
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-family);
  font-weight: var(--font-weight-500);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

/* Sizes */
.btn--sm {
  font-size: var(--font-size-12);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-4);
  height: 32px;
}
.btn--md {
  font-size: var(--font-size-12);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-4);
  height: 44px;
}
.btn--lg {
  font-size: var(--font-size-18);
  padding: var(--space-12) var(--space-32);
  border-radius: var(--radius-4);
  height: 48px;
}

/* Primary — green fill */
.btn--primary {
  background-color: var(--brand-600);
  color: var(--neutral-0);
  border-color: var(--brand-600);
}
.btn--primary:hover {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
}

.btn--header {
  background-color: #c59d5f;
  color: var(--neutral-0);
}

/* Secondary — dark fill */
.btn--secondary {
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  border-color: var(--neutral-900);
}
.btn--secondary:hover {
  background-color: var(--neutral-700);
  border-color: var(--neutral-700);
}

/* Outline — transparent with border */
.btn--outline {
  background-color: transparent;
  color: var(--neutral-700);
  border-color: var(--neutral-500);
}
.btn--outline:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
}

/* Icon */
.btn__icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
}

/* ============================================
   COMPONENT: PILL
   ============================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 4px 10px;
  border-radius: var(--radius-12);
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Completed — green */
.pill--completed {
  background-color: rgba(220, 252, 231, 0.55);
  color: var(--color-success-text);
}
.pill--completed .pill__dot {
  background-color: var(--color-success-text);
}

/* In Progress — yellow */
.pill--in-progress {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.pill--in-progress .pill__dot {
  background-color: var(--color-warning-text);
}

/* Not Paid — red */
.pill--not-paid {
  background-color: rgba(254, 226, 226, 0.55);
  color: #991b1b;
}
.pill--not-paid .pill__dot {
  background-color: #991b1b;
}

/* Paid — brand green */
.pill--paid {
  background-color: var(--brand-50);
  color: var(--brand-600);
}
.pill--paid .pill__dot {
  background-color: var(--brand-600);
}

/* Pending */
.pill--pending {
  background-color: #fff7ed;
  color: #9a3412;
}
.pill--pending .pill__dot {
  background-color: #9a3412;
}

/* ============================================
   COMPONENT: HEADER
   ============================================ */
.site-header {
  width: 100%;
  background-color: var(--neutral-0);
  border-bottom: 2px solid var(--brand-500);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.site-header__logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.site-header__logo-text {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

/* Nav */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__menu a {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__menu a:hover {
  color: var(--brand-600);
}

/* Actions */
.site-header__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header__phone:hover {
  color: var(--brand-600);
}

/* ============================================
   COMPONENT: SERVICE CARD
   ============================================ */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 402px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-8);
  overflow: hidden;
  padding: var(--space-32) var(--space-24) var(--space-24);
  box-shadow: var(--shadow-soft);
}

/* Badge */
.service-card__badge {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-12);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  font-family: var(--font-family);
}

.service-card__badge--popular {
  background-color: #e8d5b0;
  color: #78532a;
}

.service-card__badge--small-business {
  background-color: #e8d5b0;
  color: #78532a;
}

.service-card__badge--growing {
  background-color: #ddd6fe;
  color: #4c1d95;
}

/* Image */
.service-card__image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-16);
  height: 180px;
}

.service-card__image img {
  max-height: 180px;
  width: auto;
  object-fit: contain;
}

/* Body */
.service-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.service-card__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-700);
  text-align: center;
  line-height: var(--line-height-32);
}

.service-card__subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  text-align: center;
  line-height: var(--line-height-24);
}

.service-card__bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-card__bullets li {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  padding-left: var(--space-16);
  position: relative;
  line-height: var(--line-height-24);
}

.service-card__bullets li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--neutral-500);
}

/* Footer */
.service-card__footer {
  margin-top: auto;
}

.service-card__btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-8) !important;
  height: 56px !important;
  font-size: var(--font-size-16) !important;
  font-weight: var(--font-weight-600) !important;
}

/* ============================================
   COMPONENT: FORM INPUT
   ============================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-field__label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
  font-family: var(--font-family);
}

.form-field__required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-field__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-16);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-field__input::placeholder {
  color: var(--neutral-500);
}

/* Focus — green border */
.form-field__input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(5, 187, 106, 0.12);
}

/* Form field error state */
.form-field__input--error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(219, 104, 16, 0.15) !important;
}

.form-field__error {
  font-size: var(--font-size-12);
  color: var(--color-danger);
  margin-top: var(--space-4);
  display: block;
}

/* Step-level error (e.g. "please select a filing status") */
.intake__step-error {
  background-color: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-14);
  color: var(--color-danger);
  margin-bottom: var(--space-16);
}
/* Textarea */
.form-field__input--textarea {
  height: 120px;
  padding: var(--space-12) var(--space-16);
  resize: vertical;
  line-height: var(--line-height-24);
}

/* ============================================
     COMPONENT: RADIO CHOICE
     ============================================ */
.radio-choice {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  background-color: var(--neutral-0);
}

.radio-choice:hover {
  border-color: var(--brand-400);
}

.radio-choice--selected {
  border-color: var(--brand-500);
  background-color: var(--brand-50);
}

/* Hide native radio */
.radio-choice__input {
  display: none;
}

/* Custom radio circle */
.radio-choice__indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--neutral-200);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.radio-choice--selected .radio-choice__indicator {
  border-color: var(--brand-600);
  background-color: var(--brand-600);
  box-shadow: inset 0 0 0 3px white;
}

.radio-choice__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-choice__label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
  font-family: var(--font-family);
}

.radio-choice__sublabel {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  font-family: var(--font-family);
}

/* ============================================
   COMPONENT: FOOTER
   ============================================ */
.site-footer {
  background-color: var(--neutral-0);
  border-top: 2px solid var(--brand-500);
  margin-top: auto;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-48);
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

/* Brand */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.site-footer__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.site-footer__logo-text {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

.site-footer__tagline {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  max-width: 200px;
  line-height: var(--line-height-20);
}

/* Nav */
.site-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__nav a {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__nav a:hover {
  color: var(--brand-600);
}

/* Contact */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__phone,
.site-footer__email {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__phone:hover,
.site-footer__email:hover {
  color: var(--brand-600);
}

/* Bottom bar */
.site-footer__bottom {
  border-top: 1px solid var(--neutral-200);
  padding: var(--space-16) 0;
}

.site-footer__bottom p {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  text-align: center;
}

/* ============================================
   SECTION: HERO
   ============================================ */
.hero {
  padding-top: var(--space-40);
}

.hero hr {
  border-color: var(--neutral-200);
  margin: var(--space-24) var(--space-12);
}

.hero__title {
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  line-height: 1.15;
  margin-bottom: var(--space-12);
  max-width: 600px;
}

.hero__subtitle {
  font-size: var(--font-size-16);
  color: var(--neutral-500);
  margin-bottom: var(--space-24);
  line-height: var(--line-height-24);
}

.hero__bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero__bullets li {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
  padding-left: var(--space-24);
  position: relative;
  line-height: var(--line-height-24);
}

/* Green square bullet */
.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background-color: var(--brand-600);
}

/* ============================================
     SECTION: SERVICES GRID
     ============================================ */
.services {
  padding-top: var(--space-40);
}

.services__heading {
  margin-bottom: var(--space-32);
}

.services__title {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-6);
}

.services__subtitle {
  font-size: var(--font-size-16);
  color: var(--neutral-500);
  line-height: var(--line-height-24);
}

.services__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
}

/* On wider screens, go side by side */
@media (min-width: 900px) {
  .services__grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Make cards full width on mobile */
.services__grid .service-card {
  width: 100%;
  max-width: 480px;
}

@media (min-width: 900px) {
  .services__grid .service-card {
    width: calc(33.333% - 16px);
    max-width: 402px;
  }
}

/* ============================================
     SECTION: CTA UNSURE
     ============================================ */
.cta-unsure {
  padding: var(--space-48) 0;
  border-top: 1px solid var(--neutral-200);
}

.cta-unsure div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cta-unsure__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-8);
}

.cta-unsure__subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  margin-bottom: var(--space-24);
}

.cta-unsure__btn {
  width: 100%;
  max-width: 480px;
  justify-content: center;
  border-radius: var(--radius-8) !important;
}

/* ============================================
   PAGE: INTAKE FORM
   ============================================ */
.intake-page main {
  background-color: var(--neutral-0);
}

.intake {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 100px;
}

.intake__shell {
  width: 100%;
  max-width: 520px;
  padding: var(--space-24) var(--space-24) 0;
}

/* Progress Header */
.intake__progress-header {
  padding: var(--space-16) 0 var(--space-24);
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: var(--space-32);
}

.intake__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.intake__service-tag {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  background-color: var(--brand-50);
  padding: 3px 10px;
  border-radius: var(--radius-12);
}

.intake__step-label {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  font-weight: var(--font-weight-500);
}

.intake__progress-bar {
  height: 4px;
  background-color: var(--neutral-200);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.intake__progress-fill {
  height: 100%;
  background-color: var(--brand-600);
  border-radius: var(--radius-4);
  transition: width 0.3s ease;
}

/* Step */
.intake__step {
  display: none;
}
.intake__step.active {
  display: block;
}

.intake__step-header {
  margin-bottom: var(--space-24);
}

.intake__step-title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-8);
  line-height: var(--line-height-32);
}

.intake__step-subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  line-height: var(--line-height-24);
  letter-spacing: -0.35px;
}

.intake__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Dependents */
.intake__dependents {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-top: var(--space-8);
}

.intake__dependents-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-600);
  color: var(--neutral-700);
}

.dependent-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--neutral-200);
}

.intake__add-dependent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-family);
}

.intake__add-dependent:hover {
  color: var(--brand-700);
}

/* Document rows */
.intake__doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  gap: var(--space-8);
}

.doc-row__name {
  flex: 1;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
}

.doc-row__status {
  font-size: var(--font-size-12);
  color: var(--color-danger);
}

.doc-row__upload-btn {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  background: none;
  border: 1.5px solid var(--brand-600);
  border-radius: var(--radius-4);
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font-family);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.doc-row__upload-btn:hover {
  background-color: var(--brand-600);
  color: white;
}

.doc-row--uploaded {
  border-color: var(--brand-300);
}
.doc-row--uploaded .doc-row__status {
  color: var(--brand-600);
}

/* Checkbox */
.intake__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  cursor: pointer;
}

/* Review list */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--neutral-200);
}

.review-row:last-child {
  border-bottom: none;
}

.review-row__label {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.review-row__value {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.review-row__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-500);
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  cursor: pointer;
  font-family: var(--font-family);
  margin-left: var(--space-8);
  transition: background 0.15s ease;
}

.review-row__edit:hover {
  background: var(--brand-100);
}

/* Missing docs */
.intake__missing-docs {
  margin-top: var(--space-24);
}

#missing-docs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.intake__missing-docs h4 {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-4);
}

.intake__missing-docs p {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  margin-bottom: var(--space-16);
}

/* Footer */
.intake__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--neutral-0);
  border-top: 1px solid var(--neutral-200);
  padding: var(--space-16) var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.intake__back {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 0;
}

.intake__back:hover {
  color: var(--neutral-700);
}

/* ============================================
   PAGE: SUCCESS
   ============================================ */
.success-page .site-header,
.success-page .site-footer {
  display: none;
}

.success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-48) 0;
  gap: var(--space-16);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-48) var(--space-24);
}

.success__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-8);
}

.success__icon svg {
  width: 100%;
  height: 100%;
}

.success__title {
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  line-height: 1.2;
  width: 100%;
}

.success__subtitle {
  font-size: var(--font-size-16);
  color: var(--neutral-500);
  width: 100%;
}

.success__divider {
  border: none;
  border-top: 1.5px dashed var(--neutral-200);
  width: 100%;
  margin: var(--space-8) 0;
}

.success__next-title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
}

.success__next-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.success__next-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  line-height: var(--line-height-24);
}

.success__cta {
  width: 100%;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--radius-12) !important;
  background-color: var(--neutral-900) !important;
  border-color: var(--neutral-900) !important;
}

.success__cta:hover {
  background-color: var(--neutral-700) !important;
}

.success__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.success__links a {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  text-decoration: none;
}

.success__icon {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-24);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.success__links a:hover {
  color: var(--brand-700);
}

/* Fix bullet squares */
.success__next-list {
  list-style: none !important;
  padding: 0 !important;
}

.success__next-list li::before {
  content: "" !important;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--brand-200);
  border-radius: var(--radius-20);
  margin-top: 6px;
  flex-shrink: 0;
}

/* Fix Book Free Consultation button color */
.success__cta {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: white !important;
}

.success__cta:hover {
  background-color: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
}

/* ============================================
   COMPONENT: TAB BAR
   ============================================ */
.tab-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--neutral-200);
  background-color: var(--neutral-0);
  position: sticky;
  top: 72px;
  z-index: 90;
}

.tab-bar__tab {
  flex: 1;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.tab-bar__tab:hover {
  color: var(--neutral-700);
}

.tab-bar__tab--active {
  color: var(--neutral-900);
  font-weight: var(--font-weight-700);
  border-bottom-color: var(--brand-600);
}

/* ============================================
   COMPONENT: STAT CARD
   ============================================ */
.stat-card {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-4);
  border: 1px solid var(--neutral-200);
  align-items: center;
  box-shadow: 4px 6px 8px 4px rgba(0, 0, 0, 0.04);
  border-top: 4px solid;
}

.stat-card__label {
  font-family: "Roboto Slab", serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  line-height: 12px;
}

.stat-card__value {
  font-family: "Roboto Slab", serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-600);
  line-height: 16px;
  text-decoration: underline;
}

/* Neutral (Active Services - Green) */
.stat-card--neutral {
  background-color: #e9f7f1;
  border-color: #a3e2c6;
}
.stat-card--neutral .stat-card__label,
.stat-card--neutral .stat-card__value {
  color: #0a3a2b;
}

/* Caution (Documents Needed - Blue) */
.stat-card--caution {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}
.stat-card--caution .stat-card__label,
.stat-card--caution .stat-card__value {
  color: #1e3a8a;
}

/* Danger (Pending Payments - Orange) */
.stat-card--danger {
  background-color: #fff7ed;
  border-color: #fed7aa;
}
.stat-card--danger .stat-card__label,
.stat-card--danger .stat-card__value {
  color: #7c2d12;
}

/* ============================================
     COMPONENT: SERVICE ROW
     ============================================ */
.service-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background-color: var(--neutral-0);
  gap: var(--space-16);
  border: 1px solid var(--info-200);
  box-shadow: var(--shadow-soft);
}

.service-row__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-row__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-700);
  color: var(--brand-800);
}

.service-row__date,
.service-row__tax-year {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
}

.service-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-6);
}

.service-row__price {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
}

.service-row__link {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  text-decoration: none;
}

.service-row__link:hover {
  color: var(--brand-700);
}

/* ============================================
     COMPONENT: DOCUMENT ROW
     ============================================ */
.document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  gap: var(--space-12);
  background-color: var(--neutral-0);
}

.document-row--missing {
  border-color: #fdba74;
}

.document-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.document-row__name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-700);
}

.document-row__meta {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
}

.document-row__btn {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  border-radius: var(--radius-4);
  padding: 6px 16px;
  cursor: pointer;
  font-family: var(--font-family);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}

.document-row__btn--view {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  border: 1.5px solid var(--neutral-200);
}

.document-row__btn--view:hover {
  background-color: var(--neutral-200);
}

.document-row__btn--upload {
  background-color: var(--brand-600);
  color: white;
  border: 1.5px solid var(--brand-600);
}

.document-row__btn--upload:hover {
  background-color: var(--brand-700);
}

/* ============================================
     COMPONENT: BILLING CARD
     ============================================ */
.billing-card {
  background-color: var(--brand-900);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.billing-card__label {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-700);
  color: var(--brand-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.billing-card__amount {
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  color: var(--neutral-0);
  line-height: 1;
}

.billing-card__meta {
  font-size: var(--font-size-14);
  color: var(--brand-200);
}

.billing-card__pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-8);
  padding: var(--space-16);
  background-color: var(--brand-600);
  color: white;
  border-radius: var(--radius-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-600);
  font-family: var(--font-family);
  text-decoration: none;
  transition: background 0.2s ease;
}

.billing-card__pay-btn:hover {
  background-color: var(--brand-500);
}

/* ============================================
     COMPONENT: INVOICE ROW
     ============================================ */
.invoice-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--neutral-200);
}

.invoice-row:last-child {
  border-bottom: none;
}

.invoice-row__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.invoice-row__title {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-700);
}

.invoice-row__amount {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
}

.invoice-row__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.invoice-row__date {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
}

/* ============================================
     COMPONENT: DOC PROGRESS
     ============================================ */
.doc-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  background-color: var(--neutral-0);
}

.doc-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doc-progress__label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-700);
}

.doc-progress__count {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
}

.doc-progress__bar {
  height: 6px;
  background-color: var(--neutral-200);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.doc-progress__fill {
  height: 100%;
  background-color: var(--brand-600);
  border-radius: var(--radius-4);
  transition: width 0.3s ease;
}

.doc-progress__warning {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-500);
  color: var(--color-danger);
}

/* ============================================
   PAGE: DASHBOARD
   ============================================ */
.dashboard {
  min-height: 100vh;
  background-color: var(--brand-50);
  visibility: hidden;
  opacity: 0;
}

.dashboard.is-ready {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Dashboard header — replaces site header on dashboard pages */
.dashboard__header {
  background-color: var(--neutral-0);
  border-bottom: 2px solid var(--brand-500);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible !important;
}

.dashboard__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  overflow: visible !important;
}

.dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.dashboard__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 999;
  overflow: hidden;
}

.dashboard__logout {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  padding: var(--space-8);
  border-radius: var(--radius-8);
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.dashboard__logout:hover {
  color: var(--neutral-700);
  background-color: var(--neutral-100);
}

.dashboard__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.dashboard__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.dashboard__logo span {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

/* Avatar circle */
.dashboard__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  cursor: pointer;
}

/* ============================================
   DASHBOARD: AVATAR DROPDOWN
   ============================================ */
.dashboard__avatar-menu {
  position: relative;
}

.dashboard__avatar {
  cursor: pointer;
  user-select: none;
}

.dashboard__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 200;
  overflow: hidden;
}

.dashboard__dropdown--open {
  display: block;
}

.dashboard__dropdown-user {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
}

.dashboard__dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: white;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  flex-shrink: 0;
}

.dashboard__dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard__dropdown-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__dropdown-email {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__dropdown-divider {
  border: none;
  border-top: 1px solid var(--neutral-200);
  margin: 0;
}

.dashboard__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
  transition: background 0.15s ease;
}

.dashboard__dropdown-item:hover {
  background-color: var(--neutral-50);
  color: var(--neutral-900);
}

/* Tab bar offset for dashboard sticky header */
.dashboard .tab-bar {
  top: 72px;
}

/* Content */
.dashboard__content {
  padding-top: var(--space-32);
  padding-bottom: var(--space-48);
  max-width: 680px;
}

.dashboard__page-title {
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-8);
}

.dashboard__section {
  margin-bottom: var(--space-24);
}

.dashboard__section-title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin-bottom: var(--space-16);
}

.dashboard__stat-row {
  display: flex;
  gap: var(--space-12);
  overflow-x: scroll;
  scrollbar-width: none;
}

.dashboard__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ============================================
   PAGE: NOTES / MESSAGING
   ============================================ */
.dashboard__page-subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  margin-top: calc(var(--space-4) * -1);
}

.notes__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: 100px;
}

/* Message row */
.notes__message {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
}

/* CPA — left aligned */
.notes__message--cpa {
  justify-content: flex-start;
}

/* Client — right aligned */
.notes__message--client {
  justify-content: flex-end;
}

/* Avatar */
.notes__message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: white;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-family);
}

/* Bubble */
.notes__message-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 75%;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
}

.notes__message--cpa .notes__message-bubble {
  background-color: var(--neutral-100);
  border-bottom-left-radius: var(--radius-4);
}

.notes__message--client .notes__message-bubble {
  background-color: var(--brand-600);
  border-bottom-right-radius: var(--radius-4);
}

.notes__message-sender {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
}

.notes__message--cpa p {
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  line-height: var(--line-height-24);
  margin: 0;
}

.notes__message--client p {
  font-size: var(--font-size-14);
  color: white;
  line-height: var(--line-height-24);
  margin: 0;
}

.notes__message-time {
  font-size: 11px;
  color: var(--neutral-500);
  align-self: flex-end;
}

.notes__message--client .notes__message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* Composer */
.notes__composer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--neutral-0);
  border-top: 1px solid var(--neutral-200);
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  z-index: 50;
}

.notes__input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-16);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-100);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-24);
  outline: none;
  transition: border-color 0.2s ease;
}

.notes__input:focus {
  border-color: var(--brand-500);
  background-color: var(--neutral-0);
}

.notes__input::placeholder {
  color: var(--neutral-500);
}

.notes__send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.notes__send-btn:hover {
  background-color: var(--brand-700);
}

/* Dashboard title row */
.dashboard__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

/* Section label (REQUIRED, UPLOADED BY CPA) */
.dashboard__section-label {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-12);
}

/* Invoice list */
.dashboard__invoice-list {
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  padding: 0 var(--space-16);
  background-color: var(--neutral-0);
}

/* ============================================
   PAGE: LOGIN
   ============================================ */
.login-page {
  background-color: var(--neutral-50);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login {
  width: 100%;
  padding: var(--space-24);
}

.login__shell {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.login__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.login__logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.login__logo span {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

.login__card {
  width: 100%;
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-16);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.login__context-text {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  text-align: center;
  line-height: var(--line-height-24);
}

/* Tabs */
.login__tabs {
  display: flex;
  border-bottom: 1.5px solid var(--neutral-200);
  margin-bottom: var(--space-8);
}

.login__tab {
  flex: 1;
  padding: var(--space-12);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  font-family: var(--font-family);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.login__tab--active {
  color: var(--neutral-900);
  font-weight: var(--font-weight-700);
  border-bottom-color: var(--brand-600);
}

/* Forms */
.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.login__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-8);
}

.login__forgot {
  text-align: center;
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  text-decoration: none;
}

.login__forgot:hover {
  color: var(--brand-600);
}

/* Error */
.login__error {
  font-size: var(--font-size-12);
  color: var(--color-danger);
  background-color: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius-8);
  padding: var(--space-12);
  font-family: var(--font-family);
}

/* Success */
.login__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
  color: var(--brand-600);
  padding: var(--space-16) 0;
}

.login__success p {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  line-height: var(--line-height-24);
}

.get-started__divider {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  padding-top: var(--space-8);
}

.get-started__divider a {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
  text-decoration: none;
}

.get-started__divider a:hover {
  color: var(--brand-700);
}


/* Skeleton loading */

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dashboard__loading {
  color: var(--neutral-400);
  font-size: var(--font-size-14);
  padding: var(--space-16) 0;
}

.dashboard__empty {
  color: var(--neutral-400);
  font-size: var(--font-size-14);
  padding: var(--space-16) 0;
}

.dashboard__empty a {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: var(--font-weight-600);
}

/* Document row */
.document-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  background: white;
}

.document-row--missing {
  background: var(--neutral-50);
}

.document-row__icon {
  width: 36px;
  height: 36px;
  background: var(--brand-50);
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-600);
  flex-shrink: 0;
}

.document-row--missing .document-row__icon {
  background: var(--neutral-100);
  color: var(--neutral-400);
}

.document-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.document-row__name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

.document-row__meta {
  font-size: var(--font-size-12);
  color: var(--neutral-400);
}

.document-row__view {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
  text-decoration: none;
}

.document-row__upload {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-decoration: none;
}

.stat-card--skeleton {
  flex: 1;
  min-width: 100px;
  height: 68px;
  border-radius: var(--radius-4);
  border-top: 4px solid var(--neutral-200);
  border: 1px solid var(--neutral-200);
  border-top: 4px solid var(--neutral-200);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  box-shadow: 4px 6px 8px 4px rgba(0, 0, 0, 0.04);
}

.dashboard__list-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.service-row--skeleton {
  height: 80px;
  border-radius: var(--radius-8);
  border: 1px solid var(--neutral-200);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.document-row--skeleton {
  height: 60px;
  border-radius: var(--radius-8);
  border: 1.5px solid var(--neutral-200);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

/* ============================================
   PAGE: SERVICE DETAIL
   ============================================ */
   .service-detail__back {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-600);
    color: var(--brand-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.service-detail__back:hover {
    color: var(--brand-700);
}

.service-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.service-detail__date,
.service-detail__year,
.service-detail__period,
.service-detail__business {
    font-size: var(--font-size-14);
    color: var(--neutral-500);
}

.service-detail__year,
.service-detail__period,
.service-detail__business {
    background: var(--neutral-100);
    padding: 2px 10px;
    border-radius: var(--radius-12);
}


/* ============================================
SERVICE DETAIL PAGE 
============================================ */

/* Service Header Card */
.service-header-card {
  background: var(--neutral-0);
  border-radius: var(--radius-12);
  padding: var(--space-24);
  margin-bottom: var(--space-16);
  border: 1px solid var(--neutral-200);
}

.service-header-card__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-800);
  margin: 0 0 var(--space-12) 0;
}

.service-header-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.service-header-card__meta-item {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.service-header-card__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.skeleton-title {
  height: 32px;
  width: 200px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-8);
}

.skeleton-meta {
  height: 20px;
  width: 300px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-4);
}

/* Service Stat Row */
.service-stat-row {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.service-stat-row .stat-card {
  flex: 1;
}

/* Stat Card Variants */
.stat-card--success {
  border-top-color: var(--brand-500);
}

.stat-card--caution {
  border-top-color: #F59E0B;
}

.stat-card--danger {
  border-top-color: #EF4444;
}

/* Section Header */
.dashboard__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.dashboard__section-link {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--brand-600);
  text-decoration: none;
}

.dashboard__section-link:hover {
  color: var(--brand-700);
}

/* Dashboard Card */
.dashboard__card {
  background: var(--neutral-0);
  border-radius: var(--radius-12);
  padding: var(--space-20);
  border: 1px solid var(--neutral-200);
}

/* Doc Progress Success State */
.doc-progress__success {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--brand-600);
}

/* Billing Card Pay Button */
.billing-card__btn {
  display: inline-block;
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-24);
  background: var(--neutral-0);
  color: var(--brand-800);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  border-radius: var(--radius-8);
  text-decoration: none;
  transition: background 0.2s ease;
}

.billing-card__btn:hover {
  background: var(--neutral-100);
}

/* Billing Card Skeleton */
.billing-card--skeleton {
  height: 140px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-16);
}

/* Notes Preview */
.notes-preview__message {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.notes-preview__message:last-child {
  margin-bottom: 0;
}

.notes-preview__message--client {
  flex-direction: row-reverse;
}

.notes-preview__avatar {
  width: 32px;
  height: 32px;
  background: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  flex-shrink: 0;
}

.notes-preview__content {
  background: var(--neutral-100);
  padding: var(--space-12);
  border-radius: var(--radius-12);
  max-width: 80%;
}

.notes-preview__message--client .notes-preview__content {
  background: var(--brand-50);
}

.notes-preview__sender {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-600);
  display: block;
  margin-bottom: var(--space-4);
}

.notes-preview__text {
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  margin: 0;
  line-height: 1.4;
}

.notes-preview__time {
  font-size: var(--font-size-12);
  color: var(--neutral-400);
  display: block;
  margin-top: var(--space-4);
}

/* Empty State */
.dashboard__empty {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.dashboard__empty a {
  color: var(--brand-600);
  text-decoration: none;
  font-weight: var(--font-weight-500);
}

/* Shimmer Animation */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================
   SERVICE DETAIL PAGE - CSS FIXES
   Add these to the bottom of your main.css
   ============================================ */

/* Fix: Service header meta items stay on one line */
.service-header-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
  row-gap: var(--space-8);
}

/* Fix: Stat card values display horizontally (no line breaks) */
.service-stat-row .stat-card {
  flex: 1;
}

.service-stat-row .stat-card__value {
  white-space: nowrap;
  font-size: var(--font-size-16);
}

/* Fix: Stat cards row - ensure horizontal layout */
.service-stat-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
  overflow-x: scroll;
  scrollbar-width: none;
}

/* Fix: Section header - title and link on same line */
.dashboard__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.dashboard__section-header .dashboard__section-title {
  margin-bottom: 0;
}

/* Fix: Dashboard card consistent styling */
.dashboard__card {
  background: var(--neutral-0);
  border-radius: var(--radius-8);
  padding: var(--space-16);
  border: 1px solid var(--neutral-200);
}

/* Fix: Doc progress inside dashboard card - remove double border/padding */
.dashboard__card .doc-progress {
  border: none;
  padding: 0;
  background: transparent;
}

/* Fix: Notes empty state styling */
.dashboard__card .dashboard__empty {
  padding: 0;
  margin: 0;
}

/* Fix: Stat cards - stack label above value */
.service-stat-row .stat-card {
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
}



/* ============================================
   ADMIN STYLES
   Add to bottom of main.css
   ============================================ */

/* ── Admin Page Base ────────────────────────────── */
.admin-page {
  min-height: 100vh;
  background-color: var(--neutral-50);
  visibility: hidden;
  opacity: 0;
}

.admin-page.is-ready {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* ── Admin Header ───────────────────────────────── */
.admin-header {
  background-color: var(--neutral-0);
  border-bottom: 2px solid var(--brand-500);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1400px;
}

.admin-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.admin-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.admin-header__logo-icon {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__logo-text {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

.admin-header__badge {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  color: var(--brand-600);
  letter-spacing: 0.05em;
}

.admin-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.admin-header__nav-item {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.admin-header__nav-item:hover {
  color: var(--neutral-700);
}

.admin-header__nav-item--active {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
}

.admin-header__right {
  display: flex;
  align-items: center;
}

.admin-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-header__avatar {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__user-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
}

/* ── Admin Content ──────────────────────────────── */
.admin-content {
  padding: var(--space-32) 0;
}

.admin-content .container {
  max-width: 1400px;
}

/* ── Admin Stat Cards ───────────────────────────── */
.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.admin-stat-card {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-stat-card__value {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  line-height: 1;
}

.admin-stat-card__label {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.admin-stat-card--danger .admin-stat-card__value {
  color: #DC2626;
}

.admin-stat-card--warning .admin-stat-card__value {
  color: #D97706;
}

.admin-stat-card--success .admin-stat-card__value {
  color: var(--brand-600);
}

/* ── Admin Section ──────────────────────────────── */
.admin-section {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.admin-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
}

.admin-section__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* ── Admin Search ───────────────────────────────── */
.admin-search__input {
  width: 240px;
  height: 40px;
  padding: 0 var(--space-16);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  outline: none;
  transition: border-color 0.2s ease;
}

.admin-search__input::placeholder {
  color: var(--neutral-400);
}

.admin-search__input:focus {
  border-color: var(--brand-500);
}

/* ── Admin Table ────────────────────────────────── */
.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-16);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}

.admin-table__row:hover {
  background-color: var(--neutral-50);
}

.admin-table__muted {
  color: var(--neutral-400);
}

.admin-table__empty {
  text-align: center;
  padding: var(--space-48) !important;
  color: var(--neutral-400);
}

.admin-table__empty a {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
  text-decoration: none;
}

/* ── Client Cell ────────────────────────────────── */
.admin-client-cell {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.admin-client-cell__avatar {
  width: 36px;
  height: 36px;
  background-color: var(--brand-100);
  color: var(--brand-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  flex-shrink: 0;
}

.admin-client-cell__name {
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

/* ── Docs Progress Cell ─────────────────────────── */
.admin-docs-cell {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-docs-cell__bar {
  width: 60px;
  height: 6px;
  background-color: var(--neutral-200);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.admin-docs-cell__fill {
  height: 100%;
  background-color: var(--brand-500);
  border-radius: var(--radius-4);
  transition: width 0.3s ease;
}

.admin-docs-cell__count {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  min-width: 30px;
}

/* ── Actions Cell ───────────────────────────────── */
.admin-actions-cell {
  display: flex;
  gap: var(--space-8);
}

/* ── Skeleton Loading ───────────────────────────── */
.admin-table__row--skeleton td {
  padding: var(--space-16);
}

.skeleton-row {
  height: 36px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-4);
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .admin-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-stat-row {
    grid-template-columns: 1fr;
  }

  .admin-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .admin-section__actions {
    width: 100%;
    flex-direction: column;
  }

  .admin-search__input {
    width: 100%;
  }
}

/* ============================================
   ADMIN CLIENT DETAIL STYLES
   Add to bottom of main.css
   ============================================ */

/* ── Back Link ──────────────────────────────────── */
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: var(--space-24);
  transition: color 0.2s ease;
}

.admin-back-link:hover {
  color: var(--neutral-700);
}

/* ── Client Header ──────────────────────────────── */
.admin-client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-32);
  flex-wrap: wrap;
  gap: var(--space-16);
}

.admin-client-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.admin-client-header__avatar {
  width: 64px;
  height: 64px;
  background-color: var(--brand-100);
  color: var(--brand-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  flex-shrink: 0;
}

.admin-client-header__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.admin-client-header__name {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
  line-height: 1.2;
}

.admin-client-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.admin-client-header__service {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.admin-client-header__actions {
  display: flex;
  gap: var(--space-8);
}

/* ── Two Column Layout ──────────────────────────── */
.admin-client-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-24);
}

@media (max-width: 1024px) {
  .admin-client-layout {
    grid-template-columns: 1fr;
  }
}

.admin-client-layout__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.admin-client-layout__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ── Admin Card ─────────────────────────────────── */
.admin-card {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.admin-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.admin-card__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0 0 var(--space-16) 0;
}

.admin-card__header .admin-card__title {
  margin: 0;
}

.admin-card__btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-16);
}

.admin-card__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ── Info Grid ──────────────────────────────────── */
.admin-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.admin-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-info-item__label {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-700);
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-info-item__value {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-900);
}

/* ── Document List ──────────────────────────────── */
.admin-doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.admin-doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-8);
  background-color: var(--neutral-50);
}

.admin-doc-row--uploaded {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
}

.admin-doc-row--missing {
  background-color: #FEF3C7;
  border: 1px solid #FCD34D;
}

.admin-doc-row__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.admin-doc-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-doc-row__name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

.admin-doc-row__meta {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
}

/* ── Status Options ─────────────────────────────── */
.admin-status-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.admin-status-option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.admin-status-option:hover {
  border-color: var(--brand-400);
}

.admin-status-option--selected {
  border-color: var(--brand-600);
  background-color: var(--brand-50);
}

.admin-status-option input {
  accent-color: var(--brand-600);
}

.admin-status-option__label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
}

/* ── Billing ────────────────────────────────────── */
.admin-billing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-8) 0;
}

.admin-billing-row__desc {
  font-size: var(--font-size-14);
  color: var(--neutral-700);
}

.admin-billing-row__amount {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
}

.admin-billing-row__label {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.admin-billing-empty {
  font-size: var(--font-size-14);
  color: var(--neutral-400);
  text-align: center;
  padding: var(--space-16) 0;
}

/* ── Activity Feed ──────────────────────────────── */
.admin-activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-activity-item {
  display: flex;
  gap: var(--space-12);
}

.admin-activity-item__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.admin-activity-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-activity-item__text {
  font-size: var(--font-size-14);
  color: var(--neutral-700);
}

.admin-activity-item__time {
  font-size: var(--font-size-12);
  color: var(--neutral-400);
}

.admin-activity-empty {
  font-size: var(--font-size-14);
  color: var(--neutral-400);
  text-align: center;
  padding: var(--space-16) 0;
}

/* ── Internal Notes ─────────────────────────────── */
.admin-notes-input {
  width: 100%;
  min-height: 120px;
  padding: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
  margin-bottom: var(--space-12);
}

.admin-notes-input:focus {
  border-color: var(--brand-500);
  background-color: var(--neutral-0);
}

.admin-notes-input::placeholder {
  color: var(--neutral-400);
}

/* ── Modal ──────────────────────────────────────── */
.admin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.admin-modal__content {
  position: relative;
  background-color: var(--neutral-0);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  width: 100%;
  max-width: 480px;
  margin: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-modal__title {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-modal__textarea {
  width: 100%;
  min-height: 150px;
  padding: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  resize: vertical;
  outline: none;
}

.admin-modal__textarea:focus {
  border-color: var(--brand-500);
}

.admin-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

/* ── Skeleton ───────────────────────────────────── */
.skeleton-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.skeleton-text {
  width: 200px;
  height: 32px;
  border-radius: var(--radius-4);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.admin-client-header__skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.admin-page-body .site-header,
.admin-page-body .site-footer {
  display: none;
}



/* ============================================
   ADMIN STYLES
   Add to bottom of main.css
   ============================================ */

/* ── Admin Page Base ────────────────────────────── */
.admin-page {
  min-height: 100vh;
  background-color: var(--neutral-50);
  visibility: hidden;
  opacity: 0;
}

.admin-page.is-ready {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* ── Admin Header ───────────────────────────────── */
.admin-header {
  background-color: var(--neutral-0);
  border-bottom: 2px solid var(--brand-500);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1400px;
}

.admin-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.admin-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.admin-header__logo-icon {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__logo-text {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

.admin-header__badge {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  color: var(--brand-600);
  letter-spacing: 0.05em;
}

.admin-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.admin-header__nav-item {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.admin-header__nav-item:hover {
  color: var(--neutral-700);
}

.admin-header__nav-item--active {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
}

.admin-header__right {
  display: flex;
  align-items: center;
}

.admin-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-header__avatar {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__user-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
}

/* ── Admin Content ──────────────────────────────── */
.admin-content {
  padding: var(--space-32) 0;
}

.admin-content .container {
  max-width: 1400px;
}

/* ── Admin Stat Cards ───────────────────────────── */
.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.admin-stat-card {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-stat-card__value {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  line-height: 1;
}

.admin-stat-card__label {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.admin-stat-card--danger .admin-stat-card__value {
  color: #DC2626;
}

.admin-stat-card--warning .admin-stat-card__value {
  color: #D97706;
}

.admin-stat-card--success .admin-stat-card__value {
  color: var(--brand-600);
}

/* ── Admin Section ──────────────────────────────── */
.admin-section {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.admin-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
}

.admin-section__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* ── Admin Search ───────────────────────────────── */
.admin-search__input {
  width: 240px;
  height: 40px;
  padding: 0 var(--space-16);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  outline: none;
  transition: border-color 0.2s ease;
}

.admin-search__input::placeholder {
  color: var(--neutral-400);
}

.admin-search__input:focus {
  border-color: var(--brand-500);
}

/* ── Admin Table ────────────────────────────────── */
.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-16);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}

.admin-table__row:hover {
  background-color: var(--neutral-50);
}

.admin-table__muted {
  color: var(--neutral-400);
}

.admin-table__empty {
  text-align: center;
  padding: var(--space-48) !important;
  color: var(--neutral-400);
}

.admin-table__empty a {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
  text-decoration: none;
}

/* ── Client Cell ────────────────────────────────── */
.admin-client-cell {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.admin-client-cell__avatar {
  width: 36px;
  height: 36px;
  background-color: var(--brand-100);
  color: var(--brand-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  flex-shrink: 0;
}

.admin-client-cell__name {
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

/* ── Docs Progress Cell ─────────────────────────── */
.admin-docs-cell {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-docs-cell__bar {
  width: 60px;
  height: 6px;
  background-color: var(--neutral-200);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.admin-docs-cell__fill {
  height: 100%;
  background-color: var(--brand-500);
  border-radius: var(--radius-4);
  transition: width 0.3s ease;
}

.admin-docs-cell__count {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  min-width: 30px;
}

/* ── Actions Cell ───────────────────────────────── */
.admin-actions-cell {
  display: flex;
  gap: var(--space-8);
}

/* ── Skeleton Loading ───────────────────────────── */
.admin-table__row--skeleton td {
  padding: var(--space-16);
}

.skeleton-row {
  height: 36px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-4);
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .admin-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-stat-row {
    grid-template-columns: 1fr;
  }

  .admin-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .admin-section__actions {
    width: 100%;
    flex-direction: column;
  }

  .admin-search__input {
    width: 100%;
  }
}

/* ── Modal Styles ───────────────────────────────── */
.admin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.admin-modal__content {
  position: relative;
  background-color: var(--neutral-0);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  width: 100%;
  max-width: 480px;
  margin: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-modal__content--wide {
  max-width: 600px;
}

.admin-modal__title {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-modal__subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  margin: 0;
}

.admin-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

@media (max-width: 480px) {
  .admin-modal__row {
    grid-template-columns: 1fr;
  }
}

.admin-modal__textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  resize: vertical;
  outline: none;
}

.admin-modal__textarea:focus {
  border-color: var(--brand-500);
}

.admin-modal__error {
  padding: var(--space-12);
  background-color: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-8);
  color: #DC2626;
  font-size: var(--font-size-14);
}

.admin-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.form-field__required {
  color: #DC2626;
}

/* ============================================
   ADMIN STYLES
   Add to bottom of main.css
   ============================================ */

/* ── Admin Page Base ────────────────────────────── */
.admin-page {
  min-height: 100vh;
  background-color: var(--neutral-50);
  visibility: hidden;
  opacity: 0;
}

.admin-page.is-ready {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* ── Admin Header ───────────────────────────────── */
.admin-header {
  background-color: var(--neutral-0);
  border-bottom: 2px solid var(--brand-500);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1400px;
}

.admin-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.admin-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.admin-header__logo-icon {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__logo-text {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  color: var(--neutral-500);
  line-height: var(--line-height-16);
}

.admin-header__badge {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-700);
  color: var(--brand-600);
  letter-spacing: 0.05em;
}

.admin-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.admin-header__nav-item {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.admin-header__nav-item:hover {
  color: var(--neutral-700);
}

.admin-header__nav-item--active {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
}

.admin-header__right {
  display: flex;
  align-items: center;
}

.admin-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-header__avatar {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

.admin-header__user-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-700);
}

/* ── Admin Content ──────────────────────────────── */
.admin-content {
  padding: var(--space-32) 0;
}

.admin-content .container {
  max-width: 1400px;
}

/* ── Admin Stat Cards ───────────────────────────── */
.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.admin-stat-card {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-stat-card__value {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  line-height: 1;
}

.admin-stat-card__label {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
}

.admin-stat-card--danger .admin-stat-card__value {
  color: #DC2626;
}

.admin-stat-card--warning .admin-stat-card__value {
  color: #D97706;
}

.admin-stat-card--success .admin-stat-card__value {
  color: var(--brand-600);
}

/* ── Admin Section ──────────────────────────────── */
.admin-section {
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  padding: var(--space-24);
}

.admin-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-24);
}

.admin-section__title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* ── Admin Search ───────────────────────────────── */
.admin-search__input {
  width: 240px;
  height: 40px;
  padding: 0 var(--space-16);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-8);
  outline: none;
  transition: border-color 0.2s ease;
}

.admin-search__input::placeholder {
  color: var(--neutral-400);
}

.admin-search__input:focus {
  border-color: var(--brand-500);
}

/* ── Admin Table ────────────────────────────────── */
.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  text-align: left;
  padding: var(--space-12) var(--space-16);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-16);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle;
}

.admin-table__row:hover {
  background-color: var(--neutral-50);
}

.admin-table__muted {
  color: var(--neutral-400);
}

.admin-table__empty {
  text-align: center;
  padding: var(--space-48) !important;
  color: var(--neutral-400);
}

.admin-table__empty a {
  color: var(--brand-600);
  font-weight: var(--font-weight-600);
  text-decoration: none;
}

/* ── Client Cell ────────────────────────────────── */
.admin-client-cell {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.admin-client-cell__avatar {
  width: 36px;
  height: 36px;
  background-color: var(--brand-100);
  color: var(--brand-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  flex-shrink: 0;
}

.admin-client-cell__name {
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

/* ── Docs Progress Cell ─────────────────────────── */
.admin-docs-cell {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.admin-docs-cell__bar {
  width: 60px;
  height: 6px;
  background-color: var(--neutral-200);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.admin-docs-cell__fill {
  height: 100%;
  background-color: var(--brand-500);
  border-radius: var(--radius-4);
  transition: width 0.3s ease;
}

.admin-docs-cell__count {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  min-width: 30px;
}

/* ── Actions Cell ───────────────────────────────── */
.admin-actions-cell {
  display: flex;
  gap: var(--space-8);
  flex-wrap: nowrap;
}

.admin-actions-cell .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Skeleton Loading ───────────────────────────── */
.admin-table__row--skeleton td {
  padding: var(--space-16);
}

.skeleton-row {
  height: 36px;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-4);
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .admin-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-stat-row {
    grid-template-columns: 1fr;
  }

  .admin-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .admin-section__actions {
    width: 100%;
    flex-direction: column;
  }

  .admin-search__input {
    width: 100%;
  }
}

/* ── Modal Styles ───────────────────────────────── */
.admin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.admin-modal__content {
  position: relative;
  background-color: var(--neutral-0);
  border-radius: var(--radius-16);
  padding: var(--space-24);
  width: 100%;
  max-width: 480px;
  margin: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-modal__content--wide {
  max-width: 600px;
}

.admin-modal__title {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
  margin: 0;
}

.admin-modal__subtitle {
  font-size: var(--font-size-14);
  color: var(--neutral-500);
  margin: 0;
}

.admin-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.admin-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

@media (max-width: 480px) {
  .admin-modal__row {
    grid-template-columns: 1fr;
  }
}

.admin-modal__textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  color: var(--neutral-700);
  background-color: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-8);
  resize: vertical;
  outline: none;
}

.admin-modal__textarea:focus {
  border-color: var(--brand-500);
}

.admin-modal__error {
  padding: var(--space-12);
  background-color: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-8);
  color: #DC2626;
  font-size: var(--font-size-14);
}

.admin-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.form-field__required {
  color: #DC2626;
}

/* ── Danger Button ──────────────────────────────── */
.btn--danger {
  background-color: #DC2626;
  color: white;
  border: none;
}

.btn--danger:hover {
  background-color: #B91C1C;
}

/* ── Modal Text & List ──────────────────────────── */
.admin-modal__text {
  font-size: var(--font-size-14);
  color: var(--neutral-600);
  margin: 0;
  line-height: 1.5;
}

.admin-modal__list {
  font-size: var(--font-size-13);
  color: var(--neutral-500);
  margin: var(--space-12) 0;
  padding-left: var(--space-16);
  list-style-type: disc;
}

.admin-modal__list li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
}

.admin-modal__list li::marker {
  color: var(--neutral-300);
  font-size: 10px;
}

.admin-modal__warning {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-600);
  color: #DC2626;
  margin: 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--neutral-100);
}


/* ── Admin Header Dropdown ──────────────────────── */
.admin-header__right {
  position: relative;
}

.admin-header__user {
  cursor: pointer;
  position: relative;
}

.admin-header__chevron {
  color: var(--neutral-400);
  transition: transform 0.2s ease;
}

.admin-header__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}

.admin-header__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.admin-header__dropdown-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
}

.admin-header__dropdown-avatar {
  width: 40px;
  height: 40px;
  background-color: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  flex-shrink: 0;
}

.admin-header__dropdown-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.admin-header__dropdown-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-header__dropdown-email {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-header__dropdown-divider {
  height: 1px;
  background-color: var(--neutral-100);
  margin: var(--space-8) 0;
}

.admin-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-10) var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--neutral-600);
  background: none;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-header__dropdown-item:hover {
  background-color: var(--neutral-50);
  color: var(--neutral-900);
}

.admin-header__dropdown-item svg {
  color: var(--neutral-400);
}

/* ── Admin Invoice Row ──────────────────────────── */
.admin-invoice-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--neutral-100);
}

.admin-invoice-row:last-child {
  border-bottom: none;
}

.admin-invoice-row__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-invoice-row__desc {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--neutral-900);
}

.admin-invoice-row__date {
  font-size: var(--font-size-12);
  color: var(--neutral-500);
}

.admin-invoice-row__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-direction: column;
}

.admin-invoice-row__amount {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  color: var(--neutral-900);
}


/* ══════════════════════════════════════════════════
   SOCIAL LOGIN BUTTONS
   ══════════════════════════════════════════════════ */

   .social-login {
    margin-top: var(--space-24);
}

.social-login__divider {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.social-login__divider::before,
.social-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--neutral-200);
}

.social-login__divider span {
    font-size: var(--font-size-14);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-login__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.social-login__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-8);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-600);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--neutral-200);
    background-color: var(--neutral-0);
    color: var(--neutral-700);
}

.social-login__btn:hover {
    background-color: var(--neutral-50);
    border-color: var(--neutral-300);
}

.social-login__btn:active {
    transform: scale(0.98);
}

.social-login__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.social-login__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Google - white background with colored logo */
.social-login__btn--google {
    background-color: var(--neutral-0);
    border-color: var(--neutral-200);
    color: var(--neutral-700);
}

.social-login__btn--google:hover {
    background-color: var(--neutral-50);
    border-color: var(--neutral-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Apple - black background */
.social-login__btn--apple {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.social-login__btn--apple:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.social-login__btn--apple .social-login__icon {
    color: #ffffff;
}

/* Facebook - blue background */
.social-login__btn--facebook {
    background-color: #1877F2;
    border-color: #1877F2;
    color: #ffffff;
}

.social-login__btn--facebook:hover {
    background-color: #166fe5;
    border-color: #166fe5;
}

/* Loading state */
.social-login__btn--loading {
    pointer-events: none;
}

.social-login__btn--loading span {
    opacity: 0.7;
}

.social-login__btn--loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: var(--space-8);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error message */
.social-login__error {
    margin-top: var(--space-12);
    padding: var(--space-12);
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-8);
    color: #DC2626;
    font-size: var(--font-size-14);
    text-align: center;
}

/* Responsive - horizontal layout on larger screens */
@media (min-width: 640px) {
    .social-login__buttons--horizontal {
        flex-direction: row;
    }

    .social-login__buttons--horizontal .social-login__btn {
        flex: 1;
    }

    .social-login__buttons--horizontal .social-login__btn span {
        display: none;
    }

    .social-login__buttons--horizontal .social-login__btn::after {
        content: none;
    }
}