/* ==========================================================================
   FULFILLIN-THEME.CSS — Tema modern Fulfillin Member (root level)

   Overlay global NON-Sneat di atas struktur HTML template Sneat.
   Mengganti TAMPILAN (sidebar, navbar, kartu, tabel, form, dsb.) tanpa
   mengubah DOM/JS Sneat → nol regresi perilaku menu/navbar lintas halaman.

   Dimuat terakhir di <head> (common_master.blade.php, setelah custom.css)
   sehingga menimpa CSS hasil build vite (core.scss Sneat).

   Palet & pola mengikuti design token --fm-* di bawah.
   ========================================================================== */

:root {
    /* Design tokens */
    --fm-surface: #f4f5f8;
    --fm-card: #ffffff;
    --fm-border: #e7e9ee;
    --fm-border-strong: #d9dce3;
    --fm-text: #1e2230;
    --fm-text-muted: #6b7280;
    --fm-brand: #c8102e;
    --fm-brand-dark: #a50c25;
    --fm-brand-soft: rgba(200, 16, 46, 0.08);
    --fm-shadow-sm: 0 1px 2px rgba(24, 28, 43, 0.06), 0 4px 16px rgba(24, 28, 43, 0.05);
    --fm-shadow-md: 0 2px 4px rgba(24, 28, 43, 0.06), 0 12px 32px rgba(24, 28, 43, 0.1);
    --fm-radius: 16px;
    --fm-radius-sm: 10px;
}

/* ─── 1. Latar halaman ─────────────────────────────────────────── */
body {
    background-color: var(--fm-surface);
    color: var(--fm-text);
}

.layout-page {
    background:
        radial-gradient(900px 320px at 85% -5%, rgba(200, 16, 46, 0.045), transparent 60%),
        var(--fm-surface);
}

.content-wrapper {
    background: transparent;
}

/* Footer */
.footer {
    color: var(--fm-text-muted);
    font-size: 13px;
}

/* ─── 2. Sidebar (menu) modern ─────────────────────────────────── */
.layout-menu.menu.bg-menu-theme {
    background-color: #fbfbfd !important;
    color: var(--fm-text) !important;
    border-right: 1px solid var(--fm-border);
    box-shadow: none !important;
}

/* Area brand */
.layout-menu .app-brand.demo {
    padding: 1.1rem 1.4rem 1.1rem 1.5rem;
}
.layout-menu .app-brand.demo .app-brand-logo {
    display: inline-flex;
    align-items: center;
}

/* Header grup menu (uppercase mikro) */
.bg-menu-theme .menu-header {
    color: #a0a7b5 !important;
    font-size: 10.5px !important;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 1.1rem 1.5rem 0.4rem !important;
}
.bg-menu-theme .menu-header .menu-header-text {
    font-size: inherit;
}

/* Link menu utama */
.bg-menu-theme .menu-inner > .menu-item > .menu-link {
    color: #4a5163 !important;
    font-size: 13.5px;
    font-weight: 500;
    margin: 0.125rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--fm-radius-sm);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
    background-color: rgba(24, 28, 43, 0.05);
    color: var(--fm-text) !important;
}

