/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================
   EDUKIDS PLAYFUL THEME - CSS Custom Properties
   ============================================ */

:root {
  /* Primary Colors */
  --color-sunny-yellow: #FFD93D;
  --color-coral-orange: #FF6B6B;
  --color-sky-blue: #4ECDC4;
  --color-soft-purple: #A78BFA;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  --gradient-secondary: linear-gradient(135deg, #4ECDC4 0%, #44A3AA 100%);
  --gradient-purple: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);

  /* Backgrounds */
  --bg-page: #FFFDF7;
  --bg-card: #FFFFFF;
  --bg-soft: #FFF5EE;
  --bg-soft-alt: #FEF3C7;

  /* Borders */
  --border-card: #FFE4E1;
  --border-default: #FECACA;

  /* Text Colors */
  --text-dark: #1F2937;
  --text-body: #374151;
  --text-muted: #6B7280;

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(255, 107, 107, 0.12);
  --shadow-card-hover: 0 12px 40px rgba(255, 107, 107, 0.2);

  /* Border Radius */
  --radius-button: 50px;
  --radius-card: 24px;
  --radius-input: 16px;
  --radius-small: 12px;
}

/* ============================================
   BASE STYLES
   ============================================ */

/* Ensure dialogs don't create overlays when closed */
dialog:not([open]) {
  display: none !important;
}

/* Style dialog backdrop */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Turbo progress bar styling */
.turbo-progress-bar {
  height: 3px;
  background: var(--gradient-primary);
}

/* Reset any potential overlay issues */
body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure clickability */
* {
  pointer-events: auto;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Page Backgrounds */
.bg-page { background: var(--bg-page); }
.bg-soft { background: var(--bg-soft); }
.bg-card { background: var(--bg-card); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }

/* Card Styles */
.card-playful {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.card-playful:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-coral-orange);
}

/* Button Styles */
.btn-primary {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--gradient-primary);
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

.btn-secondary {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  border-color: var(--color-coral-orange);
  background: var(--bg-soft);
}

.btn-coral {
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--color-coral-orange);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sky {
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--color-sky-blue);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Header Styles */
.header-playful {
  background: var(--gradient-primary);
  padding: 20px 16px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  color: var(--text-dark);
}

/* Form Input Styles */
.input-playful {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-input);
  border: 2px solid var(--border-card);
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.input-playful:focus {
  outline: none;
  border-color: var(--color-coral-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* Badge Styles */
.badge-yellow {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-sunny-yellow);
  color: var(--text-dark);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-coral {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-coral-orange);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-sky {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-sky-blue);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-purple {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-soft-purple);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* Alert Styles */
.alert-success {
  padding: 12px 16px;
  background: #ECFDF5;
  border: 2px solid var(--color-sky-blue);
  border-radius: var(--radius-small);
  color: #059669;
}

.alert-error {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 2px solid var(--color-coral-orange);
  border-radius: var(--radius-small);
  color: #DC2626;
}

.alert-warning {
  padding: 12px 16px;
  background: var(--bg-soft-alt);
  border: 2px solid var(--color-sunny-yellow);
  border-radius: var(--radius-small);
  color: #D97706;
}

/* Navigation Pills */
.nav-pill {
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nav-pill-active {
  background: var(--gradient-primary);
  color: var(--text-dark);
}

.nav-pill-inactive {
  background: var(--bg-soft);
  color: var(--text-body);
}

.nav-pill-inactive:hover {
  background: var(--color-sunny-yellow);
  color: var(--text-dark);
}

/* Avatar Circle */
.avatar-playful {
  width: 44px;
  height: 44px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  font-weight: 800;
  font-size: 16px;
}

/* Links */
.link-playful {
  color: var(--color-soft-purple);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.link-playful:hover {
  color: var(--color-coral-orange);
}

/* Stats Card */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 20px;
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

/* Dialog Styles */
dialog {
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.2);
}

/* Table Styles */
.table-playful {
  width: 100%;
  border-collapse: collapse;
}

.table-playful th {
  background: var(--bg-soft);
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 2px solid var(--border-card);
}

.table-playful td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-card);
  color: var(--text-body);
}

.table-playful tr:hover {
  background: var(--bg-soft);
}