/* ============================================================================
   RARA THEME — overlay material language for AIC (aicerdas)
   ----------------------------------------------------------------------------
   Frosted glass · pill geometry · pearl backdrop · charcoal anchor · aurora wash
   Diterapkan di atas Hope UI / Bootstrap 5 (TIDAK mengubah file vendor).
   REVERT: hapus <link ...rara-theme.css> dari layout/login, atau git revert.
   ============================================================================ */

/* Font RaRa: Inter (UI/teks) + JetBrains Mono (monospace).
   @import HARUS di paling atas (sebelum rule lain) agar dimuat. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Pearl backdrop */
    --ae-pearl:        #eef1f6;
    --ae-pearl-deep:   #e7ebf3;

    /* Glass tiers (white-alpha) */
    --ae-glass-1: rgba(255, 255, 255, 0.55);
    --ae-glass-2: rgba(255, 255, 255, 0.72);
    --ae-glass-3: rgba(255, 255, 255, 0.85);
    --ae-glass-solid: #ffffff;

    /* Ink / charcoal anchor */
    --ae-ink:      #1a1d23;
    --ae-ink-2:    #3b414d;
    --ae-ink-soft: #5b616e;
    --ae-ink-mut:  #8b909c;

    /* Accent (system blue) + aurora */
    --ae-accent:      #2d6cff;
    --ae-accent-deep: #1b54e0;
    --ae-aurora-a:    rgba(196, 181, 253, 0.55);  /* lavender */
    --ae-aurora-b:    rgba(147, 197, 253, 0.45);  /* sky      */

    /* Lines + geometry */
    --ae-hairline:  rgba(20, 24, 35, 0.09);
    --ae-hairline-2:rgba(20, 24, 35, 0.06);
    --ae-r-pill:    9999px;
    --ae-r-card:    24px;
    --ae-r-sm:      14px;

    /* Material */
    --ae-blur: saturate(180%) blur(20px);

    /* Bevel: inset top-left highlight, soft return + ambient drop */
    --ae-bevel:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(20, 24, 35, 0.04),
        0 1px 2px rgba(20, 24, 35, 0.04),
        0 12px 30px -12px rgba(20, 24, 35, 0.14);
    --ae-bevel-sm:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(20, 24, 35, 0.05),
        0 6px 16px -10px rgba(20, 24, 35, 0.16);

    /* Map Bootstrap accent to RaRa blue (text-primary, links, etc.) */
    --bs-primary:        #2d6cff;
    --bs-primary-rgb:    45, 108, 255;
    --bs-link-color:     #2d6cff;
    --bs-link-hover-color: #1b54e0;

    /* Font stacks */
    --ae-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ae-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
    --bs-body-font-family: var(--ae-sans);
    --bs-font-sans-serif:  var(--ae-sans);
    --bs-font-monospace:   var(--ae-mono);
}

/* ===========================================================================
   FONT — Inter untuk seluruh UI, JetBrains Mono untuk monospace
   =========================================================================== */
body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .form-select, .nav-link, .dropdown-item,
.badge, .table, input, button, select, textarea, label, .caption-title {
    font-family: var(--ae-sans) !important;
}
/* Monospace tetap monospace (mis. tabel <pre> laporan jadwal) — hanya gantikan
   rupa-nya dengan JetBrains Mono; lebar karakter tetap seragam, perataan aman. */
pre, code, kbd, samp, .text-monospace, .font-monospace, tt {
    font-family: var(--ae-mono) !important;
}

/* ===========================================================================
   PEARL BACKDROP + AURORA WASH
   =========================================================================== */