/* Ikon menu */
.bg-menu-theme .menu-inner .menu-link i {
    color: #8a94a6;
    font-size: 1.15rem;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i {
    color: var(--fm-brand);
}

/* Item aktif: pill tint merah + indikator kiri */
/* Varian `.open` ikut diikutkan agar menimpa `transparent !important` Sneat
   untuk `.menu-item.active.open` (item aktif yang kebetulan dapat kelas open). */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active.open > .menu-link,
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link {
    background-color: var(--fm-brand-soft) !important;
    color: var(--fm-brand) !important;
    font-weight: 600;
}
.bg-menu-theme .menu-inner > .menu-item.active::before {
    width: 4px !important;
    height: 22px !important;
    top: 50% !important;
    left: 6px !important;
    transform: translateY(-50%) !important;
    border-radius: 4px !important;
    background-color: var(--fm-brand) !important;
}

/* Submenu */
.bg-menu-theme .menu-sub .menu-link {
    color: #6b7280 !important;
    font-size: 13.5px;
    border-radius: var(--fm-radius-sm);
    margin: 0.125rem 0.75rem;
    padding: 0.5rem 0.9rem 0.5rem 2.2rem;
}
.bg-menu-theme .menu-sub .menu-item.active > .menu-link {
    background-color: var(--fm-brand-soft) !important;
    color: var(--fm-brand) !important;
    font-weight: 600;
}

/* Divider & shadow */
.bg-menu-theme .menu-divider:after {
    background: var(--fm-border);
}
.menu-inner-shadow {
    display: none;
}

/* State collapsed: ikon terpusat rapi */
.layout-menu-collapsed .layout-menu .menu-inner > .menu-item > .menu-link {
    margin-inline: 0.55rem;
    padding: 0.65rem;
    justify-content: center;
}

/* Scrollbar sidebar halus */
.menu-vertical .menu-inner::-webkit-scrollbar {
    width: 5px;
}
.menu-vertical .menu-inner::-webkit-scrollbar-thumb {
    background: var(--fm-border-strong);
    border-radius: 99px;
}

/* ─── 3. Navbar modern ─────────────────────────────────────────── */
.layout-navbar.navbar-detached {
    border-radius: var(--fm-radius);
    background-color: #ffffff !important;
    border: 1px solid var(--fm-border);
    box-shadow: var(--fm-shadow-sm);
    margin: 14px;
    min-height: 64px;
    padding-inline: 1.25rem;
}

.layout-navbar .navbar-nav-right {
    gap: 0.5rem;
}

/* Breadcrumb */
.layout-navbar .breadcrumb {
    font-size: 13px;
}
.layout-navbar .breadcrumb-item a {
    color: var(--fm-text-muted);
}
.layout-navbar .breadcrumb-item a:hover {
    color: var(--fm-brand);
}
.layout-navbar .breadcrumb-item.active {
    color: var(--fm-brand);
    font-weight: 600;
}
.layout-navbar .breadcrumb-item + .breadcrumb-item::before {
    color: #c4c9d4;
}

/* User chip */
.dropdown-user .avatar {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--fm-border);
}

/* ─── 4. Kartu ─────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--fm-border) !important;
    border-radius: var(--fm-radius) !important;
    box-shadow: var(--fm-shadow-sm);
    background-color: var(--fm-card);
}
.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fm-border);
    background-color: transparent;
}
.card-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--fm-text);
}
.card-body {
    padding: 1.5rem;
}
.card .card-body.p-0 {
    padding: 0;
}

/* ─── 5. Tombol ────────────────────────────────────────────────── */
.btn {
    border-radius: var(--fm-radius-sm);
    font-weight: 600;
}
.btn-primary {
    background-color: var(--fm-brand) !important;
    border-color: var(--fm-brand) !important;
    box-shadow: 0 4px 14px rgba(200, 16, 46, 0.22);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--fm-brand-dark) !important;
    border-color: var(--fm-brand-dark) !important;
}
.btn-outline-primary {
    border-color: var(--fm-brand);
    color: var(--fm-brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--fm-brand) !important;
    border-color: var(--fm-brand) !important;
    color: #ffffff !important;
}

/* ─── 6. Tabel ─────────────────────────────────────────────────── */
.table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--fm-text-muted);
    font-weight: 600;
    background-color: #fafbfc;
    border-bottom: 1px solid var(--fm-border) !important;
    white-space: nowrap;
}
.table tbody td {
    vertical-align: middle;
    font-size: 13.5px;
    padding: 0.75rem 1rem;
    border-color: var(--fm-border);
}
.table tbody tr:hover {
    background-color: #f8f9fc;
}

