:root {
    --mau-primary: #2563eb;
    --mau-primary-dark: #1d4ed8;
    --mau-sidebar: #111827;
    --mau-sidebar-soft: #1f2937;
    --mau-bg: #f5f7fb;
    --mau-border: #e5e7eb;
    --mau-text: #111827;
    --mau-muted: #6b7280;
    --mau-white: #ffffff;
    --mau-radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--mau-bg);
    color: var(--mau-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { text-decoration: none; }

.app-shell { min-height: 100vh; display: flex; }

.sidebar {
    width: 255px;
    flex: 0 0 255px;
    background: var(--mau-sidebar);
    color: #fff;
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.sidebar-brand {
    min-height: 78px;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--mau-primary);
    font-size: 20px;
}

.brand-name { font-weight: 800; letter-spacing: -.2px; }
.brand-caption { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 2px; }

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 12px;
}

.menu-label {
    color: rgba(255,255,255,.38);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 0 10px 8px;
}

.sidebar .nav-link {
    color: rgba(255,255,255,.68);
    border-radius: 9px;
    padding: 10px 11px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: .15s ease;
}

.sidebar .nav-link i { font-size: 16px; width: 20px; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--mau-primary); box-shadow: 0 6px 18px rgba(37,99,235,.2); }

.sidebar-footer { padding: 15px 15px 18px; border-top: 1px solid rgba(255,255,255,.08); }

.help-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.055);
}
.help-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.08); }
.help-title { font-size: 12px; font-weight: 700; }
.help-text { font-size: 10px; color: rgba(255,255,255,.5); margin-top:2px; }

.main-area { min-width: 0; flex: 1; }

