*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#172033}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}

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

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
    width:225px;
    background:#102131;
    color:#dce6f1;
    position:fixed;
    inset:0 auto 0 0;
    padding:18px 11px;
    overflow:auto;
    z-index:1000;
    transition:transform .25s ease;
}

.brand{
    display:flex;
    gap:10px;
    align-items:center;
    padding:4px 8px 22px;
}

.logo{
    width:42px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:transparent;
    border:none;
}

.logo img{
    width:42px;
    height:auto;
    max-height:38px;
    object-fit:contain;
    display:block;
}

.brand b{
    display:block;
    font-size:13px;
    line-height:1.25;
    color:#fff;
    white-space:normal;
}

.menu-title{
    font-size:9px;
    color:#71869b;
    margin:14px 10px 5px;
    letter-spacing:.3px;
}

.nav{
    display:block;
    padding:10px;
    border-radius:7px;
    font-size:12px;
    margin:2px 0;
    transition:background .15s ease,color .15s ease;
}

.nav:hover,.nav.active{
    background:#2168d7;
    color:#fff;
}

/* =========================================================
   SIDEBAR USER
========================================================= */
.sidebar-bottom{
    margin-top:25px;
    background:#193149;
    border-radius:8px;
    padding:12px;
    font-size:9px;
    color:#9eb1c4;
}

.sidebar-bottom b{color:#fff}

/* =========================================================
   HAMBURGER BUTTON
========================================================= */
.sidebar-toggle{
    position:fixed;
    top:28px;
    left:210px;
    width:30px;
    height:30px;
    border:1px solid #d8e0e7;
    border-radius:7px;
    background:#fff;
    color:#173b67;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:1001;
    padding:0;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    transition:left .25s ease,transform .15s ease;
}

.sidebar-toggle:hover{transform:scale(1.05)}

.sidebar-toggle span{
    display:block;
    width:15px;
    height:2px;
    background:#173b67;
    border-radius:2px;
    margin:2px 0;
}

/* =========================================================
   SIDEBAR HIDE
========================================================= */
body.sidebar-hidden .sidebar{
    transform:translateX(-100%);
}

body.sidebar-hidden .content{
    margin-left:0;
    width:100%;
}

body.sidebar-hidden .sidebar-toggle{
    left:12px;
}

/* =========================================================
   CONTENT
========================================================= */
.content{
    margin-left:225px;
    width:calc(100% - 225px);
    padding:22px;
    transition:margin-left .25s ease,width .25s ease;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.topbar h1{
    margin:0;
    font-size:25px;
}

.muted{
    color:#748196;
    font-size:12px;
}

.userbox{
    font-size:12px;
    background:#fff;
    border:1px solid #e2e7ed;
    padding:8px 12px;
    border-radius:8px;
}

/* =========================================================
   CARDS / GRID
========================================================= */
.grid5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.card{
    background:#fff;
    border:1px solid #e1e6ed;
    border-radius:10px;
    padding:16px;
    position:relative;
}

.card small{color:#657287}

.card strong{
    display:block;
    font-size:28px;
    margin-top:8px;
}

.green strong{color:#159447}
.red strong{color:#df3434}
.orange strong{color:#d88900}
.purple strong{color:#7449c8}

.panel{
    background:#fff;
    border:1px solid #e1e6ed;
    border-radius:10px;
    padding:16px;
    margin-top:12px;
}

.panel h3{
    margin:0 0 12px;
    font-size:14px;
}

.grid2{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:12px;
}

.grid3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
}

/* =========================================================
   FLOW
========================================================= */
.flow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
}

.flow div{
    padding:12px;
    background:#f7f9fc;
    border:1px solid #e1e6ed;
    border-radius:8px;
    min-width:120px;
}

.flow b,.flow small{display:block}
.flow b{font-size:10px;margin-top:5px}
.flow small{font-size:8px;color:#8995a7}

/* =========================================================
   TABLE
========================================================= */
table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:10px 7px;
    border-bottom:1px solid #edf0f4;
    text-align:left;
    font-size:11px;
}

th{
    color:#748196;
}

/* =========================================================
   BADGES
========================================================= */
.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:12px;
    font-size:10px;
}

.ok{background:#dcfce7;color:#16803b}
.ng{background:#fee2e2;color:#c22121}
.hold{background:#fff4d6;color:#a56a00}
.released{background:#dcfce7;color:#16803b}
.rejected{background:#fee2e2;color:#c22121}

/* =========================================================
   BUTTON
========================================================= */
.btn{
    display:inline-block;
    border:0;
    border-radius:7px;
    padding:10px 14px;
    background:#2168d7;
    color:#fff;
    cursor:pointer;
    font-size:12px;
}

.btn.gray{background:#64748b}
.btn.red{background:#dc2626}
.btn.green{background:#159447}

/* =========================================================
   FORM
========================================================= */
.form{
    display:grid;
    gap:8px;
}

.form label{
    font-size:11px;
    color:#59677a;
}

.form input,
.form select,
.form textarea{
    width:100%;
    padding:10px;
    border:1px solid #d8dee7;
    border-radius:7px;
    font:inherit;
    background:#fff;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.alert{
    padding:10px;
    border-radius:7px;
    background:#e8f2ff;
    color:#1557a7;
    font-size:12px;
    margin-bottom:10px;
}

.quick{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.search{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.search input{
    flex:1;
    padding:10px;
    border:1px solid #d8dee7;
    border-radius:7px;
}

/* =========================================================
   LOGIN
========================================================= */
.login{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#102131,#2168d7);
}

.loginbox{
    width:380px;
    background:#fff;
    border-radius:14px;
    padding:28px;
    box-shadow:0 20px 60px #0003;
}

.loginbox h1{
    font-size:22px;
    margin:0;
}

.loginbox .logo{
    margin-bottom:12px;
    color:#2168d7;
    border-color:#2168d7;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1100px){

    .grid5{
        grid-template-columns:repeat(3,1fr);
    }

    .grid2,.grid3{
        grid-template-columns:1fr;
    }

    .sidebar{
        width:190px;
    }

    .content{
        margin-left:190px;
        width:calc(100% - 190px);
    }

    .sidebar-toggle{
        left:175px;
    }
}

@media(max-width:600px){

    .content{
        padding:14px;
    }

    .grid5{
        grid-template-columns:1fr 1fr;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .sidebar-toggle{
        top:18px;
    }

    body.sidebar-hidden .sidebar-toggle{
        left:10px;
    }
}