/* ─── 7. Form ──────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--fm-radius-sm);
    border-color: var(--fm-border-strong);
    font-size: 14px;
    padding: 0.55rem 0.9rem;
    color: var(--fm-text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px var(--fm-brand-soft);
}
.form-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--fm-text);
}
.input-group-text {
    border-color: var(--fm-border-strong);
    border-radius: var(--fm-radius-sm);
}

/* ─── 8. Badge & label ─────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45em 0.7em;
    border-radius: 999px;
}
.bg-label-primary {
    background-color: var(--fm-brand-soft) !important;
    color: var(--fm-brand) !important;
}
.bg-label-danger {
    background-color: rgba(255, 62, 29, 0.12) !important;
    color: #c92b2b !important;
}
.bg-label-success {
    background-color: rgba(113, 221, 55, 0.14) !important;
    color: #3d8f00 !important;
}
.bg-label-warning {
    background-color: rgba(255, 171, 0, 0.14) !important;
    color: #b26e00 !important;
}
.bg-label-info {
    background-color: rgba(3, 195, 236, 0.14) !important;
    color: #0286b0 !important;
}

/* ─── 9. Dropdown ──────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: 14px;
    border: 1px solid var(--fm-border);
    box-shadow: var(--fm-shadow-md);
    padding: 6px;
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    font-size: 14px;
}
.dropdown-menu .dropdown-item:hover {
    background-color: #f5f6f9;
}

/* ─── 10. Modal ────────────────────────────────────────────────── */
.modal-content {
    border-radius: 18px;
    border: 0;
    box-shadow: var(--fm-shadow-md);
}
.modal-header {
    border-bottom: 1px solid var(--fm-border);
    padding: 1.25rem 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--fm-border);
}

/* ─── 11. DataTables ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--fm-radius-sm);
    border: 1px solid var(--fm-border-strong);
    padding: 0.45rem 0.75rem;
    font-size: 13.5px;
    color: var(--fm-text);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px var(--fm-brand-soft);
    outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    margin: 0 2px;
    padding: 0.4rem 0.7rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--fm-brand) !important;
    border-color: var(--fm-brand) !important;
    color: #ffffff !important;
}

/* ─── 12. Misc ─────────────────────────────────────────────────── */
::selection {
    background: rgba(200, 16, 46, 0.2);
}
:focus-visible {
    outline: 2px solid var(--fm-brand);
    outline-offset: 2px;
}

/* ─── 13. Tooltip (reusable, ikut kursor) ──────────────────────── */
/* Pakai: tambah class "fm-tooltip" + attribute data-tooltip="teks lengkap"
   pada elemen apa saja (kartu, angka, dsb — bebas seberapa besar area
   hover-nya). Balon tooltip mengikuti posisi kursor selama kursor masih
   di dalam elemen tsb (mirip tooltip chart ApexCharts di dashboard).
   Logika ikut-kursor ada di public/assets/js/helper.js (dimuat global). */
.fm-tooltip {
    cursor: default;
}
#fm-tooltip-bubble {
    position: fixed;
    left: 0;
    top: 0;
    background: var(--fm-text);
    color: #fff;
    font-family: var(--dash-font-body, inherit);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 260px;
    width: max-content;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--fm-radius-sm);
    box-shadow: var(--fm-shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .1s ease;
    transform: translate(-50%, calc(-100% - 12px));
    z-index: 2000;
}
#fm-tooltip-bubble.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ════════════════════════════════════════════════════════════════════
   14. MODE GELAP (opt-in via toggle tema di navbar — [data-theme="dark"])
   Menimpa warna chrome app (body, sidebar, navbar, kartu, tabel, form,
   dropdown) agar konsisten dgn tema dashboard/login. Mode terang TIDAK
   tersentuh. Token dashboard (--dash-*) didefinisikan di dashboard.css;
   di halaman lain nilainya fallback ke bawah ini via variabel lokal.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
    background-color: #0B0E13 !important;
    color: #EDEFF2 !important;
}
[data-theme="dark"] .layout-page {
    background:
        radial-gradient(900px 320px at 85% -5%, rgba(255, 62, 29, 0.05), transparent 60%),
        #0B0E13;
}

