/*
 * Tema Back Office MedisCloud — mengikuti "MedisCloud Pharmacy SaaS UI Showcase" (mediscloud/design uiux):
 * sidebar navy setinggi layar + item aktif biru, topbar putih, latar #F7F9FC, kartu putih membulat.
 * Dipasang lewat render hook HEAD_END di AppPanelProvider/AdminPanelProvider (tanpa build Vite).
 */
:root {
    --mc-navy: #0f2c5c;
    --mc-navy-line: rgba(255, 255, 255, 0.08);
    --mc-primary: #1976d2;
    --mc-primary-soft: #e3f0fc;
    --mc-success: #00c853;
    --mc-warning: #ffa726;
    --mc-danger: #ef5350;
    --mc-bg: #f7f9fc;
    --mc-text: #1f2937;
    --mc-muted: #64748b;
    --mc-border: #e5eaf2;
    --mc-radius: 14px;
    --mc-shadow: 0 1px 2px rgba(15, 44, 92, 0.04), 0 4px 16px rgba(15, 44, 92, 0.06);
}

.fi-body {
    background: var(--mc-bg);
    color: var(--mc-text);
}

/* ---------- Logo ---------- */
.mc-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.mc-brand-mark {
    width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: #fff; color: var(--mc-primary);
    display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); flex-shrink: 0;
}
.mc-brand-mark svg { width: 1.25rem; height: 1.25rem; }
.mc-brand-text { line-height: 1.1; }
.mc-brand-name { font-weight: 700; font-size: 1.05rem; color: var(--mc-text); letter-spacing: -0.01em; }
.mc-brand-tag { font-size: 0.66rem; color: var(--mc-muted); }
.fi-topbar .mc-brand-mark { background: var(--mc-primary); color: #fff; }

/* ---------- Sidebar navy ---------- */
.fi-sidebar { background: var(--mc-navy) !important; }
.fi-sidebar .fi-sidebar-header {
    background: var(--mc-navy) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border-bottom: 1px solid var(--mc-navy-line);
    justify-content: flex-start;
    padding-inline: 1.25rem;
}
.fi-sidebar .mc-brand-name { color: #fff; }
.fi-sidebar .mc-brand-tag { color: rgba(255, 255, 255, 0.6); }
.fi-sidebar .fi-sidebar-header .fi-icon-btn { color: rgba(255, 255, 255, 0.7); }
.fi-sidebar-nav { padding: 1rem 0.85rem 1.5rem; row-gap: 1.1rem; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn { color: rgba(255, 255, 255, 0.45) !important; }
.fi-sidebar-item-btn { border-radius: 0.6rem; padding: 0.5rem 0.7rem; }
.fi-sidebar-item-label { color: rgba(255, 255, 255, 0.82) !important; font-weight: 500; }
.fi-sidebar-item-btn > .fi-icon { color: rgba(255, 255, 255, 0.6) !important; }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background: rgba(255, 255, 255, 0.08) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--mc-primary) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: #fff !important; }
.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last { background: rgba(255, 255, 255, 0.2) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part { background: #fff !important; }
.fi-sidebar .fi-badge { box-shadow: none; }

/* ---------- Topbar putih ---------- */
.fi-topbar {
    background: #fff !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border-bottom: 1px solid var(--mc-border);
}
.mc-topbar-store { display: flex; align-items: center; gap: 0.9rem; margin-inline-start: 0.5rem; min-width: 0; }
.mc-topbar-store-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--mc-primary-soft); color: var(--mc-primary);
    display: grid; place-items: center; flex-shrink: 0;
}
.mc-topbar-store-icon svg { width: 1.2rem; height: 1.2rem; }
.mc-topbar-store-name { font-weight: 600; font-size: 0.9rem; color: var(--mc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-topbar-store-branch { font-size: 0.75rem; color: var(--mc-muted); white-space: nowrap; }
.mc-topbar-badge {
    font-size: 0.68rem; font-weight: 700; color: #b45309; background: #fff4e0; border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap;
}
.mc-user { text-align: end; line-height: 1.15; margin-inline-end: 0.25rem; }
.mc-user-name { font-size: 0.85rem; font-weight: 600; color: var(--mc-text); white-space: nowrap; }
.mc-user-role { font-size: 0.72rem; color: var(--mc-muted); white-space: nowrap; }
@media (max-width: 767px) {
    .mc-user, .mc-topbar-store-icon, .mc-topbar-badge { display: none; }
}

/* Desktop: sidebar penuh setinggi layar, topbar hanya di atas konten (seperti desain). */
@media (min-width: 1024px) {
    .fi-body-has-topbar .fi-topbar-ctn { margin-inline-start: var(--sidebar-width); }
    .fi-body-has-topbar .fi-topbar .fi-logo,
    .fi-body-has-topbar .fi-topbar > a:has(.mc-brand),
    .fi-body-has-topbar .fi-topbar-start > a { display: none; }
    .fi-body-has-topbar .fi-layout { margin-top: calc(-1 * var(--topbar-height)); }
    .fi-body-has-topbar .fi-main-ctn { padding-top: var(--topbar-height); }
    .fi-body-has-topbar .fi-sidebar { top: 0 !important; height: 100dvh !important; z-index: 31; }
    .fi-body-has-topbar .fi-sidebar .fi-sidebar-header { display: flex !important; }
}

/* ---------- Konten ---------- */
.fi-main { padding-top: 0.5rem; }
.fi-header-heading { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--mc-text); }
.fi-header-subheading { color: var(--mc-muted); }

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-tabs:not(.fi-contained-false) {
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow) !important;
    --tw-ring-color: var(--mc-border) !important;
}
.fi-section-header-heading { font-weight: 650; color: var(--mc-text); }

/* Tabel: kepala abu muda, baris lebih lega. */
.fi-ta-header-cell { background: #f8fafd; color: var(--mc-muted); font-size: 0.78rem; font-weight: 600; }
.fi-ta-row:hover { background: #f8fbff; }
.fi-badge { border-radius: 999px; font-weight: 600; }

/* ---------- Kartu KPI dashboard ---------- */
.fi-wi-stats-overview-stat { padding: 1.15rem 1.25rem !important; }
.fi-wi-stats-overview-stat-label-ctn { gap: 0.6rem; }
.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    width: 2.1rem; height: 2.1rem; padding: 0.45rem; border-radius: 999px;
    background: var(--mc-primary-soft); color: var(--mc-primary);
}
.mc-kpi-success .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: #e3f9ec; color: #00a344; }
.mc-kpi-purple .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: #efe7fd; color: #7c3aed; }
.mc-kpi-warning .fi-wi-stats-overview-stat-label-ctn > .fi-icon { background: #fff2df; color: #f08c00; }
.fi-wi-stats-overview-stat-label { font-size: 0.8rem; color: var(--mc-muted); font-weight: 500; }
.fi-wi-stats-overview-stat-value { font-size: 1.6rem !important; font-weight: 700; letter-spacing: -0.02em; }

/* Aktivitas terbaru */
.mc-activity { display: flex; flex-direction: column; }
.mc-activity-item { display: flex; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--mc-border); text-decoration: none; }
.mc-activity-item:last-child { border-bottom: 0; }
.mc-activity-icon {
    width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--mc-primary-soft); color: var(--mc-primary);
}
.mc-activity-icon svg { width: 1rem; height: 1rem; }
.mc-activity-icon.success { background: #e3f9ec; color: #00a344; }
.mc-activity-icon.warning { background: #fff2df; color: #f08c00; }
.mc-activity-icon.danger { background: #fdeaea; color: #d93b38; }
.mc-activity-icon.purple { background: #efe7fd; color: #7c3aed; }
.mc-activity-title { font-size: 0.86rem; font-weight: 600; color: var(--mc-text); }
.mc-activity-meta { font-size: 0.76rem; color: var(--mc-muted); margin-top: 0.1rem; }
.mc-empty { font-size: 0.86rem; color: var(--mc-muted); }

/* ---------- Login dua kolom ---------- */
.mc-login-hero { display: none; }
@media (min-width: 1024px) {
    .fi-simple-layout:has(.mc-login-hero) {
        display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; min-height: 100dvh;
        background: linear-gradient(180deg, #f7f9fc, #eef4fb);
    }
    .fi-simple-layout:has(.mc-login-hero) .fi-simple-main-ctn { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; }
    .mc-login-hero {
        display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; grid-column: 1; grid-row: 1;
        padding: 3.5rem 4rem; color: #fff;
        background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.16), transparent 40%),
            linear-gradient(150deg, #1e88e5 0%, #1565c0 55%, #0d47a1 100%);
    }
}
.mc-login-hero .mc-brand-name { color: #fff; font-size: 1.6rem; }
.mc-login-hero .mc-brand-tag { color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; }
.mc-login-hero .mc-brand-mark { width: 3rem; height: 3rem; border-radius: 0.9rem; }
.mc-login-hero .mc-brand-mark svg { width: 1.8rem; height: 1.8rem; }
.mc-login-hero h1 { font-size: 2.3rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 1rem 0 0; }
.mc-login-hero p { color: rgba(255, 255, 255, 0.85); max-width: 30rem; line-height: 1.6; margin: 0; }
.mc-login-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1rem; max-width: 32rem; }
.mc-login-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 500; }
.mc-login-feature span:first-child {
    width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; flex-shrink: 0;
}
.mc-login-feature svg { width: 1.2rem; height: 1.2rem; }
.mc-login-foot { font-size: 0.75rem; color: var(--mc-muted); text-align: center; margin-top: 0.5rem; }
.fi-simple-layout:has(.mc-login-hero) .fi-simple-main {
    border-radius: 1.1rem; box-shadow: 0 10px 40px rgba(15, 44, 92, 0.1) !important; --tw-ring-color: var(--mc-border) !important;
}
@media (min-width: 1024px) {
    .fi-simple-layout:has(.mc-login-hero) .fi-simple-header .fi-logo { display: none; }
}
.fi-simple-layout:has(.mc-login-hero) .fi-simple-header { align-items: flex-start; text-align: start; }
.fi-simple-layout:has(.mc-login-hero) .fi-simple-header-heading { font-size: 1.35rem; font-weight: 700; }
.fi-simple-layout:has(.mc-login-hero) .fi-simple-main { width: 100%; max-width: 27rem; }
.fi-simple-header .mc-brand-mark { background: var(--mc-primary); color: #fff; }
@media (max-width: 1023px) {
    .mc-topbar-store { display: none; }
}

/* ---------- Tabel kustom (laporan, defekta, SIPNAP, kartu stok) ----------
   View ini memakai kelas Tailwind yang tidak ada di CSS Filament; gaya disamakan dengan tabel resource. */
.fi-main table:not(.fi-ta-table) { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fi-main table:not(.fi-ta-table) th {
    background: #f8fafd; color: var(--mc-muted); font-size: 0.76rem; font-weight: 600; text-align: start;
    padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--mc-border); white-space: nowrap;
}
.fi-main table:not(.fi-ta-table) td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.fi-main table:not(.fi-ta-table) tbody tr:hover { background: #f8fbff; }
.fi-main table:not(.fi-ta-table) .text-right { text-align: end; }
.fi-main table:not(.fi-ta-table) .tabular-nums { font-variant-numeric: tabular-nums; }
.fi-main table:not(.fi-ta-table) .font-semibold td,
.fi-main table:not(.fi-ta-table) tr.font-semibold { font-weight: 600; }
.fi-main table:not(.fi-ta-table) tr.border-t-2 td { border-top: 2px solid var(--mc-border); background: #f8fafd; }
.fi-main table:not(.fi-ta-table) .text-gray-500 { color: var(--mc-muted); }
.fi-main table:not(.fi-ta-table) .text-danger-600 { color: #d93b38; }
.fi-main table:not(.fi-ta-table) .whitespace-pre { white-space: pre; }

/* Kartu ringkasan laporan */
.mc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.mc-summary-card { background: #fff; border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); padding: 1rem 1.25rem; border: 1px solid var(--mc-border); }
.mc-summary-card span { display: block; font-size: 0.78rem; color: var(--mc-muted); }
.mc-summary-card strong { display: block; font-size: 1.4rem; font-weight: 700; color: var(--mc-primary); margin-top: 0.2rem; letter-spacing: -0.01em; }
.mc-summary-card em { font-style: normal; font-size: 0.75rem; color: #00a344; }

/* Halaman Mode Latihan & LIVE */
.mc-train-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .mc-train-grid { grid-template-columns: 1fr; } }
.mc-train-label { font-size: 0.78rem; font-weight: 600; color: var(--mc-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; }
.mc-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; margin-bottom: 0.6rem; }
.mc-check input { margin-top: 0.2rem; accent-color: var(--mc-primary); }
.mc-note { font-size: 0.78rem; color: var(--mc-muted); margin: 0.4rem 0 0; }
.mc-kv { width: 100%; font-size: 0.86rem; border-collapse: collapse; }
.mc-kv td { padding: 0.45rem 0.25rem; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.mc-kv td:last-child { text-align: end; }
.mc-train-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; margin-top: 1.25rem; }
.mc-train-form label { display: grid; gap: 0.35rem; font-size: 0.82rem; font-weight: 500; color: var(--mc-text); }
.mc-train-form code { background: #fdecec; color: #c62828; padding: 0 0.3rem; border-radius: 4px; }
@media (max-width: 900px) { .mc-train-form { grid-template-columns: 1fr; } }