/* ============================================
   Global Design System — Tailwind Base
   Light, slate neutrals, indigo accent, Inter everywhere.
   Existing class names preserved; tokens drive the theme.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   Design tokens — Facebook-inspired system (light + dark).
   Base --cr-* palette drives every semantic token; overriding the
   palette under [data-theme="dark"] cascades the whole theme.
   ============================================================ */
:root {
  /* Base palette — light */
  --cr-primary: #1C1E21;        /* primary text */
  --cr-secondary: #65676B;      /* secondary text / captions */
  --cr-muted: #8A8D91;          /* muted / disabled text */
  --cr-tertiary: #1877F2;       /* Facebook blue — actions */
  --cr-tertiary-hover: #166FE5; /* primary hover */
  --cr-neutral: #F0F2F5;        /* page background */
  --cr-surface: #FFFFFF;        /* cards / nav / sidebar */
  --cr-surface-2: #F5F6F7;      /* hover / alt surface */
  --cr-border: #DADDE1;         /* hairline borders */
  --cr-border-strong: #C4C9CF;  /* stronger control borders */
  --cr-success: #31A24C;
  --cr-warning: #F7B928;
  --cr-danger: #E41E3F;
  --cr-accent-bg: #E7F0FE;      /* soft blue — active nav / info */
  --cr-accent-fg: #1877F2;

  /* Tinted status surfaces (auto-swapped in dark) */
  --cr-success-bg: #E7F6EC; --cr-success-fg: #1E7A38; --cr-success-bd: #B7E3C4;
  --cr-danger-bg:  #FDE7EA; --cr-danger-fg:  #C31D33; --cr-danger-bd:  #F5C2C9;
  --cr-warning-bg: #FEF4E0; --cr-warning-fg: #8A5A00; --cr-warning-bd: #F7DFA6;

  /* Semantic mapping */
  --background: var(--cr-neutral);
  --foreground: var(--cr-primary);
  --card: var(--cr-surface);
  --card-foreground: var(--cr-primary);
  --popover: var(--cr-surface);
  --popover-foreground: var(--cr-primary);
  --primary: var(--cr-tertiary);
  --primary-foreground: #FFFFFF;
  --secondary: var(--cr-surface-2);
  --secondary-foreground: var(--cr-primary);
  --muted: var(--cr-surface-2);
  --muted-foreground: var(--cr-secondary);
  --accent: var(--cr-accent-bg);
  --accent-foreground: var(--cr-accent-fg);
  --destructive: var(--cr-danger);
  --destructive-foreground: #FFFFFF;
  --border: var(--cr-border);
  --input: var(--cr-border);
  --ring: var(--cr-tertiary);

  --success: var(--cr-success);
  --success-foreground: #FFFFFF;
  --warning: var(--cr-warning);
  --warning-foreground: #FFFFFF;
  --error: var(--cr-danger);
  --error-foreground: #FFFFFF;
  --info: var(--cr-tertiary);
  --info-foreground: #FFFFFF;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', var(--font-sans);

  /* 8px spacing scale */
  --spacing: 0.25rem;   /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem;/* 12px */
  --spacing-md: 1rem;   /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem;   /* 32px */
  --spacing-2xl: 3rem;  /* 48px */

  /* Radius — cards 16, controls 12, modals 20, badges pill */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Soft, layered shadows */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --cr-primary: #E4E6EB;
  --cr-secondary: #B0B3B8;
  --cr-muted: #8A8D91;
  --cr-tertiary: #2D88FF;
  --cr-tertiary-hover: #4599FF;
  --cr-neutral: #18191A;
  --cr-surface: #242526;
  --cr-surface-2: #3A3B3C;
  --cr-border: #3A3B3C;
  --cr-border-strong: #4E4F50;
  --cr-success: #45BD62;
  --cr-warning: #F7B928;
  --cr-danger: #FF5C6C;
  --cr-accent-bg: #263A57;
  --cr-accent-fg: #4599FF;

  --cr-success-bg: #1E3126; --cr-success-fg: #6FD08C; --cr-success-bd: #2C5138;
  --cr-danger-bg:  #3A2226; --cr-danger-fg:  #FF8A97; --cr-danger-bd:  #5C2E34;
  --cr-warning-bg: #372E1A; --cr-warning-fg: #F0C574; --cr-warning-bd: #574719;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--cr-tertiary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.container { max-width: 1400px; margin: 0 auto; padding: var(--spacing-lg); }

.card,
header,
.auth-section {
  background-color: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

header { margin-bottom: var(--spacing-xl); }

h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--spacing-md); }
h2 { font-size: 1.5rem; margin-bottom: var(--spacing-md); }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--spacing-sm); }

