/* Tema navy/emas disegarkan — dilapis atas Bootstrap 5. */

/* Font Jawi khusus (bukan Arab generik) — liputi huruf tambahan Jawi
   (ca/nga/pa/ga/va/nya) yang tiada dalam kebanyakan font Arab biasa. */
@font-face {
    font-family: 'Jawi Uthman Taha';
    src: url('fonts/JawiUthmanTaha.ttf') format('truetype');
    font-display: swap;
}

/* Fon Mushaf Hafs — untuk petikan ayat Al-Quran (lihat .teks-quran di bawah).
   TIDAK boleh biar browser fallback per-tanda-baris sahaja: tanda baris dari
   fon lain tak melekat betul pada huruf asas fon berbeza (setiap fon ada
   jadual positioning/GPOS sendiri) — jadi seluruh PERKATAAN bertanda baris
   kena guna Hafs sekali, bukan setakat tandanya. */
@font-face {
    font-family: 'KFGQPC Hafs';
    src: url('fonts/Hafs.ttf') format('truetype');
    font-display: swap;
}

/* Fon Amiri (sumber terbuka, lesen SIL OFL) — dibundle sebab Jawi Uthman Taha
   tak menyokong tanda baris/harakat Arab (ً ِ ُ ّ dll) dengan betul; bila
   Sakkal Majalla tiada pada peranti, browser jatuh ke Jawi Uthman Taha dan
   tanda baris terus hilang (walaupun ada dalam HTML), tak macam PowerPoint.
   Amiri letak SEBELUM Jawi Uthman Taha supaya teks Bahasa Arab biasa (yang
   ada harakat) sentiasa betul tak kira peranti; huruf tambahan Jawi
   (ca/nga/pa/ga/va/nya) yang Amiri tak ada tetap jatuh ke Jawi Uthman Taha
   secara automatik sebab fallback fon berlaku ikut aksara, bukan ikut fon
   keseluruhan. */
@font-face {
    font-family: 'Amiri';
    src: url('fonts/Amiri.woff2') format('woff2');
    font-display: swap;
}

/* Fon Sakkal Majalla — DIBUNDLE atas permintaan eksplisit & keputusan pemilik
   projek yang menerima risiko lesen (fon proprietari Microsoft; fsType OS/2
   fail ini = 8 "Editable embedding", tapi EULA redistribusi web tak disahkan
   sepenuhnya). @font-face dgn nama sama akan diutamakan browser berbanding
   fon sistem terpasang, jadi semua peranti (bukan setakat Windows yg ada
   fon ni terpasang) kini dapat rendering identik dengan pptx sumber asal. */
@font-face {
    font-family: 'Sakkal Majalla';
    src: url('fonts/SakkalMajalla.ttf') format('truetype');
    font-display: swap;
}

.teks-jawi {
    font-family: 'Sakkal Majalla', 'Amiri', 'Jawi Uthman Taha', 'Traditional Arabic', serif;
    direction: rtl;
    unicode-bidi: embed;
    font-size: 1.15em;
    line-height: 2;
}

/* Blok MCQ dalam kandungan Jawi/Bahasa Arab — saiz tetap 18px (bukan relatif
   1.15em warisan .teks-jawi) supaya pilihan A-D sentiasa konsisten & jelas
   dibaca, tak kira konteks induk (editor cipta, sesi jawab, preview dll). */
.teks-jawi .blok-mcq .mcq-teks,
.teks-jawi .blok-mcq .mcq-huruf,
.teks-jawi .blok-mcq-jawab .mcq-teks,
.teks-jawi .blok-mcq-jawab .mcq-huruf {
    font-size: 18px;
}

/* Petikan ayat Al-Quran (dalam soalan Tajwid) — guna rantaian fon sama
   dengan Bahasa Arab (atas permintaan eksplisit), bukan Hafs. */
.teks-quran {
    font-family: 'Sakkal Majalla', 'Amiri', 'Jawi Uthman Taha', 'Traditional Arabic', serif;
}

