/**
 * Common Design System - Shared CSS Variables and Base Styles
 * This file provides the unified dark theme design system for the Playground.
 * All pages should include this file for consistent theming.
 */

:root {
  /* ===== Non-Theme Variables (Always Apply) ===== */
  /* Spacing */
  --ui-space-xs: 0.25rem;
  --ui-space-sm: 0.5rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 1.5rem;
  --ui-space-xl: 2rem;

  /* Typography - Code Editor Style */
  --ui-font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  --ui-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.8125rem;
  --ui-font-size-md: 0.875rem;
  --ui-font-size-lg: 1rem;
  --ui-font-size-xl: 1.125rem;

  /* Border Radius - Neobrutalism: Minimal/None */
  --ui-radius-sm: 2px;
  --ui-radius-md: 3px;
  --ui-radius-lg: 4px;
  --ui-radius-xl: 6px;

  /* Shadows - Hard, No Blur (Neobrutalism) */
  --ui-shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.3);
  --ui-shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.3);
  --ui-shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.3);

  /* Transitions - Snappier */
  --ui-transition-fast: 0.1s ease-out;
  --ui-transition-normal: 0.15s ease-out;
  --ui-transition-slow: 0.2s ease-out;
}



/* ===== DARK THEME ===== */
[data-theme="dark"] {
  /* Background colors - pure black base */
  --ui-bg: #0a0a0a;
  --ui-surface: #121212;
  --ui-surface-hover: #1a1a1a;
  --ui-surface-raised: #1e1e1e;

  /* Border colors - harder, more visible */
  --ui-border: rgba(255, 255, 255, 0.15);
  --ui-border-hover: rgba(255, 255, 255, 0.25);
  --ui-border-active: #6366f1;

  /* Primary colors - vibrant accent */
  --ui-primary: #6366f1;
  --ui-primary-light: #818cf8;
  --ui-primary-dark: #4f46e5;
  --ui-primary-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Text colors - high contrast */
  --ui-text: #f0f0f0;
  --ui-text-muted: #888888;
  --ui-text-dim: #666666;

  /* Status colors - terminal style */
  --ui-success: #4ade80;
  --ui-success-bg: rgba(74, 222, 128, 0.1);
  --ui-success-border: rgba(74, 222, 128, 0.4);

  --ui-warning: #fbbf24;
  --ui-warning-bg: rgba(251, 191, 36, 0.1);
  --ui-warning-border: rgba(251, 191, 36, 0.4);

  --ui-error: #f87171;
  --ui-error-bg: rgba(248, 113, 113, 0.1);
  --ui-error-border: rgba(248, 113, 113, 0.4);

  --ui-info: #38bdf8;
  --ui-info-bg: rgba(56, 189, 248, 0.1);
  --ui-info-border: rgba(56, 189, 248, 0.4);

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
}


/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  /* Background colors - white base */
  --ui-bg: #ffffff;
  --ui-surface: #f9fafb;
  --ui-surface-hover: #f3f4f6;
  --ui-surface-raised: #e5e7eb;

  /* Border colors */
  --ui-border: rgba(0, 0, 0, 0.1);
  --ui-border-hover: rgba(0, 0, 0, 0.2);
  --ui-border-active: #6366f1;

  /* Primary colors - same vibrant accent */
  --ui-primary: #6366f1;
  --ui-primary-light: #818cf8;
  --ui-primary-dark: #4f46e5;
  --ui-primary-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Text colors - dark on light */
  --ui-text: #111827;
  --ui-text-muted: #6b7280;
  --ui-text-dim: #9ca3af;

  /* Status colors - darker for better contrast */
  --ui-success: #16a34a;
  --ui-success-bg: rgba(22, 163, 74, 0.1);
  --ui-success-border: rgba(22, 163, 74, 0.3);

  --ui-warning: #d97706;
  --ui-warning-bg: rgba(217, 119, 6, 0.1);
  --ui-warning-border: rgba(217, 119, 6, 0.3);

  --ui-error: #dc2626;
  --ui-error-bg: rgba(220, 38, 38, 0.1);
  --ui-error-border: rgba(220, 38, 38, 0.3);

  --ui-info: #0284c7;
  --ui-info-bg: rgba(2, 132, 199, 0.1);
  --ui-info-border: rgba(2, 132, 199, 0.3);

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
}