body {
    background-color: var(--ae-pearl) !important;
    /* Aurora wash painted directly on body (no fixed pseudo / z-index — those
       are fragile under the admin layout's `zoom: 0.9` wrapper). */
    background-image:
        radial-gradient(1100px 620px at 88% -8%, var(--ae-aurora-a), transparent 60%),
        radial-gradient(900px 560px at 6% 4%,  var(--ae-aurora-b), transparent 58%),
        linear-gradient(180deg, #f2f4f9 0%, var(--ae-pearl) 38%, var(--ae-pearl-deep) 100%) !important;
    /* Semua scroll (BUKAN fixed): background-attachment:fixed memaksa repaint
       seluruh viewport tiap frame -> animasi toggle sidebar jadi tersendat. */
    background-attachment: scroll;
    background-repeat: no-repeat;
    color: var(--ae-ink);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

/* Optical type — tighten display headings like SF Pro */
h1, h2, h3, .h1, .h2, .h3, .logo-title {
    letter-spacing: -0.022em;
    color: var(--ae-ink);
}
h4, h5, h6 { letter-spacing: -0.012em; }

/* Toggle sidebar lebih halus: Hope UI pakai `transition: all` (menganimasikan
   SEMUA properti -> berat & tersendat). Batasi ke properti layout saja, durasi
   snappy + easing mulus. */
.sidebar,
.sidebar.sidebar-mini + .main-content,
.main-content {
    transition-property: max-width, width, margin-left !important;
    transition-duration: 280ms !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-delay: 0s !important;
}

/* ===========================================================================
   SIDEBAR — frosted glass pane, pill nav items, charcoal active
   =========================================================================== */
.sidebar.sidebar-default {
    /* opaque-ish white (no backdrop-filter: breaks under `zoom` wrapper in Chrome) */
    background: rgba(255, 255, 255, 0.92) !important;
    border-right: 1px solid var(--ae-hairline);
    box-shadow: 1px 0 30px -18px rgba(20, 24, 35, 0.25);
}
.sidebar .sidebar-header {
    border-bottom: 1px solid var(--ae-hairline-2);
    background: transparent;
}
.sidebar .navbar-brand .logo-title { color: var(--ae-ink); font-weight: 700; }

.sidebar .nav-item .nav-link {
    border-radius: var(--ae-r-pill);
    color: var(--ae-ink-soft);
    font-weight: 500;
    margin: 2px 10px;
    padding: 9px 14px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sidebar .nav-item .nav-link:hover {
    background: var(--ae-glass-3);
    color: var(--ae-ink);
    box-shadow: var(--ae-bevel-sm);
}
.sidebar .nav-item .nav-link.active,
.sidebar .nav-item .nav-link[aria-expanded="true"] {
    /* Biru translucent + bevel kaca (backdrop-filter tak dipakai: sidebar admin
       ada di dalam wrapper `zoom:0.9` yang bikin blur Chrome glitch). */
    background: linear-gradient(135deg, rgba(45,108,255,0.90) 0%, rgba(27,84,224,0.84) 100%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.30),
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 8px 22px -10px rgba(27, 84, 224, 0.5);
}
.sidebar .nav-item .nav-link.active i,
.sidebar .nav-item .nav-link.active svg { color: #fff !important; }

/* sub-menu items: lighter pill */
.sidebar .sub-nav .nav-link { margin: 1px 10px 1px 18px; padding: 7px 14px; }
.sidebar .sub-nav .nav-link.active {
    background: var(--ae-accent) !important;
    box-shadow: 0 8px 18px -10px rgba(45, 108, 255, 0.7);
}
.sidebar .static-item .nav-link.static-item {
    color: var(--ae-ink-mut) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 700;
}
.hr-horizontal { border-color: var(--ae-hairline); opacity: 1; }

/* --- Mode mini (sidebar ikon saja): pusatkan ikon & sembunyikan teks supaya
   tidak terpotong. (margin pill bawaan tema bikin ikon mepet/terpotong.) --- */
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .nav-link {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .nav-link .item-name,
.sidebar.sidebar-mini:not(.sidebar-hover:hover) .nav-item .nav-link .right-icon {
    display: none !important;
}

/* --- Hanya SATU tombol toggle sidebar: simpan yang di navbar, sembunyikan
   duplikat yang menempel di tepi header sidebar. --- */
.sidebar .sidebar-header .sidebar-toggle { display: none !important; }

/* ===========================================================================
   TOP NAVBAR + PAGE HEADER
   =========================================================================== */
.iq-navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--ae-hairline);
    border-radius: var(--ae-r-card);
    box-shadow: var(--ae-bevel);
    margin: 12px 16px 0;
}
.iq-navbar .navbar-brand img { filter: none; }
.iq-navbar .caption-title { color: var(--ae-ink); font-weight: 600; }

/* Replace the photographic header band with calm pearl; force title dark
   (old theme made it white to sit over a dark header image we now hide). */
.iq-navbar-header { background: transparent !important; }
.iq-header-img { display: none !important; }
.iq-navbar-header h3,
.iq-navbar-header .container-fluid h3 { color: var(--ae-ink) !important; }

/* Tombol toggle sidebar (lingkaran biru): SVG inline jatuh ke baseline -> panah
   tidak rata tengah. Jadikan flex-center + svg block. */
.sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle .icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.sidebar-toggle svg { display: block; }

/* ===========================================================================
   CARDS — glass panes, 24px radius, refracted bevel
   =========================================================================== */
.card {
    /* Solid near-white instead of backdrop-filter — the admin shell sits inside
       a `zoom: 0.9` wrapper, and Chrome renders backdrop-filter blank/misplaced
       under zoom. Opaque white over the pearl reads the same, no glitch. */
    background: #ffffff !important;
    border: 1px solid var(--ae-hairline) !important;
    border-radius: var(--ae-r-card) !important;
    box-shadow: var(--ae-bevel) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card[role="button"]:hover,
a .card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 18px 40px -16px rgba(20, 24, 35, 0.28) !important;
}
.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ae-hairline-2) !important;
    border-radius: var(--ae-r-card) var(--ae-r-card) 0 0 !important;
}
.card-transparent { background: transparent !important; backdrop-filter: none; box-shadow: none !important; border: 0 !important; }

/* ===========================================================================
   BUTTONS — pill geometry; primary = charcoal anchor
   =========================================================================== */
.btn {
    border-radius: var(--ae-r-pill) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.5rem 1.15rem;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--ae-accent-deep) !important;
    border-color: var(--ae-accent-deep) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -12px rgba(27, 84, 224, 0.65);
}
.btn-primary:hover, .btn-primary:focus {
    background: #1542b8 !important;
    border-color: #1542b8 !important;
    box-shadow: 0 14px 30px -12px rgba(27, 84, 224, 0.8);
}

