/**
 * MOAKHAT GLOBAL CORE DESIGN SYSTEM (SSOT CSS)
 * Perbaikan Keterbacaan Huruf (Legibility) & Kontras Tinggi
 */

:root {
    --mkh-emerald-deep: #02120D;
    --mkh-emerald-mid: #05231A;
    --mkh-emerald-light: #0E4D38;
    --mkh-emerald-action: #135E46;
    
    --mkh-maroon-dark: #2B0307;
    --mkh-maroon-mid: #4A060E;
    --mkh-maroon-light: #6E0A16;
    
    --mkh-gold-light: #FEF08A;
    --mkh-gold-mid: #FDE68A;
    --mkh-gold-turmeric: #D98200;

    --mkh-canvas-top: #FFE4E8;
    --mkh-canvas-mid: #FBCFD7;
    --mkh-canvas-bottom: #F7B8C4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 12%, var(--mkh-emerald-light) 0%, var(--mkh-emerald-mid) 58%, var(--mkh-emerald-deep) 100%) !important;
    color: #1E293B;
}

/* Batang Tubuh Pusat */
.moakhat-admin-wrapper,
.moakhat-global-body {
    max-width: 1100px !important;
    width: calc(100% - 32px) !important;
    margin: 28px auto 46px !important;
    background: linear-gradient(180deg, var(--mkh-canvas-top) 0%, var(--mkh-canvas-mid) 55%, var(--mkh-canvas-bottom) 100%) !important;
    border: 2px solid rgba(110, 10, 22, 0.2) !important;
    border-radius: 26px !important;
    padding: 28px 26px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48) !important;
    box-sizing: border-box !important;
}

/* Kartu Marun */
.mkh-card-maroon,
.rekap-table-card,
.card-entry,
.radar-card,
.admin-banner {
    background: linear-gradient(145deg, var(--mkh-maroon-light) 0%, var(--mkh-maroon-mid) 60%, var(--mkh-maroon-dark) 100%) !important;
    border: 1px solid rgba(254, 240, 138, 0.25) !important;
    border-radius: 18px !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

/* KUNCI KETERBACAAN TABEL (LEGIBILITY FIX) */
.rekap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    text-align: left;
}

.rekap-table th {
    background: #1A0205 !important;
    color: #FEF08A !important;
    padding: 12px 14px !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--mkh-gold-turmeric) !important;
    letter-spacing: 0.3px;
}

/* Pastikan SEMUA teks data di dalam sel tabel berwarna putih terang & terbaca */
.rekap-table td {
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important; /* Putih solid anti-pucat */
    font-weight: 500;
    vertical-align: middle;
}

.rekap-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* Kolom teks penting diberi aksen emas */
.rekap-table td strong,
.rekap-table td .txt-gold {
    color: #FEF08A !important;
    font-weight: 700;
}

.rekap-table td .txt-muted {
    color: #FEE2E2 !important;
}

/* Tombol Aksi */
.btn-mkh-action,
.btn-submit-entry {
    background: linear-gradient(135deg, var(--mkh-emerald-action) 0%, var(--mkh-emerald-light) 65%, var(--mkh-emerald-deep) 100%) !important;
    color: #FEF08A !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(254, 240, 138, 0.28) !important;
    cursor: pointer;
}

.btn-act-edit {
    background: #0284c7 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.btn-act-delete {
    background: #b91c1c !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ==========================================================================
   OPTIMASI TIPOGRAFI & KETERBACAAN AKSARA ARAB (KHUSUS MOAKHAT.NET)
   Menyeimbangkan skala teks agar sama tegas, tebal, dan jelas dengan moakhat.id
   ========================================================================== */

body {
    font-size: 16px !important;
    line-height: 1.85 !important;
    letter-spacing: normal !important; /* Menghilangkan celah patah pada huruf sambung Arab */
}

/* 1. Skala Judul & Header */
.mkh-brand-title {
    font-size: 26px !important;
}

.mkh-title,
.admin-banner h1,
.sub-title,
h1, h2 {
    font-size: 26px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
}

/* 2. Paragraf & Teks Deskripsi */
.mkh-text,
.sub-lead,
.admin-sub,
p {
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    font-weight: 600 !important;
}

/* 3. Tombol Aksi & Navigasi */
.btn-mkh-action,
.btn-mkh-green,
.mkh-btn-action-nav,
.btn-submit-entry,
.login-btn-submit {
    font-size: 15px !important;
    padding: 11px 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

/* 4. Tabel & Formulir */
.rekap-table th {
    font-size: 14px !important;
    font-weight: 800 !important;
}

.rekap-table td {
    font-size: 14.5px !important;
    font-weight: 600 !important;
}

.form-input-mkh,
.form-select-mkh,
.form-textarea-mkh,
.login-input-mkh {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.sub-badge,
.mkh-badge {
    font-size: 12.5px !important;
    padding: 6px 16px !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   PERBAIKAN KONTRAS TINGGI DASHBOARD (HIGH CONTRAST & LEGIBILITY)
   ========================================================================== */

/* 1. Paksa Judul Utama & Sub-judul Menjadi Emas Menyala */
.admin-banner h1,
.card-entry h3,
.rekap-table-card h3,
.admin-wrap h1,
.admin-wrap h2,
.admin-wrap h3,
.admin-wrap h4 {
    color: #FEF08A !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    font-weight: 800 !important;
}

/* 2. Teks Deskripsi di Bawah Judul Menjadi Putih Terang */
.admin-banner span,
.card-entry label,
.admin-sub,
.sub-lead {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Kartu Indikator Radar: Judul, Angka, dan Keterangan Terang */
.radar-card .radar-title,
.radar-title {
    color: #FEF08A !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    display: inline-block !important;
}

.radar-card .radar-val,
.radar-val {
    color: #FFFFFF !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.radar-card .radar-desc,
.radar-desc {
    color: #FFE4E6 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Label di Atas Input Form */
.card-entry label {
    color: #FEF08A !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* 5. Kotak Input Teks Lebih Bersih & Tegas */
.card-entry input, 
.card-entry select {
    background: #FFFFFF !important;
    color: #2B0307 !important;
    border: 2px solid #D98200 !important;
    font-weight: 700 !important;
}

.card-entry input::placeholder {
    color: #94A3B8 !important;
    font-weight: 500 !important;
}