*{box-sizing:border-box}body{margin:0;font-family:Arial,"Noto Sans Bengali",sans-serif;background:#f5f7fb;color:#1f2937}
a{color:inherit}.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#111827,#334155)}
.auth-card{width:min(430px,92%);background:#fff;padding:32px;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.auth-card.wide{width:min(760px,94%)}h1,h2{margin-top:0}.auth-card p{color:#64748b}
label{display:block;font-weight:600;margin-bottom:14px}input,select{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;margin-top:6px;background:#fff}
button{border:0;background:#0f766e;color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;cursor:pointer}
.alert{padding:12px;border-radius:8px;margin:12px 0}.alert.error{background:#fee2e2;color:#991b1b}.alert.success{background:#dcfce7;color:#166534}
.app{display:flex;min-height:100vh}aside{width:245px;background:#111827;color:#fff;padding:20px;position:fixed;inset:0 auto 0 0}
.brand{font-size:21px;font-weight:800;padding:10px 8px 22px}aside a{display:block;text-decoration:none;padding:12px;border-radius:8px;margin-bottom:6px;color:#d1d5db}aside a:hover{background:#1f2937;color:#fff}
main{margin-left:245px;width:calc(100% - 245px)}header{height:72px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 26px}header h1{font-size:24px;margin:0}
.content{padding:26px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card,.panel{background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.06);padding:20px}.card span{display:block;color:#64748b}.card strong{font-size:28px;display:block;margin-top:12px}
.panel{margin-top:20px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e5e7eb;white-space:nowrap}th{background:#f8fafc}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid .full{grid-column:1/-1}.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.check{font-weight:400;background:#f8fafc;padding:10px;border-radius:8px}.check input{width:auto;margin:0 8px 0 0}
@media(max-width:900px){aside{position:static;width:100%}.app{display:block}main{margin:0;width:100%}.cards{grid-template-columns:1fr 1fr}.grid.two,.permission-grid{grid-template-columns:1fr}}
/* =========================================================
   KRA Mobile Blank Space Fix
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
    }

    .app {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sidebar document flow থেকে সরিয়ে দেওয়া হয়েছে */
    .app > aside,
    aside#sidebar {
        position: fixed !important;
        z-index: 5000 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: min(285px, 84vw) !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 18px !important;

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

        transform: translateX(-105%) !important;
        visibility: hidden !important;

        background: #111827 !important;
        box-shadow: 14px 0 35px rgba(15, 23, 42, 0.28) !important;

        transition:
            transform 0.25s ease,
            visibility 0.25s ease !important;
    }

    /* Software যে class ব্যবহার করবে, সেগুলোর যেকোনোটি দিয়ে menu খুলবে */
    body.sidebar-open aside#sidebar,
    body.menu-open aside#sidebar,
    .app.sidebar-open > aside,
    .app.menu-open > aside,
    aside#sidebar.open,
    aside#sidebar.active,
    aside#sidebar.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .app > main,
    main {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    main > header,
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 10px 14px !important;
    }

    main > .content,
    .content {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 14px !important;

        top: auto !important;
        transform: none !important;
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .grid.two,
    .permission-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 560px) {

    .cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    header {
        min-height: 60px !important;
        padding: 9px 12px !important;
    }

    .content {
        padding: 12px !important;
    }
}
@media(max-width:560px){.cards{grid-template-columns:1fr}header{padding:0 14px}.content{padding:14px}}