/* Munaya Mumtaza — token & komponen diambil persis dari dashboard.html (sumber kebenaran desain) */
:root {
    --green-900: #063b25;
    --green-800: #084a2e;
    --green-700: #0b5d3b;
    --green-600: #0b7a4a;
    --green-500: #14a06a;
    --mint-400: #34c98a;
    --teal: #2ba98a;
    --gold: #d4a437;
    --gold-600: #b7891a;
    --gold-soft: #fbf1d8;

    --cream: #f6f1e7;
    --cream-2: #efe7d6;
    --card: #ffffff;

    --ink: #0f2e21;
    --muted: #8a94a0;
    --line: #eceae4;

    --shadow-sm: 0 8px 24px rgba(19, 51, 38, .06);
    --shadow-md: 0 14px 34px rgba(19, 51, 38, .10);

    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
}

/* ===================== SIDEBAR (fi-sidebar) ===================== */
.fi-sidebar, .fi-sidebar-header {
    background: linear-gradient(180deg, #0d6b45 0%, #084a2e 45%, #052e1a 100%) !important;
    border-color: transparent !important;
}
.fi-sidebar-header {
    box-shadow: none !important;
    border-bottom: none !important;
    height: auto !important;
    min-height: 9rem;
    padding-top: 1.6rem !important;
    padding-bottom: 1.1rem !important;
}
.fi-sidebar-nav { padding: 0.25rem 0.875rem 1rem; gap: 0.375rem !important; }
.fi-sidebar-nav-groups { gap: 0.625rem !important; }
.fi-sidebar-group { gap: 0 !important; }
.fi-sidebar-group-items { gap: 0 !important; }
.fi-sidebar-group-label {
    color: var(--gold) !important;
    font-size: 0.65625rem;
    letter-spacing: .09em;
    font-weight: 700;
}
.fi-sidebar-group-icon { color: var(--gold) !important; opacity: .8; }
.fi-sidebar-group-button { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.fi-sidebar-item-button {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    font-size: 0.84375rem;
    font-weight: 500;
    border-radius: var(--r-sm) !important;
    transition: background .2s, color .2s;
}
.fi-sidebar-item-icon { height: 1.125rem; width: 1.125rem; }
.fi-sidebar-item-icon, .fi-sidebar-item-label { color: rgba(234, 243, 238, .85) !important; }
.fi-sidebar-item-button:hover { background: rgba(255, 255, 255, .08) !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #fff !important; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--cream) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--green-700) !important;
    font-weight: 700;
}
.fi-sidebar-item-grouped-border > div { background: rgba(255, 255, 255, .12) !important; }
.fi-sidebar-group-collapse-button svg,
.fi-sidebar-nav .fi-icon-btn svg { color: rgba(234, 243, 238, .7) !important; }


/* ===================== TOPBAR / SEARCH ===================== */
.fi-body { background-color: var(--cream) !important; }
.fi-topbar nav { gap: 1rem !important; }
.fi-topbar .ms-auto { margin-inline-start: 0 !important; flex: 1 1 auto; }
.mm-logo-mini {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    background: #fff; box-shadow: var(--shadow-sm);
    display: grid; place-items: center; overflow: hidden;
}
.mm-logo-mini img { width: 32px; height: 32px; object-fit: contain; }
.mm-user-label { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; margin-inline-end: 0.25rem; }
.mm-user-label .name { font-size: 13px; font-weight: 700; color: var(--ink); }
.mm-user-label .role { font-size: 11px; color: var(--muted); }
.fi-topbar .ms-auto > .fi-global-search { flex: 1 1 auto; min-width: 0; }
.fi-global-search .sm\:relative { flex: 1 1 auto; width: 100%; }
.fi-global-search-field { width: 100%; max-width: 40rem; }
.fi-global-search-field .fi-input-wrp {
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-sm) !important;
}
.fi-global-search-field .fi-input { font-size: 0.875rem; }
.fi-topbar .ms-auto > *:not(.fi-global-search) { flex-shrink: 0; }

/* Kartu & panel: radius besar, shadow lembut, seperti .card pada rancangan */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-modal-window {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: transparent !important;
}
.fi-section-header { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
.fi-btn { border-radius: 0.75rem !important; }
.fi-badge { border-radius: 9999px !important; }

/* Header widget grafik (Filament fi-wi-chart) meniru .card-head + .select */
.fi-wi-chart .fi-section-header-heading { font-size: 1rem; font-weight: 700; color: var(--green-900); }
.fi-wi-chart .fi-input-wrp {
    background: var(--cream) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

/* ===================== DASHBOARD CONTENT (scoped .mm-dash) ===================== */
.mm-dash { font-family: 'Plus Jakarta Sans', 'Poppins', ui-sans-serif, system-ui, sans-serif; }
.mm-dash a { text-decoration: none; color: inherit; }
.mm-dash ul { list-style: none; margin: 0; padding: 0; }

/* Hadist Hari Ini — strip elegan selebar penuh, di atas ucapan salam */
.mm-hadist-top {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    padding: 16px 28px; text-align: center;
    background:
        linear-gradient(120deg, rgba(6, 59, 37, .92), rgba(11, 93, 59, .88)),
        url('/storage/company/kaaba-hero.jpg');
    background-size: cover; background-position: center 45%;
    box-shadow: var(--shadow-sm);
}
.mm-hadist-top .tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.mm-hadist-top blockquote {
    margin: 0; color: #fff; font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.45;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.mm-hadist-top cite {
    display: block; margin-top: 6px; font-style: normal; font-size: 11.5px;
    color: rgba(243, 250, 245, .8);
}

/* HERO */
.mm-hero {
    position: relative;
    min-height: 230px;
    padding: 22px 30px;
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 22%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, .1) 58%, rgba(255, 255, 255, 0) 68%),
        url('/storage/company/kaaba-hero.jpg');
    background-size: cover, cover;
    background-position: center, center 55%;
    box-shadow: var(--shadow-sm);
}
.mm-brand-name {
    position: relative; z-index: 2;
    font-size: 12px; font-weight: 700; letter-spacing: .14em;
    color: var(--green-700); margin-bottom: 2px;
}
.mm-hero-script {
    position: relative; z-index: 2;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.mm-hero-script .l1 {
    font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-size: 18px; font-weight: 500; font-style: italic; color: var(--green-800);
}
.mm-hero-script .l2 {
    font-family: 'Dancing Script', 'Playfair Display', cursive;
    font-size: 30px; font-weight: 700; color: var(--gold-600);
}
.mm-greeting { position: relative; z-index: 2; max-width: 560px; }
.mm-greeting h2 { font-size: 32px; font-weight: 800; line-height: 1.15; color: var(--green-900); }
.mm-greeting p { margin-top: 10px; font-size: 14.5px; color: #5c6b62; max-width: 44ch; line-height: 1.55; }

/* KPI — persis tema1: 4 kartu, 1 baris */
.mm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.mm-kpi {
    background: var(--card); border-radius: var(--r-lg); padding: 22px;
    box-shadow: var(--shadow-sm);
    display: flex; gap: 16px; align-items: flex-start;
    min-width: 0;
    transition: transform .25s, box-shadow .25s;
}
.mm-kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mm-kpi .ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; }
.mm-kpi .ic svg, .mm-kpi .ic .fi-icon { width: 26px; height: 26px; }
.mm-kpi .ic.green { background: #e4f4ec; color: var(--green-600); }
.mm-kpi .ic.gold { background: var(--gold-soft); color: var(--gold); }
.mm-kpi > div { min-width: 0; flex: 1 1 auto; }
.mm-kpi .lbl { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-kpi .val {
    font-size: 26px; font-weight: 800; color: var(--green-900); margin: 4px 0 6px; letter-spacing: -.5px;
    white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.2;
}
.mm-kpi .val.rp { font-size: 16.5px; white-space: nowrap; }
.mm-kpi .foot { font-size: 12px; display: flex; align-items: flex-start; gap: 5px; white-space: normal; line-height: 1.35; }
.mm-kpi .foot svg, .mm-kpi .foot .fi-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.mm-kpi .foot.up, .mm-kpi .foot.ok, .mm-kpi .foot.link { color: var(--green-600); font-weight: 600; }
.mm-kpi .foot.warn { color: var(--gold-600); font-weight: 600; }
.mm-kpi .flt { font-size: 12px; color: var(--muted); }

/* SNAPSHOT STRIP — kartu ringkasan kecil 1 baris (dipakai di halaman Laporan) */
.mm-snapshot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mm-snapshot-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 8px 12px; min-width: 0;
}
.mm-snapshot-card .lbl { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-snapshot-card .val { font-size: 13.5px; font-weight: 800; color: var(--green-900); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-snapshot-card .val.up { color: var(--green-600); }
.mm-snapshot-card .val.down { color: #dc2626; }
.mm-snapshot-card .val.warn { color: var(--gold-600); }

/* QUICK ACTIONS — persis tema1: 6 tools, 1 baris */
.mm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.mm-action {
    background: var(--card); border-radius: var(--r-md); padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    min-width: 0;
    font-size: 13.5px; font-weight: 600; color: var(--green-900);
    transition: transform .2s, box-shadow .2s;
}
.mm-action span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-action:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mm-action .ic {
    width: 40px; height: 40px; border-radius: 12px; background: #e4f4ec; color: var(--green-600);
    display: grid; place-items: center; flex-shrink: 0;
}
.mm-action .ic svg, .mm-action .ic .fi-icon { width: 20px; height: 20px; }

/* RIGHT RAIL: trip + hadist */
.mm-rail { display: flex; flex-direction: column; gap: 22px; }
.mm-trip {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; cursor: pointer;
    transition: box-shadow .2s;
}
.mm-trip:last-child { margin-bottom: 0; }
.mm-trip:hover { box-shadow: var(--shadow-sm); }
.mm-trip-thumb {
    width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    background: linear-gradient(160deg, #0d6b45, #052e1a);
    display: grid; place-items: center;
}
.mm-trip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-trip .info { flex: 1; min-width: 0; }
.mm-trip .info .t { font-size: 13.5px; font-weight: 700; color: var(--green-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-trip .info .d { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }
.mm-trip .info .row { display: flex; align-items: center; gap: 8px; }
.mm-trip .info .jml { font-size: 11.5px; color: #4a5a52; font-weight: 600; }
.mm-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.mm-pill.ready { background: #d9f2e4; color: var(--green-600); }
.mm-pill.prep { background: #fdf1cf; color: var(--gold-600); }
.mm-pill.reg { background: #dcecfb; color: #2b6cb0; }

/* ACTIVITY + DOUGHNUT */
.mm-activity li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mm-activity li:last-child { border-bottom: 0; }
.mm-activity .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.mm-activity .dot svg, .mm-activity .dot .fi-icon { width: 20px; height: 20px; }
.mm-activity .txt { flex: 1; min-width: 0; }
.mm-activity .txt .t { font-size: 13.5px; font-weight: 700; color: var(--green-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-activity .txt .s { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-activity .meta { text-align: right; flex-shrink: 0; }
.mm-activity .meta .time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* FOOTER */
.mm-footer { text-align: center; padding: 22px; font-size: 12.5px; color: #6b7c72; }
.mm-wave { height: 12px; background: linear-gradient(90deg, var(--green-700), var(--green-500), var(--gold)); border-radius: 0 0 0 34px; }

@media (max-width: 900px) {
    .mm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-actions { grid-template-columns: repeat(3, 1fr); }
    .mm-snapshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .mm-kpi-grid, .mm-actions { grid-template-columns: 1fr; }
    .mm-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-greeting h2 { font-size: 24px; }
}