.topbar {
    height: 78px;
    background: #fff;
    border-bottom: 1px solid var(--mau-border);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-title { font-weight: 750; font-size: 18px; }
.topbar-date { color: var(--mau-muted); font-size: 12px; margin-top: 2px; text-transform: capitalize; }

.topbar-actions { display:flex; align-items:center; gap: 9px; }
.icon-btn, .mobile-menu-btn {
    border: 0;
    background: transparent;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #4b5563;
    position: relative;
}
.icon-btn:hover, .mobile-menu-btn:hover { background: #f3f4f6; }

.notification-dot {
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    right: 9px;
    border: 2px solid #fff;
}

.profile-btn {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 7px;
    border-radius: 10px;
}
.profile-btn:hover { background:#f3f4f6; }
.profile-btn::after { color:#6b7280; }
.avatar {
    width: 37px; height: 37px; border-radius: 50%;
    display:grid; place-items:center;
    background: #dbeafe; color: #1d4ed8; font-weight: 800;
}
.profile-info { display:flex; flex-direction:column; text-align:left; line-height:1.2; }
.profile-info strong { font-size:12px; }
.profile-info small { color:var(--mau-muted); font-size:10px; margin-top:3px; }

.content-area { padding: 28px; min-height: calc(100vh - 125px); }

.page-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 15px;
    margin-bottom: 22px;
}
.page-heading h1 { font-size: 24px; font-weight: 800; margin:0; letter-spacing:-.4px; }
.page-heading p { color:var(--mau-muted); margin:6px 0 0; font-size:13px; }

.stat-card {
    background:#fff;
    border:1px solid var(--mau-border);
    border-radius:var(--mau-radius);
    padding:17px;
    display:flex;
    align-items:center;
    gap:13px;
    min-height:116px;
    box-shadow: 0 2px 8px rgba(15,23,42,.025);
}
.stat-icon {
    width:47px; height:47px; border-radius:12px;
    display:grid; place-items:center;
    font-size:20px;
    flex:0 0 auto;
}
.stat-icon.sales { background:#eff6ff; color:#2563eb; }
.stat-icon.purchase { background:#f5f3ff; color:#7c3aed; }
.stat-icon.profit { background:#ecfdf5; color:#059669; }
.stat-icon.stock { background:#fff7ed; color:#ea580c; }
.stat-content { min-width:0; }
.stat-content span { color:var(--mau-muted); font-size:12px; display:block; }
.stat-content strong { display:block; font-size:20px; margin:3px 0; letter-spacing:-.4px; }
.stat-content small { color:#9ca3af; font-size:10px; white-space:nowrap; }

.panel-card {
    background:#fff;
    border:1px solid var(--mau-border);
    border-radius:var(--mau-radius);
    box-shadow:0 2px 8px rgba(15,23,42,.025);
    overflow:hidden;
}
.panel-header {
    padding:18px 19px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #f0f1f3;
}
.panel-header h5 { font-size:14px; font-weight:750; margin:0; }
.panel-header span { display:block; color:var(--mau-muted); font-size:11px; margin-top:4px; }

.empty-chart { min-height:300px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:35px; text-align:center; }
.empty-chart-icon, .empty-state-icon {
    width:58px; height:58px; border-radius:16px;
    display:grid; place-items:center;
    background:#f3f4f6; color:#9ca3af; font-size:24px;
}
.empty-chart h6, .empty-state h6 { font-weight:700; margin:13px 0 4px; }
.empty-chart p, .empty-state p { color:#9ca3af; font-size:11px; max-width:330px; margin:0; }
.empty-state { min-height:300px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:25px; text-align:center; }
.empty-state.compact { min-height:300px; }

.quick-action {
    border:1px solid var(--mau-border);
    border-radius:12px;
    padding:15px;
    display:flex;
    flex-direction:column;
    transition:.15s ease;
    color:var(--mau-text);
    height:100%;
}
.quick-action:hover { border-color:#bfdbfe; background:#f8fbff; transform:translateY(-1px); }
.quick-action > span {
    width:36px; height:36px; border-radius:10px;
    display:grid; place-items:center;
    background:#eff6ff; color:#2563eb; margin-bottom:11px;
}
.quick-action strong { font-size:12px; }
.quick-action small { color:var(--mau-muted); font-size:10px; margin-top:3px; }

.app-footer {
    min-height:47px;
    padding:0 28px;
    border-top:1px solid var(--mau-border);
    background:#fff;
    color:#9ca3af;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.footer-separator { color:#d1d5db; }

.sidebar-backdrop { display:none; }

.error-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--mau-bg); }
.error-box { background:#fff; border:1px solid var(--mau-border); border-radius:18px; padding:40px; text-align:center; max-width:480px; box-shadow:0 12px 35px rgba(15,23,42,.06); }
.error-number { font-size:76px; font-weight:900; color:var(--mau-primary); line-height:1; }
.error-box h1 { font-size:22px; margin:15px 0 8px; }
.error-box p { color:var(--mau-muted); font-size:13px; margin-bottom:22px; }

@media (max-width: 991.98px) {
    .sidebar {
        position:fixed;
        left:0;
        top:0;
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow: 15px 0 40px rgba(0,0,0,.18);
    }
    .sidebar.show { transform:translateX(0); }
    .sidebar-backdrop.show {
        display:block;
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.45);
        z-index:1035;
    }
    .sidebar-close {
        margin-left:auto;
        color:#fff;
        border:0;
    }
    .topbar { padding:0 18px; }
    .content-area { padding:22px 18px; }
}

@media (max-width: 575.98px) {
    .topbar { height:68px; }
    .content-area { padding:18px 14px; }
    .page-heading { flex-direction:column; }
    .page-heading h1 { font-size:20px; }
    .period-selector { width:100%; }
    .period-selector .btn { width:100%; text-align:left; }
    .panel-header { padding:15px; }
    .panel-header .btn { font-size:10px; }
    .stat-card { min-height:100px; padding:14px; }
    .stat-content strong { font-size:18px; }
    .app-footer { padding:12px 15px; flex-wrap:wrap; text-align:center; }
}

.business-dashboard-summary {
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    background:#fff;
    border:1px solid #e6ebf2;
    border-radius:15px;
    box-shadow:0 7px 24px rgba(25,55,100,.04);
    min-height:92px;
}
.business-dashboard-logo {
    width:64px !important;
    height:64px !important;
    min-width:64px;
    max-width:64px;
    border-radius:12px;
    background:#f4f7fb;
    border:1px solid #e7edf5;
    display:flex !important;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex:0 0 64px;
}
.business-dashboard-logo img {
    display:block;
    width:auto !important;
    height:auto !important;
    max-width:52px !important;
    max-height:52px !important;
    min-width:0;
    min-height:0;
    object-fit:contain !important;
}
.business-dashboard-main { min-width:0; flex:1 1 auto; }
.business-dashboard-main strong { display:block; font-size:18px; line-height:1.25; font-weight:800; color:#111827; }
.business-dashboard-main span { display:block; margin-top:5px; color:#7b8798; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:575px){
    .business-dashboard-summary { align-items:center; gap:12px; padding:13px 14px; min-height:78px; }
    .business-dashboard-logo { width:52px !important; height:52px !important; min-width:52px; max-width:52px; flex-basis:52px; }
    .business-dashboard-logo img { max-width:42px !important; max-height:42px !important; }
    .business-dashboard-main strong { font-size:15px; }
    .business-dashboard-main span { font-size:10px; white-space:normal; }
    .business-dashboard-summary .btn { width:100%; margin-left:0!important; margin-top:2px; }
    .business-dashboard-summary { flex-wrap:wrap; }
}

/* =========================================================
   DASHBOARD FINAL LAYOUT
   Profil bisnis dan ringkasan dibuat SATU CARD, tidak double.
   ========================================================= */
.dashboard-business-card {
    display: grid;
    grid-template-columns: minmax(310px, 1.15fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 18px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--mau-border);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .035);
}

.dashboard-business-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 10px;
}

.dashboard-business-logo {
    width: 104px;
    height: 104px;
    min-width: 104px;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard-business-logo img {
    display: block;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    object-fit: contain !important;
}

.dashboard-business-info {
    min-width: 0;
}

.dashboard-business-info h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.35px;
}

.dashboard-business-code {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
}

.dashboard-business-location {
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-business-location i {
    margin-right: 4px;
}

.dashboard-summary-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-summary-item {
    min-width: 0;
    padding: 14px 13px;
    border: 1px solid #edf0f4;
    border-radius: 13px;
    background: #fbfcfe;
}

.dashboard-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 18px;
    margin-bottom: 11px;
}

.dashboard-summary-label {
    color: #667085;
    font-size: 11px;
}

.dashboard-summary-value {
    margin-top: 3px;
    color: #111827;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-summary-meta {
    margin-top: 6px;
    color: #98a2b3;
    font-size: 10px;
    white-space: nowrap;
}

.dashboard-summary-item.sales .dashboard-summary-icon {
    background: #eff6ff;
    color: #2563eb;
}
.dashboard-summary-item.purchase .dashboard-summary-icon {
    background: #f5f3ff;
    color: #7c3aed;
}
.dashboard-summary-item.profit .dashboard-summary-icon {
    background: #ecfdf5;
    color: #059669;
}
.dashboard-summary-item.stock .dashboard-summary-icon {
    background: #fff7ed;
    color: #ea580c;
}

.dashboard-empty-state {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    text-align: center;
}

.dashboard-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 25px;
}

.dashboard-empty-icon.neutral {
    background: #f3f4f6;
    color: #667085;
}

.dashboard-empty-state h6 {
    margin: 14px 0 4px;
    font-size: 14px;
    font-weight: 750;
}

.dashboard-empty-state p {
    margin: 0;
    color: #98a2b3;
    font-size: 11px;
}

/* Hilangkan layout statistik lama agar tidak muncul dua kali. */
.dashboard-business-summary,
.dashboard-old-stat-row {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .dashboard-business-card {
        grid-template-columns: 1fr;
    }

    .dashboard-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dashboard-business-card {
        gap: 12px;
        padding: 10px;
    }

    .dashboard-business-profile {
        padding: 7px 5px;
        gap: 13px;
    }

    .dashboard-business-logo {
        width: 78px;
        height: 78px;
        min-width: 78px;
    }

    .dashboard-business-logo img {
        width: 66px !important;
        height: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
    }

    .dashboard-business-info h2 {
        font-size: 17px;
    }

    .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-summary-item {
        padding: 12px;
    }
}

@media (max-width: 399.98px) {
    .dashboard-business-profile {
        align-items: flex-start;
    }

    .dashboard-business-logo {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .dashboard-business-logo img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    .dashboard-business-info h2 {
        font-size: 15px;
    }

    .dashboard-business-code,
    .dashboard-business-location {
        font-size: 10px;
    }
}

/* Phase 5F - final UI consistency */
.sidebar .nav-link { min-height: 40px; }
.sidebar .nav-link span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .menu-label { user-select: none; }
.content-area { min-width: 0; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.form-control, .form-select { min-height: 40px; }
.btn { border-radius: 9px; }
.card { border-radius: var(--mau-radius); }
@media (max-width: 991.98px) {
    .topbar { padding: 0 16px; }
    .content-area { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 575.98px) {
    .topbar { height: 68px; }
    .content-area { padding: 12px; }
    .btn { min-height: 38px; }
    .table { font-size: 12px; }
}