/* Outline buttons -> glass pills with hairline */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
.btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-dark {
    background: #ffffff !important;
    border: 1px solid var(--ae-hairline) !important;
    color: var(--ae-ink) !important;
    box-shadow: var(--ae-bevel-sm);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover,
.btn-outline-dark:hover {
    background: #fff !important;
    color: var(--ae-ink) !important;
    transform: translateY(-1px);
}

/* Keep semantic solids, just pill + lift */
.btn-success, .btn-danger, .btn-info, .btn-warning, .btn-secondary {
    box-shadow: 0 10px 22px -14px rgba(20, 24, 35, 0.55);
    border: 0;
}

/* Tombol filter "Cari": pola umumnya kolom `d-flex align-items-center` berisi
   satu tombol, di samping kolom input yang punya <label> di atasnya. Centering
   itu bikin tombol naik (sejajar label), bukan sejajar kotak input. Ratakan
   dasar tombol dengan dasar kotak input. */
.row > [class*="col-"].d-flex.align-items-center:has(> .btn:only-child) {
    align-items: flex-end !important;
}
.row > [class*="col-"].d-flex.align-items-center:has(> .btn:only-child) > .btn {
    margin-bottom: 1rem;   /* samakan dengan mb-3 kolom input di sebelahnya */
}

/* ===========================================================================
   FORM CONTROLS — soft glass fields, blue focus ring
   =========================================================================== */
.form-control, .form-select, .input-group-text {
    background: var(--ae-glass-3);
    border: 1px solid var(--ae-hairline);
    border-radius: var(--ae-r-sm) !important;
    color: var(--ae-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--ae-accent);
    box-shadow: 0 0 0 3px rgba(45, 108, 255, 0.22);
}
.input-group .form-control { border-radius: var(--ae-r-sm) 0 0 var(--ae-r-sm) !important; }
.input-group .input-group-text,
.input-group .form-control + .input-group-text { border-radius: 0 var(--ae-r-sm) var(--ae-r-sm) 0 !important; }
.form-label { color: var(--ae-ink-2); font-weight: 600; }

/* Toggle switches -> accent blue (like the spec) */
.form-check-input:checked {
    background-color: var(--ae-accent);
    border-color: var(--ae-accent);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(45, 108, 255, 0.22); }

/* ===========================================================================
   TABLES (RaRa) — header lembut (bukan hitam), garis tipis, sudut membulat
   =========================================================================== */
.table {
    --bs-table-bg: transparent;
    color: var(--ae-ink-2);
    /* Hope UI bikin baris zebra jadi TEKS ABU (#8A92A6) + strip abu -> tampak
       pudar/jelek. Paksa teks tetap gelap & strip jadi tint biru sangat halus. */
    --bs-table-striped-color: var(--ae-ink-2);
    --bs-table-striped-bg: rgba(45, 108, 255, 0.045);
    border-collapse: separate !important;   /* perlu utk border-radius sudut */
    border-spacing: 0;
}

/* Header: dari .table-dark/hitam -> tint terang; label gelap-muted uppercase.
   `!important` pada color override inline `style="color:white"` di banyak th. */
.table thead.table-dark,
.table thead.table-dark tr,
.table thead tr {
    --bs-table-bg: #eef2f9;
    --bs-table-color: var(--ae-ink-soft);
    background: #eef2f9 !important;
}
.table thead th {
    color: var(--ae-ink-soft) !important;
    background: #eef2f9 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11.5px;
    font-weight: 700;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ae-hairline) !important;
}

