/*
 * MARIPOS - tema Back Office
 * Lapisan tipis di atas Filament: sidebar gelap, konten terang & lega, tipografi rapi.
 * Ubah warna utama cukup di token --mp-* di bawah.
 */

:root {
    --mp-sidebar-bg: #0c0d12;
    --mp-sidebar-border: rgba(255, 255, 255, 0.06);
    --mp-sidebar-text: #a1a1aa;
    --mp-sidebar-text-strong: #fafafa;
    --mp-sidebar-muted: #6b6b76;
    --mp-sidebar-hover: rgba(255, 255, 255, 0.05);
    --mp-sidebar-active: rgba(255, 255, 255, 0.09);
    --mp-accent: #818cf8;
    --mp-canvas: #f6f6f8;
    --mp-card-border: #e7e7ec;
    --mp-card-shadow: none;
    --mp-radius: 8px;
}

/* ---------- Dasar ---------- */

.fi-body {
    background-color: var(--mp-canvas);
    letter-spacing: -0.005em;
}

.fi-body:where(.dark, .dark *) {
    background-color: #09090b;
}

/* ---------- Logo ---------- */

.mp-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.mp-brand-mark {
    width: 1.875rem;
    height: 1.875rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.35));
}

.mp-brand-text {
    font-weight: 750;
    font-size: 1.0625rem;
    letter-spacing: 0.08em;
    color: #111118;
}

.fi-body:where(.dark, .dark *) .mp-brand-text,
.fi-sidebar .mp-brand-text {
    color: var(--mp-sidebar-text-strong);
}

/* ---------- Sidebar gelap ---------- */

.fi-sidebar,
.fi-body-has-topbar .fi-sidebar-header,
.fi-sidebar .fi-sidebar-header {
    background-color: var(--mp-sidebar-bg) !important;
}

.fi-sidebar {
    border-inline-end: 1px solid var(--mp-sidebar-border);
    box-shadow: none !important;
}

.fi-sidebar .fi-sidebar-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--mp-sidebar-border);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-sidebar-nav {
    padding-top: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Pemilih usaha (tenant) */
.fi-sidebar .fi-tenant-menu-trigger {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--mp-sidebar-border);
    border-radius: 10px;
    padding: 0.5rem 0.625rem;
}

.fi-sidebar .fi-tenant-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.fi-sidebar .fi-tenant-menu-trigger-tenant-name,
.fi-sidebar .fi-tenant-menu-trigger-text {
    color: var(--mp-sidebar-text-strong) !important;
    font-weight: 600;
}

