@import "tailwindcss";

@utility direction-rtl {
  direction: rtl;
}

@utility direction-ltr {
  direction: ltr;
}

/* ─── Inter Font ─── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjQ.woff2") format("woff2");
}

/* ─── Theme — Warm Earth Enterprise Palette ─── */
/* Improved from original earth-tone palette (#65604E, #2D2F22, #DBD0B6, #0D1406, #14150C):
   - Consolidated 3 indistinguishable darks (1.02:1 contrast) into proper gradient
   - Added warm gold/amber brand color for CTAs (6:1+ contrast w/ white)
   - Widened tonal range; every pairing meets WCAG AA
   - Warm surfaces replace cold whites */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Brand: Warm Gold/Amber ── */
  --color-brand-50:  oklch(98% .008 80);
  --color-brand-100: oklch(95.5% .025 76);
  --color-brand-200: oklch(90% .055 72);
  --color-brand-300: oklch(82% .095 66);
  --color-brand-400: oklch(72% .13 60);
  --color-brand-500: oklch(62% .145 56);
  --color-brand-600: oklch(52% .145 52);
  --color-brand-700: oklch(44% .12 48);
  --color-brand-800: oklch(36% .095 45);
  --color-brand-900: oklch(28% .065 42);
  --color-brand-950: oklch(20% .035 40);

  /* ── Warm Surfaces ── */
  --color-surface:        oklch(98% .004 80);
  --color-surface-raised: oklch(99.5% .002 80);
}

/* ─── Base ─── */
@layer base {
  *,
  *::before,
  *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  turbo-frame {
    display: block;
  }

  /* Reserve scrollbar space to prevent horizontal layout shift
     when content grows past the viewport (e.g. accordion expand) */
  #main-content {
    scrollbar-gutter: stable;
  }
}