/* Garis tipis & tidak "boxy": hilangkan garis vertikal table-bordered,
   sisakan hairline bawah antar baris. Plus padding vertikal lega utk dibaca. */
.table > :not(caption) > * > * {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ae-hairline-2) !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}
/* Tabel padat (.table-sm) tetap diberi jarak baris yang nyaman dibaca */
.table-sm > :not(caption) > * > * {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

/* Sudut tabel membulat (butuh border-collapse: separate) */
.table thead tr:first-child th:first-child { border-top-left-radius: 16px; }
.table thead tr:first-child th:last-child  { border-top-right-radius: 16px; }
.table tbody tr:last-child td:first-child  { border-bottom-left-radius: 16px; }
.table tbody tr:last-child td:last-child   { border-bottom-right-radius: 16px; }
.table tbody tr:last-child > * { border-bottom: 0 !important; }

/* Hover lembut (striping bawaan dibiarkan — sudah abu lembut di tema terang) */
.table-hover > tbody > tr:hover > * {
    background: rgba(45, 108, 255, 0.06);
    color: var(--ae-ink);
}

/* ===========================================================================
   BADGES · DROPDOWNS · MODALS · NAV-TABS · PAGINATION
   =========================================================================== */
.badge { border-radius: var(--ae-r-pill); font-weight: 600; letter-spacing: .01em; }

.dropdown-menu {
    background: #ffffff;
    border: 1px solid var(--ae-hairline);
    border-radius: var(--ae-r-sm);
    box-shadow: var(--ae-bevel);
}
.dropdown-item { border-radius: 10px; margin: 1px 6px; width: auto; }
.dropdown-item:hover { background: rgba(45, 108, 255, 0.08); color: var(--ae-ink); }

.modal-content {
    background: #ffffff;
    border: 1px solid var(--ae-hairline);
    border-radius: var(--ae-r-card);
    box-shadow: 0 30px 70px -25px rgba(20, 24, 35, 0.45);
}
.modal-header, .modal-footer { border-color: var(--ae-hairline-2); }

.nav-tabs, .nav-pills { gap: 4px; }
.nav-tabs .nav-link, .nav-pills .nav-link { border-radius: var(--ae-r-pill); border: 0; color: var(--ae-ink-soft); font-weight: 600; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    background: var(--ae-accent-deep); color: #fff;
    box-shadow: 0 8px 18px -10px rgba(27, 84, 224, 0.55);
}

.page-link { border: 0; border-radius: var(--ae-r-pill) !important; margin: 0 2px; color: var(--ae-ink-soft); }
.page-item.active .page-link { background: var(--ae-accent-deep); color: #fff; }

/* Soft-tinted utility chips keep working but get the pill radius */
[class*="bg-soft-"] { border-radius: var(--ae-r-sm); }

/* ===========================================================================
   LOGIN PAGES — glass auth card floating on pearl/aurora
   =========================================================================== */
.login-content .bg-white { background: transparent !important; }
.login-content .auth-card {
    background: var(--ae-glass-3) !important;
    -webkit-backdrop-filter: var(--ae-blur);
    backdrop-filter: var(--ae-blur);
    border: 1px solid var(--ae-hairline) !important;
    border-radius: var(--ae-r-card) !important;
    box-shadow: var(--ae-bevel) !important;
    padding: 6px;
}
.login-content .bg-primary { position: relative; }
.login-content .bg-primary::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 420px at 30% 20%, var(--ae-aurora-a), transparent 60%);
    pointer-events: none;
}