.fi-sidebar .fi-tenant-menu-trigger .fi-icon {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar .fi-tenant-avatar {
    background: linear-gradient(135deg, #818cf8, #4f46e5) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* Judul grup menu */
.fi-sidebar-group-label {
    color: var(--mp-sidebar-muted) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar-group-collapse-btn:hover {
    background-color: var(--mp-sidebar-hover) !important;
}

/* Item menu */
.fi-sidebar-item-btn {
    border-radius: 8px !important;
    padding-block: 0.4375rem !important;
    transition: background-color 120ms ease, color 120ms ease;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: var(--mp-sidebar-hover) !important;
}

.fi-sidebar-item-label {
    color: var(--mp-sidebar-text) !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--mp-sidebar-text-strong) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--mp-sidebar-active) !important;
    box-shadow: inset 2px 0 0 var(--mp-accent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--mp-sidebar-text-strong) !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--mp-accent) !important;
}

/* Tombol buka/tutup sidebar & tema di dalam sidebar */
.fi-sidebar .fi-icon-btn {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar .fi-icon-btn:hover {
    background-color: var(--mp-sidebar-hover) !important;
    color: var(--mp-sidebar-text-strong) !important;
}

/* ---------- Topbar ---------- */

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--mp-card-border);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-topbar:where(.dark, .dark *) {
    background-color: rgba(9, 9, 11, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: #f1f1f4;
    box-shadow: none;
    border-radius: 10px;
}

.fi-topbar .fi-global-search-field .fi-input-wrp:where(.dark, .dark *) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ---------- Konten ---------- */

.fi-main {
    padding-top: 0.5rem;
}

.fi-header-heading {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
}

/* Kartu: tabel, section, widget */
.fi-ta-ctn,
.fi-section:not(.fi-section-not-contained),
.fi-wi-stats-overview-stat,
.fi-wi-widget .fi-section {
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-card-shadow) !important;
    --tw-ring-shadow: 0 0 0 1px var(--mp-card-border) !important;
}

.fi-ta-ctn:where(.dark, .dark *),
.fi-section:where(.dark, .dark *),
.fi-wi-stats-overview-stat:where(.dark, .dark *) {
    --tw-ring-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Header tabel */
.fi-ta-header-cell {
    background-color: #fafafb;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #71717a !important;
    padding-block: 0.75rem !important;
}

.fi-ta-header-cell:where(.dark, .dark *) {
    background-color: rgba(255, 255, 255, 0.02);
    color: #a1a1aa !important;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    font-size: inherit;
    letter-spacing: inherit;
}

/* Baris tabel */
.fi-ta-row:hover {
    background-color: #fafaff;
}

.fi-ta-row:where(.dark, .dark *):hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.fi-ta-text-item,
.fi-ta-text {
    font-variant-numeric: tabular-nums;
}

/* Kosong */
.fi-ta-empty-state-icon-bg,
.fi-ta-empty-state .fi-icon-btn {
    background-color: #eef0ff;
}

/* Tombol */
.fi-btn {
    border-radius: 7px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Input */
.fi-input-wrp {
    border-radius: 6px !important;
    box-shadow: 0 0 0 1px #d9d9e0 !important;
}

.fi-input-wrp:where(.dark, .dark *) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px var(--primary-500) !important;
}

.fi-sidebar .fi-global-search-field .fi-input-wrp {
    box-shadow: 0 0 0 1px var(--mp-sidebar-border) !important;
}

/* Badge */
.fi-badge {
    border-radius: 4px !important;
    font-weight: 600 !important;
}

/* Statistik dashboard */
.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #71717a !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Halaman login ---------- */

.fi-simple-layout {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(129, 140, 248, 0.18), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(79, 70, 229, 0.12), transparent 60%),
        var(--mp-canvas);
}

.fi-simple-main {
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(16, 17, 26, 0.08), 0 0 0 1px var(--mp-card-border) !important;
}

.fi-simple-header .mp-brand {
    justify-content: center;
}

/* ---------- Pencarian & menu pengguna di sidebar ---------- */

.fi-sidebar .fi-global-search-ctn {
    margin-inline: 1rem;
}

.fi-sidebar .fi-global-search-field .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 0 1px var(--mp-sidebar-border) !important;
    border-radius: 7px !important;
}

.fi-sidebar .fi-global-search-field input {
    color: var(--mp-sidebar-text-strong) !important;
}