/* ─── Auth Form Components ─── */
@layer components {
  .auth-input {
    @apply block w-full rounded-xl border border-stone-300 bg-white px-4 py-3.5 text-sm text-stone-900
      shadow-sm shadow-stone-900/[.04]
      transition-all duration-200
      placeholder:text-stone-400
      hover:border-stone-400
      focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 focus:outline-none;
  }
  .auth-label {
    @apply block text-sm font-medium text-stone-700 mb-1.5;
  }
  .auth-btn-primary {
    @apply w-full flex justify-center items-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold text-white
      bg-brand-600 shadow-md shadow-brand-900/20
      transition-all duration-200
      hover:bg-brand-700 hover:shadow-lg hover:shadow-brand-900/25
      focus:outline-none focus:ring-4 focus:ring-brand-500/25
      active:scale-[.98]
      disabled:opacity-50 disabled:cursor-not-allowed
      cursor-pointer;
  }
  .auth-link {
    @apply text-sm font-medium text-brand-600 hover:text-brand-700 transition-colors;
  }

  /* ── Alerts ── */
  .auth-alert-error {
    @apply flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4;
  }
  .auth-alert-success {
    @apply flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4;
  }

  /* ── Checkbox ── */
  .auth-checkbox {
    @apply h-4 w-4 rounded border-stone-300 text-brand-600
      focus:ring-brand-500 focus:ring-offset-0 cursor-pointer;
  }

  /* ── Divider ── */
  .auth-divider {
    @apply relative mt-8;
  }

  /* ── Legal / fine-print text ── */
  .auth-legal-text {
    @apply text-xs text-center text-stone-400 pt-2 leading-relaxed;
  }

  /* ── Secondary button (outline) ── */
  .auth-btn-secondary {
    @apply w-full flex justify-center items-center gap-2 rounded-xl px-4 py-3.5 text-sm font-semibold
      text-stone-700 bg-white border border-stone-300
      shadow-sm shadow-stone-900/[.04]
      transition-all duration-200
      hover:bg-stone-50 hover:border-stone-400
      focus:outline-none focus:ring-4 focus:ring-stone-500/10
      active:scale-[.98]
      cursor-pointer;
  }

  /* ── Google OAuth button ── */
  .auth-btn-google {
    @apply w-full flex justify-center items-center gap-3 rounded-xl px-4 py-3.5 text-sm font-semibold
      text-stone-700 bg-white border border-stone-300
      shadow-sm shadow-stone-900/[.04]
      transition-all duration-200
      hover:bg-stone-50 hover:border-stone-400
      focus:outline-none focus:ring-4 focus:ring-stone-500/10
      active:scale-[.98]
      cursor-pointer;
  }

  /* ── Back link with arrow ── */
  .auth-back-link {
    @apply inline-flex items-center gap-1.5 text-sm font-medium text-stone-500 hover:text-stone-700 transition-colors;
  }

  /* ── Navigation ── */
  .nav-link {
    @apply px-3 py-2 rounded-xl text-sm font-medium text-stone-600
      hover:text-stone-900 hover:bg-stone-100
      transition-all duration-200;
  }
  .nav-link-active {
    @apply text-brand-700 bg-brand-50 hover:text-brand-700 hover:bg-brand-50;
  }
  .nav-link-mobile {
    @apply block px-3 py-2.5 rounded-xl text-sm font-medium text-stone-600
      hover:text-stone-900 hover:bg-stone-100
      transition-all duration-200;
  }
  .nav-link-mobile-active {
    @apply text-brand-700 bg-brand-50 hover:text-brand-700 hover:bg-brand-50;
  }

  /* ── Nav Dropdown ── */
  .nav-dropdown-panel {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: 14rem;
    border-radius: 0.75rem;
    background-color: var(--color-surface-raised);
    border: 1px solid oklch(87% .01 80 / 0.8);
    box-shadow: 0 10px 15px -3px oklch(28% .065 42 / 0.08),
                0 4px 6px -4px oklch(28% .065 42 / 0.04);
    z-index: 50;
    display: none;
    overflow: hidden;
  }
  .nav-dropdown-panel.open {
    display: block;
  }
  .nav-dropdown-item {
    @apply flex items-center gap-2.5 px-3 py-2 text-sm text-stone-700
      hover:bg-stone-50 transition-colors cursor-pointer;
  }

  /* ── Notification Badge ── */
  .notification-badge {
    @apply absolute -top-1 -right-1 flex items-center justify-center
      min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white
      bg-red-500 rounded-full leading-none;
  }

  /* ── Notification Dropdown ── */
  #main-content {
    transition: filter 0.15s ease-in-out;
  }

  .notification-content-blur {
    filter: blur(4px);
    pointer-events: none;
  }
  .notification-dropdown-panel {
    position: absolute;
    right: 0;
    margin-top: 0.75rem;
    width: 25rem;
    border-radius: 0.75rem;
    background-color: var(--color-surface-raised);
    border: 1px solid oklch(87% .01 80 / 0.8);
    box-shadow: 0 10px 15px -3px oklch(28% .065 42 / 0.08),
                0 4px 6px -4px oklch(28% .065 42 / 0.04);
    z-index: 50;
    display: none;
    overflow: hidden;
  }
  .notification-dropdown-panel.open {
    display: block;
  }
  .notification-dropdown-scroll {
    max-height: 24rem;
    overflow-y: auto;
  }
  .notification-dropdown-item {
    @apply flex items-center gap-2 px-3 py-2.5
      hover:bg-stone-50 transition-colors;
  }
  .notification-dropdown-tab {
    @apply px-2.5 py-1 text-xs font-medium rounded-lg
      text-stone-500 hover:text-stone-700 hover:bg-stone-100
      transition-colors cursor-pointer;
  }
  .notification-dropdown-tab-active {
    @apply bg-brand-50 text-brand-700;
  }

  /* ── Toast Notifications ── */
  .toast {
    @apply relative border rounded-2xl p-4
      shadow-lg shadow-stone-900/[.08]
      max-w-sm w-full overflow-hidden
      transform transition-all duration-300 ease-out;
  }
  .toast-enter {
    @apply translate-x-full opacity-0;
  }
  .toast-visible {
    @apply translate-x-0 opacity-100;
  }
  .toast-exit {
    @apply translate-x-full opacity-0;
  }
  .toast-progress {
    transform-origin: left;
    will-change: transform;
  }

  /* ── Contact Dropdown ── */
  .contact-dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    width: 11rem;
    border-radius: 0.75rem;
    background-color: var(--color-surface-raised);
    border: 1px solid oklch(87% .01 80 / 0.8);
    box-shadow: 0 10px 15px -3px oklch(28% .065 42 / 0.08),
                0 4px 6px -4px oklch(28% .065 42 / 0.04);
    z-index: 50;
    display: none;
    overflow: hidden;
    padding: 0.25rem 0;
  }
  .contact-dropdown-panel.open {
    display: block;
  }
  .contact-dropdown-item {
    @apply flex items-center gap-2 px-3 py-2 text-sm text-stone-700
      hover:bg-stone-50 transition-colors cursor-pointer;
  }

  /* ── Dashboard: Light Cards ── */
  .dash-card {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80 p-5
      shadow-sm shadow-stone-900/[.03];
  }
  .dash-content {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }
  .dash-stat-card {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80 p-5
      shadow-sm shadow-stone-900/[.03]
      flex flex-col justify-between;
  }
  .dash-stat-label {
    @apply text-xs font-semibold text-stone-500 uppercase tracking-wider;
  }
  .dash-stat-value {
    @apply mt-2 text-2xl font-bold text-stone-900;
  }
  .dash-action-card {
    @apply flex items-center gap-4 bg-surface-raised rounded-2xl border border-stone-200/80 p-4
      shadow-sm shadow-stone-900/[.03]
      hover:border-stone-300 hover:shadow-md hover:shadow-stone-900/[.06]
      transition-all duration-200;
  }
  .dash-feature-card {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80 p-5
      shadow-sm shadow-stone-900/[.03]
      hover:border-stone-300 hover:shadow-md hover:shadow-stone-900/[.06]
      transition-all duration-200;
  }

  /* ── Dashboard: Hero (dark header) ── */
  .dash-hero-grain {
    @apply absolute inset-0;
    opacity: 0.03;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 256 256%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E');
  }
  .dash-hero-content {
    @apply relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-12;
  }
  .dash-hero-date {
    @apply text-xs font-medium text-brand-400/80 uppercase tracking-wider mb-2;
  }
  .dash-hero-heading {
    @apply text-3xl sm:text-4xl font-bold text-white tracking-tight leading-tight;
  }
  .dash-hero-subtitle {
    @apply mt-2 text-sm text-white/40;
  }
  .dash-hero-stats {
    @apply grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4;
  }
  .dash-hero-card {
    @apply rounded-2xl backdrop-blur-sm p-5 transition-all duration-200;
    background-color: rgb(255 255 255 / 0.06);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
  }
  .dash-hero-card:hover {
    background-color: rgb(255 255 255 / 0.10);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
  }
  .dash-hero-label {
    @apply font-semibold text-white/40 uppercase tracking-wider;
    font-size: 11px;
  }
  .dash-hero-icon {
    @apply h-8 w-8 rounded-lg flex items-center justify-center transition-colors;
  }
  .dash-hero-value {
    @apply text-2xl font-bold text-white;
  }
  .dash-hero-hint {
    @apply mt-0.5 text-xs text-white/30;
  }

  /* ── Dashboard: KPI Cards ── */
  .dash-kpi-card {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80 p-4
      shadow-sm shadow-stone-900/[.03]
      hover:border-stone-300 hover:shadow-md hover:shadow-stone-900/[.06]
      transition-all duration-200;
  }
  .dash-kpi-label {
    @apply text-xs font-semibold text-stone-500 uppercase tracking-wider;
  }
  .dash-kpi-value {
    @apply text-2xl font-bold text-stone-900 tabular-nums;
  }
  .dash-kpi-badge {
    @apply text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded-md;
  }

  /* ── Dashboard: Alert Cards ── */
  .dash-alert-card {
    @apply flex items-center gap-3.5 p-4 rounded-2xl border
      transition-all duration-200;
  }
  .dash-alert-icon {
    @apply h-10 w-10 rounded-xl flex items-center justify-center shrink-0;
  }
  .dash-alert-red {
    @apply bg-red-50/80 border-red-200/60 hover:bg-red-50 hover:border-red-300/60;
  }
  .dash-alert-amber {
    @apply bg-amber-50/80 border-amber-200/60 hover:bg-amber-50 hover:border-amber-300/60;
  }
  .dash-alert-blue {
    @apply bg-blue-50/80 border-blue-200/60 hover:bg-blue-50 hover:border-blue-300/60;
  }

  /* ── Dashboard: Body Text (13px — between text-xs and text-sm) ── */
  .dash-text {
    font-size: 13px;
    line-height: 1.385;
  }

  /* ── Dashboard: Action Pills ── */
  .dash-action-pill {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full
      border transition-all duration-200;
    font-size: 13px;
    line-height: 1.385;
  }
  .dash-action-pill-red {
    @apply text-red-700 bg-red-50 border-red-200/60
      hover:bg-red-100 hover:border-red-300/60;
  }
  .dash-action-pill-amber {
    @apply text-amber-700 bg-amber-50 border-amber-200/60
      hover:bg-amber-100 hover:border-amber-300/60;
  }
  .dash-action-pill-blue {
    @apply text-blue-700 bg-blue-50 border-blue-200/60
      hover:bg-blue-100 hover:border-blue-300/60;
  }
  .dash-action-pill-violet {
    @apply text-violet-700 bg-violet-50 border-violet-200/60
      hover:bg-violet-100 hover:border-violet-300/60;
  }
  .dash-action-pill-stone {
    @apply text-stone-600 bg-stone-50 border-stone-200/60
      hover:bg-stone-100 hover:border-stone-300/60;
  }
  .dash-action-pill-brand {
    @apply text-brand-700 bg-brand-50 border-brand-200/60
      hover:bg-brand-100 hover:border-brand-300/60;
  }

  /* ── Dashboard: Quick Actions ── */
  .dash-quick-action {
    @apply flex items-center gap-3 p-3 rounded-xl border border-transparent
      transition-all duration-200;
  }
  .dash-quick-action-icon {
    @apply h-10 w-10 rounded-xl flex items-center justify-center
      transition-colors shrink-0;
  }

  /* ── App-Wide Components ── */

  /* Cards */
  .card {
    @apply bg-surface-raised rounded-2xl border border-stone-200
      shadow-md shadow-stone-900/[.06];
  }
  .card-header {
    @apply px-6 py-4 border-b border-stone-200/80 bg-stone-50/50;
  }
  .card-title {
    @apply text-sm font-semibold text-stone-900;
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5
      text-sm font-semibold text-white shadow-sm
      hover:bg-brand-700
      focus:outline-none focus:ring-4 focus:ring-brand-500/25
      transition-all duration-200 cursor-pointer;
  }
  .btn-secondary {
    @apply inline-flex items-center gap-1.5 rounded-xl border border-stone-300
      bg-surface-raised px-3 py-2 text-sm font-medium text-stone-700
      shadow-sm shadow-stone-900/[.04]
      hover:bg-stone-50 hover:border-stone-400
      transition-all duration-200 cursor-pointer;
  }
  .btn-danger {
    @apply inline-flex items-center gap-1.5 rounded-xl border border-stone-300
      bg-surface-raised px-3 py-2 text-sm font-medium text-red-800/70
      shadow-sm shadow-stone-900/[.04]
      hover:bg-red-50/60 hover:border-red-300/50 hover:text-red-800/90
      transition-all duration-200 cursor-pointer;
  }
  .btn-success {
    @apply inline-flex items-center gap-1.5 rounded-xl border border-stone-300
      bg-surface-raised px-3 py-2 text-sm font-medium text-green-600
      shadow-sm shadow-stone-900/[.04]
      hover:bg-green-50 hover:border-green-200
      transition-all duration-200 cursor-pointer;
  }

  /* Form Controls */
  .form-input {
    @apply block w-full rounded-xl border border-stone-300 bg-white px-4 py-3
      text-sm text-stone-900
      shadow-sm shadow-stone-900/[.04]
      transition-all duration-200
      placeholder:text-stone-400
      hover:border-stone-400
      focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 focus:outline-none;

    /* Date/time inputs: enhance calendar picker button */
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      border-radius: 4px;
      padding: 2px;
      opacity: 0.6;
      transition: opacity 0.15s;
    }
    &::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }
  }
  .form-select {
    @apply appearance-none block w-full rounded-xl border border-stone-300 bg-white
      px-4 py-3 pr-10
      text-sm text-stone-900
      shadow-sm shadow-stone-900/[.04]
      hover:border-stone-400
      focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 focus:outline-none
      transition-all duration-200 cursor-pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2378716c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
  }
  .form-label {
    @apply block text-sm font-medium text-stone-700 mb-1.5;
  }
  .form-hint {
    @apply text-stone-400 font-normal;
  }
  .form-checkbox {
    @apply h-[18px] w-[18px] rounded border-stone-300 text-brand-600
      shadow-sm shadow-stone-900/[.04]
      focus:ring-4 focus:ring-brand-500/15 focus:ring-offset-0
      cursor-pointer transition-colors duration-200;
  }
  /* ── Setting Switch: status chip for sub-options ── */
  .setting-switch {
    @apply inline-flex items-center gap-1.5 rounded-full cursor-pointer select-none
      transition-all duration-200;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid oklch(87% .01 80);
    background: oklch(97% .003 80);
    color: oklch(55% .02 80);

    &::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      background: oklch(78% .01 80);
      transition: all 0.2s ease;
    }

    &::after {
      content: 'Off';
    }
  }
  .peer:checked ~ .setting-switch {
    border-color: oklch(82% .08 155);
    background: oklch(96% .015 155);
    color: oklch(40% .08 155);
  }
  .peer:checked ~ .setting-switch::before {
    background: oklch(58% .14 155);
  }
  .peer:checked ~ .setting-switch::after {
    content: 'On';
  }
  .peer:focus-visible ~ .setting-switch {
    @apply ring-2 ring-brand-500/20 ring-offset-1;
  }
  .form-toggle-primary {
    @apply relative w-11 h-6 bg-stone-300 rounded-full cursor-pointer
      transition-colors duration-200
      peer-checked:bg-green-500
      peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500/20 peer-focus-visible:ring-offset-1
      after:content-[''] after:absolute after:top-0.5 after:start-0.5
      after:bg-white after:rounded-full after:h-5 after:w-5
      after:shadow-sm after:transition-all after:duration-200
      peer-checked:after:translate-x-5;
  }
  .search-input {
    @apply block w-full rounded-xl border border-stone-300 bg-white pl-10 pr-4 py-2.5
      text-sm text-stone-900
      placeholder:text-stone-400
      shadow-sm shadow-stone-900/[.04]
      hover:border-stone-400
      focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 focus:outline-none
      transition-all duration-200;
  }

  /* Filter Panel */
  .filter-panel {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-4 mb-6;
  }

  /* Breadcrumbs */
  .breadcrumb {
    @apply flex items-center gap-2 text-sm text-stone-500;
  }
  .breadcrumb-link {
    @apply hover:text-stone-700 transition-colors cursor-pointer;
  }
  .breadcrumb-current {
    @apply text-stone-900 font-medium;
  }

  /* Entity Cards (clickable list items) */
  .entity-card {
    @apply block bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-5
      hover:shadow-md hover:shadow-stone-900/[.06] hover:border-stone-300
      transition-all duration-200;
  }

  /* Empty State */
  .empty-state {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-12 text-center;
  }

  /* Stat Cards */
  .stat-card {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-4;
  }
  .stat-label {
    @apply text-xs font-medium text-stone-500 uppercase tracking-wider;
  }
  .stat-value {
    @apply mt-1 text-lg font-semibold text-stone-900;
  }

  /* Detail Lists */
  .detail-label {
    @apply text-xs font-medium text-stone-500 uppercase tracking-wider;
  }
  .detail-value {
    @apply mt-0.5 text-sm text-stone-900;
  }

  /* Avatars */
  .avatar {
    @apply h-14 w-14 rounded-full bg-brand-100 flex items-center justify-center;
  }
  .avatar-sm {
    @apply h-8 w-8 rounded-full bg-stone-100 flex items-center justify-center;
  }
  .avatar-text {
    @apply text-xs font-medium text-stone-600;
  }
  .avatar-text-lg {
    @apply text-lg font-bold text-brand-700;
  }

  /* Page Typography */
  .page-title {
    @apply text-2xl font-bold text-stone-900 tracking-tight;
  }
  .page-title-sm {
    @apply text-xl font-bold text-stone-900;
  }
  .page-subtitle {
    @apply mt-1 text-sm text-stone-500;
  }
  .section-title {
    @apply text-sm font-semibold text-stone-900;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  /* Loading Spinner */
  .loading-spinner {
    @apply h-6 w-6 rounded-full border-2 border-stone-200;
    border-top-color: var(--color-brand-600);
    animation: spin 0.6s linear infinite;
  }

  /* ── App Sidebar ── */
  /* ── Sidebar Dark Theme ── */
  .sidebar-icon {
    @apply w-7 h-7 rounded-lg flex items-center justify-center shrink-0;
  }
  .sidebar-link-dark {
    @apply flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium
      text-white/60 hover:text-white hover:bg-white/10
      transition-all duration-200;
  }
  .sidebar-link-dark-active {
    @apply text-white bg-white/15 hover:text-white hover:bg-white/15;
  }
  .sidebar-section-btn-dark {
    @apply flex items-center justify-between w-full px-3 py-2 rounded-xl text-sm font-medium
      text-white/60 hover:text-white hover:bg-white/10
      transition-all duration-200 cursor-pointer;
  }
  .sidebar-section-btn-dark-active {
    @apply text-white;
  }
  .sidebar-child-link-dark {
    @apply flex items-center gap-3 pl-9 pr-3 py-1.5 rounded-xl text-sm font-medium
      text-white/40 hover:text-white hover:bg-white/10
      transition-all duration-200;
  }
  .sidebar-child-link-dark-active {
    @apply text-white bg-white/15 hover:text-white hover:bg-white/15;
  }
  /* ── Settings: Navigation ── */
  .settings-nav {
    @apply flex gap-1 mb-8 border-b border-stone-200
      -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8;
  }
  .settings-nav-item {
    @apply px-3 py-2.5 text-sm font-medium text-stone-500 whitespace-nowrap
      border-b-2 border-transparent -mb-px
      hover:text-stone-700 hover:border-stone-300 transition-colors;
  }
  .settings-nav-item-active {
    @apply text-brand-700 border-brand-600 hover:text-brand-700 hover:border-brand-600;
  }

  /* ── Settings: Card Structure ── */
  .settings-card-header {
    @apply px-6 py-5 border-b border-stone-100;
  }
  .settings-card-title {
    @apply text-base font-semibold text-stone-900;
  }
  .settings-card-hint {
    @apply mt-0.5 text-sm text-stone-500;
  }
  .feature-toggle-header {
    @apply px-6 py-5 flex items-center justify-between gap-4;
  }
  .settings-save-footer {
    @apply sticky bottom-0 py-3 bg-surface/95 backdrop-blur-sm border-t border-stone-200 z-10;
  }

  /* ── Settings: Content Rows ── */
  .settings-row {
    @apply px-5 py-4 flex items-start gap-3;
  }
  .settings-row-icon {
    @apply h-9 w-9 rounded-lg flex items-center justify-center shrink-0 hidden sm:flex;
  }
  .settings-row-body {
    @apply flex-1 min-w-0;
  }
  .settings-row-label {
    @apply text-sm font-medium text-stone-900;
  }
  .settings-row-hint {
    @apply text-xs text-stone-500 mt-0.5 hidden sm:block;
  }
  .settings-accordion-trigger {
    @apply px-5 py-4 flex items-center justify-between cursor-pointer select-none
      list-none bg-stone-50/30 border-b border-stone-100
      hover:bg-stone-100/80 transition-colors;
    &::-webkit-details-marker { display: none; }
  }
  .settings-accordion-content {
    @apply px-12 py-5;
  }
  .settings-card-footer {
    @apply px-6 py-4 bg-stone-50/50 border-t border-stone-100 flex justify-end;
  }
  .settings-remove-btn {
    @apply h-7 w-7 rounded-md flex items-center justify-center
      text-stone-400 hover:text-red-500 hover:bg-red-50
      transition-colors cursor-pointer shrink-0;
  }
  .settings-add-link {
    @apply text-xs font-medium text-brand-600 hover:text-brand-700 transition-colors cursor-pointer;
  }
  .settings-tier-card {
    @apply px-4 py-3.5 flex items-start gap-4 rounded-xl border border-stone-200 bg-stone-50/30;
  }
  .settings-compact-input {
    @apply w-12 text-center text-xs text-stone-900 font-medium
      border-0 bg-transparent focus:ring-0 focus:outline-none py-2 px-2
      appearance-none;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button { appearance: none; }
    -moz-appearance: textfield;
  }
  .settings-duration-wrapper {
    @apply inline-flex items-stretch rounded-lg border border-stone-300 bg-white
      shadow-sm shadow-stone-900/[.04] overflow-hidden
      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-500/10
      transition-all shrink-0;
  }
  .settings-duration-unit {
    @apply w-20 text-xs text-stone-500 font-medium border-0 bg-transparent
      focus:ring-0 focus:outline-none py-2 pl-2.5 pr-6
      cursor-pointer hover:text-stone-900 transition-colors appearance-none
      bg-[length:1rem_1rem] bg-[right_0.25rem_center] bg-no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%2378716c%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.23%207.21a.75.75%200%20011.06.02L10%2011.168l3.71-3.938a.75.75%200%20111.08%201.04l-4.25%204.5a.75.75%200%2001-1.08%200l-4.25-4.5a.75.75%200%2001.02-1.06z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  }

  .sidebar-account-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0.75rem;
    right: 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    background-color: var(--color-surface-raised);
    border: 1px solid oklch(87% .01 80 / 0.8);
    box-shadow: 0 -4px 12px -2px oklch(28% .065 42 / 0.08),
                0 -2px 4px -2px oklch(28% .065 42 / 0.04);
    z-index: 60;
    display: none;
    overflow: hidden;
  }
  .sidebar-account-dropdown.open {
    display: block;
  }
  .sidebar-dropdown-item {
    @apply flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-stone-600
      hover:text-stone-900 hover:bg-stone-50 transition-colors cursor-pointer;
  }

  /* ── Admin Panel ── */
  .admin-impersonation-banner {
    @apply bg-amber-50 border-b border-amber-200 px-4 py-2
      flex items-center justify-between;
  }

  .admin-sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium
      text-white/50 hover:text-white hover:bg-white/8
      transition-all duration-200;
  }
  .admin-sidebar-link-active {
    @apply text-white bg-white/10 hover:bg-white/12;
  }

  /* ── Tabs ── */
  .tab-link {
    @apply py-2 px-4 text-sm font-medium text-stone-500 rounded-xl
      hover:text-stone-800 hover:bg-stone-200/60
      transition-all duration-200 cursor-pointer;
  }
  .tab-link.tab-link-active {
    @apply bg-stone-800 text-white hover:text-white hover:bg-stone-900
      shadow-sm;
  }

  /* ── Tag Chips ── */
  .tag-chip {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-lg
      text-xs font-medium text-white;
  }

  /* ── Client Show: Elevated Header ── */
  .client-header {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-6 sm:p-8;
  }

  /* ── Accent Stat Cards (colored left border) ── */
  .stat-card-accent {
    @apply bg-surface-raised rounded-2xl border border-stone-200/80
      shadow-sm shadow-stone-900/[.04] p-4 border-l-[3px];
  }

  /* ── Resource Hero: dark glass stat cards ── */
  .resource-hero-stat {
    @apply rounded-2xl backdrop-blur-sm p-4 transition-all duration-200;
    background-color: rgb(255 255 255 / 0.06);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
  }
  .resource-hero-stat:hover {
    background-color: rgb(255 255 255 / 0.10);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
  }
  .resource-hero-stat-label {
    @apply font-semibold uppercase tracking-wider;
    font-size: 11px;
    color: rgb(255 255 255 / 0.45);
  }
  .resource-hero-stat-value {
    @apply text-xl font-bold text-white;
  }
  .resource-hero-stat-hint {
    @apply mt-0.5 text-xs;
    color: rgb(255 255 255 / 0.30);
  }

  /* ── Skeleton Loading ── */
  .skeleton {
    @apply rounded-lg bg-stone-200/60;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
  .skeleton-text { @apply h-4 w-3/4; }
  .skeleton-text-sm { @apply h-3 w-1/2; }
  .skeleton-circle { @apply rounded-full; }

  /* ── Enhanced Timeline ── */
  .timeline-dot {
    @apply h-8 w-8 rounded-full flex items-center justify-center
      ring-4 ring-surface shrink-0;
  }

  /* ── Client Quick Actions ── */
  .client-quick-action {
    @apply flex items-center gap-3 p-3 rounded-xl border border-transparent
      transition-all duration-200;
  }
  .client-quick-action-icon {
    @apply h-10 w-10 rounded-xl flex items-center justify-center
      transition-colors shrink-0;
  }

  /* ── Pagination ── */
  .pagination {
    @apply flex items-center justify-center gap-1 mt-6;
  }
  .pagination a, .pagination span {
    @apply inline-flex items-center justify-center h-9 min-w-[2.25rem] px-3 rounded-xl
      text-sm font-medium transition-all duration-200;
  }
  .pagination a {
    @apply text-stone-600 hover:bg-stone-100 hover:text-stone-900;
  }
  .pagination .current {
    @apply bg-brand-600 text-white shadow-sm;
  }
  .pagination .disabled {
    @apply text-stone-300 cursor-default;
  }
  .pagination .gap {
    @apply text-stone-400;
  }
  .pagination-sm .pagination {
    @apply mt-0 gap-0.5;
  }
  .pagination-sm .pagination a,
  .pagination-sm .pagination span {
    @apply h-7 min-w-[1.75rem] px-2 text-xs rounded-lg;
  }

  /* ── Tab Count Badge ── */
  .tab-count {
    @apply ml-1.5 inline-flex items-center justify-center h-5 min-w-[1.25rem] px-1.5
      rounded-full text-[11px] font-semibold bg-stone-100 text-stone-500;
  }
  .tab-link-active .tab-count {
    @apply bg-white/20 text-white;
  }

  /* ── Detail Row with Icon ── */
  .detail-row {
    @apply flex items-start gap-3 py-2.5;
  }
  .detail-icon {
    @apply h-8 w-8 rounded-lg bg-stone-100 flex items-center justify-center
      shrink-0 mt-0.5;
  }

  /* ── Portal Sidebar (Desktop) ── */
  .portal-sidebar-link {
    @apply flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-[13px] font-medium text-stone-500
      hover:text-stone-900 hover:bg-stone-100
      transition-all duration-200;
  }
  .portal-sidebar-link-active {
    @apply text-brand-700 bg-brand-50/80 hover:text-brand-700 hover:bg-brand-50/80;
  }
  .portal-sidebar-icon {
    @apply h-6 w-6 rounded-md flex items-center justify-center shrink-0;
  }

  /* ── Portal Bottom Nav (Mobile) ── */
  .portal-bottom-link {
    @apply flex-1 flex flex-col items-center justify-center gap-0.5
      text-[10px] font-medium text-stone-400
      transition-colors duration-200;
  }
  .portal-bottom-link-active {
    @apply text-brand-600;
  }

  /* ── Portal Badges ── */
  .portal-badge {
    @apply inline-flex items-center justify-center min-w-[16px] h-[16px] px-0.5
      rounded-full text-[9px] font-bold leading-none;
  }
  .portal-badge-amber { @apply bg-amber-100 text-amber-700; }
  .portal-badge-blue { @apply bg-blue-100 text-blue-700; }
  .portal-badge-brand { @apply bg-brand-100 text-brand-700; }

  /* ── Portal: Layout ── */
  .portal-container {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
  }

  /* ── Portal: Page Headers ── */
  .portal-page-header {
    @apply flex items-center justify-between mb-6;
  }
  .portal-page-icon {
    @apply h-12 w-12 rounded-xl flex items-center justify-center shrink-0;
  }
  .portal-page-title {
    @apply text-base font-semibold text-stone-900;
  }
  .portal-page-subtitle {
    @apply mt-0.5 text-sm text-stone-500;
  }
  .portal-header-action {
    @apply inline-flex items-center gap-1.5 text-[11px] font-semibold
      text-brand-600 hover:text-brand-700 transition-colors shrink-0;
  }
  .portal-back-link {
    @apply inline-flex items-center gap-1.5 text-xs font-medium
      text-stone-400 hover:text-stone-600 transition-colors shrink-0;
  }

  /* ── Portal: Cards ── */
  .portal-card {
    @apply rounded-xl border border-stone-200/70 bg-surface-raised
      shadow-sm shadow-stone-900/[.03] overflow-hidden mb-4;
  }
  .portal-card-header {
    @apply flex items-center justify-between px-4 py-2.5 border-b border-stone-100;
  }
  .portal-card-title {
    @apply text-[11px] font-bold text-stone-500 uppercase tracking-wider;
  }
  .portal-card-hint {
    @apply text-[10px] text-stone-400 mt-0.5;
  }
  .portal-card-count {
    @apply text-[10px] font-medium text-stone-400 shrink-0;
  }
  .portal-card-footer {
    @apply border-t border-stone-100 px-4 py-2.5 flex items-center justify-between;
  }

  /* ── Portal: Table Card (no shadow, tinted header) ── */
  .portal-table-card {
    @apply rounded-xl border border-stone-200/70 overflow-hidden mb-4;
  }
  .portal-table-header {
    @apply flex items-center justify-between px-4 py-2.5 bg-stone-50/80
      border-b border-stone-100;
  }

  /* ── Portal: Section Labels ── */
  .portal-section-label {
    @apply text-[9px] font-bold uppercase tracking-widest;
  }

  /* ── Portal: Inline Banners ── */
  .portal-banner {
    @apply rounded-xl px-4 py-3 mb-4;
  }
  .portal-banner-amber {
    @apply bg-amber-50 border border-amber-200;
  }
  .portal-banner-emerald {
    @apply bg-emerald-50 border border-emerald-200;
  }
  .portal-banner-rose {
    @apply bg-rose-50 border border-rose-200;
  }

  /* ── Portal: Status Badges ── */
  .portal-status-badge {
    @apply inline-flex items-center gap-1 text-[10px] font-semibold
      px-2 py-0.5 rounded-full shrink-0;
  }

  /* ── Portal: Links ── */
  .portal-footer-link {
    @apply text-[11px] font-semibold text-brand-600 hover:text-brand-700
      transition-colors;
  }
  .portal-footer-link-secondary {
    @apply text-[11px] font-medium text-brand-600 hover:text-brand-700
      transition-colors;
  }
  .portal-danger-link {
    @apply text-[10px] text-rose-600 hover:text-rose-700 font-medium
      transition-colors cursor-pointer;
  }
  .portal-view-all-link {
    @apply flex items-center justify-center gap-1 w-full text-[10px] font-medium
      text-stone-400 hover:text-stone-600 py-0.5 transition-colors;
  }

  /* ── Portal: Empty States ── */
  .portal-empty-state {
    @apply px-4 py-12 text-center;
  }
  .portal-empty-icon {
    @apply h-10 w-10 rounded-lg bg-stone-100 flex items-center justify-center
      mx-auto mb-3;
  }
  .portal-empty-title {
    @apply text-xs font-semibold text-stone-700 mb-1;
  }
  .portal-empty-text {
    @apply text-[11px] text-stone-400;
  }

  /* ── Portal: Stats Row ── */
  .portal-stats-grid {
    @apply grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4;
  }
  .portal-stat {
    @apply rounded-xl border border-stone-200/70 bg-surface-raised
      shadow-sm shadow-stone-900/[.03] px-4 py-3 text-center;
  }
  .portal-stat-value {
    @apply text-lg font-bold;
  }
  .portal-stat-label {
    @apply text-[10px] text-stone-400 mt-0.5;
  }

  /* ── Portal: Check Indicator ── */
  .portal-check {
    @apply h-4 w-4 rounded-full bg-emerald-100 flex items-center justify-center shrink-0;
  }
  .portal-circle {
    @apply h-4 w-4 rounded-full shrink-0;
  }

  /* ── Portal: Form Elements ── */
  .portal-form-label {
    @apply text-[11px] font-medium text-stone-600 mb-1 block;
  }
  .portal-submit-btn {
    @apply inline-flex items-center gap-1.5 text-xs font-semibold text-white
      bg-brand-600 hover:bg-brand-700 px-4 py-2 rounded-lg
      transition-colors cursor-pointer;
  }
  .portal-submit-btn-dark {
    @apply inline-flex items-center gap-1.5 text-[11px] font-semibold text-white
      bg-stone-800 hover:bg-stone-900 px-3 py-1.5 rounded-lg
      transition-colors cursor-pointer;
  }
  .portal-tip-btn {
    @apply inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg
      border border-stone-200 bg-surface-raised text-stone-600
      hover:border-stone-300 transition-colors cursor-pointer;
  }

  /* ── Portal: Secondary Button (status page back links) ── */
  .portal-secondary-btn {
    @apply inline-flex items-center gap-1.5 text-xs font-semibold text-stone-600
      hover:text-stone-900 bg-surface-raised border border-stone-200
      hover:border-stone-300 px-4 py-2 rounded-lg transition-colors;
  }

  /* ── Portal: Sidebar brand link (Book Appointment) ── */
  .portal-sidebar-link-brand {
    @apply text-brand-600 hover:text-brand-700 hover:bg-brand-50;
  }

  /* ── Portal: Status Pages (centered error/info screens) ── */
  .portal-status-page {
    @apply max-w-md mx-auto px-4 py-24 text-center;
  }
  .portal-status-icon {
    @apply inline-flex items-center justify-center w-14 h-14 rounded-xl mb-5;
  }
  .portal-status-title {
    @apply text-base font-semibold text-stone-900;
  }
  .portal-status-text {
    @apply mt-2 text-sm text-stone-500;
  }
}

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