:root {
    --navy: #1c2d52;
    --navy-dark: #101a33;
    --navy-soft: #2d4270;
    --gold: #c8912f;
    --gold-light: #e8b95c;
    --bg-app: #f3f5fa;
    --bg-card: #ffffff;
    --border-soft: #e6e9f2;

    --bs-primary: var(--navy);
    --bs-primary-rgb: 28, 45, 82;
    --bs-body-bg: var(--bg-app);
    --bs-border-radius: 0.65rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-border-color: var(--border-soft);

    --shadow-sm: 0 1px 2px rgba(16, 24, 55, 0.05);
    --shadow-md: 0 6px 20px rgba(16, 24, 55, 0.08);
    --shadow-lift: 0 10px 28px rgba(16, 24, 55, 0.12);
}

[data-bs-theme="dark"] {
    --navy: #2c4a80;
    --navy-dark: #0a1526;
    --navy-soft: #3c5c99;
    --gold: #e8b95c;
    --gold-light: #f0cc84;
    --bg-app: #0b1220;
    --bg-card: #121b2e;
    --border-soft: #223050;

    --bs-primary: var(--navy);
    --bs-primary-rgb: 44, 74, 128;
    --bs-body-bg: var(--bg-app);
    --bs-border-color: var(--border-soft);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 10px 28px rgba(0, 0, 0, 0.45);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.01em;
}