.fi-sidebar .fi-global-search-field input::placeholder {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar .fi-global-search-field .fi-icon {
    color: var(--mp-sidebar-muted) !important;
}

.fi-sidebar-footer {
    border-top: 1px solid var(--mp-sidebar-border);
    padding-top: 0.75rem;
}

.fi-sidebar .fi-user-menu-trigger {
    border-radius: 10px;
}

.fi-sidebar .fi-user-menu-trigger:hover {
    background-color: var(--mp-sidebar-hover) !important;
}

.fi-sidebar .fi-user-menu-trigger-text {
    color: var(--mp-sidebar-text-strong) !important;
    font-weight: 600;
}

.fi-sidebar .fi-user-menu-trigger .fi-icon {
    color: var(--mp-sidebar-muted) !important;
}

.fi-avatar {
    object-fit: cover;
}

.fi-sidebar .fi-tenant-avatar {
    border-radius: 8px !important;
}

/* ---------- Tampilan datar: lebih sedikit kotak, lebih mirip tabel ---------- */

/* Section form: tanpa bayangan, judul kecil, garis tipis */
.fi-section:not(.fi-section-not-contained) {
    box-shadow: none !important;
}

.fi-section-header {
    padding-block: 0.875rem !important;
}

.fi-section-header-heading {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52525b !important;
}

.fi-section-header-heading:where(.dark, .dark *) {
    color: #a1a1aa !important;
}

/* Tabel daftar: baris lebih rapat */
.fi-ta-text,
.fi-ta-icon {
    padding-block: 0.5rem !important;
}

/* Baris barang (repeater) seperti spreadsheet: sel bergaris, input tanpa kotak */
.fi-fo-table-repeater > table {
    border-radius: 6px !important;
    box-shadow: none !important;
    border: 1px solid #e4e4e9;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.fi-fo-table-repeater > table:where(.dark, .dark *) {
    border-color: rgba(255, 255, 255, 0.1);
}

.fi-fo-table-repeater > table > thead > tr > th {
    text-align: start !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #71717a !important;
    background-color: #fafafb !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0 !important;
}

.fi-fo-table-repeater > table > thead > tr > th:first-of-type {
    width: 46%;
}

.fi-fo-table-repeater > table > tbody > tr > td {
    padding: 0 !important;
    border-top: 1px solid #ededf1;
    vertical-align: middle;
}

.fi-fo-table-repeater > table > tbody > tr > td:not(:last-child) {
    border-inline-end: 1px solid #ededf1;
}

.fi-fo-table-repeater > table > tbody > tr > td:where(.dark, .dark *) {
    border-color: rgba(255, 255, 255, 0.06);
}

.fi-fo-table-repeater > table > tbody > tr:hover > td {
    background-color: #fafaff;
}

.fi-fo-table-repeater > table > tbody > tr:where(.dark, .dark *):hover > td {
    background-color: rgba(255, 255, 255, 0.02);
}

.fi-fo-table-repeater td .fi-input-wrp {
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.fi-fo-table-repeater td .fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 2px var(--primary-500) !important;
    background-color: #fff !important;
}

.fi-fo-table-repeater td .fi-input-wrp-prefix {
    border: 0 !important;
    padding-inline-end: 0 !important;
    color: #a1a1aa;
}

.fi-fo-table-repeater td input[type='number'],
.fi-fo-table-repeater td input {
    font-variant-numeric: tabular-nums;
}

.fi-fo-table-repeater td .fi-fo-toggle,
.fi-fo-table-repeater td .fi-toggle {
    margin-inline: 0.75rem;
}

.fi-fo-table-repeater-actions {
    justify-content: center;
    padding-block: 0 !important;
}

.fi-fo-table-repeater-add {
    justify-content: flex-start !important;
}

/* Kartu statistik dasbor: datar */
.fi-wi-stats-overview-stat {
    box-shadow: none !important;
}

/* ---------- Halaman "Segera hadir" & daftar laporan ---------- */

.mp-placeholder {
    background: #fff;
    border: 1px solid var(--mp-card-border);
    border-radius: var(--mp-radius);
    padding: 1.75rem 2rem;
}

.mp-placeholder:where(.dark, .dark *),
.mp-report-list:where(.dark, .dark *) {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.08);
}

.mp-placeholder-badge,
.mp-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4f46e5;
    background: #eef0ff;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}

.mp-placeholder-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0.75rem 0 0.25rem;
}

.mp-placeholder-text {
    color: #71717a;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.mp-kv th {
    text-align: start;
    font-weight: 500;
    color: #71717a;
    padding: 0.375rem 2rem 0.375rem 0;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.mp-kv td {
    font-size: 0.875rem;
    padding: 0.375rem 0;
}

.mp-placeholder code,
.mp-report-list code {
    font-size: 0.75rem;
    color: #52525b;
    background: #f4f4f5;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.mp-report-list {
    background: #fff;
    border: 1px solid var(--mp-card-border);
    border-radius: var(--mp-radius);
    overflow: hidden;
}

.mp-report-list table {
    width: 100%;
    border-collapse: collapse;
}

.mp-report-list th {
    text-align: start;
    background: #fafafb;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #71717a;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--mp-card-border);
}

.mp-report-list td {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #f0f0f3;
}

.mp-report-list tr:last-child td {
    border-bottom: 0;
}

.mp-report-list tbody tr {
    cursor: pointer;
}

.mp-report-list tbody tr:hover td {
    background: #fafaff;
}

.mp-strong {
    font-weight: 600;
}

.mp-muted {
    color: #a1a1aa;
    font-weight: 400;
}

/* ---------- Sub-menu yang bisa dilipat ---------- */

.fi-sidebar-item.mp-parent > .fi-sidebar-item-btn {
    cursor: pointer;
}

.fi-sidebar-item.mp-parent > .fi-sidebar-item-btn > .fi-icon {
    width: 1rem !important;
    height: 1rem !important;
    margin-inline: 0.125rem;
    transition: transform 150ms ease;
}

.fi-sidebar-item.mp-parent.mp-open > .fi-sidebar-item-btn > .fi-icon {
    transform: rotate(90deg);
}

.fi-sidebar-item.mp-parent:not(.mp-open) > ul {
    display: none !important;
}

.fi-sidebar-item.mp-parent > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--mp-sidebar-text) !important;
}