/* Default to dark theme if no attribute set */
:root:not([data-theme]) {
  color-scheme: dark;
}


/* ===== Base Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--ui-font-family);
  background: var(--ui-bg);
  color: var(--ui-text);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
}


/* ===== Common Card Styles ===== */
.card,
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
  padding: var(--ui-space-lg);
}

.card:hover,
.ui-card:hover {
  border-color: var(--ui-border-hover);
  box-shadow: var(--ui-shadow-lg);
}


/* ===== Common Table Styles ===== */
.ui-table,
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ui-surface);
  font-size: var(--ui-font-size-sm);
}

.ui-table th,
table th {
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-weight: 600;
  font-size: var(--ui-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: var(--ui-space-sm) var(--ui-space-md);
  border-bottom: 1px solid var(--ui-border);
}

.ui-table td,
table td {
  padding: var(--ui-space-sm) var(--ui-space-md);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  vertical-align: middle; /* Fix alignment */
}

.ui-table tr:hover,
table tr:hover {
  background: var(--ui-surface-hover);
}

.ui-table tr:last-child td,
table tr:last-child td {
  border-bottom: none;
}


/* ===== Alert Styles - Terminal Style ===== */
.alert,
.ui-alert {
  padding: var(--ui-space-sm) var(--ui-space-md);
  border-radius: var(--ui-radius-sm);
  margin-bottom: var(--ui-space-md);
  font-size: var(--ui-font-size-sm);
  border-left: 3px solid;
}

.alert-success,
.ui-alert-success {
  background: var(--ui-success-bg);
  color: var(--ui-success);
  border: 1px solid var(--ui-success-border);
}

.alert-warning,
.ui-alert-warning {
  background: var(--ui-warning-bg);
  color: var(--ui-warning);
  border: 1px solid var(--ui-warning-border);
}

.alert-error,
.alert-danger,
.ui-alert-error {
  background: var(--ui-error-bg);
  color: var(--ui-error);
  border: 1px solid var(--ui-error-border);
}

.alert-info,
.ui-alert-info {
  background: var(--ui-info-bg);
  color: var(--ui-info);
  border: 1px solid var(--ui-info-border);
}


/* ===== Status Badge Styles - Angular ===== */
.status-badge,
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-xs);
  padding: 0.2rem 0.5rem;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.status-badge.active,
.ui-badge-success {
  background: var(--ui-success-bg);
  color: var(--ui-success);
  border: 1px solid var(--ui-success-border);
}

.status-badge.inactive,
.ui-badge-muted {
  background: rgba(136, 136, 136, 0.1);
  color: var(--ui-text-muted);
  border: 1px solid rgba(136, 136, 136, 0.3);
}


/* ===== Link Styles ===== */
a {
  color: var(--ui-primary-light);
  text-decoration: none;
  transition: color var(--ui-transition-fast);
}

a:hover {
  color: var(--ui-primary);
}


/* ===== Form Inputs ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  padding: var(--ui-space-sm) var(--ui-space-md);
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-size-md);
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--ui-text-dim);
}


/* ===== Modal Base Styles ===== */
.modal-backdrop,
.ui-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content,
.ui-modal-content {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-header,
.ui-modal-header {
  padding: var(--ui-space-lg);
  border-bottom: 1px solid var(--ui-border);
}

.modal-body,
.ui-modal-body {
  padding: var(--ui-space-lg);
}

.modal-footer,
.ui-modal-footer {
  padding: var(--ui-space-lg);
  border-top: 1px solid var(--ui-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-sm);
}


/* ===== Empty State ===== */
.empty-state,
.ui-empty-state {
  text-align: center;
  padding: var(--ui-space-xl);
  color: var(--ui-text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--ui-space-md);
  opacity: 0.5;
}

.empty-state-text {
  font-size: var(--ui-font-size-lg);
}


/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}