/* ============================================================
   Tawala Design Tokens — Stripe palette (Perfex consumer copy)
   Source of truth: /var/www/tawala-admin/src/app/globals.css
   Stripe-purple primary, cyan accent, dark-navy ink.
   Variables only — safe on top of legacy Bootstrap pages.
   ============================================================ */

:root {
  /* Brand primitives */
  --tw-purple-50:  #F4F2FF;
  --tw-purple-100: #E1E8F2;
  --tw-purple-200: #C9BFFC;
  --tw-purple-300: #A99CFA;
  --tw-purple-400: #2E5285;
  --tw-purple-500: #1A3C6E;
  --tw-purple-600: #13294F;
  --tw-purple-700: #13294F;
  --tw-purple-800: #3D3A93;
  --tw-purple-900: #1A1F36;

  --tw-cyan-50:    #FFF7E8;
  --tw-cyan-100:   #B3E9FF;
  --tw-cyan-200:   #7AD8FF;
  --tw-cyan-300:   #33C2FF;
  --tw-cyan-400:   #F5A623;
  --tw-cyan-500:   #D9881A;
  --tw-cyan-600:   #B26C12;

  --tw-green-500:  #2A9968;
  --tw-amber-500:  #DDAE13;
  --tw-red-500:    #DF4F32;

  --tw-slate-50:   #F6F9FC;
  --tw-slate-100:  #F4F6FA;
  --tw-slate-150:  #ECEFF5;
  --tw-slate-200:  #E3E8EE;
  --tw-slate-300:  #C8D2DC;
  --tw-slate-400:  #8898AA;
  --tw-slate-500:  #6B7C93;
  --tw-slate-600:  #425466;
  --tw-slate-700:  #1F3145;
  --tw-slate-900:  #0A2540;

  /* Semantic */
  --tw-bg:               #FFFFFF;
  --tw-bg-subtle:        #F6F9FC;
  --tw-bg-muted:         #ECEFF5;
  --tw-bg-inverse:       #0A2540;
  --tw-surface:          #FFFFFF;
  --tw-surface-raised:   #FFFFFF;
  --tw-surface-sunken:   #F6F9FC;
  --tw-surface-hover:    #F4F6FA;
  --tw-surface-active:   #ECEFF5;

  --tw-border:           #E3E8EE;
  --tw-border-strong:    #C8D2DC;
  --tw-border-subtle:    #ECEFF5;

  --tw-text:             #0A2540;
  --tw-text-muted:       #425466;
  --tw-text-subtle:      #8898AA;
  --tw-text-on-primary:  #FFFFFF;
  --tw-text-link:        #1A3C6E;

  --tw-primary:          #1A3C6E;
  --tw-primary-hover:    #13294F;
  --tw-primary-active:   #13294F;
  --tw-primary-soft:     #E1E8F2;
  --tw-primary-soft-fg:  #13294F;

  --tw-accent:           #F5A623;
  --tw-accent-hover:     #D9881A;
  --tw-accent-soft:      #FFF7E8;
  --tw-accent-soft-fg:   #B26C12;

  --tw-success:          #2A9968;
  --tw-success-soft:     #E8F7EF;
  --tw-success-soft-fg:  #1F7B53;

  --tw-warning:          #DDAE13;
  --tw-warning-soft:     #FFF8E1;
  --tw-warning-soft-fg:  #A88500;

  --tw-danger:           #DF4F32;
  --tw-danger-soft:      #FFEAE6;
  --tw-danger-soft-fg:   #B33A20;

  --tw-focus-ring:       #1A3C6E;
  --tw-shadow-focus:     0 0 0 2px #FFFFFF, 0 0 0 4px rgba(26, 60, 110,0.5);

  /* Typography */
  --tw-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tw-font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --tw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tw-text-xs:   0.6875rem;
  --tw-text-sm:   0.8125rem;
  --tw-text-base: 0.875rem;
  --tw-text-md:   0.9375rem;
  --tw-text-lg:   1rem;
  --tw-text-xl:   1.125rem;
  --tw-text-2xl:  1.375rem;
  --tw-text-3xl:  1.75rem;
  --tw-text-4xl:  2.25rem;

  /* Spacing 8px grid */
  --tw-space-1:  4px;
  --tw-space-2:  8px;
  --tw-space-3:  12px;
  --tw-space-4:  16px;
  --tw-space-5:  20px;
  --tw-space-6:  24px;
  --tw-space-8:  32px;
  --tw-space-10: 40px;
  --tw-space-12: 48px;
  --tw-space-16: 64px;

  /* Radius */
  --tw-radius-xs: 3px;
  --tw-radius-sm: 5px;
  --tw-radius-md: 7px;
  --tw-radius-lg: 10px;
  --tw-radius-xl: 14px;
  --tw-radius-2xl: 18px;
  --tw-radius-full: 999px;

  /* Shadows */
  --tw-shadow-xs: 0 1px 0 rgba(10,37,64,0.04);
  --tw-shadow-sm: 0 1px 2px rgba(10,37,64,0.06), 0 1px 0 rgba(10,37,64,0.02);
  --tw-shadow-md: 0 4px 12px -2px rgba(10,37,64,0.08), 0 1px 3px rgba(10,37,64,0.04);
  --tw-shadow-lg: 0 12px 32px -8px rgba(10,37,64,0.12), 0 2px 6px rgba(10,37,64,0.05);
  --tw-shadow-xl: 0 24px 48px -12px rgba(10,37,64,0.18), 0 4px 12px rgba(10,37,64,0.06);

  /* Motion */
  --tw-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --tw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tw-dur-fast:    140ms;
  --tw-dur-base:    200ms;
}