/* ── Sidebar ── */
[data-theme="dark"] .layout-menu.menu.bg-menu-theme {
    background-color: #12161D !important;
    color: #EDEFF2 !important;
    border-right-color: #232A35 !important;
}
[data-theme="dark"] .bg-menu-theme .menu-header { color: #7C8695 !important; }
[data-theme="dark"] .bg-menu-theme .menu-inner > .menu-item > .menu-link { color: #A8B0BC !important; }
[data-theme="dark"] .bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #EDEFF2 !important;
}
[data-theme="dark"] .bg-menu-theme .menu-inner .menu-link i { color: #7C8695; }
[data-theme="dark"] .bg-menu-theme .menu-sub .menu-link { color: #A8B0BC !important; }
[data-theme="dark"] .bg-menu-theme .menu-divider:after { background: #232A35; }
[data-theme="dark"] .menu-vertical .menu-inner::-webkit-scrollbar-thumb { background: #33404F; }

/* ── Navbar ── */
[data-theme="dark"] .layout-navbar.navbar-detached {
    background-color: #12161D !important;
    border-color: #232A35 !important;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .layout-navbar .breadcrumb-item + .breadcrumb-item::before { color: #4A5563; }
[data-theme="dark"] .dropdown-user .avatar {
    box-shadow: 0 0 0 2px #12161D, 0 0 0 4px #232A35;
}

/* ── Kartu & teks ── */
[data-theme="dark"] .card {
    background-color: #12161D !important;
    border-color: #232A35 !important;
}
[data-theme="dark"] .card-header { border-bottom-color: #232A35 !important; }
[data-theme="dark"] .card-title, [data-theme="dark"] .text-heading,
[data-theme="dark"] .app-brand-text { color: #EDEFF2 !important; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .text-body-secondary { color: #7C8695 !important; }
[data-theme="dark"] .text-body { color: #A8B0BC !important; }

/* ── Tabel ── */
[data-theme="dark"] .table thead th {
    background-color: #171C25;
    color: #7C8695;
    border-bottom-color: #232A35 !important;
}
[data-theme="dark"] .table tbody td { border-color: #232A35; color: #A8B0BC; }
[data-theme="dark"] .table tbody tr:hover { background-color: #171C25; }

/* ── Form ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #171C25;
    border-color: #33404F;
    color: #EDEFF2;
}
/* input readonly/disabled (mis. auto-fill penerima) — menimpa inline style #f9fafb */
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control:read-only,
[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control:disabled {
    background-color: var(--dash-raise) !important;
    border-color: var(--dash-line) !important;
    color: var(--dash-muted) !important;
    opacity: 1 !important;
}
/* label form — di dark memakai token --fm-text yang gelap pekat, pertegas agar terbaca */
[data-theme="dark"] .form-label,
[data-theme="dark"] label.form-label,
[data-theme="dark"] .required-label {
    color: var(--dash-ink) !important;
}
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-select small,
[data-theme="dark"] .small-hint { color: var(--dash-muted) !important; }
[data-theme="dark"] .form-control::placeholder { color: #7C8695; }
[data-theme="dark"] .input-group-text { border-color: #33404F; background-color: #171C25; color: #A8B0BC; }

/* ── Dropdown & modal ── */
[data-theme="dark"] .dropdown-menu {
    background-color: #12161D;
    border-color: #232A35;
}
[data-theme="dark"] .dropdown-menu .dropdown-item { color: #A8B0BC; }
[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: #171C25;
    color: #EDEFF2;
}
[data-theme="dark"] .modal-content { background-color: #12161D; }
[data-theme="dark"] .modal-header { border-bottom-color: #232A35; }
[data-theme="dark"] .modal-footer { border-top-color: #232A35; }

/* ── DataTables ── */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #171C25;
    border-color: #33404F;
    color: #EDEFF2;
}