/* ==========================================================================
   GLOBAL VARIABLES & ACCESSIBILITY (Ramah Lansia)
   ========================================================================== */
:root {
    /* Ukuran font dasar diperbesar agar lebih mudah dibaca lansia */
    --bs-body-font-size: 1.1rem; /* Sekitar 17.6px (default Bootstrap adalah 1rem/16px) */
    
    /* Kontras warna yang lebih tinggi */
    --bs-primary-rgb: 13, 110, 253; /* Biru standar Bootstrap, kontras baik */
    --bs-body-color: #212529; /* Hitam pekat untuk teks */
    --bs-body-bg: #f8f9fa; /* Latar belakang abu-abu sangat muda untuk mengurangi silau */
    
    /* Spasi (Padding/Margin) yang lebih lega agar area klik (touch target) lebih besar di mobile */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --input-padding-y: 0.75rem;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6; /* Jarak antar baris diperlebar agar tidak menumpuk */
}

/* ==========================================================================
   TYPOGRAPHY (Ramah Lansia)
   ========================================================================== */
/* Heading diperjelas hirarkinya */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: #1a1d20;
    margin-bottom: 1rem;
}

/* Memastikan link terlihat jelas, bukan hanya beda warna tapi juga digarisbawahi */
a:not(.btn):not(.nav-link) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-weight: 500;
}

/* ==========================================================================
   FORM & BUTTONS (Touch-friendly & Mudah Dilihat)
   ========================================================================== */
/* Memperbesar ukuran input dan tombol untuk mempermudah tap di HP (min 44px tinggi) */
.form-control, .form-select, .btn {
    padding: var(--input-padding-y) var(--btn-padding-x);
    font-size: 1.1rem;
    border-radius: 0.5rem; /* Sudut sedikit membulat tapi tidak berlebihan */
}

/* Memperjelas batas input agar terlihat jelas bedanya dengan background */
.form-control, .form-select {
    border: 2px solid #ced4da; /* Border dipertebal */
}
.form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Focus ring yang sangat jelas */
}

/* Menambahkan outline tegas pada tombol saat fokus (Aksesibilitas Keyboard) */
.btn:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* ==========================================================================
   LAYOUT & COMPONENTS (Mobile & Desktop Responsive)
   ========================================================================== */
/* Navigasi */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}
.nav-link {
    font-size: 1.15rem;
    padding: 0.75rem 1rem !important; /* Touch target lega di menu navigasi */
}

/* Kartu (Cards) */
.card {
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease-in-out; /* Animasi halus saat interaksi */
}

.card-header {
    background-color: #fff;
    border-bottom: 2px solid rgba(0,0,0,0.05); /* Batas header dipertegas */
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* Tabel */
.table-responsive {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    /* Mengatasi bug radius terpotong pada tabel responsif */
    -webkit-overflow-scrolling: touch; 
}

.table {
    margin-bottom: 0;
}

.table th {
    background-color: #e9ecef; /* Warna header tabel yang kontras lembut */
    color: #212529;
    font-weight: 700;
    padding: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.table td {
    padding: 1rem;
    vertical-align: middle;
}

/* Badge (Pill) */
.badge {
    font-size: 0.95rem;
    padding: 0.4em 0.8em;
    font-weight: 600;
}

/* ==========================================================================
   UTILITIES KUSTOM
   ========================================================================== */
/* Bantuan visual: teks yang lebih besar untuk instruksi penting */
.text-instruction {
    font-size: 1.25rem;
    font-weight: 600;
    color: #052c65; /* Biru tua kontras tinggi */
}

/* Menambahkan efek click/touch feedback pada baris tabel */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
    cursor: pointer;
}