/* Sub-menu menjorok ke dalam dengan garis pemandu tipis */
.fi-sidebar-item.mp-parent > ul.fi-sidebar-sub-group-items {
    margin-inline-start: 2.25rem !important;
    padding-inline-start: 0.75rem !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-block: 0.125rem 0.25rem;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    display: none !important;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    padding-inline-start: 0.625rem !important;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: 0.8125rem !important;
}

/* Judul kelompok di dalam form (mis. Setup Perkiraan) */
.mp-form-heading { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-accent, #4f46e5);
  padding-top: .5rem; border-top: 1px dashed #e4e4e7; }

/* Halaman pintu (Saldo Awal) */
.mp-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mp-hub-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; text-decoration: none; color: inherit; }
.mp-hub-card:hover { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.mp-hub-card strong { font-size: 15px; }
.mp-hub-card span { color: #71717a; font-size: 13px; line-height: 1.5; }
.mp-hub-note { color: #71717a; font-size: 13px; margin-top: 8px; }
.dark .mp-hub-card { background: #18181b; border-color: #27272a; }

/* Laporan */
.mp-report-filters { background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; padding: 14px 16px; }
.mp-report-actions { display: flex; gap: 8px; margin-top: 12px; }
.mp-report { background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; overflow: hidden; }
.mp-report.mp-loading { opacity: .5; }
.mp-report-head { display: flex; gap: 16px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid #e4e4e7; font-size: 13px; color: #71717a; }
.mp-report-head strong { color: #18181b; font-size: 14px; }
.mp-report-scroll { overflow: auto; max-height: calc(100vh - 290px); }
.mp-report table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.mp-report th { position: sticky; top: 0; z-index: 1; background: #fafafa; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #71717a; padding: 8px 12px; border-bottom: 1px solid #e4e4e7; white-space: nowrap; }
.mp-report td { padding: 6px 12px; border-bottom: 1px solid #f4f4f5; white-space: nowrap; }
.mp-report .r { text-align: right; }
.mp-report td.neg { color: #dc2626; }
.mp-report tr.heading td { font-weight: 700; background: #fafafa; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.mp-report tr.subtotal td { font-weight: 700; border-top: 1px solid #e4e4e7; }
.mp-report tr.grand td { font-weight: 800; font-size: 14px; border-top: 2px solid #18181b; background: #fafafa; }
.mp-report tfoot td { position: sticky; bottom: 0; background: #f4f4f5; font-weight: 700; border-top: 1px solid #d4d4d8; }
.mp-report td a { color: #4f46e5; text-decoration: none; }
.mp-report .empty { text-align: center; color: #a1a1aa; padding: 40px 0; }
.mp-report-note { padding: 10px 16px; color: #b45309; font-size: 12.5px; }
.dark .mp-report, .dark .mp-report-filters { background: #18181b; border-color: #27272a; }
.dark .mp-report th, .dark .mp-report tr.heading td, .dark .mp-report tfoot td { background: #1f1f23; }
.dark .mp-report td { border-color: #27272a; }
@media print {
    .fi-sidebar, .fi-topbar, .mp-report-filters, .fi-header-actions, .fi-breadcrumbs { display: none !important; }
    .fi-main-ctn, .fi-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .mp-report { border: 0; }
    .mp-report-scroll { max-height: none; overflow: visible; }
    .mp-report th, .mp-report tfoot td { position: static; }
}