/* ===========================================================================
   LANDING (index) — segarkan section hijau-tua/teal lama -> wash RaRa
   Override inline style/<style> blade via !important (revert tetap 1 file).
   =========================================================================== */
/* Section berlatar seafoam/teal lama -> wash sky->lavender yang fresh & airy */
#programkami,
#testimoni,
#brosur {
    background: linear-gradient(160deg, #eef4ff 0%, #f4f0fe 55%, #fdeef6 100%) !important;
}
/* Header kartu brosur: hindari hijau gelap -> gradient accent-blue RaRa */
#brosur .brosur-head {
    background: linear-gradient(135deg, var(--ae-accent) 0%, #6aa0ff 100%) !important;
}
/* Kartu brosur ikut bahasa kaca RaRa (radius 24, hairline, bevel) */
#brosur .brosur-card {
    border: 1px solid var(--ae-hairline) !important;
    border-radius: var(--ae-r-card) !important;
    box-shadow: var(--ae-bevel) !important;
}
#brosur .brosur-card:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
                0 18px 40px -16px rgba(20,24,35,.28) !important;
}
/* Gambar brosur JANGAN terpotong: wrap + responsif (bukan baris scroll yang
   memotong poster kanan). Tinggi tetap rasio, dibatasi tinggi maksimum. */
#brosur .brosur-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center;
    gap: 16px;
}
#brosur .brosur-row img {
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 640px;
}

/* ===========================================================================
   MOBILE / OVERFLOW GUARDS — cegah konten meluber horizontal di layar potret
   =========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }

/* Baris horizontal `.scroll-container` (Program/Pendaftaran/Testimoni) tidak
   punya aturan overflow di CSS bawaan -> di mobile melebar keluar viewport &
   konten "hilang". Kurung agar discroll DI DALAM baris, bukan menggeser halaman. */
.scroll-container {
    overflow-x: auto !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Navbar di mobile: teks gelap & latar solid saat menu (offcanvas) terbuka,
   margin pill dikecilkan supaya pas dan terbaca. */
.iq-navbar .nav-link,
.horizontal-nav .nav-link,
.mobile-offcanvas .nav-link { color: var(--ae-ink) !important; font-weight: 600; }
.mobile-offcanvas { background: #ffffff !important; }

@media (max-width: 1199.98px) {
    .iq-navbar { margin: 8px !important; padding: .4rem .65rem; }
    #brosur .brosur-row img { max-height: none; width: 100%; }
}

/* ===========================================================================
   FOCUS-VISIBLE — 3px system-blue ring stacked over the bevel (a11y)
   =========================================================================== */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible, .form-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 108, 255, 0.45);
}

/* Reduced motion honored */
@media (prefers-reduced-motion: reduce) {
    .card, .btn, .sidebar .nav-link { transition: none !important; }
}

/* Scrollbar — quiet */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(20, 24, 35, 0.18); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 24, 35, 0.3); background-clip: padding-box; }