:root{--nav:#0f172a;--nav2:#172554;--primary:#2563eb;--bg:#f1f5f9;--card:#fff;--text:#172033;--muted:#64748b;--border:#e2e8f0;--success:#16a34a;--danger:#dc2626;--warning:#d97706}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--nav),var(--nav2));color:#cbd5e1;padding:20px 14px;overflow:auto}.brand{font-size:20px;font-weight:800;color:#fff;padding:4px 10px 22px}.brand small{display:block;font-size:11px;color:#93c5fd;margin-top:4px}.side-title{font-size:10px;letter-spacing:1.4px;color:#64748b;margin:20px 10px 7px}.sidebar a{display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:9px;margin:3px 0}.sidebar a:hover,.sidebar a.active{background:#ffffff18;color:#fff}.topbar{height:68px;margin-left:250px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}.content{margin-left:250px;padding:26px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.page-head h1{margin:0;font-size:25px}.page-head p{margin:5px 0 0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat,.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 18px #0f172a0b}.stat{padding:20px}.stat b{font-size:24px;display:block;margin-top:7px}.stat span{color:var(--muted);font-size:13px}.card{padding:20px;margin-bottom:20px}.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}.btn-primary{background:var(--primary);color:#fff}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-light{background:#e2e8f0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-group label{font-size:13px;font-weight:700;display:block;margin-bottom:7px}.form-control{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:14px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}th{background:#f8fafc;color:#475569}.badge{padding:5px 9px;border-radius:20px;font-size:11px;font-weight:800}.green{background:#dcfce7;color:#166534}.orange{background:#ffedd5;color:#9a3412}.red{background:#fee2e2;color:#991b1b}.alert{padding:12px 15px;border-radius:9px;margin-bottom:18px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#1d4ed8)}.login-card{width:min(420px,92vw);background:#fff;padding:34px;border-radius:18px;box-shadow:0 25px 70px #0005}.login-card h1{margin:0 0 5px}.login-card p{color:var(--muted);margin-bottom:25px}.login-card .form-group{margin-bottom:15px}@media(max-width:900px){.sidebar{width:76px}.brand{font-size:0}.brand:before{content:'CM';font-size:20px}.brand small,.side-title,.sidebar a span.txt{display:none}.sidebar a{justify-content:center}.topbar,.content{margin-left:76px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.content{padding:15px}.grid,.form-grid{grid-template-columns:1fr}.topbar{padding:0 15px}.page-head{align-items:flex-start;gap:10px;flex-direction:column}}
/* =========================================================
   MOBILE FULL SIDEBAR
========================================================= */

.mobile-menu-btn,
.sidebar-close,
.sidebar-mobile-head {
    display: none;
}

.mobile-sidebar-overlay {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 285px !important;
        max-width: 86vw !important;

        height: 100vh !important;

        background: #0f1b35 !important;

        z-index: 10001 !important;

        transform: translateX(-105%) !important;

        transition:
            transform .28s ease !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-shadow:
            8px 0 30px
            rgba(15, 23, 42, .25);

        padding-bottom: 30px;
    }


    /* OPEN */

    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }


    /* -----------------------------------------------------
       IMPORTANT:
       SHOW FULL MENU TEXT
    ----------------------------------------------------- */

    .sidebar a {
        display: flex !important;

        align-items: center !important;

        gap: 13px !important;

        width: auto !important;

        margin:
            4px 12px !important;

        padding:
            12px 14px !important;

        border-radius: 9px !important;

        white-space: nowrap !important;

        overflow: visible !important;

        font-size: 14px !important;

        text-indent: 0 !important;
    }


    .sidebar a span {
        display: inline-flex !important;

        width: 24px !important;

        min-width: 24px !important;

        align-items: center !important;

        justify-content: center !important;
    }


    /* Show text that old CSS may hide */

    .sidebar a .menu-text,
    .sidebar .menu-text,
    .sidebar small,
    .sidebar .side-title,
    .sidebar .menu-label {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* -----------------------------------------------------
       SIDEBAR MOBILE HEADER
    ----------------------------------------------------- */

    .sidebar-mobile-head {
        display: flex !important;

        align-items: center;

        justify-content: space-between;

        min-height: 75px;

        padding:
            15px 18px;

        border-bottom:
            1px solid
            rgba(255,255,255,.10);

        margin-bottom: 10px;

        color: #fff;
    }


    .sidebar-mobile-head strong {
        display: block;

        font-size: 19px;

        font-weight: 800;
    }


    .sidebar-mobile-head small {
        display: block !important;

        margin-top: 3px;

        color: #93c5fd;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       CLOSE BUTTON
    ----------------------------------------------------- */

    .sidebar-close {
        display: flex !important;

        width: 38px;

        height: 38px;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 8px;

        background:
            rgba(255,255,255,.10);

        color: #fff;

        font-size: 26px;

        cursor: pointer;
    }


    /* -----------------------------------------------------
       OVERLAY
    ----------------------------------------------------- */

    .mobile-sidebar-overlay {
        position: fixed;

        inset: 0;

        z-index: 10000;

        background:
            rgba(15,23,42,.55);

        backdrop-filter:
            blur(2px);
    }


    .mobile-sidebar-overlay.show {
        display: block;
    }


    /* -----------------------------------------------------
       MENU BUTTON
    ----------------------------------------------------- */

    .mobile-menu-btn {
        display: flex !important;

        width: 40px;

        height: 40px;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 8px;

        background: #eff6ff;

        color: #1d4ed8;

        font-size: 23px;

        cursor: pointer;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .topbar {
        left: 0 !important;

        width: 100% !important;

        padding:
            12px 15px !important;
    }


    .topbar-left {
        display: flex;

        align-items: center;

        gap: 12px;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
       REMOVE OLD SIDEBAR SPACE
    ----------------------------------------------------- */

    .main,
    .content,
    .main-content,
    .page-wrapper,
    #page-wrapper {
        margin-left: 0 !important;

        width: 100% !important;
    }


    body.sidebar-open {
        overflow: hidden;
    }

}