/* =========================================================
   e-Panitia Pro — Style Asas Sistem (STEP 1)
   Bidang Kemanusiaan
   ========================================================= */

:root {
  /* Warna Utama */
  --epp-primary:      #2C3E91;   /* Biru tua - warna korporat sekolah */
  --epp-primary-dark: #1F2C6B;
  --epp-secondary:    #E8A93A;   /* Kuning keemasan - aksen Kemanusiaan */
  --epp-success:      #2E9E5B;
  --epp-danger:       #D64545;
  --epp-warning:      #E8A93A;
  --epp-info:         #3AA0C4;

  /* Latar & Teks */
  --epp-bg:           #F4F6FB;
  --epp-surface:      #FFFFFF;
  --epp-text:         #2A2D3E;
  --epp-text-muted:   #6B7280;
  --epp-border:       #E2E5EE;

  /* Sidebar & Header */
  --epp-sidebar-bg:   #1F2547;
  --epp-sidebar-text: #C9CCE0;
  --epp-sidebar-active: #2C3E91;

  /* Bentuk */
  --epp-radius: 10px;
  --epp-shadow: 0 2px 10px rgba(31, 44, 107, 0.08);

  /* Font */
  --epp-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--epp-font);
  background-color: var(--epp-bg);
  color: var(--epp-text);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Kad ringkasan (untuk digunakan oleh Dashboard pada STEP 2) */
.epp-card {
  background: var(--epp-surface);
  border-radius: var(--epp-radius);
  box-shadow: var(--epp-shadow);
  border: 1px solid var(--epp-border);
}

/* Sidebar (rangka asas — kandungan penuh pada STEP 2) */
.epp-sidebar {
  background-color: var(--epp-sidebar-bg);
  color: var(--epp-sidebar-text);
  min-height: 100vh;
}

.epp-sidebar .nav-link {
  color: var(--epp-sidebar-text);
  border-radius: var(--epp-radius);
}

.epp-sidebar .nav-link.active,
.epp-sidebar .nav-link:hover {
  background-color: var(--epp-sidebar-active);
  color: #fff;
}

/* Header (rangka asas) */
.epp-header {
  background-color: var(--epp-surface);
  border-bottom: 1px solid var(--epp-border);
}

/* Footer */
.epp-footer {
  color: var(--epp-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}

/* Butang utama */
.btn-epp-primary {
  background-color: var(--epp-primary);
  border-color: var(--epp-primary);
  color: #fff;
}

.btn-epp-primary:hover {
  background-color: var(--epp-primary-dark);
  border-color: var(--epp-primary-dark);
  color: #fff;
}