/* ============================================================
   Sekretariat — styling custom di luar CSS precompiled Filament.

   Kenapa file ini ada: panel admin gak pakai custom theme (gak ada
   build step Vite/Tailwind), jadi cuma class yang kebetulan dipakai
   core Filament yang tersedia. Class Tailwind lain (hover:bg-primary-50,
   w-40, uppercase, dll.) diam-diam GAK ngefek. Semua kebutuhan di luar
   itu ditulis manual di sini — plain CSS, gak butuh build step,
   aman buat shared hosting.

   Brand Valcon Academy: navy #311f59, orange #eb7d23.
   ============================================================ */

:root {
    --sek-navy: #311f59;
    --sek-orange: #eb7d23;
}

/* ------------------------------------------------------------
   Kartu Menu Cepat (dashboard)
   ------------------------------------------------------------ */

.sek-quick-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background-color: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease,
        box-shadow 0.15s ease, transform 0.15s ease;
}

.sek-quick-link:hover {
    border-color: rgb(235 125 35 / 0.5);
    background-color: rgb(235 125 35 / 0.04);
    box-shadow: 0 2px 8px rgb(49 31 89 / 0.08);
    transform: translateY(-1px);
}

.sek-quick-link:active {
    transform: translateY(0);
}

.sek-quick-link:focus-visible {
    outline: 2px solid var(--sek-orange);
    outline-offset: 2px;
}

.sek-quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 9999px;
    background-color: rgb(235 125 35 / 0.12);
}

/* ------------------------------------------------------------
   Divider tipis sidebar vs konten (desktop)

   Filament sengaja copot shadow/ring bawaan sidebar di layar gede
   (class `lg:shadow-none lg:ring-0` bawaan) — biar nyatu sama
   topbar. Efeknya batas sidebar cuma keliatan dari kontras
   background doang (putih vs abu-abu), bukan garis beneran.
   ------------------------------------------------------------ */

@media (min-width: 1024px) {
    .fi-sidebar {
        border-inline-end: 1px solid rgb(228 228 231); /* senada warna ring Filament (zinc-200) */
    }
}

/* ============================================================
   HALAMAN LOGIN — 1 layout responsive (bukan versi mobile/desktop
   terpisah lagi)

   Panel brand navy render di NORMAL DOCUMENT FLOW di semua ukuran
   layar (gak ada position:fixed sama sekali di halaman ini). Di
   mobile jadi band compact di atas form; di >=1024px `body` jadi
   flex row jadi panel & form otomatis kesamping. Sengaja disatuin
   biar gak ada lagi 2 kode path terpisah yang masing-masing bisa
   punya bug sendiri-sendiri (riwayat: card invisible & aksen
   numpuk tombol submit, dua-duanya cuma kejadian di versi mobile
   yang lama). Semua selector di-scope ke .fi-simple-layout /
   .sek-login-* biar gak nyenggol halaman panel lain.
   ============================================================ */

/* `body` jadi flex container biar panel brand & .fi-simple-layout
   (dua-duanya direct child body, brand di-inject via render hook
   BODY_START) bisa disusun kesamping di layar gede. Elemen lain
   yang mungkin ikut jadi child body (script, portal notifikasi
   Filament, dll) biasanya position:fixed/gak render box — flex
   item gak berlaku buat elemen fixed, jadi aman. */
body:has(.fi-simple-layout) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.fi-simple-layout {
    background-color: #fff;

    /* Filament nempelin `min-h-screen` (min-height:100vh) bawaan ke elemen
       ini, dikombinasi child-nya yang justify-center/items-center bikin card
       ke-vertically-center DI TENGAH box setinggi 1 layar penuh. Karena band
       brand kita taro SEBELUM elemen ini (bukan di dalemnya), tanpa override
       ini hasilnya numpuk: band + box 100vh lagi di bawahnya, form ngambang
       di tengah box itu → ada gap kosong raksasa antara band & form. Height
       beneran sekarang diatur dari luar (flex body: auto di mobile, flex:1
       ngikutin panel brand di desktop) — bukan dari min-height bawaan ini. */
    min-height: 0 !important;
}

@media (min-width: 1024px) {
    body:has(.fi-simple-layout) {
        flex-direction: row;
    }

    .fi-simple-layout {
        flex: 1;
        min-width: 0; /* boleh nyusut, gak dipaksa selebar konten form */
    }
}

/* --- Panel brand --- */