.card {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

h1, h2, h3, .h5, .h6 { letter-spacing: -0.02em; }

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

/* Butang tema navy menggantikan biru default Bootstrap */
.btn {
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-dark);
    --bs-btn-hover-border-color: var(--navy-dark);
    --bs-btn-active-bg: var(--navy-dark);
    --bs-btn-active-border-color: var(--navy-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline-secondary, .btn-outline-danger { font-weight: 500; }

/* Kad bergaya moden: bayang lembut + aksen emas tipis di sebelah kiri */
.card-gov {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.card-gov:hover { box-shadow: var(--shadow-md); }

/* Bar rasmi di bahagian atas (halaman log masuk) */
.gov-bar {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    border-bottom: 3px solid var(--gold);
}

.gov-bar-inner { max-width: 480px; }

.gov-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.gov-sub {
    color: var(--gold-light);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* Sidebar admin */
.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
}

.sidebar-brand {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-nav { padding: 0 0.6rem; gap: 0.15rem; }

.nav-item {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
}

.nav-item.active .bi { color: var(--gold-light); }

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-item .bi { width: 1.1rem; text-align: center; }

.nav-item[data-bs-toggle] .small { transition: transform 0.15s ease; }
.nav-item[data-bs-toggle]:not(.collapsed) .small { transform: rotate(180deg); }

@media (max-width: 767.98px) {
    .sidebar { width: 100%; }
    .sidebar-brand { display: none; }
    .sidebar-nav { flex-direction: row !important; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem; }
    .nav-item { flex-shrink: 0; white-space: nowrap; }
    .sidebar-nav .collapse.show { display: flex !important; flex-basis: 100%; overflow-x: auto; }
}

/* Avatar bulat pengguna di topbar */
.avatar-bubble {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Kad statistik dashboard */
.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

[data-bs-theme="dark"] .stat-value { color: #fff; }

/* Jadual moden: tiada garisan berat, penonjolan baris terapung */
.table { --bs-table-border-color: var(--border-soft); }
.table > :not(caption) > * > * { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.table-hover > tbody > tr:hover > * { background-color: rgba(28, 45, 82, 0.04); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.04); }

.badge { font-weight: 600; letter-spacing: 0.01em; }

.breadcrumb { --bs-breadcrumb-divider: '›'; }

.form-control, .form-select {
    border-color: var(--border-soft);
}
.form-control:focus, .form-select:focus {
    border-color: var(--navy-soft);
    box-shadow: 0 0 0 0.2rem rgba(28, 45, 82, 0.15);
}

/* Blok soalan MCQ disisip dalam editor Summernote (lihat soalan_cipta.php) */
.blok-mcq {
    position: relative;
    border: 1px dashed var(--gold);
    border-radius: var(--bs-border-radius-sm);
    background: rgba(200, 145, 47, 0.06);
    padding: 32px 14px 10px;
    margin: 10px 0;
    cursor: default;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}
.blok-mcq .mcq-pilihan {
    display: flex;
    gap: 8px;
    padding: 3px 0;
}
.blok-mcq .mcq-huruf { font-weight: 700; min-width: 1.4em; }
.blok-mcq .mcq-edit-btn,
.blok-mcq .mcq-delete-btn {
    position: absolute;
    top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.blok-mcq .mcq-edit-btn { right: 10px; background: var(--navy); }
.blok-mcq .mcq-edit-btn:hover { background: var(--navy-dark); }
.blok-mcq .mcq-delete-btn { right: 68px; background: #b3261e; }
.blok-mcq .mcq-delete-btn:hover { background: #8c1d17; }

.blok-mcq .mcq-move-up-btn,
.blok-mcq .mcq-move-down-btn {
    position: absolute;
    top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #5b6474;
    cursor: pointer;
    user-select: none;
}
.blok-mcq .mcq-move-up-btn:hover,
.blok-mcq .mcq-move-down-btn:hover { background: #434a57; }
.blok-mcq .mcq-move-up-btn { left: 10px; }
.blok-mcq .mcq-move-down-btn { left: 38px; }

/* Blok Betul/Salah disisip dalam editor Psikometrik (lihat soalan_cipta_psikometrik.php) */
.blok-bs {
    position: relative;
    border: 1px dashed #2a7a8c;
    border-radius: var(--bs-border-radius-sm);
    background: rgba(42, 122, 140, 0.06);
    padding: 32px 14px 10px;
    margin: 10px 0;
    cursor: default;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}
.blok-bs .bs-pilihan {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    font-weight: 700;
    border-radius: var(--bs-border-radius-sm);
}
.blok-bs .bs-pilihan[data-pilihan="BETUL"],
.blok-bs .bs-pilihan[data-pilihan="YA"] { background: rgba(25, 135, 84, 0.12); color: #146c43; }
.blok-bs .bs-pilihan[data-pilihan="SALAH"],
.blok-bs .bs-pilihan[data-pilihan="TIDAK"] { background: rgba(220, 53, 69, 0.1); color: #b02a37; }

.blok-bs .bs-edit-btn,
.blok-bs .bs-delete-btn {
    position: absolute;
    top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.blok-bs .bs-edit-btn { right: 10px; background: #2a7a8c; }
.blok-bs .bs-edit-btn:hover { background: #1e5c6b; }
.blok-bs .bs-delete-btn { right: 68px; background: #b3261e; }
.blok-bs .bs-delete-btn:hover { background: #8c1d17; }

.blok-bs .bs-move-up-btn,
.blok-bs .bs-move-down-btn {
    position: absolute;
    top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #5b6474;
    cursor: pointer;
    user-select: none;
}
.blok-bs .bs-move-up-btn:hover,
.blok-bs .bs-move-down-btn:hover { background: #434a57; }
.blok-bs .bs-move-up-btn { left: 10px; }
.blok-bs .bs-move-down-btn { left: 38px; }

/* Editor Summernote kekal putih macam kertas, tak kira tema gelap/terang laman */
.note-editor.note-frame {
    background: #fff;
    border-color: var(--border-soft);
}
.note-editor .note-toolbar {
    background: #f8f9fa;
    border-color: var(--border-soft);
}
.note-editor .note-editing-area .note-editable {
    background: #fff !important;
    color: #1a1a1a !important;
}
.note-editor .note-statusbar {
    background: #f8f9fa;
    border-color: var(--border-soft);
}

/* Imej dalam soalan sentiasa di tengah (elak terapung kiri ikut aliran teks) */
.note-editable img { display: block; margin: 10px auto; }