/* Body baseline (scoped to .tw-page) */
.tw-page {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-text-base);
  line-height: 1.5;
  color: var(--tw-text);
  background: var(--tw-bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tw-page *, .tw-page *::before, .tw-page *::after { box-sizing: border-box; }
.tw-page button { font-family: inherit; }
.tw-page input, .tw-page textarea, .tw-page select { font-family: inherit; }
.tw-page a { color: var(--tw-text-link); text-decoration: none; }
.tw-page a:hover { text-decoration: underline; }

.tw-page ::selection { background: rgba(26, 60, 110,0.25); color: var(--tw-text); }

/* Utilities */
.tw-mono { font-family: var(--tw-font-mono); font-feature-settings: 'zero', 'ss01'; }
.tw-tabular { font-variant-numeric: tabular-nums; }
.tw-display { font-family: var(--tw-font-display); letter-spacing: -0.02em; }
.tw-focus:focus-visible { outline: none; box-shadow: var(--tw-shadow-focus); }

/* Components */
.tw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tw-space-2); height: 34px; padding: 0 14px;
  font-size: var(--tw-text-sm); font-weight: 550; line-height: 1;
  background: var(--tw-primary); color: #fff;
  border: 1px solid var(--tw-primary); border-radius: var(--tw-radius-md);
  cursor: pointer; transition: background var(--tw-dur-fast) var(--tw-ease-out);
  white-space: nowrap; text-decoration: none;
}
.tw-btn:hover { background: var(--tw-primary-hover); border-color: var(--tw-primary-hover); color: #fff; text-decoration: none; }
.tw-btn[disabled], .tw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tw-btn--sm { height: 28px; padding: 0 10px; font-size: var(--tw-text-sm); }
.tw-btn--lg { height: 40px; padding: 0 18px; font-size: var(--tw-text-base); }
.tw-btn--secondary { background: var(--tw-surface); color: var(--tw-text); border-color: var(--tw-border); }
.tw-btn--secondary:hover { background: var(--tw-surface-hover); color: var(--tw-text); border-color: var(--tw-border); }
.tw-btn--ghost { background: transparent; color: var(--tw-text); border-color: transparent; }
.tw-btn--ghost:hover { background: var(--tw-surface-hover); color: var(--tw-text); }
.tw-btn--accent { background: var(--tw-accent); color: #003244; border-color: var(--tw-accent); }
.tw-btn--accent:hover { background: var(--tw-accent-hover); border-color: var(--tw-accent-hover); color: #003244; }
.tw-btn--danger { background: var(--tw-danger); border-color: var(--tw-danger); }
.tw-btn--danger:hover { background: #B33A20; border-color: #B33A20; color: #fff; }
.tw-btn--soft { background: var(--tw-primary-soft); color: var(--tw-primary-soft-fg); border-color: transparent; }
.tw-btn--soft:hover { background: #BDCBE0; color: var(--tw-primary-soft-fg); }
.tw-btn--block { width: 100%; }

.tw-card {
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  padding: var(--tw-space-5);
}

.tw-input {
  display: inline-flex; align-items: center; gap: var(--tw-space-2);
  height: 36px; padding: 0 12px;
  background: var(--tw-surface); border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md); color: var(--tw-text);
  font-size: var(--tw-text-sm); width: 100%;
  transition: border-color var(--tw-dur-fast);
}
.tw-input:focus, .tw-input:focus-within { outline: none; border-color: var(--tw-primary); box-shadow: var(--tw-shadow-focus); }
.tw-input::placeholder { color: var(--tw-text-subtle); }
.tw-label { display: block; font-size: var(--tw-text-sm); font-weight: 550; color: var(--tw-text-muted); margin-bottom: 6px; }

.tw-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  background: var(--tw-surface-active); color: var(--tw-text-muted);
  border-radius: var(--tw-radius-full); font-size: 12px; font-weight: 550;
  line-height: 1; white-space: nowrap;
}
.tw-badge--primary { background: var(--tw-primary-soft); color: var(--tw-primary-soft-fg); }
.tw-badge--accent  { background: var(--tw-accent-soft);  color: var(--tw-accent-soft-fg); }
.tw-badge--success { background: var(--tw-success-soft); color: var(--tw-success-soft-fg); }
.tw-badge--warning { background: var(--tw-warning-soft); color: var(--tw-warning-soft-fg); }
.tw-badge--danger  { background: var(--tw-danger-soft);  color: var(--tw-danger-soft-fg); }
.tw-badge--sm { height: 18px; padding: 0 6px; font-size: 11px; }
.tw-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.tw-divider { background: var(--tw-border); height: 1px; width: 100%; }

.tw-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tw-text-subtle);
}

/* Page chrome */
.tw-shell {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 100vh; background: var(--tw-bg-subtle);
}
.tw-shell__sidebar {
  background: var(--tw-surface); border-right: 1px solid var(--tw-border);
  display: flex; flex-direction: column; min-height: 0;
}
.tw-shell__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
}
.tw-shell__brand-name { font-weight: 600; font-size: 13px; color: var(--tw-text); }
.tw-shell__brand-sub  { font-size: 11px; color: var(--tw-text-subtle); margin-top: 1px; }
.tw-shell__nav { flex: 1; overflow: auto; padding: 0 8px; }
.tw-shell__nav-group { margin-bottom: 16px; }
.tw-shell__nav-group-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tw-text-subtle);
  padding: 6px 10px;
}
.tw-shell__nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--tw-radius-sm);
  color: var(--tw-text-muted); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background var(--tw-dur-fast);
}
.tw-shell__nav-item:hover { background: var(--tw-surface-hover); color: var(--tw-text-muted); text-decoration: none; }
.tw-shell__nav-item.is-active {
  background: var(--tw-primary-soft); color: var(--tw-primary); font-weight: 600;
}
.tw-shell__nav-item .tw-icon { color: currentColor; }