@keyframes toast-progress-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes spotlight-pulse {
  0% { box-shadow: 0 0 0 0 oklch(80% .08 80 / .6); }
  40% { box-shadow: 0 0 0 6px oklch(80% .08 80 / .25); }
  100% { box-shadow: 0 0 0 0 oklch(80% .08 80 / 0); }
}

.spotlight-active {
  animation: spotlight-pulse 1.2s ease-out;
}

/* ─── Accessibility: respect reduced motion preferences ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Clients Hero: warm brand gradient header ─── */
.clients-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg,
    oklch(46% .14 54) 0%,
    oklch(40% .12 50) 45%,
    oklch(34% .09 46) 100%
  );
}
.clients-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 65%;
  height: 180%;
  background: radial-gradient(ellipse, oklch(54% .16 58 / 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.clients-hero-content {
  position: relative;
  z-index: 10;
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .clients-hero-content { padding: 2rem; }
}

/* ─── Dashboard Hero: deep brand/indigo gradient header ─── */
.dash-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    oklch(22% .04 270) 0%,
    oklch(19% .035 260) 35%,
    oklch(17% .03 255) 70%,
    oklch(20% .045 275) 100%
  );
}

/* ─── Sidebar & Topbar: dark warm gradient (matches dash-hero) ─── */
.sidebar-dark {
  background: linear-gradient(180deg,
    oklch(16% .012 45) 0%,
    oklch(14% .01 55) 50%,
    oklch(12% .008 40) 100%
  );
}
.topbar-dark {
  background: linear-gradient(90deg,
    oklch(16% .012 45) 0%,
    oklch(14% .01 55) 100%
  );
}
.main-column-dark {
  background: oklch(14% .01 55);
}

