/* ==========================================================================
   ABSENSI LES - FULL LIGHT THEME DESIGN SYSTEM (VANILLA CSS)
   Adhering 100% to app_colors.dart, app_radius.dart, app_spacing.dart
   ========================================================================== */

:root {
  /* Brand Primary & Gradients (app_colors.dart) */
  --primary-default: #7C3AED;
  --primary-end: #EC4899;
  --primary-gradient: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --on-primary: #FFFFFF;

  /* Accent Gradients */
  --accent-blue: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
  --accent-orange: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);

  /* Backgrounds & Surfaces (Light Mode) */
  --bg-light: #FAFAF9;              /* app_colors.dart: backgroundLight */
  --surface-lowest: #FFFFFF;        /* app_colors.dart: surfaceContainerLowest */
  --surface-low: #F5F5F4;           /* app_colors.dart: surfaceContainerLow */
  --surface-container: #E7E5E4;     /* app_colors.dart: surfaceContainer */
  --surface-border: #E5E5EA;        /* app_theme.dart: light border */

  /* Text & Content */
  --text-main: #1C1917;             /* app_colors.dart: onSurface */
  --text-muted: #78716C;            /* app_colors.dart: onSurfaceVariant */
  --outline: #A8A29E;

  /* Status Colors */
  --hadir-mint: #34D399;
  --hadir-bg: #ECFDF5;
  --hadir-text: #065F46;
  --hadir-border: #A7F3D0;

  --izin-amber: #FBBF24;
  --izin-bg: #FFFBEB;
  --izin-text: #92400E;
  --izin-border: #FDE68A;

  --sakit-blue: #60A5FA;
  --sakit-bg: #EFF6FF;
  --sakit-text: #1E40AF;
  --sakit-border: #BFDBFE;

  --alpa-coral: #FB7185;
  --alpa-bg: #FFF1F2;
  --alpa-text: #9F1239;
  --alpa-border: #FECDD3;

  /* Radii (app_radius.dart) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 999px;
}

/* Global Reset & Base Typography */
body {
  background-color: var(--bg-light) !important;
  color: var(--text-main) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 700;
}

/* Gradient Utilities */
.bg-primary-gradient {
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
  color: #FFFFFF !important;
}

/* Typography Utilities */
.page-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.page-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-main {
  color: var(--text-main) !important;
}

/* Card Container Components */
.app-card {
  background-color: var(--surface-lowest) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease-in-out;
}

.app-card:hover {
  box-shadow: 0 10px 25px -3px rgba(124, 58, 237, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
}

.card-header {
  background-color: var(--surface-low);
  border-bottom: 1px solid var(--surface-border);
  padding: 1.25rem 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

/* Buttons System */
.btn-primary {
  background: var(--primary-gradient) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.35);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--surface-low) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--surface-border) !important;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--surface-container) !important;
}

.btn-danger {
  background-color: var(--alpa-bg) !important;
  color: var(--alpa-text) !important;
  border: 1px solid var(--alpa-border) !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background-color: #FFE4E6 !important;
}

/* Form Controls (Inputs, Selects, Checkboxes) */
.form-input, .form-select {
  background-color: var(--surface-low) !important;
  border: 1px solid var(--surface-border) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary-default) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.form-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  border: 1px solid var(--outline);
  accent-color: var(--primary-default);
}

/* Tables System */
.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  color: var(--text-main);
}

.app-table th {
  background-color: var(--surface-low);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-border);
}

.app-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-main);
}

.app-table tr:hover td {
  background-color: var(--surface-low);
}

/* Status Chips & Badges */
.chip-hadir {
  background-color: var(--hadir-bg) !important;
  color: var(--hadir-text) !important;
  border: 1px solid var(--hadir-border) !important;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.chip-izin {
  background-color: var(--izin-bg) !important;
  color: var(--izin-text) !important;
  border: 1px solid var(--izin-border) !important;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.chip-sakit {
  background-color: var(--sakit-bg) !important;
  color: var(--sakit-text) !important;
  border: 1px solid var(--sakit-border) !important;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.chip-alpa {
  background-color: var(--alpa-bg) !important;
  color: var(--alpa-text) !important;
  border: 1px solid var(--alpa-border) !important;
  font-weight: 700;
  border-radius: var(--radius-full);
}

/* Modal Dialog System */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px);
}

.modal-card {
  background-color: var(--surface-lowest) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Stepper Component */
.stepper-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.stepper-circle.active {
  background: var(--primary-gradient);
  color: #FFFFFF;
  box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.35);
}

.stepper-circle.inactive {
  background-color: var(--surface-low);
  color: var(--text-muted);
  border: 1px solid var(--surface-border);
}