.tw-shell__main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tw-shell__topbar {
  height: 52px; flex-shrink: 0; padding: 0 20px; gap: 12px;
  background: var(--tw-surface); border-bottom: 1px solid var(--tw-border);
  display: flex; align-items: center;
}
.tw-shell__breadcrumbs { font-size: 13px; display: flex; gap: 8px; align-items: center; }
.tw-shell__breadcrumbs .root { color: var(--tw-text-subtle); }
.tw-shell__breadcrumbs .sep  { color: var(--tw-text-subtle); }
.tw-shell__breadcrumbs .here { font-weight: 600; color: var(--tw-text); }

.tw-page-header {
  padding: 24px 32px 0;
  background: var(--tw-surface);
  border-bottom: 1px solid var(--tw-border);
}
.tw-page-header__row { display: flex; align-items: flex-start; gap: 16px; }
.tw-page-header__title {
  font-family: var(--tw-font-display); font-size: 22px; font-weight: 650;
  letter-spacing: -0.01em; color: var(--tw-text); margin: 0;
}
.tw-page-header__subtitle { font-size: 13px; color: var(--tw-text-muted); margin-top: 4px; }
.tw-page-header__eyebrow  { font-size: 12px; font-weight: 550; color: var(--tw-text-subtle); margin-bottom: 4px; }
.tw-page-header__actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }

.tw-screen-body { padding: 32px; max-width: 1320px; margin: 0 auto; }

.tw-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tw-scroll::-webkit-scrollbar-track { background: transparent; }
.tw-scroll::-webkit-scrollbar-thumb { background: var(--tw-border); border-radius: 999px; border: 2px solid var(--tw-bg); }
.tw-scroll::-webkit-scrollbar-thumb:hover { background: var(--tw-border-strong); }

.tw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tw-table thead tr { background: var(--tw-surface-sunken); border-bottom: 1px solid var(--tw-border); }
.tw-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tw-text-subtle); }
.tw-table td { padding: 12px 14px; vertical-align: middle; color: var(--tw-text); border-bottom: 1px solid var(--tw-border-subtle); }
.tw-table tbody tr:last-child td { border-bottom: none; }
.tw-table tbody tr:hover { background: var(--tw-surface-hover); }

@keyframes tw-spin { to { transform: rotate(360deg); } }
.tw-spin { animation: tw-spin 0.8s linear infinite; }
@keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.tw-pulse { animation: tw-pulse 1.6s ease-in-out infinite; }