.sek-login-brand {
    position: relative;
    flex: none;
    width: 100%;
    padding: 2.5rem 1.75rem;
    overflow: hidden;
    background:
        radial-gradient(70rem 35rem at 115% 115%, rgb(235 125 35 / 0.28), transparent 55%),
        radial-gradient(50rem 28rem at -15% -10%, rgb(255 255 255 / 0.07), transparent 60%),
        linear-gradient(160deg, #3b2769 0%, #311f59 50%, #211140 100%);
}

@media (min-width: 1024px) {
    .sek-login-brand {
        width: 44%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4rem 4.5rem;
    }
}

.sek-login-brand-accent {
    position: absolute;
    width: 161px; /* ukuran natural */
    height: auto;
    pointer-events: none;
    user-select: none;
}

.sek-login-brand-accent--tl {
    top: 0;
    left: 0;
    opacity: 0.35;
}

.sek-login-brand-accent--br {
    bottom: 0;
    right: 0;
    opacity: 0.95;
}

.sek-login-brand-inner {
    position: relative;
    max-width: 26rem;
}

.sek-login-brand-logo {
    height: 29px; /* natural artwork *_trim.png, 1:1 pixel */
    width: auto;
    margin-bottom: 1.25rem;
}

.sek-login-brand-kicker {
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(235 125 35 / 0.95);
}

.sek-login-brand-title {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

/* Tagline & footer cuma muncul di layar gede — band mobile sengaja
   dibikin compact (logo + judul doang) biar gak makan viewport
   sebelum form-nya keliatan. */
.sek-login-brand-text,
.sek-login-brand-foot {
    display: none;
}

@media (min-width: 1024px) {
    .sek-login-brand-logo {
        margin-bottom: 2.5rem;
    }

    .sek-login-brand-title {
        margin-bottom: 1rem;
        font-size: 2.5rem;
    }

    .sek-login-brand-text {
        display: block;
        font-size: 1rem;
        line-height: 1.75;
        color: rgb(255 255 255 / 0.72);
    }

    .sek-login-brand-foot {
        display: block;
        position: absolute;
        left: 4.5rem;
        bottom: 2.5rem;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgb(255 255 255 / 0.4);
    }
}

/* Card gak perlu "ngambang" lagi — sisi form udah putih bersih di
   semua ukuran layar sekarang (bukan cuma desktop). */
.fi-simple-layout .fi-simple-main {
    background-color: transparent;
    box-shadow: none;
}

/* Logo di card redundant di semua ukuran — panel brand di atas/
   samping udah bawa wordmark-nya sendiri. */
.fi-simple-layout .fi-simple-header .fi-logo {
    display: none !important;
}

/* --- Polish card & form (semua ukuran) --- */

.fi-simple-layout .fi-simple-header-heading {
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--sek-navy);
}

/* Garis aksen kecil di bawah heading */
.fi-simple-layout .fi-simple-header-heading::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin: 1rem auto 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--sek-orange), #f5a35c);
}

/* Field lebih tinggi dikit biar kerasa lega */
.fi-simple-layout .fi-input {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* Tombol submit: gradient orange + shadow lembut */
.fi-simple-layout .fi-form .fi-btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.625rem;
    background-image: linear-gradient(180deg, #f28d38, #e26f15);
    box-shadow: 0 10px 22px -8px rgb(235 125 35 / 0.55);
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.fi-simple-layout .fi-form .fi-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -8px rgb(235 125 35 / 0.6);
}

.fi-simple-layout .fi-form .fi-btn:active {
    transform: translateY(0);
}

/* --- Animasi masuk yang halus ---
   Cuma geser posisi (transform), BUKAN opacity — kalau animasinya kepotong
   atau gak sempet jalan (tab sempet background pas transisi, koneksi
   lambat), konten tetep keliatan. Sengaja gak dibikin fade-in dari opacity:0
   karena itu bisa bikin card login nyangkut invisible selama-lamanya kalau
   animation-nya gak pernah kelar. */

@keyframes sek-rise {
    from {
        transform: translateY(14px);
    }

    to {
        transform: none;
    }
}

.fi-simple-layout .fi-simple-main {
    animation: sek-rise 0.45s ease-out both;
}

.sek-login-brand-inner {
    animation: sek-rise 0.6s ease-out both;
}

/* ------------------------------------------------------------
   Tabel data custom (Export Peserta & Daftar Kursus)
   ------------------------------------------------------------ */

.sek-table-wrap {
    overflow-x: auto;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background-color: #fff;
}

.sek-table {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
}

.sek-table thead {
    background-color: rgb(249 250 251);
}

.sek-table th {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(75 85 99);
    white-space: nowrap;
}

.sek-table td {
    padding: 0.625rem 1rem;
}

.sek-table tbody tr {
    transition: background-color 0.1s ease;
}

.sek-table tbody tr + tr {
    border-top: 1px solid rgb(243 244 246);
}

.sek-table tbody tr:hover {
    background-color: rgb(249 250 251);
}

.sek-col-no {
    width: 3.5rem;
}

.sek-col-id {
    width: 6rem;
}

.sek-cell-end {
    text-align: right;
    white-space: nowrap;
}

.sek-num {
    font-variant-numeric: tabular-nums;
}

/* Badge Filament di dalem tabel custom: inner span-nya bawaan punya
   class `truncate`, jadi pas kolom kegencet label-nya kepotong
   ("Sele..."). Paksa label utuh — kalau sempit, tabelnya yang
   scroll horizontal di dalem .sek-table-wrap. */
.sek-table .fi-badge span {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Empty / hint state
   ------------------------------------------------------------ */

.sek-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.sek-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.375rem;
    border-radius: 9999px;
    background-color: rgb(243 244 246);
    color: rgb(156 163 175);
}

.sek-empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.sek-empty-desc {
    max-width: 28rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

/* ------------------------------------------------------------
   Aksesibilitas: matiin motion buat yang set reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .sek-quick-link,
    .sek-table tbody tr,
    .fi-simple-layout .fi-form .fi-btn {
        transition: none;
    }

    .sek-quick-link:hover,
    .fi-simple-layout .fi-form .fi-btn:hover {
        transform: none;
    }

    .fi-simple-layout .fi-simple-main,
    .sek-login-brand-inner {
        animation: none;
    }
}