/* ─── Resource Hero: dark teal gradient for resource index pages ─── */
.resource-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    oklch(24% .04 210) 0%,
    oklch(21% .035 200) 40%,
    oklch(19% .03 195) 75%,
    oklch(22% .045 215) 100%
  );
}

/* ─── Auth panel: dark warm gradient ─── */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.auth-panel-bg {
  background: linear-gradient(160deg,
    oklch(16% .012 45) 0%,
    oklch(14% .01 55) 35%,
    oklch(12% .008 40) 70%,
    oklch(15% .015 60) 100%
  );
}

/* Vignette — darkens edges/corners of the branding panel */
.auth-panel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at 40% 45%,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.25) 75%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ─── Testimonial Carousel ─── */
/* All slides are always absolute-positioned. Transitions are pure cross-fades. */
.testimonial-slide {
  position: absolute;
  inset: 0;
  padding: inherit;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.testimonial-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.testimonial-above {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
.testimonial-below {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.testimonial-no-transition {
  transition: none !important;
}

/* Dot indicators */
.testimonial-dot-active {
  width: 1.5rem;
  background-color: oklch(72% .13 60); /* brand-400 */
}
.testimonial-dot-inactive {
  width: 0.375rem;
  background-color: rgba(255, 255, 255, 0.2);
}

/* ─── Trix Editor ─── */
trix-editor {
  @apply block w-full rounded-xl border border-stone-300 bg-white px-4 py-3 text-sm text-stone-900
    shadow-sm shadow-stone-900/[.04]
    transition-all duration-200
    hover:border-stone-400
    focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 focus:outline-none;
  min-height: 150px;
}

trix-toolbar {
  @apply border border-b-0 border-stone-300 rounded-t-xl bg-stone-50 px-2 py-1;
}

trix-toolbar .trix-button-group {
  @apply border border-stone-200 rounded-md overflow-hidden;
  margin-bottom: 0;
}

trix-toolbar .trix-button {
  @apply border-stone-200 bg-white text-stone-700;
}

trix-toolbar .trix-button:hover {
  @apply bg-stone-100;
}

trix-toolbar .trix-button.trix-active {
  @apply bg-brand-50 text-brand-700;
}

trix-editor + trix-toolbar {
  @apply rounded-t-xl;
}

/* ─── Editor Top Bar ─── */
.editor-top-bar {
  background-color: #1e1e2e;
  border-bottom: 1px solid #3a3a4e;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: 48px;
  flex-shrink: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.editor-top-bar .bar-back {
  color: #9999aa;
  transition: color 0.15s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.editor-top-bar .bar-back:hover {
  color: #e4e4ef;
}

.editor-top-bar .bar-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.editor-top-bar .bar-field label {
  font-size: 10px;
  color: #6b6b7e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.editor-top-bar input[type="text"],
.editor-top-bar input[type="date"],
.editor-top-bar input[type="datetime-local"],
.editor-top-bar select,
.editor-top-bar textarea {
  background-color: #2a2a3e;
  border: 1px solid #4a4a5e;
  border-radius: 4px;
  color: #e4e4ef;
  font-size: 13px;
  padding: 5px 10px;
  height: 32px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-top-bar input[type="text"]:focus,
.editor-top-bar input[type="date"]:focus,
.editor-top-bar input[type="datetime-local"]:focus,
.editor-top-bar select:focus,
.editor-top-bar textarea:focus {
  border-color: oklch(50% .18 250);
  box-shadow: 0 0 0 2px oklch(50% .18 250 / 0.15);
  outline: none;
}

.editor-top-bar select option {
  background-color: #2a2a3e;
  color: #e4e4ef;
}

.editor-top-bar .bar-separator {
  width: 1px;
  height: 28px;
  background-color: #3a3a4e;
  flex-shrink: 0;
}

.editor-top-bar .bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.editor-top-bar .btn-save {
  background-color: oklch(50% .18 250);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.editor-top-bar .btn-save:hover {
  background-color: oklch(58% .16 250);
}

.editor-top-bar .btn-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9999aa;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid #3a3a4e;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.editor-top-bar .btn-preview:hover {
  color: #e4e4ef;
  border-color: #6b6b7e;
}

.editor-top-bar .bar-title-input {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  color: #e4e4ef;
  font-size: 15px;
  font-weight: 600;
  padding: 5px 10px;
  height: 34px;
  width: auto;
  min-width: 120px;
  max-width: 300px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.editor-top-bar .bar-title-input:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: #3a3a4e !important;
}

.editor-top-bar .bar-title-input:focus {
  background-color: #2a2a3e !important;
  border-color: oklch(50% .18 250) !important;
  box-shadow: 0 0 0 2px oklch(50% .18 250 / 0.15);
  outline: none;
}

.editor-top-bar .bar-title-input::placeholder {
  color: #6b6b7e;
  font-weight: 400;
}

.editor-top-bar .bar-select {
  max-width: 160px;
  min-width: 100px;
  font-size: 12px;
  padding: 4px 8px;
  height: 28px;
  cursor: pointer;
}

.editor-top-bar .bar-date-input {
  width: 130px;
  font-size: 12px;
  padding: 4px 8px;
  height: 28px;
}

/* Date input calendar icon color for dark theme */
.editor-top-bar input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ─── Editor Toolbar (undo/redo, zoom, devices, etc.) ─── */
.editor-toolbar {
  background-color: #252536;
  border-bottom: 1px solid #3a3a4e;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 48px 4px 12px;
  height: 40px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.editor-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9999aa;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.editor-toolbar button:hover {
  color: #e4e4ef;
  background-color: rgba(255, 255, 255, 0.06);
}

.editor-toolbar button.active {
  color: oklch(58% .16 250);
  background-color: oklch(50% .18 250 / 0.12);
}

.editor-toolbar button:disabled {
  color: #4a4a5e;
  cursor: not-allowed;
}

.editor-toolbar button:disabled:hover {
  background: transparent;
  color: #4a4a5e;
}

.editor-toolbar .toolbar-separator {
  width: 1px;
  height: 20px;
  background-color: #3a3a4e;
  margin: 0 12px;
  flex-shrink: 0;
}

.editor-toolbar .toolbar-zoom-display {
  color: #9999aa;
  font-size: 11px;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
  user-select: none;
  letter-spacing: 0.02em;
}

.editor-toolbar .toolbar-label {
  color: #6b6b7e;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
  user-select: none;
}

/* ─── Preview Modal ─── */
.editor-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.editor-preview-modal {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  animation: preview-slide-in 0.2s ease-out;
}

@keyframes preview-slide-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.editor-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.editor-preview-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.editor-preview-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.editor-preview-close:hover {
  color: #1f2937;
  background-color: #e5e7eb;
}

.editor-preview-body {
  background-color: #e5e7eb;
  padding: 32px;
  min-height: 400px;
  display: flex;
  justify-content: center;
}

.editor-preview-page {
  background-color: #ffffff;
  width: 210mm;
  min-height: 297mm;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.editor-preview-page iframe {
  width: 100%;
  border: none;
  display: block;
}

/* ─── Dates Dropdown ─── */
.dates-dropdown {
  position: relative;
}

.dates-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9999aa;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid #4a4a5e;
  border-radius: 4px;
  background-color: #2a2a3e;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  height: 32px;
}

.dates-dropdown-trigger:hover {
  color: #e4e4ef;
  border-color: #6b6b7e;
}

.dates-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: #252536;
  border: 1px solid #3a3a4e;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 12px;
  z-index: 50;
  display: none;
  min-width: 280px;
}

.dates-dropdown-panel.open {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.dates-dropdown-panel .bar-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dates-dropdown-panel .bar-field select,
.dates-dropdown-panel .bar-field input {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Error Banner (for full-screen editor) ─── */
.editor-error-banner {
  background-color: #450a0a;
  border-bottom: 1px solid #7f1d1d;
  color: #fecaca;
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.editor-error-banner strong {
  color: #fca5a5;
}

.editor-error-banner ul {
  margin: 2px 0 0 16px;
  list-style: disc;
  font-size: 12px;
}

/* ─── Prose (rendered rich text) ─── */
.prose h1 { @apply text-xl font-bold text-stone-900 mb-3; }
.prose h2 { @apply text-lg font-semibold text-stone-900 mb-2; }
.prose p { @apply mb-3 leading-relaxed; }
.prose ul { @apply list-disc list-inside mb-3; }
.prose ol { @apply list-decimal list-inside mb-3; }
.prose li { @apply mb-1; }
.prose blockquote { @apply border-l-4 border-stone-300 pl-4 italic text-stone-600 mb-3; }
.prose strong { @apply font-semibold; }
.prose a { @apply text-brand-600 underline; }