.subtitle, .text-muted { color: var(--muted-foreground); font-size: 0.9rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

/* Buttons — rounded, indigo accent */
button, .button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--cr-surface);
  color: var(--foreground);
  border: 1px solid var(--cr-border-strong);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .button:hover, .btn:hover { background: var(--cr-neutral); border-color: var(--cr-secondary); }
button:disabled, .button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary, button.btn-primary, .button.btn-primary {
  background: var(--cr-tertiary);
  border-color: var(--cr-tertiary);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--cr-tertiary-hover); border-color: var(--cr-tertiary-hover); }

.btn-secondary {
  background: var(--cr-surface);
  color: var(--cr-primary);
  border: 1px solid var(--cr-border-strong);
}
.btn-secondary:hover { background: var(--cr-neutral); }

.btn-outline { background: transparent; color: var(--cr-tertiary); border: 1px solid var(--cr-tertiary); }
.btn-outline:hover { background: var(--cr-tertiary); color: #FFFFFF; }

.btn-destructive { background: var(--cr-danger); border-color: var(--cr-danger); color: #FFFFFF; }
.btn-destructive:hover { background: #DC2626; border-color: #DC2626; }

.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-lg { padding: 14px 22px; font-size: 1rem; }

/* Forms */
.form-group { margin-bottom: var(--spacing-lg); }
label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--cr-primary);
  font-weight: 500;
  font-size: 0.875rem;
}

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  background-color: var(--cr-surface);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cr-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-tertiary) 20%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--cr-muted); }
textarea { min-height: 100px; resize: vertical; }

/* Badges */
.status-badge, .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--cr-border);
  background: var(--cr-neutral);
  color: var(--cr-secondary);
  white-space: nowrap;
}
.status-healthy, .badge-success { color: var(--cr-success-fg); border-color: var(--cr-success-bd); background: var(--cr-success-bg); }
.status-error, .badge-error { color: var(--cr-danger-fg); border-color: var(--cr-danger-bd); background: var(--cr-danger-bg); }
.status-pending, .badge-warning { color: var(--cr-warning-fg); border-color: var(--cr-warning-bd); background: var(--cr-warning-bg); }
.badge-info { color: var(--cr-accent-fg); border-color: var(--cr-accent-bg); background: var(--cr-accent-bg); }
.badge-secondary { color: var(--cr-secondary); border-color: var(--cr-border); }

/* Grid helpers */
.grid { display: grid; gap: var(--spacing-lg); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--spacing-md); }
.stat-card {
  background-color: var(--cr-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.stat-label {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}
.stat-value {
  color: var(--foreground);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--cr-border-strong);
  background: var(--cr-surface-2);
  color: var(--cr-primary);
}
.alert-success { border-left-color: var(--cr-success); background: var(--cr-success-bg); color: var(--cr-success-fg); }
.alert-error { border-left-color: var(--cr-danger); background: var(--cr-danger-bg); color: var(--cr-danger-fg); }
.alert-warning { border-left-color: var(--cr-warning); background: var(--cr-warning-bg); color: var(--cr-warning-fg); }
.alert-info { border-left-color: var(--cr-tertiary); background: var(--cr-accent-bg); color: var(--cr-accent-fg); }

/* Utilities */
.mb-1 { margin-bottom: var(--spacing); }
.mb-2 { margin-bottom: var(--spacing-xs); }
.mb-3 { margin-bottom: var(--spacing-sm); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mb-5 { margin-bottom: var(--spacing-lg); }
.mb-6 { margin-bottom: var(--spacing-xl); }
.mt-1 { margin-top: var(--spacing); }
.mt-2 { margin-top: var(--spacing-xs); }
.mt-3 { margin-top: var(--spacing-sm); }
.mt-4 { margin-top: var(--spacing-md); }
.mt-5 { margin-top: var(--spacing-lg); }
.mt-6 { margin-top: var(--spacing-xl); }
.p-1 { padding: var(--spacing); }
.p-2 { padding: var(--spacing-xs); }
.p-3 { padding: var(--spacing-sm); }
.p-4 { padding: var(--spacing-md); }
.p-5 { padding: var(--spacing-lg); }
.p-6 { padding: var(--spacing-xl); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--spacing-xs); }
.gap-3 { gap: var(--spacing-sm); }
.gap-4 { gap: var(--spacing-md); }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Dashboard */
.dashboard { display: none; }
.dashboard.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--spacing-lg);
}

/* Card hover lift */
.card { transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.card:hover { box-shadow: var(--shadow-md); }

/* Accessible focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--cr-tertiary); outline-offset: 2px; }
button:focus-visible, .btn:focus-visible, .button:focus-visible { outline-offset: 2px; }
button:active, .btn:active, .button:active { transform: translateY(0.5px); }

/* Responsive */
@media (max-width: 768px) {
  .container { padding: var(--spacing-md); }
  .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }
}