/* Primary — Identitas Merah UNMAHA */
:root {
  --color-primary:       #D32F2F;   /* Merah Utama (Solid & Professional) */
  --color-primary-light: #EF5350;   /* Merah Muda untuk Hover */
  --color-primary-dark:  #9A0007;   /* Merah Tua untuk Header/Active State */

  /* Secondary — Diambil dari elemen api/cahaya logo */
  --color-secondary:     #FFC107;   /* Kuning Amber untuk kontras */

  /* Status Colors (Disesuaikan agar harmonis dengan merah) */
  --color-success:       #2D9144;   /* Hijau yang lebih deep */
  --color-warning:       #F2994A;   /* Oranye Hangat */
  --color-danger:        #B71C1C;   /* Merah Marun untuk Error */
  --color-info:          #2F80ED;   /* Biru Langit untuk info */
  --color-info-liht:     #7bb7e3;   /* Biru Muda untuk fokus/form */

  /* Neutral & Background (Sangat penting agar merah tidak dominan merusak mata) */
  --color-sidebar-bg:    #1E1E1E;   /* Hitam Arang (Elegan disandingkan merah) */
  --color-sidebar-text:  #E0E0E0;
  --color-body-bg:       #F8F9FA;   /* Background putih keabu-abuan */
  --color-card-bg:       #FFFFFF;

  /* Typography & Details */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --border-radius-card: 12px;
  --border-radius-btn:  8px;

  /* Shadow yang lebih halus untuk mengimbangi warna merah yang bold */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Default Body Styling */
body {
    font-family: var(--font-body);
    background-color: var(--color-body-bg);
    color: #333333;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Custom Overrides */
.btn {
    border-radius: var(--border-radius-btn);
    font-family: var(--font-body);
    font-weight: 500;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.card {
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    border: none;
    background-color: var(--color-card-bg);
    margin-bottom: 24px;
}

/* Stats Card UI Component */
.stats-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Utilities helpers */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-subtle { background-color: rgba(211, 47, 47, 0.1) !important; }

.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

/* Form focus ring in brand light red */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--color-info-liht);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(239, 83, 80, 0.25);
}
