/*==================================================
MDS - Material Dispatch System
Global Stylesheet
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    font-family:'Poppins','Segoe UI',sans-serif;
    background:#f8fafc;
    overflow:hidden;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

/*=====================================
Splash Screen
=====================================*/

.welcome-page{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    background:#f8fafc;
}

.text-center{
    width:100%;
    text-align:center;
}

/*=====================================
Logo
=====================================*/

.welcome-logo{
    width:min(75vw,340px);
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    animation:zoomIn .8s ease;
    user-select:none;
    -webkit-user-drag:none;
}

/*=====================================
Processing Text
=====================================*/

.processing-text{
    margin-top:20px;
    font-size:15px;
    font-weight:600;
    color:#64748b;
    letter-spacing:.3px;
}

.processing-area{
    margin-top:3rem;
}

/*=====================================
Progress Bar
=====================================*/

.progress-track{
    width:min(280px,72vw);
    height:9px;
    margin:0 auto;
    overflow:hidden;
    background:#e2e8f0;
    border-radius:999px;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}

.progress-bar{
    width:0;
    height:100%;
    background:linear-gradient(90deg,#2563eb,#38bdf8);
    border-radius:inherit;
    box-shadow:0 0 12px rgba(37,99,235,.35);
}

.processing-dots{
    display:inline-flex;
    gap:3px;
    margin-left:3px;
}

.processing-dots i{
    width:4px;
    height:4px;
    background:#2563eb;
    border-radius:50%;
    animation:dotBounce 1.1s ease-in-out infinite;
}

.processing-dots i:nth-child(2){ animation-delay:.15s; }
.processing-dots i:nth-child(3){ animation-delay:.3s; }

/*=====================================
Animation
=====================================*/

@keyframes zoomIn{

    0%{
        opacity:0;
        transform:scale(.8);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

/*=====================================
Responsive
=====================================*/

/* Small Phones */

@media (max-width:360px){

    .welcome-logo{
        width:80vw;
    }

    .processing-text{
        font-size:14px;
    }

}

/* Tablets */

@media (min-width:768px){

    .welcome-logo{
        width:300px;
    }

}

/* Desktop */

@media (min-width:1200px){

    .welcome-logo{
        width:340px;
    }

}


/*=========================================
LOGIN PAGE
=========================================*/

.login-page{
    width:100%;
    min-height:100vh;
    background:#f8fafc;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px;
}

.login-box{
    width:100%;
    max-width:420px;
    background:#ffffff;
    border-radius:28px;
    padding:35px 25px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.login-logo{
    width:220px;
    max-width:100%;
    display:block;
    margin:0 auto 25px;
}

.login-title{
    font-size:28px;
    font-weight:700;
    color:#0f172a;
    text-align:center;
    margin-bottom:8px;
}

.login-subtitle{
    font-size:15px;
    color:#64748b;
    text-align:center;
    margin-bottom:35px;
}

.form-group{
    margin-bottom:20px;
}

.form-label{
    font-size:14px;
    font-weight:600;
    color:#334155;
    margin-bottom:8px;
}

.input-group{
    border:1px solid #dbe4ee;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    transition:.3s;
}

.input-group:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.input-group-text{
    background:#fff;
    border:none;
    color:#64748b;
    padding:0 18px;
    font-size:18px;
}

.form-control{
    border:none !important;
    box-shadow:none !important;
    height:56px;
    font-size:16px;
    padding:0 15px;
    background:#fff;
}

.form-control::placeholder{
    color:#94a3b8;
}

.toggle-pin{
    cursor:pointer;
}

.login-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:16px;
    background:#2563eb;
    color:#fff;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}

.login-btn:hover{
    background:#1d4ed8;
}

.login-btn:active{
    transform:scale(.98);
}

/*=========================================
Login Security Information
=========================================*/

.login-security{
    display:grid;
    gap:12px;
    margin-top:22px;
}

.security-status-card,
.enterprise-security-card{
    border:1px solid #e2e8f0;
    border-radius:14px;
}

.security-status-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    background:#f8fafc;
    text-align:left;
}

.security-icon{
    display:grid;
    flex:0 0 38px;
    width:38px;
    height:38px;
    place-items:center;
    color:#15803d;
    background:#dcfce7;
    border-radius:11px;
}

.security-icon svg{
    width:20px;
    height:20px;
}

.security-status-card strong{
    display:block;
    margin-bottom:2px;
    color:#1e293b;
    font-size:13px;
    font-weight:600;
}

.security-status-card span:not(.security-icon){
    display:block;
    color:#64748b;
    font-size:11px;
    line-height:1.45;
}

.enterprise-security-card{
    padding:14px;
    background:#fff;
    text-align:left;
}

.enterprise-label{
    display:inline-block;
    padding:4px 8px;
    color:#1d4ed8;
    background:#eff6ff;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.7px;
}

.enterprise-security-card p{
    margin:8px 0 0;
    color:#64748b;
    font-size:11px;
    line-height:1.5;
}

/*=========================================
Login Error Modal
=========================================*/

.login-error-modal{
    position:fixed;
    z-index:1050;
    inset:0;
    display:grid;
    padding:20px;
    place-items:center;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(6px);
}

.login-error-modal[hidden]{
    display:none !important;
}

.login-error-modal__panel{
    width:min(100%,380px);
    padding:30px;
    color:#334155;
    background:#fff;
    border:1px solid rgba(255,255,255,.7);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(15,23,42,.24);
    text-align:center;
}

.login-error-modal__icon{
    display:grid;
    width:52px;
    height:52px;
    margin:0 auto 18px;
    place-items:center;
    color:#dc2626;
    background:#fef2f2;
    border:1px solid #fee2e2;
    border-radius:16px;
}

.login-error-modal__icon svg{
    width:26px;
    height:26px;
}

.login-error-modal__eyebrow{
    margin:0 0 7px;
    color:#dc2626;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}

.login-error-modal h3{
    margin:0;
    color:#0f172a;
    font-size:20px;
    font-weight:700;
}

.login-error-modal__panel > p:not(.login-error-modal__eyebrow){
    margin:10px 0 24px;
    color:#64748b;
    font-size:13px;
    line-height:1.55;
}

.login-error-modal__button{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:11px;
    color:#fff;
    background:#2563eb;
    box-shadow:0 8px 18px rgba(37,99,235,.2);
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
}

.login-error-modal__button:hover{
    background:#1d4ed8;
}

.app-version{
    text-align:center;
    margin-top:25px;
    font-size:13px;
    color:#94a3b8;
}

/*=========================================
Responsive
=========================================*/

@media(max-width:576px){

    .login-page{
        padding:20px;
    }

    .login-box{
        border-radius:24px;
        padding:30px 20px;
        box-shadow:none;
    }

    .login-logo{
        width:190px;
    }

    .login-title{
        font-size:24px;
    }

    .form-control{
        height:54px;
    }

    .login-btn{
        height:54px;
    }

}

@media(min-width:768px){

    .login-logo{
        width:240px;
    }

}

@keyframes dotBounce{
    50%{ transform:translateY(-4px); opacity:.55; }
}

@media (prefers-reduced-motion:reduce){
    .processing-dots i{
        animation:none;
    }
}

/*==================================================
MDS DASHBOARD
==================================================*/

body{
    margin:0;
    padding:0;
    background:#f8fafc;
    font-family:'Poppins',sans-serif;
}

/*=====================================
HEADER
=====================================*/

.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:65px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    z-index:1000;
}
.header-brand{
    margin-left:0;
}

.header-datetime{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    flex:1;
    margin-left:20px;
    margin-right:14px;
    line-height:1.2;
}

.header-btn{
    width:42px;
    height:42px;
    border:none;
    background:#f1f5f9;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#0f172a;
    transition:.3s;
}

.header-btn:hover{
    background:#e2e8f0;
}

.header-logo{
    height:42px;
    width:auto;
}

/*=====================================
PAGE TITLE
=====================================*/

.page-title{
    margin-top:65px;
    padding:18px 20px;
    background:#ffffff;
    border-bottom:1px solid #edf2f7;
}

.page-title h4{
    margin:0;
    font-size:22px;
    font-weight:600;
    color:#0f172a;
}

/*=====================================
CONTENT
=====================================*/

.app-content{
    padding:20px;
}

.dashboard-card{
    background:#ffffff;
    border-radius:20px;
    padding:22px;
    box-shadow:0 8px 25px rgba(15,23,42,.06);
}
.list-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
    padding:22px;
}
.dashboard-card h5{
    font-size:20px;
    font-weight:600;
    color:#0f172a;
}

.dashboard-card p{
    margin:0;
    color:#64748b;
    line-height:1.7;
}

/*=====================================
BUTTON
=====================================*/

.btn-danger{
    border-radius:14px;
    padding:12px 20px;
    font-weight:500;
}

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

@media(max-width:576px){

    .app-header{
        height:60px;
        padding:0 15px;
    }

    .header-logo{
        height:36px;
    }

    .header-btn{
        width:38px;
        height:38px;
        font-size:20px;
    }

    .page-title{
        margin-top:60px;
        padding:16px;
    }

    .page-title h4{
        font-size:20px;
    }

    .app-content{
        padding:15px;
    }

    .dashboard-card{
        padding:18px;
        border-radius:18px;
    }

}

/*==================================================
MDS APPLICATION LAYOUT
==================================================*/

body:has(.app-header){
    display:block;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    color:#1e293b;
}

body.app-page{
    display:block;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
}

.app-header{
    height:64px;
    padding:0 20px;
    border-bottom:1px solid #e2e8f0;
    box-shadow:0 1px 4px rgba(15,23,42,.06);
}

.header-brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    height:100%;
}

.header-datetime{
    margin-left:auto;
    margin-right:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1.2;
}

#currentDate{
    color:#64748b;
    font-size:11px;
    font-weight:500;
}

#currentTime{
    color:#0f172a;
    font-size:14px;
    font-weight:700;
}

.header-logo{
    height:38px;
}

.header-btn{
    width:40px;
    height:40px;
    border:1px solid #e2e8f0;
    border-radius:7px;
    cursor:pointer;
}

.header-btn:focus-visible,
.sidebar-link:focus-visible,
.quick-action:focus-visible{
    outline:3px solid rgba(37,99,235,.3);
    outline-offset:2px;
}

.page-title{
    margin-top:64px;
    margin-left:250px;
    padding:22px 28px 12px;
    border:0;
    background:#f8fafc;
}

.page-title h4{
    font-size:21px;
}

.app-sidebar{
    position:fixed;
    z-index:990;
    top:64px;
    bottom:0;
    left:0;
    display:flex;
    flex-direction:column;
    width:250px;
    padding:22px 14px;
    background:#fff;
    border-right:1px solid #e2e8f0;
    overflow-y:auto;
}

.sidebar-nav{
    display:grid;
    gap:4px;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:0 12px;
    border-radius:6px;
    color:#475569;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.sidebar-link i{
    font-size:18px;
}

.sidebar-link:hover{
    color:#1d4ed8;
    background:#eff6ff;
}

.sidebar-link.active{
    color:#1d4ed8;
    background:#dbeafe;
}

.sidebar-group{
    border-radius:6px;
}

.sidebar-group-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px;
    padding:0 12px;
    border:0;
    border-radius:6px;
    color:#475569;
    background:transparent;
    cursor:pointer;
    font:500 14px/1.2 inherit;
    text-align:left;
}

.sidebar-group-toggle > span{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
}

.sidebar-group-toggle > span > i{
    font-size:18px;
}

.sidebar-group-toggle:hover{
    color:#1d4ed8;
    background:#eff6ff;
}

.sidebar-group-toggle:focus-visible{
    outline:3px solid rgba(37,99,235,.3);
    outline-offset:2px;
}

.sidebar-chevron{
    font-size:12px;
    transition:transform .2s;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron{
    transform:rotate(180deg);
}

.sidebar-submenu{
    display:grid;
    gap:1px;
    margin:2px 0 5px 31px;
    padding:3px 0 3px 14px;
    border-left:1px solid #dbe4ee;
}

.sidebar-submenu a{
    padding:7px 9px;
    border-radius:5px;
    color:#64748b;
    font-size:12px;
    line-height:1.3;
    text-decoration:none;
}

.sidebar-submenu a:hover{
    color:#1d4ed8;
    background:#eff6ff;
}

.sidebar-submenu .submenu-logout{
    display:flex;
    align-items:center;
    gap:7px;
    color:#b91c1c;
}

.sidebar-submenu .submenu-logout:hover{
    color:#b91c1c;
    background:#fef2f2;
}

.logout-modal__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.logout-modal .login-error-modal__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    text-decoration:none;
}

.logout-modal__cancel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    border:1px solid #dbe4ee;
    border-radius:11px;
    color:#475569;
    background:#fff;
    cursor:pointer;
    font:600 14px inherit;
}

.logout-modal__cancel:hover{ background:#f8fafc; }

.sidebar-backdrop{
    display:none;
}

.profile-menu{
    position:fixed;
    z-index:1010;
    top:56px;
    right:20px;
    min-width:150px;
    padding:6px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:7px;
    box-shadow:0 12px 25px rgba(15,23,42,.12);
}

.profile-menu a{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px;
    border-radius:5px;
    color:#475569;
    font-size:13px;
    text-decoration:none;
}

.profile-menu a:hover{ background:#f1f5f9; }

.app-content{
    min-height:calc(100vh - 64px);
    margin-top:64px;
    margin-left:250px;
    padding:16px 28px 30px;
}

.dashboard-shell{ max-width:none; }

.dashboard-shell > div{
    width:100%;
    max-width:none;
}

.welcome-card{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:20px 22px;
    border:1px solid #dbeafe;
    border-radius:8px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.welcome-card__avatar{
    display:grid;
    flex:0 0 48px;
    width:48px;
    height:48px;
    place-items:center;
    border-radius:50%;
    color:#1d4ed8;
    background:#dbeafe;
    font-size:24px;
}

.welcome-card__content p{
    margin:0 0 2px;
    color:#64748b;
    font-size:12px;
    font-weight:500;
}

.welcome-card__content h1{
    margin:0;
    color:#0f172a;
    font-size:19px;
    font-weight:700;
}

.welcome-card__content span{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:12px;
}

.welcome-card__icon{
    margin-left:auto;
    color:#d97706;
    font-size:22px;
}

.dashboard-actions{
    width:100%;
    margin-top:24px;
}

.next-step-card{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    margin-top:24px;
    min-height:156px;
    padding:28px;
    border:1px solid #e2e8f0;
    border-radius:8px;
    color:#1e293b;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.next-step-card__icon{
    display:block;
    flex:0 0 62px;
    color:#1d4ed8;
    font-size:56px;
    line-height:1;
}

.next-step-card h2{
    margin:0;
    color:#0f172a;
    font-size:18px;
    font-weight:700;
}

.next-step-card p{
    margin:3px 0 0;
    color:#64748b;
    font-size:14px;
}

.dashboard-card{
    height:100%;
    padding:22px;
    border:1px solid #e2e8f0;
    border-radius:7px;
    box-shadow:none;
}

.dashboard-card h3{
    margin:11px 0 2px;
    color:#0f172a;
    font-size:28px;
    font-weight:700;
}

.dashboard-card p{
    font-size:13px;
    line-height:1.45;
}

.dashboard-icon{
    display:inline-grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:7px;
    font-size:22px;
}

.icon-blue{ color:#1d4ed8; background:#dbeafe; }
.icon-green{ color:#15803d; background:#dcfce7; }
.icon-amber{ color:#b45309; background:#fef3c7; }
.icon-cyan{ color:#0e7490; background:#cffafe; }
.icon-purple{
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

.section-title{
    color:#0f172a;
    font-size:16px;
    font-weight:600;
}

.quick-action{
    display:block;
    color:inherit;
    text-decoration:none;
    transition:border-color .2s,box-shadow .2s,transform .2s;
}

.quick-action:hover{
    border-color:#93c5fd;
    box-shadow:0 5px 14px rgba(15,23,42,.08);
    transform:translateY(-2px);
}

@media(min-width:768px){
    .dashboard-shell{
        padding-top:8px;
    }

    .dashboard-shell .row{
        --bs-gutter-x:16px;
        --bs-gutter-y:16px;
    }

    .quick-action{
        min-height:154px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        padding:22px;
    }

    .quick-action p{
        margin:0 !important;
        color:#334155;
        font-size:14px;
        font-weight:600;
    }
}

/* Phones and tablets use the same click-to-open navigation drawer. */
@media(max-width:991px){
    .app-header{ height:56px; padding:0 12px; }
    .header-btn{
        width:40px;
        height:40px;
        border-color:transparent;
        background:#f1f5f9;
    }
    .header-logo{ height:31px; }
    .app-sidebar{
        z-index:1020;
        top:56px;
        width:min(86vw,310px);
        padding:16px 12px 24px;
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:8px 0 20px rgba(15,23,42,.1);
    }
    .sidebar-open .app-sidebar{ transform:translateX(0); }
    .sidebar-backdrop{
        position:fixed;
        z-index:1015;
        inset:56px 0 0;
        background:rgba(15,23,42,.38);
    }
    .sidebar-open .sidebar-backdrop{ display:block; }
    .app-content{ min-height:calc(100dvh - 56px); margin-top:56px; margin-left:0; padding:16px 16px 32px; }
    .sidebar-link,
    .sidebar-group-toggle{ min-height:48px; font-size:15px; }
    .sidebar-submenu{ margin-left:33px; }
    .sidebar-submenu a{ padding:9px; font-size:13px; }
    .dashboard-shell{ max-width:480px; margin:0 auto; }
    .dashboard-shell .row{ --bs-gutter-x:12px; --bs-gutter-y:12px; }
    .dashboard-shell > div{ max-width:none; }
    .welcome-card{
        gap:12px;
        padding:16px;
        border-radius:8px;
    }
    .welcome-card__avatar{
        flex-basis:44px;
        width:44px;
        height:44px;
        font-size:16px;
    }
    .welcome-card__content h1{ font-size:17px; }
    .welcome-card__content span{ font-size:11px; }
    .welcome-card__icon{ font-size:20px; }
    .dashboard-actions{ margin-top:22px; }
    .next-step-card{ min-height:138px; gap:16px; margin-top:20px; padding:20px; }
    .next-step-card__icon{ flex-basis:52px; font-size:46px; }
    .next-step-card h2{ font-size:16px; }
    .next-step-card p{ font-size:12px; }
    .section-title{
        margin-bottom:16px !important;
        color:#334155;
        font-size:13px;
        font-weight:700;
        letter-spacing:.6px;
        text-transform:uppercase;
    }
    .dashboard-card{ padding:16px 12px; }
    .dashboard-icon{ width:48px; height:48px; border-radius:14px; font-size:23px; }
    .dashboard-card h3{ margin-top:9px; font-size:24px; }
    .dashboard-card p{ font-size:12px; }
    .quick-action{
        min-height:122px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        padding:16px;
        border-color:#e5eaf1;
        background:#fff;
        box-shadow:0 3px 10px rgba(15,23,42,.045);
    }
    .quick-action p{
        margin:0 !important;
        color:#1e293b;
        font-size:14px;
        font-weight:600;
    }
    .quick-action:hover{ transform:none; }
    .quick-action:active{
        border-color:#bfdbfe;
        background:#f8fbff;
        transform:scale(.98);
    }

}

@media(max-width:420px){
    .dashboard-card{ padding:17px 12px; }
    .dashboard-card h3{ font-size:24px; }
}
/*=====================================
DASHBOARD SUMMARY CARDS
=====================================*/

.dashboard-summary{
    margin:22px 0 28px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:16px;
    height:100%;
    padding:18px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
    transition:.25s;
}

.summary-card:hover{
    border-color:#bfdbfe;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
    transform:translateY(-2px);
}

.summary-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:24px;
}

.summary-content{
    flex:1;
    min-width:0;
}

.summary-title{
    margin:0;
    color:#64748b;
    font-size:13px;
    font-weight:600;
}

.summary-count{
    margin:3px 0;
    color:#0f172a;
    font-size:28px;
    font-weight:700;
    line-height:1.1;
}

.summary-text{
    margin:0;
    color:#94a3b8;
    font-size:12px;
}

.summary-danger{
    background:#fee2e2;
    color:#dc2626;
}

.summary-warning{
    background:#fef3c7;
    color:#d97706;
}

.summary-primary{
    background:#dbeafe;
    color:#2563eb;
}

.summary-success{
    background:#dcfce7;
    color:#16a34a;
}

/* Mobile */

@media(max-width:767px){

    .dashboard-summary{
        margin:18px 0 22px;
    }

    .summary-card{
        display:flex;
        align-items:flex-start;
        gap:10px;
        min-height:125px;
        padding:14px;
    }

    .summary-icon{
        width:40px;
        height:40px;
        flex-shrink:0;
        border-radius:10px;
        font-size:18px;
    }

    .summary-content{
        flex:1;
        min-width:0;
    }

    .summary-title{
        margin:0 0 6px;
        font-size:12px;
        font-weight:600;
        line-height:1.25;
    }

    .summary-count{
        margin:0;
        font-size:26px;
        line-height:1;
    }

    .summary-text{
        margin-top:6px;
        font-size:11px;
        line-height:1.35;
    }

}
/*=====================================
ADD STAFF PAGE
=====================================*/
.page-grid{
    display:grid;
    gap:18px;
    grid-template-columns:1fr;
    align-items:start;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.add-staff-container {
    width:100%;
    max-width:980px;
    margin:0;
    padding:0;
}

@media(max-width:992px){
    .add-staff-container {
        width:100%;
        max-width:none;
        padding:0 16px;
    }
}

.app-content{
    min-height:calc(100vh - 64px);
    margin-top:64px;
    margin-left:250px;
    padding:16px 28px 30px;
}

.form-card{
    width:100%;
    max-width:760px;
    margin:0;
}

.form-card,
.info-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:0;
    box-shadow:none;
    padding:28px;
}

.card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
}
.module-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 22px;
    margin-bottom:22px;
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-radius:12px;
}

.module-header__info{
    display:flex;
    align-items:center;
    gap:16px;
}

.module-header__icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dbeafe;
    color:#2563eb;
    border-radius:12px;
    font-size:24px;
    flex-shrink:0;
}

.module-header__content h3{
    margin:0;
    font-size:20px;
    font-weight:600;
    color:#0f172a;
}

.module-header__content p{
    margin:4px 0 0;
    font-size:13px;
    color:#64748b;
}

/*=====================================
UNIT LIST HEADER CARD
=====================================*/

.list-header-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:18px 0 0;
    padding:14px 22px;
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-radius:12px 12px 0 0;
    border-bottom:none;
}

.list-header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.list-header-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:#dbeafe;
    color:#2563eb;
    border-radius:10px;
    font-size:20px;
}

.list-header-content h3{
    margin:0;
    font-size:17px;
    font-weight:600;
    color:#0f172a;
    line-height:1.2;
}

.list-header-content p{
    margin:3px 0 0;
    font-size:13px;
    color:#64748b;
}

.list-header-content strong{
    color:#0f172a;
    font-weight:700;
}

@media(max-width:768px){

    .list-header-card{
        padding:16px;
    }

    .list-header-icon{
        width:46px;
        height:46px;
        font-size:20px;
    }

    .list-header-content h3{
        font-size:18px;
    }

}
@media(max-width:768px){

    .module-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .module-header .btn{
        width:100%;
        justify-content:center;
    }

}
.eyebrow{
    margin:0 0 6px;
    color:#2563eb;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.form-card h3,
.info-card h3{
    margin:0;
    font-size:22px;
    color:#0f172a;
    line-height:1.2;
}

.btn-flat{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    border:1px solid #2563eb;
    background:#ffffff;
    color:#2563eb;
    border-radius:14px;
    padding:14px 20px;
    font-weight:600;
    transition:.2s;
}

.btn-flat:hover{
    background:#eff6ff;
}

.btn-flat:active{
    transform:scale(.98);
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:.65rem 1rem;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.badge-info{
    color:#1d4ed8;
    background:#eff6ff;
}

.role-card{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:16px;
    padding:14px 18px;
    border:1px solid #d6e4ff;
    border-radius:20px;
    background:#f5f8ff;
    margin-bottom:24px;
    min-height:72px;
}

.role-card .role-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color:#1e3a8a;
    font-size:1.35rem;
}

.role-card h4{
    margin:0;
    font-size:19px;
    color:#0f172a;
    letter-spacing:0.01em;
}

.role-card .role-text{
    display:flex;
    align-items:center;
    min-height:52px;
}

.badge-success{
    color:#047857;
    background:#d1fae5;
}

.status-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:16px;
    align-items:center;
    padding:18px 20px;
    border-radius:18px;
    margin-bottom:22px;
    border:1px solid transparent;
}

.status-card--error{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
}

.status-card--success{
    background:#ecfdf5;
    border-color:#a7f3d0;
    color:#065f46;
}

.status-card__icon{
    display:grid;
    width:52px;
    height:52px;
    place-items:center;
    border-radius:16px;
    font-size:22px;
}

.status-card--error .status-card__icon{
    background:#fef2f2;
    color:#b91c1c;
}

.status-card--success .status-card__icon{
    background:#d1fae5;
    color:#047857;
}

.status-card__title{
    margin:0 0 4px;
    font-size:15px;
    font-weight:700;
}

.staff-form .form-row{
    margin-bottom:18px;
}

.staff-form .input-group{
    border:1px solid #dbe4ee;
    border-radius:12px;
    background:#fff;
    transition:.25s;
}

.staff-form .input-group:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

.staff-form .form-control{
    border:none !important;
    box-shadow:none !important;
    height:52px;
    font-size:15px;
    padding:0 14px;
    background:transparent;
}

.staff-form .form-label{
    display:block;
    margin-bottom:8px;
    color:#475569;
    font-size:14px;
    font-weight:600;
}
.status-selector{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:10px;
}

.status-selector input{
    display:none;
}

.status-option{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border:2px solid #e2e8f0;
    border-radius:12px;
    cursor:pointer;
    background:#fff;
    transition:.25s;
}

.status-option:hover{
    border-color:#2563eb;
    background:#f8fbff;
}

.status-option i{
    font-size:24px;
    color:#94a3b8;
    transition:.25s;
}

.status-option strong{
    display:block;
    color:#0f172a;
    font-size:15px;
    font-weight:600;
}

.status-option small{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:12px;
}

#active:checked + .status-option{
    border-color:#16a34a;
    background:#f0fdf4;
}

#active:checked + .status-option i{
    color:#16a34a;
}

#inactive:checked + .status-option{
    border-color:#dc2626;
    background:#fef2f2;
}

#inactive:checked + .status-option i{
    color:#dc2626;
}

@media(max-width:576px){

    .status-selector{
        grid-template-columns:1fr;
    }

}

.staff-form .form-actions{
    margin-top:12px;
}

.staff-form .btn-primary{
    padding:.375rem .75rem;
    font-size:1rem;
    font-weight:500;
    border-radius:.375rem;
}

.staff-search-form{
    width:100%;
}

.staff-list-page .staff-search-form{
    margin-bottom:18px;
}

.staff-list-table .status-action-form,
.staff-list-table .delete-action-form{
    margin:0;
}

.staff-list-table .status-chip{
    width:auto;
    min-width:122px;
}

.staff-member-name{
    display:flex;
    align-items:center;
    gap:10px;
    color:#0f172a;
    font-weight:600;
}

.staff-member-avatar{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    border-radius:9px;
    background:#eff6ff;
    color:#2563eb;
}

.admin-current-badge{
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:3px 7px;
    border:1px solid #bbf7d0;
    border-radius:999px;
    color:#15803d;
    background:#f0fdf4;
    font-size:10px;
    font-weight:700;
    vertical-align:middle;
}

.profile-summary{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
    padding:18px;
    border:1px solid #dbeafe;
    border-radius:14px;
    background:#f8fbff;
}

.profile-summary__avatar{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    border-radius:16px;
    color:#fff;
    background:#2563eb;
    font-size:24px;
    font-weight:800;
}

.profile-summary__identity{
    min-width:0;
    flex:1;
}

.profile-summary__identity h4{
    margin:0;
    color:#0f172a;
    font-size:18px;
    font-weight:700;
}

.profile-summary__identity p{
    display:flex;
    align-items:center;
    gap:7px;
    margin:5px 0 0;
    color:#64748b;
    font-size:13px;
}

.profile-summary__badges{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.profile-summary__badges span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid #dbeafe;
    border-radius:999px;
    color:#1d4ed8;
    background:#fff;
    font-size:11px;
    font-weight:700;
}

.profile-summary__badges .is-active{
    border-color:#bbf7d0;
    color:#15803d;
}

.profile-summary__badges .is-inactive{
    border-color:#fecaca;
    color:#dc2626;
}

.profile-summary__badges .bi-circle-fill{
    font-size:7px;
}

.pin-security-note{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:22px;
    padding:14px 16px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#f8fbff;
}

.pin-security-note > span{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    border-radius:11px;
    color:#2563eb;
    background:#dbeafe;
    font-size:20px;
}

.pin-security-note strong{
    display:block;
    color:#0f172a;
    font-size:14px;
}

.pin-security-note p{
    margin:3px 0 0;
    color:#64748b;
    font-size:12px;
}

.change-pin-form .pin-input{
    letter-spacing:.35em;
    font-weight:700;
}

/* Change PIN: compact account-security form. */
.change-pin-page .add-unit-card{
    padding:20px;
}

.change-pin-page .module-header{
    margin-bottom:16px;
}

.change-pin-page .pin-security-note{
    margin-bottom:18px;
    padding:12px 14px;
}

.change-pin-page .change-pin-form{
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
}

.change-pin-page .receive-form__details{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.change-pin-page .receive-form__details .form-row{
    min-width:0;
    margin:0;
}

.change-pin-page .receive-form__details .form-label{
    display:block;
    min-height:20px;
    margin-bottom:7px;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.change-pin-page .input-group{
    display:flex;
    flex-wrap:nowrap;
    min-height:46px;
    border-radius:9px;
}

.change-pin-page .input-group-text{
    width:46px;
    min-width:46px;
    padding:0;
    justify-content:center;
    border-color:#d8e2f0;
    background:#f8fbff;
    color:#2563eb;
}

.change-pin-page .form-control.pin-input{
    width:1%;
    height:46px;
    min-width:0;
    padding:10px 12px;
    border-color:#d8e2f0;
    color:#172033;
    font-size:14px;
    letter-spacing:.28em;
    box-shadow:none;
}

.change-pin-page .form-control.pin-input::placeholder{
    color:#94a3b8;
    font-size:12px;
    font-weight:400;
    letter-spacing:0;
}

.change-pin-page .input-group:focus-within{
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.change-pin-page .input-group:focus-within .input-group-text,
.change-pin-page .input-group:focus-within .form-control{
    border-color:#2563eb;
}

.change-pin-page .form-control.pin-input:focus{
    box-shadow:none;
}

.change-pin-page .change-pin-form .form-actions{
    justify-content:flex-end;
    margin-top:18px;
    padding-top:16px;
}

.change-pin-page .change-pin-form .form-actions .btn{
    min-width:132px;
    min-height:42px;
    padding:8px 16px;
    font-size:12px;
    font-weight:700;
}

@media(min-width:768px) and (max-width:1199px){
    .change-pin-page .receive-form__details{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .change-pin-page .receive-form__details .form-row:last-child{
        grid-column:1 / -1;
    }
}

@media(max-width:767px){
    .change-pin-page .add-unit-card{
        padding:13px;
    }

    .change-pin-page .module-header{
        margin-bottom:14px;
    }

    .change-pin-page .pin-security-note{
        align-items:flex-start;
        gap:11px;
        margin-bottom:14px;
        padding:12px;
    }

    .change-pin-page .pin-security-note > span{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:18px;
    }

    .change-pin-page .change-pin-form{
        padding:13px;
    }

    .change-pin-page .receive-form__details{
        grid-template-columns:1fr;
        gap:14px;
    }

    .change-pin-page .receive-form__details .form-row:last-child{
        grid-column:auto;
    }

    .change-pin-page .change-pin-form .form-actions{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:17px;
        padding-top:14px;
    }

    .change-pin-page .change-pin-form .form-actions .btn{
        width:100%;
    }
}

/* Daily unlock pattern settings. */
.unlock-pattern-page{
    display:grid;
    gap:18px;
}

.unlock-pattern-card,
.unlock-pattern-history{
    padding:20px;
}

.unlock-pattern-card .module-header{
    margin-bottom:18px;
}

.unlock-pattern-current{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid #bfdbfe;
    border-radius:9px;
    background:#fff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:700;
}

.unlock-pattern-form{
    padding:18px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
}

.unlock-pattern-meta{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:14px;
    padding:11px 13px;
    border:1px solid #dbeafe;
    border-radius:10px;
    background:#f8fbff;
}

.unlock-pattern-meta__icon{
    display:grid;
    width:38px;
    height:38px;
    flex:0 0 38px;
    place-items:center;
    border-radius:9px;
    background:#dbeafe;
    color:#2563eb;
    font-size:16px;
}

.unlock-pattern-meta small{
    display:block;
    margin-bottom:2px;
    color:#64748b;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}

.unlock-pattern-meta strong{
    color:#172033;
    font-size:12px;
    font-weight:700;
}

.unlock-pattern-meta p{
    display:inline;
    margin:0 0 0 7px;
    color:#64748b;
    font-size:11px;
}

.unlock-pattern-date{
    max-width:330px;
}

.unlock-pattern-date label{
    display:block;
    margin-bottom:7px;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.unlock-pattern-date .input-group-text{
    width:46px;
    justify-content:center;
    color:#2563eb;
    background:#f8fbff;
    border-color:#d8e2f0;
}

.unlock-pattern-date .form-control{
    height:44px;
    border-color:#d8e2f0;
    box-shadow:none;
}

.unlock-pattern-date small{
    display:block;
    margin-top:6px;
    color:#64748b;
    font-size:10px;
}

.unlock-pattern-sequence{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:20px 0 16px;
    padding:14px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#f8fbff;
}

.unlock-pattern-slot{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:8px 11px;
    border:1px dashed #bfdbfe;
    border-radius:9px;
    background:#fff;
    color:#64748b;
    cursor:pointer;
}

.unlock-pattern-slot > span{
    display:grid;
    width:25px;
    height:25px;
    flex:0 0 25px;
    place-items:center;
    border-radius:7px;
    background:#e2e8f0;
    color:#475569;
    font-size:11px;
    font-weight:800;
}

.unlock-pattern-slot strong{
    font-size:11px;
    font-weight:700;
}

.unlock-pattern-slot[class*="unlock-color--"]{
    border-style:solid;
    color:#fff;
}

.unlock-pattern-slot.unlock-color--white,
.unlock-pattern-slot.unlock-color--yellow{
    color:#172033;
}

.unlock-pattern-palette{
    display:grid;
    grid-template-columns:repeat(9,minmax(64px,1fr));
    gap:9px;
}

.unlock-pattern-color{
    position:relative;
    min-height:70px;
    padding:8px 5px;
    overflow:hidden;
    border:2px solid transparent;
    border-radius:10px;
    color:#fff;
    cursor:pointer;
    box-shadow:inset 0 -10px 18px rgba(0,0,0,.12);
}

.unlock-pattern-color span{
    position:absolute;
    right:5px;
    bottom:5px;
    left:5px;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.unlock-pattern-color i{
    font-size:20px;
    opacity:0;
}

.unlock-pattern-color.is-selected{
    border-color:#0f172a;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.unlock-pattern-color.is-selected i{
    opacity:1;
}

.unlock-pattern-color:disabled{
    cursor:not-allowed;
    opacity:.72;
}

.unlock-color--red{background:#ef4444!important}
.unlock-color--blue{background:#3b82f6!important}
.unlock-color--green{background:#22c55e!important}
.unlock-color--yellow{background:#facc15!important;color:#172033!important}
.unlock-color--purple{background:#8b5cf6!important}
.unlock-color--orange{background:#f97316!important}
.unlock-color--cyan{background:#06b6d4!important}
.unlock-color--black{background:#111827!important}
.unlock-color--white{background:#fff!important;color:#172033!important;border-color:#cbd5e1}

.unlock-pattern-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #e5edf7;
}

.unlock-pattern-actions .btn{
    min-height:42px;
    padding-inline:16px;
    font-size:12px;
    font-weight:700;
}

.unlock-pattern-history{
    padding-top:2px;
}

.unlock-pattern-history .list-header-card{
    margin-inline:-20px;
}

.unlock-pattern-history .table{
    font-size:12px;
}

.unlock-pattern-mini{
    display:flex;
    gap:6px;
}

.unlock-pattern-mini span{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:7px;
    color:#fff;
    font-size:10px;
    font-weight:800;
}

@media(min-width:768px) and (max-width:1199px){
    .unlock-pattern-palette{
        grid-template-columns:repeat(5,minmax(70px,1fr));
    }
}

@media(max-width:767px){
    .unlock-pattern-card,
    .unlock-pattern-history{
        padding:13px;
    }

    .unlock-pattern-current{
        width:100%;
        justify-content:center;
    }

    .unlock-pattern-form{
        padding:13px;
    }

    .unlock-pattern-meta{
        align-items:flex-start;
        padding:10px;
    }

    .unlock-pattern-meta p{
        display:block;
        margin:2px 0 0;
    }

    .unlock-pattern-date{
        max-width:none;
    }

    .unlock-pattern-sequence{
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:10px;
    }

    .unlock-pattern-palette{
        grid-template-columns:repeat(3,minmax(70px,1fr));
    }

    .unlock-pattern-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .unlock-pattern-actions .btn{
        width:100%;
    }

    .unlock-pattern-history .list-header-card{
        margin-inline:-13px;
    }
}

@media(max-width:767px){
    .profile-summary{
        align-items:flex-start;
        flex-wrap:wrap;
        padding:15px;
    }

    .profile-summary__badges{
        width:100%;
        justify-content:flex-start;
    }
}

.staff-list-table td:last-child .d-flex{
    flex-wrap:nowrap !important;
}

.staff-list-table td:last-child .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    white-space:nowrap;
}

.staff-action-modal__panel{
    width:min(430px,calc(100vw - 28px));
}

.staff-list-page ~ .login-error-modal .login-error-modal__button,
.staff-list-page ~ .login-error-modal .logout-modal__cancel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.staff-list-page ~ .login-error-modal .login-error-modal__button i,
.staff-list-page ~ .login-error-modal .logout-modal__cancel i{
    flex:0 0 auto;
    line-height:1;
}

.staff-modal-form{
    margin-top:18px;
    text-align:left;
}

.staff-modal-form .form-label{
    margin-bottom:7px;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.staff-modal-form .input-group{
    display:flex;
    flex-wrap:nowrap;
}

.staff-modal-form .input-group-text{
    min-width:48px;
    justify-content:center;
    border-color:#d8e2f0;
    background:#f8fbff;
    color:#2563eb;
}

.staff-modal-form .form-control{
    min-height:46px;
    border-color:#d8e2f0;
    box-shadow:none;
}

.staff-modal-form .form-control:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.staff-modal-form .logout-modal__actions{
    margin-top:20px;
}

.stock-report-page .receive-form__details{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.stock-report-page .unit-table-card{
    margin-top:24px;
}

.stock-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    padding:18px;
    border:1px solid #dbeafe;
    border-top:0;
    background:#f8fbff;
}

.stock-summary-card{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
    padding:17px;
    border:1px solid #e2e8f0;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.stock-summary-card__icon{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    border-radius:11px;
    font-size:20px;
}

.stock-summary-card p{
    margin:0 0 4px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.stock-summary-card strong{
    display:block;
    color:#0f172a;
    font-size:18px;
    line-height:1.2;
}

.stock-summary-card small{
    color:#64748b;
    font-size:11px;
    font-weight:600;
}

.stock-summary-card--opening .stock-summary-card__icon{
    color:#475569;
    background:#f1f5f9;
}

.stock-summary-card--received .stock-summary-card__icon{
    color:#15803d;
    background:#f0fdf4;
}

.stock-summary-card--dispatch .stock-summary-card__icon{
    color:#dc2626;
    background:#fef2f2;
}

.stock-summary-card--closing .stock-summary-card__icon{
    color:#2563eb;
    background:#eff6ff;
}

.stock-report-page .table-responsive{
    border-radius:12px;
}

.stock-ledger-table .stock-ledger-opening td{
    background:#f8fafc;
    color:#475569;
}

.stock-ledger-paper{
    overflow:hidden;
    margin-top:28px !important;
    border:1px solid #9ca3af;
    border-radius:2px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.08);
}

.stock-ledger-paper__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border-bottom:1px solid #6b7280;
    color:#111827;
    background:#fff;
}

.stock-ledger-paper__head div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.stock-ledger-paper__head strong{
    font-size:16px;
    font-weight:700;
}

.stock-ledger-paper__date,
.stock-ledger-paper__head > div:first-child > span{
    color:#374151;
    font-size:12px;
}

.stock-ledger-paper__tools{
    display:flex !important;
    align-items:center;
    flex-direction:row !important;
    gap:12px !important;
}

.stock-ledger-print-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:36px;
    padding:7px 12px;
    border:1px solid #111827;
    border-radius:5px;
    color:#111827;
    background:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
}

.stock-ledger-print-btn:hover,
.stock-ledger-print-btn:focus{
    color:#fff;
    background:#111827;
    text-decoration:none;
}

.stock-ledger-print-btn i,
.stock-ledger-print-btn span{
    color:inherit;
    line-height:1;
}

.stock-ledger-paper .table-responsive{
    border:0;
    border-radius:0;
}

.stock-ledger-paper .stock-ledger-table{
    color:#111;
    font-variant-numeric:tabular-nums;
}

.stock-ledger-paper .stock-ledger-table thead th{
    padding:10px 12px;
    border-right:1px solid #9ca3af;
    border-bottom:1px solid #6b7280;
    color:#111;
    background:#f3f4f6;
    font-size:11px;
    letter-spacing:.02em;
}

.stock-ledger-paper .stock-ledger-table tbody td{
    height:auto;
    padding:10px 12px;
    border-right:1px solid #d1d5db;
    border-bottom:1px solid #d1d5db;
    color:#111;
    background:#fff;
    font-size:13px;
}

.stock-ledger-paper .stock-ledger-table th:last-child,
.stock-ledger-paper .stock-ledger-table td:last-child{
    border-right:0;
}

.stock-ledger-paper .stock-ledger-table tbody tr:hover td,
.stock-ledger-paper .stock-ledger-table .stock-ledger-opening td{
    color:#111;
    background:#fff;
}

.stock-ledger-paper .stock-ledger-opening td{
    font-style:italic;
}

@media(max-width:991px){
    .stock-report-page .receive-form__details{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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

@media(max-width:767px){
    .stock-report-page .receive-form__details,
    .stock-summary-grid{
        grid-template-columns:1fr;
    }

    .stock-summary-grid{
        padding:12px;
    }

    .stock-report-page .table-responsive{
        overflow-x:auto;
        border:1px solid #dbeafe;
    }

    .stock-ledger-table{
        min-width:760px;
    }

    .stock-ledger-paper__head{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .stock-ledger-paper__tools{
        width:100%;
        align-items:flex-start;
        flex-direction:column !important;
    }

    .stock-ledger-print-btn{
        width:100%;
    }
}

/* Customer-wise dispatch report */
.dispatch-report-mobile-notice{display:none}
.dispatch-report-page .module-header{margin-bottom:18px}
.dispatch-report-filter{margin-bottom:18px;padding:16px;border:1px solid #dbe5f2;border-radius:14px;background:#f8fbff}
.dispatch-report-filter .form-actions{margin-top:14px}
.dispatch-report-search{margin-bottom:18px}
.dispatch-customer-period{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-size:11px;font-weight:600}
.dispatch-customer-period i{color:#2563eb}
.dispatch-tally-wrap{background:#fff}
.dispatch-tally-table{min-width:1020px;margin:0!important;border-collapse:collapse;background:#fff;color:#1f2937}
.dispatch-tally-table th{padding:11px 10px!important;border:1px solid #cfd6df!important;background:#fff!important;color:#334155!important;font-size:9px!important;font-weight:750!important;letter-spacing:.02em;text-transform:uppercase}
.dispatch-tally-table td{padding:10px!important;border-right:1px solid #dde3ea!important;border-bottom:1px solid #e5e9ef!important;background:#fff!important;font-size:10px!important;vertical-align:top!important}
.dispatch-tally-table td:first-child{border-left:1px solid #dde3ea!important}
.dispatch-tally-table td small{display:block;margin-top:3px;color:#94a3b8;font-size:8px;font-weight:600}
.dispatch-tally-voucher-start td{border-top:2px solid #94a3b8!important}
.dispatch-tally-total td{padding-block:7px!important;border-bottom:1px solid #94a3b8!important;color:#475569;font-size:9px!important;font-weight:700}
.dispatch-tally-total td:first-child{text-align:right;text-transform:uppercase}
.dispatch-tally-total span{font-weight:600}
@media(min-width:768px) and (max-width:1199px){
    .dispatch-report-page .list-card{padding:18px}
    .dispatch-report-filter{padding:14px}
    .dispatch-report-filter .receive-form__details{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .dispatch-customer-ledger .stock-ledger-paper__head{align-items:flex-start;flex-direction:column;gap:11px}
    .dispatch-customer-ledger .stock-ledger-paper__tools{display:flex;width:100%;align-items:center;justify-content:flex-start;flex-flow:row wrap;gap:8px}
    .dispatch-customer-ledger .stock-ledger-paper__date{margin-right:auto}
    .dispatch-customer-ledger .stock-ledger-print-btn{width:auto;min-width:112px}
    .dispatch-tally-wrap{width:100%;overflow:visible}
    .dispatch-tally-table{width:100%!important;min-width:0;table-layout:fixed}
    .dispatch-tally-table th{padding:8px 5px!important;font-size:7.5px!important;line-height:1.25;white-space:normal}
    .dispatch-tally-table td{padding:8px 5px!important;font-size:8.5px!important;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
    .dispatch-tally-table th:nth-child(1){width:10%}
    .dispatch-tally-table th:nth-child(2){width:15%}
    .dispatch-tally-table th:nth-child(3){width:21%}
    .dispatch-tally-table th:nth-child(4){width:10%}
    .dispatch-tally-table th:nth-child(5){width:7%}
    .dispatch-tally-table th:nth-child(6){width:13%}
    .dispatch-tally-table th:nth-child(7){width:14%}
    .dispatch-tally-table th:nth-child(8){width:10%}
    .dispatch-tally-table td small{font-size:7px;white-space:normal}
    .dispatch-tally-total td{padding-block:6px!important}
}
@media(max-width:767px){
    .dispatch-report-page{display:none!important}
    .dispatch-report-mobile-notice{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:28px 20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.05)}
    .dispatch-report-mobile-notice>span{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;color:#2563eb;background:#eff6ff;border-radius:18px;font-size:27px}
    .dispatch-report-mobile-notice h2{margin:0 0 7px;color:#172033;font-size:18px;font-weight:700}
    .dispatch-report-mobile-notice p{max-width:340px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
}

/* Vehicle-wise dispatch report */
.vehicle-report-mobile-notice{display:none}
.vehicle-report-page .module-header{margin-bottom:18px}
.vehicle-report-filter{margin-bottom:18px;padding:16px;border:1px solid #dbe5f2;border-radius:14px;background:#f8fbff}
.vehicle-report-filter .form-actions{margin-top:14px}
.vehicle-report-search{margin-bottom:18px}
.vehicle-report-period{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-size:11px;font-weight:600}
.vehicle-report-period i{color:#2563eb}
.vehicle-tally-wrap{background:#fff}
.vehicle-tally-table{min-width:1020px;margin:0!important;border-collapse:collapse;background:#fff;color:#1f2937}
.vehicle-tally-table th{padding:11px 10px!important;border:1px solid #cfd6df!important;background:#fff!important;color:#334155!important;font-size:9px!important;font-weight:750!important;letter-spacing:.02em;text-transform:uppercase}
.vehicle-tally-table td{padding:10px!important;border-right:1px solid #dde3ea!important;border-bottom:1px solid #e5e9ef!important;background:#fff!important;font-size:10px!important;vertical-align:top!important}
.vehicle-tally-table td:first-child{border-left:1px solid #dde3ea!important}
.vehicle-tally-table td small{display:block;margin-top:3px;color:#94a3b8;font-size:8px;font-weight:600}
.vehicle-tally-voucher-start td{border-top:2px solid #94a3b8!important}
.vehicle-tally-total td{padding-block:7px!important;border-bottom:1px solid #94a3b8!important;color:#475569;font-size:9px!important;font-weight:700}
.vehicle-tally-total td:first-child{text-align:right;text-transform:uppercase}
@media(min-width:768px) and (max-width:1199px){
    .vehicle-report-page .list-card{padding:18px}
    .vehicle-report-filter{padding:14px}
    .vehicle-report-filter .receive-form__details{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .vehicle-dispatch-ledger .stock-ledger-paper__head{align-items:flex-start;flex-direction:column;gap:11px}
    .vehicle-dispatch-ledger .stock-ledger-paper__tools{display:flex;width:100%;align-items:center;justify-content:flex-start;flex-flow:row wrap;gap:8px}
    .vehicle-dispatch-ledger .stock-ledger-paper__date{margin-right:auto}
    .vehicle-dispatch-ledger .stock-ledger-print-btn{width:auto;min-width:112px}
    .vehicle-tally-wrap{width:100%;overflow:visible}
    .vehicle-tally-table{width:100%!important;min-width:0;table-layout:fixed}
    .vehicle-tally-table th{padding:8px 5px!important;font-size:7.5px!important;line-height:1.25;white-space:normal}
    .vehicle-tally-table td{padding:8px 5px!important;font-size:8.5px!important;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
    .vehicle-tally-table th:nth-child(1){width:10%}.vehicle-tally-table th:nth-child(2){width:14%}.vehicle-tally-table th:nth-child(3){width:17%}.vehicle-tally-table th:nth-child(4){width:20%}
    .vehicle-tally-table th:nth-child(5){width:9%}.vehicle-tally-table th:nth-child(6){width:7%}.vehicle-tally-table th:nth-child(7){width:13%}.vehicle-tally-table th:nth-child(8){width:10%}
}
@media(max-width:767px){
    .vehicle-report-page{display:none!important}
    .vehicle-report-mobile-notice{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:28px 20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.05)}
    .vehicle-report-mobile-notice>span{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;color:#2563eb;background:#eff6ff;border-radius:18px;font-size:27px}
    .vehicle-report-mobile-notice h2{margin:0 0 7px;color:#172033;font-size:18px;font-weight:700}
    .vehicle-report-mobile-notice p{max-width:340px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
}

@media print{
    .stock-ledger-paper{
        border-color:#000;
        box-shadow:none;
    }

    .stock-ledger-paper .stock-ledger-table thead th,
    .stock-ledger-paper .stock-ledger-table tbody td{
        border-color:#777;
        color:#000;
        background:#fff !important;
    }
}

/* Header brand: keep the high-resolution logo readable at every breakpoint. */
.app-header .header-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:2px 8px;
    line-height:0;
}

.app-header .header-logo{
    display:block;
    width:auto;
    height:48px;
    max-width:210px;
    object-fit:contain;
    image-rendering:auto;
    filter:contrast(1.08) saturate(1.08) drop-shadow(0 1px 1px rgba(15,23,42,.14));
}

@media(max-width:1199px){
    .app-header .header-brand{
        top:4px;
        padding:0 6px;
    }

    .app-header .header-logo{
        height:38px;
        max-width:155px;
    }
}

@media(min-width:600px) and (max-width:1199px){
    .app-header .header-brand{
        top:2px;
        height:44px;
        padding:0 8px;
    }

    .app-header .header-logo{
        height:42px;
        max-width:180px;
    }

    .app-header .header-datetime{
        top:48px;
        margin:0;
        line-height:1;
    }
}

@media(max-width:420px){
    .app-header .header-logo{
        height:34px;
        max-width:138px;
    }
}

.staff-search-form .input-group{
    display:flex;
    gap:10px;
    align-items:center;
    width:100%;
    border:1px solid #dbe4ee;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    transition:.25s;
}

.staff-search-form .input-group:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

.staff-search-form .input-group-text{
    border:0;
    background:#fff;
}

.staff-search-form .form-control{
    border:0 !important;
    box-shadow:none !important;
    background:transparent;
}

.staff-search-form .form-control{
    flex:1;
    min-width:0;
}

    /*=====================================
UNIT TABLE
=====================================*/

.table-responsive{
    border:1px solid #dbeafe;
    border-top:1px solid #dbeafe;
    border-radius:0 0 12px 12px;   /* sirf niche rounded */
    overflow:hidden;
}

.staff-table{
    width:100%;
    margin:0;
    border-collapse:collapse;
}

.staff-table thead th{
    padding:14px 24px;
    background:#f2f7ff;
    border-bottom:1px solid #dbeafe;
    color:#0f172a;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
}
.staff-table tbody td{
    padding:14px 24px;
    height:58px;
    border-bottom:1px solid #edf2f7;
    vertical-align:middle;
    background:#fff;
    font-size:15px;
}

.staff-table tbody tr:last-child td{
    border-bottom:none;
}

.staff-table tbody tr:hover td{
    background:#fcfdff;
}

    /*=====================================
STATUS CHIP
=====================================*/

.status-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;

    min-width:122px;
    height:34px;

    padding:0 12px;

    border:1px solid #dbeafe;
    border-radius:10px;

    background:#ffffff;

    color:#334155;

    font-size:12px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;

    font-family:inherit;
}

.status-chip:hover{
    background:#f8fbff;
    border-color:#93c5fd;
}

.status-chip i:first-child{
    font-size:13px;
}

.status-chip span{
    white-space:nowrap;
}

.status-chip__arrow{
    margin-left:auto;
    font-size:8px;
    color:#94a3b8;
}

.status-chip--active{
    background:#f0fdf4;
    border-color:#bbf7d0;
    color:#16a34a;
}

.status-chip--inactive{
    background:#fef2f2;
    border-color:#fecaca;
    color:#dc2626;
}
.unit-name{
    font-size:15px;
    font-weight:600;
    color:#0f172a;
}

.status-action-form,
.delete-action-form{
    margin:0;
}

.btn-delete{
    min-width:62px;
    height:32px;
    padding:0;
    border-radius:8px;
    font-size:12px;
}

/* Unit list: fixed action columns keep every row aligned. */
.unit-list-table{
    table-layout:fixed;
}

.unit-list-table__serial{
    width:76px;
}

.unit-list-table__status{
    width:170px;
}

.unit-list-table__delete{
    width:100px;
}

.unit-list-table th:nth-child(2),
.unit-list-table td:nth-child(2){
    text-align:left;
}

.unit-list-table .status-action-form,
.unit-list-table .delete-unit-form{
    display:flex;
    justify-content:center;
    margin:0;
}

.unit-list-table .btn-delete{
    min-width:36px;
    width:36px;
}

#actionCancel,
#actionConfirm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

#messageOk{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

@media(max-width:767px){
    .unit-list-table__serial{ width:58px; }
    .unit-list-table__status{ width:150px; }
    .unit-list-table__delete{ width:72px; }

    .staff-table thead th,
    .staff-table tbody td{
        padding:12px 14px;
    }

    .module-header__info{
        align-items:flex-start;
    }

    .module-header__content p{
        line-height:1.5;
    }
}

@media(max-width:767px){
    .unit-table-card .table-responsive{
        overflow:visible;
        border-top:0;
        border-radius:0 0 12px 12px;
    }

    .unit-list-table,
    .unit-list-table tbody,
    .unit-list-table tr,
    .unit-list-table td{
        display:block;
        width:100%;
    }

    .unit-list-table{
        table-layout:auto;
    }

    .unit-list-table thead{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0, 0, 0, 0);
        white-space:nowrap;
        border:0;
    }

    .unit-list-table tbody tr{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        column-gap:14px;
        row-gap:10px;
        margin:12px;
        padding:14px;
        border:1px solid #dbeafe;
        border-radius:12px;
        background:#fff;
        box-shadow:0 2px 8px rgba(15,23,42,.04);
    }

    .unit-list-table tbody tr:last-child{
        margin-bottom:12px;
    }

    .unit-list-table tbody td{
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
        min-height:32px;
        height:auto;
        padding:0;
        border:0;
        text-align:right !important;
    }

    .unit-list-table tbody td::before{
        content:none;
    }

    .unit-list-table tbody td:first-child{
        grid-column:1;
        grid-row:1;
        justify-content:flex-start;
        color:#64748b;
        font-size:12px;
        font-weight:700;
    }

    .unit-list-table tbody td:first-child::before{
        content:"UNIT";
        color:#64748b;
        font-size:12px;
        font-weight:700;
        letter-spacing:.03em;
        text-transform:uppercase;
        margin-right:6px;
    }

    .unit-list-table tbody td:nth-child(2){
        grid-column:1 / -1;
        grid-row:2;
        justify-content:flex-start;
        color:#0f172a;
        font-size:16px;
        text-align:left !important;
    }

    .unit-list-table tbody td:nth-child(3){
        grid-column:1;
        grid-row:3;
        justify-content:flex-start;
    }

    .unit-list-table tbody td:nth-child(3)::after{
        content:"Status";
        order:-1;
        margin-right:10px;
        color:#64748b;
        font-size:12px;
        font-weight:700;
        letter-spacing:.03em;
        text-transform:uppercase;
    }

    .unit-list-table tbody td:nth-child(4){
        grid-column:2;
        grid-row:1;
    }

    .unit-list-table .status-action-form{
        justify-content:flex-end;
    }

    .unit-list-table .delete-unit-form{
        justify-content:flex-end;
    }

    .unit-list-table .btn-delete{
        width:34px;
        min-width:34px;
        height:34px;
    }

    .unit-list-table tbody td[colspan]{
        display:block;
        text-align:center !important;
    }

    .unit-list-table tbody td[colspan]::before{
        display:none;
    }

    .login-error-modal__panel{
        width:calc(100% - 28px);
    }

    .logout-modal__actions{
        grid-template-columns:1fr;
    }

    #actionCancel,
    #actionConfirm{
        width:100%;
    }
}

@media(max-width:390px){
    .unit-list-table tbody tr{
        margin:10px;
        padding:12px;
    }

    .unit-list-table tbody td:nth-child(2){
        font-size:15px;
    }

    .status-chip{
        min-width:112px;
        padding:0 10px;
    }
}

.info-card p{
    color:#475569;
    line-height:1.8;
    margin-bottom:18px;
}

.info-list{
    display:grid;
    gap:12px;
}

.info-list div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#334155;
    font-size:14px;
}

.info-list i{
    font-size:18px;
}

@media(max-width:992px){
    .page-grid{
        grid-template-columns:1fr;
    }
    .app-content{
        margin-left:0;
        padding:16px 16px 32px;
    }
    .form-card{
        padding:22px;
    }
}

@media(max-width:767px){
    .app-content{
        margin-left:0;
        padding:16px 14px 28px;
    }
    .form-card,
    .info-card{
        padding:18px;
        border-radius:0;
    }
    .card-header{
        gap:12px;
    }
}

@media(max-width:576px){
    .form-card,
    .info-card{
        padding:16px;
        border-radius:0;
    }
    .card-header{
        gap:12px;
    }
}

/* Unit list uses app-style cards at every screen size. */
.unit-list-table--cards,
.unit-list-table--cards tbody,
.unit-list-table--cards tr,
.unit-list-table--cards td{
    display:block;
    width:100%;
}

.unit-list-table--cards{
    table-layout:auto;
}

.unit-list-table--cards thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.unit-list-table--cards tbody{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    padding:16px;
}

.unit-list-table--cards tbody tr{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    column-gap:14px;
    row-gap:12px;
    min-width:0;
    padding:16px;
    border:1px solid #dbeafe;
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    transition:border-color .2s, box-shadow .2s, transform .2s;
}

.unit-list-table--cards tbody tr:hover{
    border-color:#bfdbfe;
    box-shadow:0 8px 20px rgba(37,99,235,.08);
    transform:translateY(-2px);
}

.unit-list-table--cards tbody td{
    display:flex !important;
    align-items:center;
    min-height:34px;
    height:auto;
    padding:0;
    border:0;
    background:transparent !important;
}

.unit-list-table--cards tbody td::before{
    content:none;
}

.unit-list-table--cards tbody td:first-child{
    grid-column:1;
    grid-row:1;
    justify-content:flex-start;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.unit-list-table--cards tbody td:first-child::before{
    content:"UNIT #";
    margin-right:6px;
}

.unit-list-table--cards tbody td:nth-child(2){
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
    color:#0f172a;
    font-size:17px;
    font-weight:600;
    text-align:left !important;
}

.unit-list-table--cards tbody td:nth-child(3){
    grid-column:1;
    grid-row:3;
    justify-content:flex-start;
}

.unit-list-table--cards tbody td:nth-child(3)::before{
    content:"STATUS";
    margin-right:10px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
}

.unit-list-table--cards tbody td:nth-child(4){
    grid-column:2;
    grid-row:1;
    justify-content:flex-end;
}

.unit-list-table--cards .status-action-form,
.unit-list-table--cards .delete-unit-form{
    display:flex;
    justify-content:flex-start;
    margin:0;
}

.unit-list-table--cards .btn-delete{
    width:36px;
    min-width:36px;
    height:36px;
}

.unit-list-table--cards tbody td[colspan]{
    grid-column:1 / -1;
    display:block !important;
    padding:32px 12px;
    text-align:center !important;
}

@media(min-width:768px){
    .unit-list-table--cards tbody{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding:18px;
        gap:18px;
    }
}

@media(min-width:1200px){
    .unit-list-table--cards tbody{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        padding:22px;
        gap:20px;
    }

    .unit-list-table--cards tbody tr{
        padding:18px;
    }
}

@media(max-width:575px){
    .unit-list-table--cards tbody{
        gap:12px;
        padding:12px;
    }

    .unit-list-table--cards tbody tr{
        padding:14px;
    }
}

/* Keep navigation collapsed on phones and tablets, including landscape tablets. */
@media(max-width:1199px){
 .app-header{
    height:70px;
    padding:0 12px;
    display:flex;
    align-items:center;
}
    #menuBtn{
    display:flex;
}

.header-brand{
    position:absolute;
    left:50%;
    top:8px;
    transform:translateX(-50%);

    display:block;

    width:auto;
    height:auto;
    line-height:0;

    margin:0;
    padding:0;

    z-index:2;
}
    .header-btn{
        width:40px;
        height:40px;
        border-color:transparent;
        background:#f1f5f9;
    }

    .header-logo{
        height:31px;
    }
    
   .header-datetime{
    position:absolute;
    left:50%;
    top:46px;
    transform:translateX(-50%);

    display:flex;
    flex-direction:row !important;
    flex-wrap:nowrap;

    align-items:center;
    justify-content:center;

    white-space:nowrap;
    gap:4px;

    width:max-content;

    z-index:3;
}

.header-datetime > *{
    display:inline-block;
    margin:0;
    padding:0;
    white-space:nowrap;
}

#currentDate{
    font-size:11px;
    color:#64748b;
}

#currentTime{
    font-size:11px;
    font-weight:600;
    color:#0f172a;
}


    .app-sidebar{
        z-index:1020;
        top:56px;
        width:min(86vw,310px);
        padding:16px 12px 24px;
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:8px 0 20px rgba(15,23,42,.1);
    }

    .sidebar-open .app-sidebar{
        transform:translateX(0);
    }

    .sidebar-backdrop{
        position:fixed;
        z-index:1015;
        inset:56px 0 0;
        background:rgba(15,23,42,.38);
    }

    .sidebar-open .sidebar-backdrop{
        display:block;
    }

    .app-content{
    min-height:calc(100dvh - 80px);
    margin-top:80px;
    margin-left:0;
    padding:16px;
}
}

/* Add unit form: compact on mobile, comfortably sized on tablets and desktops. */
.add-unit-page{
    width:100%;
    max-width:none;
    margin:0;
}

.add-unit-card{
    padding:24px;
}

.add-unit-form{
    width:100%;
    max-width:760px;
    margin:0;
}

.add-unit-form .form-row{
    margin-bottom:24px;
}

.add-unit-form .form-label{
    font-size:14px;
}

.add-unit-form .form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.add-unit-form .form-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 20px;
    border-radius:10px;
}

.add-unit-form__submit{
    min-width:150px;
}

.add-unit-form__reset{
    min-width:120px;
}

@media(min-width:768px) and (max-width:1199px){
    .add-unit-page{
        max-width:none;
    }

    .add-unit-card{
        padding:22px;
    }
}

@media(max-width:767px){
    .add-unit-page{
        max-width:none;
    }

    .add-unit-card{
        padding:14px;
        border-radius:10px;
    }

    .add-unit-form .form-row{
        margin-bottom:20px;
    }

    .add-unit-form .form-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-top:24px;
    }

    .add-unit-form .form-actions .btn,
    .add-unit-form__submit,
    .add-unit-form__reset{
        width:100%;
    }
}

@media(max-width:390px){
    .add-unit-card{
        padding:12px;
    }

    .add-unit-form .status-option{
        padding:14px;
    }
}

/* Product form and product cards. */
.add-unit-form .product-select{
    min-height:52px;
    border:0;
    box-shadow:none;
    background-color:transparent;
    font-size:15px;
    cursor:pointer;
}

.product-form-note{
    display:block;
    margin-top:8px;
    color:#b45309;
    font-size:12px;
}

#productActive:checked + .status-option{
    border-color:#16a34a;
    background:#f0fdf4;
}

#productActive:checked + .status-option i{ color:#16a34a; }

#productInactive:checked + .status-option{
    border-color:#dc2626;
    background:#fef2f2;
}

#productInactive:checked + .status-option i{ color:#dc2626; }

.product-list-table--cards tbody tr{
    grid-template-columns:minmax(0, 1fr) auto;
}

.product-list-table--cards tbody td:first-child::before{ content:"PRODUCT #"; }

.product-list-table--cards tbody td:nth-child(3),
.product-list-table--cards tbody td:nth-child(4){
    grid-column:auto;
    grid-row:3;
    justify-content:flex-start;
    min-width:0;
}

.product-list-table--cards tbody td:nth-child(3)::before,
.product-list-table--cards tbody td:nth-child(4)::before{
    margin-right:8px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
}

.product-list-table--cards tbody td:nth-child(3)::before{ content:"UNIT"; }
.product-list-table--cards tbody td:nth-child(4)::before{ content:"RATE"; }

.product-list-table--cards tbody td:nth-child(5){
    grid-column:1;
    grid-row:4;
    justify-content:flex-start;
}

.product-list-table--cards tbody td:nth-child(5)::before{
    content:"STATUS";
    margin-right:10px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
}

.product-list-table--cards tbody td:nth-child(6){
    grid-column:2;
    grid-row:1;
    justify-content:flex-end;
}

.product-list-table--cards .status-action-form,
.product-list-table--cards .delete-product-form{
    display:flex;
    justify-content:flex-start;
    margin:0;
}

.product-unit,
.product-rate{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#334155;
    font-size:13px;
    font-weight:600;
}

.product-unit i,
.product-rate i{ color:#2563eb; }

@media(min-width:768px){
    .product-list-table--cards tbody td:nth-child(3),
    .product-list-table--cards tbody td:nth-child(4){
        grid-row:3;
    }
}

@media(max-width:390px){
    .product-list-table--cards tbody td:nth-child(3),
    .product-list-table--cards tbody td:nth-child(4){
        grid-column:1 / -1;
    }

    .product-list-table--cards tbody td:nth-child(3){ grid-row:3; }
    .product-list-table--cards tbody td:nth-child(4){ grid-row:4; }
    .product-list-table--cards tbody td:nth-child(5){ grid-row:5; }
}

/* Product card actions and update-rate modal. */
.product-list-table--cards tbody td:nth-child(6){
    grid-column:1 / -1;
    grid-row:5;
    justify-content:flex-start;
}

.product-list-table--cards tbody td:nth-child(7){
    grid-column:2;
    grid-row:1;
    justify-content:flex-end;
}

.product-card-actions{
    display:grid;
    grid-template-columns:minmax(64px, .8fr) minmax(98px, 1.2fr);
    gap:8px;
    width:100%;
}

.product-card-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    padding:6px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.rate-update-form{
    margin-top:20px;
    text-align:left;
}

.rate-update-form .form-label{
    display:block;
    margin-bottom:8px;
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.rate-update-form .input-group{
    border:1px solid #dbe4ee;
    border-radius:11px;
    overflow:hidden;
}

.rate-update-form .input-group:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

.rate-update-form .input-group-text,
.rate-update-form .form-control{
    border:0 !important;
    box-shadow:none !important;
    background:#fff;
}

.rate-update-form .form-control{ height:46px; }

.rate-update-form .logout-modal__actions{
    margin-top:16px;
}

.rate-update-form .login-error-modal__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

/* Material receiving pages. */
.receive-form{ width:100%; }
.receive-form__details{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.receive-form__details .form-row{ margin-bottom:8px; }
.receive-items-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 12px; padding-top:20px; border-top:1px solid #e2e8f0; }
.receive-items-head h4{ margin:0; color:#0f172a; font-size:16px; font-weight:600; }
.receive-items-head p{ margin:3px 0 0; color:#64748b; font-size:12px; }
.receive-items-head .btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.receive-items{ display:grid; gap:12px; }
.receive-item{ display:grid; grid-template-columns:100px minmax(0,2fr) minmax(90px,1fr) minmax(110px,1fr) 36px; align-items:end; gap:12px; padding:14px; border:1px solid #dbeafe; border-radius:12px; background:#f8fbff; }
.receive-item__number{ display:flex; align-items:center; gap:7px; min-height:42px; color:#2563eb; font-size:13px; font-weight:700; }
.receive-item__field label{ display:block; margin-bottom:6px; color:#64748b; font-size:11px; font-weight:700; text-transform:uppercase; }
.receive-item select,.receive-item input{ width:100%; height:42px; padding:0 10px; border:1px solid #dbe4ee; border-radius:8px; outline:0; background:#fff; color:#0f172a; font:inherit; font-size:13px; }
.receive-product-search{ width:100%; height:42px; padding:0 10px; border:1px solid #dbe4ee; border-radius:8px; outline:0; background:#fff; color:#0f172a; font:inherit; font-size:13px; }
.receive-product-search:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.receive-item select:focus,.receive-item input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.receive-unit{ display:flex; align-items:center; min-height:42px; padding:0 10px; border:1px solid #dbe4ee; border-radius:8px; background:#fff; color:#334155; font-size:13px; font-weight:600; }
.receive-item__remove{ width:36px; height:36px; padding:0; border-radius:8px; }
.receive-form .form-actions{ display:flex; gap:12px; margin-top:24px; }
.receive-form .form-actions .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.receive-card{ overflow:hidden; }
.receive-card .module-header{ margin-bottom:24px; }
.receive-form > .form-row:first-of-type{ margin:0 0 22px; padding:14px 16px; border:1px solid #dbeafe; border-radius:12px; background:linear-gradient(135deg,#f8fbff 0%,#f1f6ff 100%); }
.receive-form > .form-row:first-of-type .form-label{ display:block; margin:0 0 7px; color:#475569; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.receive-form > .form-row:first-of-type .form-control{ display:flex; align-items:center; min-height:42px; padding:0; border:0; background:transparent!important; color:#1769ff!important; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:15px; font-weight:700; letter-spacing:.02em; line-height:1.4; overflow-wrap:anywhere; }
.receive-form__details{ gap:20px; }
.receive-form__details .form-label{ margin-bottom:8px; color:#334155; font-size:13px; font-weight:700; }
.receive-form__details .input-group-text{ min-width:52px; justify-content:center; border-color:#d8e2f0; background:#f8fbff; color:#2563eb; }
.receive-form__details .form-control{ height:48px; border-color:#d8e2f0; box-shadow:none; }
.receive-form__details .form-control:focus{ border-color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.1); }

.receiving-details .receiving-field-date{
    order:1;
}

.status-chip:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.receiving-details .receiving-field-mobile{
    order:2;
}

.receiving-details .receiving-field-name{
    order:3;
}

.order-details .order-textarea-group{
    align-items:stretch;
}

.order-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
    gap:14px 20px;
    align-items:start;
}

.order-details .form-row{
    position:static;
    isolation:auto;
    overflow:visible;
    margin:0;
    padding:0;
}

.order-details .form-label{
    position:static;
    z-index:auto;
    display:block;
    width:auto;
    margin:0 0 7px;
    padding:0;
    color:#334155;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    white-space:normal;
}

.order-details .input-group{
    position:static;
    z-index:auto;
    margin:0;
}

.order-details .order-field-mobile{
    grid-column:auto;
    grid-row:auto;
    order:2;
}

.order-details .order-field-customer{
    grid-column:auto;
    grid-row:auto;
    order:3;
}

.order-details #customer_name{
    text-transform:uppercase;
}

.order-details .order-field-date{
    grid-column:auto;
    grid-row:auto;
    order:1;
}

.order-details .order-field-payment{
    grid-column:auto;
    grid-row:auto;
    order:5;
}

.order-details .order-field-address{
    grid-column:auto;
    grid-row:auto;
    order:4;
}

.order-details .order-textarea-group .input-group-text{
    align-items:center;
    padding-top:0;
}

.order-details textarea.form-control{
    height:48px;
    min-height:48px;
    padding:12px 14px;
    border:1px solid #d8e2f0;
    border-left:0;
    border-radius:0 9px 9px 0;
    color:#0f172a;
    background:#fff;
    line-height:1.4;
    resize:none;
}

.order-details textarea.form-control::placeholder{
    color:#94a3b8;
}

.order-details .order-textarea-group:focus-within{
    border-radius:9px;
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.order-details .order-textarea-group:focus-within .input-group-text,
.order-details .order-textarea-group:focus-within textarea.form-control{
    border-color:#2563eb;
}

.order-details .order-textarea-group textarea.form-control:focus{
    box-shadow:none;
}

@media(max-width:767px){
    .order-create-page .order-details{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto;
        gap:11px;
    }

    .order-details .order-field-mobile,
    .order-details .order-field-payment,
    .order-details .order-field-customer,
    .order-details .order-field-address,
    .order-details .order-field-date{
        grid-column:1;
        grid-row:auto;
    }

    .order-details textarea.form-control{
        height:48px;
        min-height:48px;
    }
}
.receive-items-head{ margin:28px 0 14px; padding-top:24px; }
.receive-items-head h4{ font-size:17px; font-weight:700; }
.receive-items-head .btn{ min-height:38px; padding-inline:14px; }
.receive-item{ grid-template-columns:112px minmax(220px,2fr) minmax(145px,1fr) minmax(145px,1fr) 40px; gap:14px; padding:16px; border-color:#cfe0fb; background:linear-gradient(135deg,#f8fbff 0%,#f4f8ff 100%); box-shadow:0 4px 12px rgba(37,99,235,.04); }
.receive-item__number{ min-height:46px; font-size:13px; }
.receive-item__field label{ margin-bottom:7px; color:#52627a; font-size:10px; letter-spacing:.03em; }
.receive-item select,.receive-item input,.receive-product-search,.receive-unit{ min-height:44px; height:44px; border-color:#d8e2f0; border-radius:9px; }
.receive-item select:focus,.receive-item input:focus,.receive-product-search:focus{ box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.receive-unit{ background:#fff; }
.receive-item__remove{ width:40px; height:40px; margin-bottom:2px; border-radius:9px; }
.receive-item{ grid-template-columns:minmax(260px,2fr) minmax(145px,1fr) minmax(145px,1fr) 40px; }
.receive-item__number{ display:none; }
.receive-form .form-actions{ margin-top:26px; padding-top:20px; border-top:1px solid #e5edf8; }
.receive-form .form-actions .btn{ min-height:46px; padding-inline:18px; font-weight:600; }
.receiving-view-card{ max-width:none; margin-inline:0; }
.receiving-view-card .module-header{ margin-bottom:22px; }
.receiving-summary{ border:1px solid #dce7f6; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.035); }
.receiving-summary__number{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid #e4ecf7; background:#f7faff; }
.receiving-summary__number span,.receiving-summary__meta span{ display:block; margin-bottom:5px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.receiving-summary__number strong{ display:inline-flex; align-items:center; gap:8px; color:#1769ff; font-size:16px; }
.receiving-summary__meta{ display:grid; grid-template-columns:1.4fr 1fr 1fr; }
.receiving-summary__meta>div{ min-width:0; padding:17px 20px; border-right:1px solid #e4ecf7; }
.receiving-summary__meta>div:last-child{ border-right:0; }
.receiving-summary__meta strong{ display:block; overflow:hidden; color:#172033; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.erp-item-list{ margin-top:22px; border:1px solid #dce7f6; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.035); }
.erp-item-list__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid #dce7f6; background:#fbfdff; }
.erp-item-list__header h4{ margin:0; color:#172033; font-size:16px; font-weight:700; }.erp-item-list__header p{ margin:3px 0 0; color:#718096; font-size:12px; }
.erp-item-list__count{ padding:5px 10px; border:1px solid #cfe0fb; border-radius:999px; background:#eff6ff; color:#1769ff; font-size:12px; font-weight:700; white-space:nowrap; }
.erp-item-table{ --bs-table-bg:transparent; --bs-table-striped-bg:#fbfdff; margin:0; color:#27364d; }.erp-item-table thead th{ padding:12px 20px; border-bottom:1px solid #cfdcec; background:#f5f8fc; color:#52627a; font-size:10px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }.erp-item-table tbody td{ padding:15px 20px; border-color:#e7eef7; vertical-align:middle; font-size:13px; }.erp-item-table tbody tr.erp-item-table__row--in-stock>td{ background-color:#effaf3; }.erp-item-table tbody tr.erp-item-table__row--low-stock>td{ background-color:#fff9e8; }.erp-item-table tbody tr.erp-item-table__row--out-of-stock>td{ background-color:#fff1f2; }.erp-item-table tbody tr:last-child td{ border-bottom:0; }.erp-item-table__sr{ width:66px; color:#718096; font-weight:700; }.erp-item-table__name{ color:#172033; font-weight:600; }.erp-item-table__qty{ width:160px; color:#172033; font-size:14px!important; font-weight:700; }.erp-unit-badge{ display:inline-block; min-width:55px; padding:4px 8px; border:1px solid #dbe6f5; border-radius:5px; background:#f8fafc; color:#52627a; font-size:11px; font-weight:700; }
.stock-overview-table .stock-current-column{
    text-align:center !important;
    vertical-align:middle;
}
.stock-overview-table{
    width:100%;
    table-layout:fixed;
}
.stock-overview-table th:nth-child(1),
.stock-overview-table td:nth-child(1){
    width:5% !important;
}
.stock-overview-table th:nth-child(2),
.stock-overview-table td:nth-child(2){
    width:30% !important;
}
.stock-overview-table th:nth-child(3),
.stock-overview-table td:nth-child(3){
    width:30% !important;
}
.stock-overview-table th:nth-child(4),
.stock-overview-table td:nth-child(4){
    width:35% !important;
}
.stock-current-column__value,
.stock-current-column__unit{
    display:block;
    width:100%;
    margin-inline:auto;
    text-align:center;
}
.material-list-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px; border:1px solid #dbeafe; border-top:0; border-radius:0 0 12px 12px; }
.material-entry-card{ padding:16px; border:1px solid #dbeafe; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.material-entry-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.material-entry-card__number,.material-entry-card__date,.material-entry-card__meta span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.material-entry-card__number{ color:#2563eb; }.material-entry-card__date{ color:#64748b; }
.material-entry-card h3{ margin:16px 0; color:#0f172a; font-size:16px; font-weight:600; }
.material-entry-card__meta{ display:flex; flex-wrap:wrap; gap:10px; padding-top:12px; border-top:1px solid #edf2f7; color:#475569; }
.material-entry-card__meta i{ color:#2563eb; }
.material-entry-card__actions{ display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #edf2f7; }
.material-entry-card__actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.delete-receiving-form{ margin:0; }
@media(max-width:1199px){ .material-list-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px){ .receive-card .module-header{ margin-bottom:18px; }.receive-form > .form-row:first-of-type{ margin-bottom:18px; }.receive-form__details{ grid-template-columns:1fr; gap:0; }.receive-item{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px; align-items:end; gap:10px; padding:13px; }.receive-item__field:nth-child(2){ grid-column:1 / -1; }.receive-item__remove{ grid-column:3; grid-row:1; }.material-list-grid{ grid-template-columns:1fr; padding:12px; gap:12px; }.receive-form .form-actions{ display:grid; grid-template-columns:1fr; }.receive-form .form-actions .btn{ width:100%; }.material-entry-card__actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.material-entry-card__actions .btn,.material-entry-card__actions .delete-receiving-form{ width:100%; }.material-entry-card__actions .btn{ min-height:36px; padding:6px 8px; font-size:12px; white-space:nowrap; }.material-entry-card__actions .btn:first-child{ grid-column:1 / -1; }.material-entry-card__actions .delete-receiving-form .btn{ width:100%; } }
@media(max-width:390px){ .receive-item{ grid-template-columns:1fr 36px; }.receive-item__field:nth-child(3),.receive-item__field:nth-child(4){ grid-column:1 / -1; }.receive-item__remove{ grid-column:2; grid-row:1; }.receive-items-head{ align-items:flex-start; flex-direction:column; }.receive-items-head .btn{ width:100%; justify-content:center; } }
@media(max-width:767px){ .receiving-summary__number{ align-items:flex-start; flex-direction:column; }.receiving-summary__meta{ grid-template-columns:1fr; }.receiving-summary__meta>div{ border-right:0; border-bottom:1px solid #e4ecf7; }.receiving-summary__meta>div:last-child{ border-bottom:0; }.erp-item-list__header{ align-items:flex-start; flex-direction:column; }.erp-item-table thead th,.erp-item-table tbody td{ padding:12px; }.erp-item-table__sr{ width:44px; }.erp-item-table__qty{ width:105px; } }

@media(max-width:390px){
    .product-list-table--cards tbody td:nth-child(6){ grid-row:6; }
    .product-list-table--cards tbody td:nth-child(7){ grid-row:1; }
    .product-card-actions .btn{
        min-width:0;
        padding:6px 8px;
        font-size:11px;
    }
}

/*==================================================
ORDER PAGE
==================================================*/

.order-items{
    display:grid;
    gap:16px;
    margin-top:18px;
}

.order-item{
    padding:14px 16px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:linear-gradient(135deg,#f8fbff 0%,#f4f8ff 100%);
    box-shadow:0 3px 10px rgba(15,23,42,.04);
    animation:orderFade .25s ease;
    transition:all .20s ease;
}

/*========================
ITEM GRID
========================*/

.order-item__body{

    display:grid;

    grid-template-columns:
        minmax(340px,2.8fr)
        minmax(170px,1fr)
        minmax(150px,1fr)
        110px
        48px;

    gap:16px;

    align-items:end;

}

/*========================
FIELDS
========================*/

.order-item__field{

    display:flex;

    flex-direction:column;

}

.order-item__field label{

    margin-bottom:7px;

    color:#52627a;

    font-size:10px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.order-item select,
.order-item input,
.order-product-search{

    width:100%;

    height:44px;

    padding:0 12px;

    border:1px solid #d8e2f0;

    border-radius:9px;

    background:#ffffff;

    color:#0f172a;

    font-size:14px;

    outline:none;

    transition:.20s;

}

.order-item select:focus,
.order-item input:focus,
.order-product-search:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

    transform:translateY(-1px);

}

/*========================
READ ONLY BOXES
========================*/

.order-stock,
.order-rate,
.order-unit{

    display:flex;

    align-items:center;

    height:44px;

    padding:0 12px;

    border:1px solid #d8e2f0;

    border-radius:9px;

    background:#ffffff;

    font-size:14px;

    font-weight:600;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.order-stock{

    color:#15803d;

}

.order-rate{

    color:#2563eb;

}

.order-unit{

    color:#475569;

}

/*========================
PRODUCT SEARCH
========================*/

.order-field-product{

    position:relative;

}

.order-field-product .ts-wrapper,
.order-field-product .choices{

    width:100%;

}

.order-field-product .ts-control,
.order-field-product .choices__inner{

    min-height:44px;

    border:1px solid #d8e2f0 !important;

    border-radius:9px !important;

    background:#ffffff !important;

    padding:8px 12px !important;

    box-shadow:none !important;

    font-size:14px;

}

.order-field-product .ts-control.focus,
.order-field-product .ts-control:focus-within,
.order-field-product .choices.is-focused .choices__inner{

    border-color:#2563eb !important;

    box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;

}

.order-field-product .ts-dropdown,
.order-field-product .choices__list--dropdown{

    border:1px solid #d8e2f0;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 10px 24px rgba(15,23,42,.08);

}

.order-field-product .active{

    background:#2563eb !important;

    color:#ffffff !important;

}

/*========================
QTY
========================*/

.order-field-qty input{

    text-align:center;

    font-weight:700;

}

/*========================
DELETE
========================*/

.order-field-delete{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}

.order-field-delete label{

    visibility:hidden;

}

.order-item__remove{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    margin:0 auto;

    border:1px solid #fecaca;

    border-radius:10px;

    background:#fef2f2;

    color:#dc2626;

    transition:.20s;

}

.order-item__remove:hover{

    background:#dc2626;

    border-color:#dc2626;

    color:#ffffff;

}

.order-item__remove i{

    font-size:16px;

}

/*========================
FORM ACTIONS
========================*/

.order-form-actions{

    display:flex;

    gap:12px;

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid #e2e8f0;

}

.order-form-actions .btn{

    min-height:44px;

    padding:0 22px;

    border-radius:10px;

    font-weight:600;

}

/*========================
ANIMATION
========================*/

@keyframes orderFade{

from{

    opacity:0;

    transform:translateY(6px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}
/*==================================================
ORDER PAGE RESPONSIVE
==================================================*/

/*========================
LAPTOP
========================*/

@media(max-width:1200px){

.order-item__body{

    grid-template-columns:
        minmax(260px,2fr)
        minmax(150px,1fr)
        minmax(130px,.9fr)
        100px
        46px;

}

}


/*========================
TABLET
========================*/
@media (max-width:991px){

    .order-item{

        padding:14px;

    }

    .order-item__body{

        display:grid;

        grid-template-columns:
            minmax(220px,2fr)
            130px
            120px
            90px
            44px;

        gap:12px;

        align-items:end;

    }

    .order-form-actions{

        display:flex;

        flex-wrap:wrap;

        gap:10px;

    }

    .order-form-actions .btn{

        flex:1;

        min-width:170px;

    }

}

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

@media(max-width:767px){

.order-item{

    padding:12px;

}

.order-item__body{

    grid-template-columns:1fr;

    gap:12px;

}

.order-field-product,
.order-field-stock,
.order-field-rate,
.order-field-qty,
.order-field-delete{

    grid-column:1;

}

.order-item select,
.order-item input,
.order-product-search,
.order-stock,
.order-rate,
.order-unit{

    height:44px;

    min-height:44px;

    font-size:14px;

}

.order-field-delete{

    align-items:stretch;

}

.order-item__remove{

    width:100%;

    height:42px;

}

.order-form-actions{

    display:grid;

    grid-template-columns:1fr;

    gap:10px;

}

.order-form-actions .btn{

    width:100%;

}

}


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

@media(max-width:390px){

.order-item{

    padding:10px;

}

.order-item__body{

    gap:10px;

}

.order-item__field label{

    font-size:10px;

}

.order-item select,
.order-item input,
.order-product-search,
.order-stock,
.order-rate,
.order-unit{

    padding:0 10px;

    font-size:13px;

}

.order-item__remove{

    height:40px;

}

}

/*=====================================
TABLET DASHBOARD FIX
=====================================*/

@media (min-width:768px) and (max-width:1199px){

    .dashboard-shell{
        max-width:100%;
        margin:0;
    }

    .dashboard-summary .col-6{
        flex:0 0 50%;
        max-width:50%;
    }

    .dashboard-actions .col-6{
        flex:0 0 25%;
        max-width:25%;
    }

    .summary-card{
        min-height:105px;
    }

    .quick-action{
        min-height:130px;
    }

}
/*==================================================
STAFF DASHBOARD ORDER CARD
==================================================*/

.staff-order-card{

    background:#ffffff;

    border:1px solid #dbe5f2;

    border-radius:14px;

    padding:16px;

    transition:.20s;

}

.staff-order-card:hover{

    border-color:#2563eb;

    box-shadow:0 8px 22px rgba(37,99,235,.08);

}

.staff-order-card__top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

}

.staff-order-card__number{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:14px;

    font-weight:700;

    color:#2563eb;

}

.staff-order-card__date{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    color:#64748b;

    white-space:nowrap;

}

.staff-order-card__customer{

    font-size:21px;

    font-weight:700;

    color:#0f172a;

    line-height:1.3;

    margin-bottom:14px;

}

.staff-order-card__info{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    font-size:14px;

    color:#475569;

}

.staff-order-card__info i{

    width:18px;

    text-align:center;

    flex-shrink:0;

}

.staff-order-card__info .bi-telephone{

    color:#2563eb;

}

.staff-order-card__info .bi-geo-alt-fill{

    color:#ef4444;

}

.staff-order-card__footer{

    margin-top:14px;

    padding-top:14px;

    border-top:1px solid #edf2f7;

}

.staff-order-card__left{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.staff-status,

.staff-products{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    height:34px;

    padding:0 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    line-height:1;

}

.staff-status.pending{

    background:#fef3c7;

    color:#92400e;

}

.staff-status.loading{

    background:#dbeafe;

    color:#1d4ed8;

}

.staff-products{

    background:#ffffff;

    border:1px solid #d6e4ff;

    color:#334155;

}

.staff-order-card__action{

    margin-top:14px;

}
.staff-open-btn{

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:42px;

    padding:10px 16px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

}

.staff-open-btn i{

    margin:0 !important;

    font-size:14px;

    line-height:1;

}

.staff-open-btn span{

    display:inline-block;

    line-height:1;

}

/* Premium staff dashboard */
.staff-dashboard-page{width:100%;max-width:1500px;margin:0 auto;padding-bottom:28px}
.staff-welcome{padding:16px 18px}
.staff-welcome .welcome-card__avatar{width:44px;height:44px;flex-basis:44px;font-size:21px}
.staff-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:190px;padding:34px 38px;overflow:hidden;color:#fff;background:radial-gradient(circle at 86% 18%,rgba(96,165,250,.38),transparent 26%),linear-gradient(125deg,#0f172a 0%,#172554 48%,#1d4ed8 100%);border:1px solid rgba(255,255,255,.12);border-radius:26px;box-shadow:0 20px 45px rgba(15,23,42,.16)}
.staff-hero::before{content:"";position:absolute;z-index:-1;width:230px;height:230px;right:-75px;bottom:-120px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.025)}
.staff-hero__content{position:relative;z-index:1}
.staff-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;color:#bfdbfe;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.staff-hero h1{margin:0 0 10px;color:#fff;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.035em}
.staff-hero p{max-width:610px;margin:0;color:#cbd5e1;font-size:14px;line-height:1.7}
.staff-hero__actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.staff-hero__date,.staff-hero__link{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;color:#e2e8f0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:12px;font-size:12px;font-weight:600;backdrop-filter:blur(10px)}
.staff-hero__link{color:#fff;text-decoration:none;transition:.2s ease}
.staff-hero__link:hover{color:#fff;background:rgba(255,255,255,.18);transform:translateY(-1px)}
.staff-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}
.staff-metric{--metric-color:#2563eb;--metric-soft:#eff6ff;display:flex;align-items:center;gap:15px;min-width:0;padding:20px;background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.055);transition:.2s ease}
.staff-metric:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.09)}
.staff-metric--violet{--metric-color:#7c3aed;--metric-soft:#f3e8ff}.staff-metric--amber{--metric-color:#d97706;--metric-soft:#fff7ed}.staff-metric--blue{--metric-color:#2563eb;--metric-soft:#eff6ff}.staff-metric--green{--metric-color:#059669;--metric-soft:#ecfdf5}
.staff-metric__icon{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;color:var(--metric-color);background:var(--metric-soft);border-radius:15px;font-size:23px}
.staff-metric__body{display:grid;grid-template-columns:1fr auto;align-items:center;min-width:0;width:100%}
.staff-metric__body span{color:#475569;font-size:12px;font-weight:600}.staff-metric__body strong{grid-row:1/span 2;grid-column:2;padding-left:10px;color:#0f172a;font-size:29px;line-height:1;letter-spacing:-.04em}.staff-metric__body small{margin-top:4px;overflow:hidden;color:#94a3b8;font-size:10px;white-space:nowrap;text-overflow:ellipsis}
.staff-workspace{padding:24px;background:#fff;border:1px solid #e5eaf2;border-radius:22px;box-shadow:0 10px 32px rgba(15,23,42,.06)}
.staff-workspace__header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.staff-workspace__title{display:flex;align-items:center;gap:13px}.staff-workspace__icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;color:#2563eb;background:#eff6ff;border-radius:14px;font-size:21px}.staff-workspace__title h2{margin:0 0 3px;color:#0f172a;font-size:20px;font-weight:700}.staff-workspace__title p{margin:0;color:#64748b;font-size:12px}
.staff-refresh-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;color:#334155;background:#f8fafc;border:1px solid #dfe6ef;border-radius:11px;font-size:12px;font-weight:600;text-decoration:none;transition:.2s ease}.staff-refresh-btn:hover{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}
.staff-dashboard-search{margin-bottom:22px}.staff-dashboard-search__box{position:relative;display:flex;align-items:center}.staff-dashboard-search__box>span{position:absolute;left:16px;z-index:1;color:#94a3b8;pointer-events:none}.staff-dashboard-search__input{width:100%;height:48px;padding:0 48px;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:13px;outline:none;font-family:inherit;font-size:13px;transition:.2s ease}.staff-dashboard-search__input:focus{background:#fff;border-color:#60a5fa;box-shadow:0 0 0 4px rgba(37,99,235,.09)}.staff-dashboard-search__clear{position:absolute;right:10px;display:grid;place-items:center;width:32px;height:32px;color:#64748b;background:#e2e8f0;border-radius:9px;text-decoration:none}
.staff-orders-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.staff-empty-state{grid-column:1/-1;padding:52px 20px;text-align:center}.staff-empty-state>span{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 16px;color:#2563eb;background:#eff6ff;border-radius:20px;font-size:29px}.staff-empty-state h3{margin:0 0 6px;color:#0f172a;font-size:18px;font-weight:700}.staff-empty-state p{margin:0;color:#64748b;font-size:13px}.staff-empty-state a{display:inline-block;margin-top:14px;color:#2563eb;font-size:13px;font-weight:600}
.staff-dashboard-page .staff-order-card{border-radius:16px;box-shadow:0 4px 15px rgba(15,23,42,.035)}.staff-dashboard-page .staff-order-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,99,235,.10)}


/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.staff-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.staff-orders-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.staff-order-card{

    padding:15px;

}

.staff-order-card__customer{

    font-size:19px;

}

.staff-order-card__top{

    gap:8px;

}

.staff-order-card__footer{

    margin-top:12px;

    padding-top:12px;

}

.staff-order-card__left{

    gap:8px;

}

.staff-status,

.staff-products{

    font-size:13px;

}

}


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

@media(max-width:767px){

.staff-dashboard-page{padding-bottom:18px}
.staff-welcome{padding:13px 14px;gap:10px}.staff-welcome .welcome-card__avatar{width:40px;height:40px;flex-basis:40px;font-size:19px}.staff-welcome .welcome-card__content h1{font-size:16px}.staff-welcome .welcome-card__content span{font-size:10px}
.staff-hero{display:block;min-height:0;padding:24px 20px;border-radius:20px}
.staff-hero h1{font-size:27px}.staff-hero p{font-size:12px;line-height:1.65}
.staff-hero__actions{align-items:stretch;margin-top:20px}.staff-hero__date{display:none}.staff-hero__link{justify-content:center;width:100%;min-height:43px}
.staff-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.staff-metric{display:block;padding:14px;border-radius:15px}.staff-metric__icon{width:39px;height:39px;margin-bottom:12px;border-radius:11px;font-size:18px}.staff-metric__body{display:block}.staff-metric__body span{display:block;font-size:11px;white-space:nowrap}.staff-metric__body strong{display:block;margin:5px 0;padding:0;font-size:26px}.staff-metric__body small{display:block;font-size:9px}
.staff-workspace{padding:16px;border-radius:18px}.staff-workspace__header{margin-bottom:16px}.staff-workspace__icon{width:42px;height:42px;flex-basis:42px}.staff-workspace__title h2{font-size:17px}.staff-workspace__title p{font-size:10px}.staff-refresh-btn{width:42px;padding:0;justify-content:center;font-size:0}.staff-refresh-btn i{font-size:16px}
.staff-dashboard-search{margin-bottom:16px}.staff-dashboard-search__input{height:46px;padding-left:43px;font-size:12px}.staff-orders-grid{grid-template-columns:1fr;gap:12px}

.staff-order-card{

    padding:14px;

}

.staff-order-card__top{

    flex-direction:column;

    align-items:flex-start;

    gap:6px;

    margin-bottom:12px;

}

.staff-order-card__customer{

    font-size:18px;

    margin-bottom:12px;

}

.staff-order-card__info{

    font-size:13px;

    margin-bottom:8px;

}

.staff-order-card__footer{

    margin-top:12px;

    padding-top:12px;

}

.staff-order-card__left{

    width:100%;

    justify-content:space-between;

    gap:8px;

}

.staff-status,

.staff-products{

    flex:1;

    justify-content:center;

    min-width:0;

    font-size:12px;

    padding:0 10px;

}

.staff-order-card__action{

    margin-top:12px;

}

.staff-open-btn{

    width:100%;

    min-height:42px;

    font-size:14px;

}

}


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

@media(max-width:390px){

.staff-hero{padding:22px 17px}.staff-hero h1{font-size:24px}.staff-metrics{gap:8px}.staff-metric{padding:12px}.staff-metric__body span{font-size:10px}.staff-metric__body small{font-size:8px}.staff-workspace{padding:13px}

.staff-order-card{

    padding:12px;

}

.staff-order-card__customer{

    font-size:17px;

}

.staff-order-card__number{

    font-size:13px;

}

.staff-order-card__date{

    font-size:12px;

}

.staff-order-card__info{

    font-size:12px;

}

.staff-status,

.staff-products{

    font-size:11px;

    height:32px;

}

.staff-open-btn{

    min-height:40px;

    font-size:13px;

}

}

/*==================================================
STOCK ADJUSTMENT
==================================================*/

.stock-adjustment-page{
    width:100%;
}

.stock-adjustment-card{
    padding:24px;
}

.stock-adjustment-card .module-header{
    margin-bottom:24px;
}

.stock-adjustment-form{
    width:100%;
}

.stock-adjustment-layout{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
    align-items:start;
    gap:24px;
}

.stock-adjustment-fields{
    display:grid;
    gap:18px;
}

.adjustment-section{
    padding:20px;
    border:1px solid #dce7f6;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.035);
}

.adjustment-section__head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid #e8eef7;
}

.adjustment-section__step{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    background:#1769ff;
    color:#fff;
    font-size:14px;
    font-weight:700;
    box-shadow:0 5px 12px rgba(23,105,255,.2);
}

.adjustment-section__head h4,
.stock-adjustment-preview__head h4{
    margin:0 0 3px;
    color:#172033;
    font-size:16px;
    font-weight:700;
}

.adjustment-section__head p,
.stock-adjustment-preview__head p{
    margin:0;
    color:#64748b;
    font-size:12px;
}

.stock-adjustment-form .form-row{
    margin-bottom:20px;
}

.stock-adjustment-form .form-label{
    margin-bottom:8px;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.adjustment-input-group{
    min-height:50px;
}

.adjustment-input-group .input-group-text{
    min-width:50px;
    justify-content:center;
    border-color:#d8e2f0;
    background:#f8fbff;
    color:#2563eb;
}

.adjustment-input-group .form-select,
.adjustment-input-group .form-control{
    min-height:50px;
    border-color:#d8e2f0;
    box-shadow:none;
}

.adjustment-input-group .form-select:focus,
.adjustment-input-group .form-control:focus,
.adjustment-reason:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.adjustment-input-group .adjustment-unit{
    min-width:76px;
    color:#475569;
    font-size:12px;
    font-weight:700;
}

.adjustment-product-search{
    font-weight:500;
}

.adjustment-search-icon{
    min-width:46px !important;
    border-left:1px solid #e2e8f0 !important;
    color:#64748b !important;
}

.adjustment-field-note{
    display:block;
    margin-top:8px;
    color:#64748b;
    font-size:11px;
}

.adjustment-field-note i{
    margin-right:4px;
    color:#2563eb;
}

.adjustment-type-selector{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.adjustment-type-selector input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.adjustment-type-option{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:78px;
    padding:14px;
    border:2px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;
}

.adjustment-type-option:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(15,23,42,.06);
}

.adjustment-type-option__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:10px;
    font-size:21px;
}

.adjustment-type-option--increase .adjustment-type-option__icon{
    color:#15803d;
    background:#dcfce7;
}

.adjustment-type-option--decrease .adjustment-type-option__icon{
    color:#dc2626;
    background:#fee2e2;
}

.adjustment-type-option strong,
.adjustment-type-option small{
    display:block;
}

.adjustment-type-option strong{
    color:#1e293b;
    font-size:13px;
}

.adjustment-type-option small{
    margin-top:3px;
    color:#64748b;
    font-size:10px;
    line-height:1.4;
}

.adjustment-type-option__check{
    position:absolute;
    top:8px;
    right:8px;
    color:#94a3b8;
    font-size:14px;
    opacity:0;
}

#increaseStock:checked + .adjustment-type-option{
    border-color:#22c55e;
    background:#f0fdf4;
    box-shadow:0 0 0 3px rgba(34,197,94,.08);
}

#decreaseStock:checked + .adjustment-type-option{
    border-color:#ef4444;
    background:#fef2f2;
    box-shadow:0 0 0 3px rgba(239,68,68,.08);
}

#increaseStock:checked + .adjustment-type-option .adjustment-type-option__check{
    color:#16a34a;
    opacity:1;
}

#decreaseStock:checked + .adjustment-type-option .adjustment-type-option__check{
    color:#dc2626;
    opacity:1;
}

.adjustment-reason{
    margin-top:8px;
    min-height:108px;
    resize:vertical;
    border-color:#d8e2f0;
    box-shadow:none;
    font-size:13px;
}

.adjustment-character-count{
    color:#64748b;
    font-size:11px;
}

.adjustment-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.adjustment-meta__item{
    padding:15px 17px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
}

.adjustment-meta__item span,
.adjustment-meta__item strong{
    display:block;
}

.adjustment-meta__item span{
    margin-bottom:6px;
    color:#64748b;
    font-size:11px;
    font-weight:600;
}

.adjustment-meta__item span i{
    margin-right:5px;
    color:#2563eb;
}

.adjustment-meta__item strong{
    overflow:hidden;
    color:#1e293b;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stock-adjustment-preview{
    position:sticky;
    top:92px;
    overflow:hidden;
    padding:20px;
    border:1px solid #cfe0fb;
    border-radius:14px;
    background:linear-gradient(145deg,#f8fbff 0%,#f1f6ff 100%);
    box-shadow:0 8px 22px rgba(37,99,235,.08);
}

.stock-adjustment-preview__head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.stock-adjustment-preview__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:11px;
    background:#dbeafe;
    color:#1769ff;
    font-size:19px;
}

.stock-adjustment-preview__head p{
    overflow:hidden;
    max-width:220px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stock-preview-card{
    padding:17px;
    border:1px solid #dbe4ee;
    border-radius:12px;
    background:#fff;
}

.stock-preview-card__label{
    display:block;
    margin-bottom:8px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.stock-preview-card__label i{
    margin-right:5px;
}

.stock-preview-card strong{
    display:block;
    color:#172033;
    font-size:24px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.stock-preview-card--new{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.stock-preview-card--new .stock-preview-card__label,
.stock-preview-card--new strong{
    color:#15803d;
}

.stock-preview-card--new.stock-preview-card--decrease{
    border-color:#fecaca;
    background:#fef2f2;
}

.stock-preview-card--new.stock-preview-card--decrease .stock-preview-card__label,
.stock-preview-card--new.stock-preview-card--decrease strong{
    color:#dc2626;
}

.stock-preview-card small{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:10px;
}

.stock-preview-operation{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    height:42px;
    color:#64748b;
}

.stock-preview-operation span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    left:12px;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#fff;
    color:#2563eb;
    font-size:17px;
    font-weight:700;
    box-shadow:0 2px 8px rgba(15,23,42,.1);
}

.stock-preview-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #d8e5f6;
    color:#52627a;
}

.stock-preview-note i{
    margin-top:1px;
    color:#2563eb;
}

.stock-preview-note p{
    margin:0;
    font-size:10px;
    line-height:1.55;
}

.stock-adjustment-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid #e5edf8;
}

.stock-adjustment-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:145px;
    min-height:46px;
    border-radius:10px;
    font-weight:600;
}

@media(max-width:991px){
    .stock-adjustment-layout{
        grid-template-columns:1fr;
    }

    .stock-adjustment-preview{
        position:static;
        display:grid;
        grid-template-columns:1fr auto 1fr;
        gap:12px;
        align-items:center;
    }

    .stock-adjustment-preview__head,
    .stock-preview-note{
        grid-column:1 / -1;
    }

    .stock-preview-operation{
        width:35px;
    }

    .stock-preview-operation span{
        position:static;
    }

    .stock-preview-operation i{
        display:none;
    }
}

@media(max-width:767px){
    .stock-adjustment-card{
        padding:14px;
    }

    .stock-adjustment-card .module-header{
        margin-bottom:18px;
    }

    .adjustment-section{
        padding:15px;
    }

    .adjustment-type-selector,
    .adjustment-meta,
    .stock-adjustment-preview{
        grid-template-columns:1fr;
    }

    .stock-preview-operation{
        width:auto;
        height:32px;
    }

    .stock-preview-operation i{
        display:inline-block;
        margin-left:9px;
    }

    .stock-adjustment-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .stock-adjustment-actions .btn{
        width:100%;
    }

    .stock-adjustment-actions .btn-primary{
        grid-row:1;
    }
}

@media(max-width:991px){
    .staff-list-table td:last-child .d-flex{
        flex-wrap:wrap !important;
    }
}

@media(max-width:767px){
    .staff-list-page .table-responsive{
        overflow:visible;
        border-top:0;
    }

    .staff-list-table,
    .staff-list-table tbody,
    .staff-list-table tr,
    .staff-list-table td{
        display:block;
        width:100%;
    }

    .staff-list-table thead{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }

    .staff-list-table tbody tr{
        display:grid;
        grid-template-columns:1fr auto;
        gap:11px 14px;
        margin:12px;
        padding:15px;
        border:1px solid #dbeafe;
        border-radius:12px;
        background:#fff;
        box-shadow:0 2px 8px rgba(15,23,42,.04);
    }

    .staff-list-table tbody td{
        height:auto;
        min-height:28px;
        padding:0;
        border:0;
        background:transparent !important;
    }

    .staff-list-table tbody td:first-child{
        grid-column:1;
        color:#64748b;
        font-size:12px;
        font-weight:700;
    }

    .staff-list-table tbody td:nth-child(2){
        grid-column:1 / -1;
    }

    .staff-list-table tbody td:nth-child(3),
    .staff-list-table tbody td:nth-child(5){
        color:#64748b;
        font-size:13px;
    }

    .staff-list-table tbody td:nth-child(4){
        grid-column:2;
        grid-row:1;
    }

    .staff-list-table tbody td:last-child{
        grid-column:1 / -1;
        padding-top:12px;
        border-top:1px solid #edf2f7;
    }

    .staff-list-table td:last-child .d-flex{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }

    .staff-list-table td:last-child .delete-action-form,
    .staff-list-table td:last-child .btn{
        width:100%;
    }

    .staff-list-table td:last-child .delete-action-form{
        grid-column:1 / -1;
    }
}

/* ==================================================
   ORDER REGISTER & ORDER DETAILS
   ================================================== */
.order-list-page .staff-search-form{ margin-bottom:18px; }
.order-list-panel,.order-details-summary,.order-details-section{ overflow:hidden; border:1px solid #dbe5f2; border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(15,23,42,.035); }
.order-list-panel__header,.order-details-section__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid #dbeafe; background:linear-gradient(135deg,#f8fbff 0%,#f2f7ff 100%); }
.order-list-panel__heading,.order-details-section__heading{ display:flex; align-items:center; min-width:0; gap:13px; }
.order-list-panel__icon,.order-details-section__icon{ display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:11px; background:#dbeafe; color:#2563eb; font-size:20px; }
.order-list-panel h3,.order-details-section h3{ margin:0; color:#172033; font-size:17px; font-weight:700; }
.order-list-panel p,.order-details-section p{ margin:3px 0 0; color:#64748b; font-size:12px; }
.order-list-panel__count,.order-details-section__count{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 11px; border:1px solid #cfe0fb; border-radius:999px; background:#fff; color:#1769ff; font-size:12px; font-weight:700; white-space:nowrap; }
.order-list-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px; }
.order-list-card{ min-width:0; padding:16px; border:1px solid #dbe5f2; border-radius:13px; background:#fff; transition:border-color .2s,box-shadow .2s,transform .2s; }
.order-list-card:hover{ border-color:#93c5fd; box-shadow:0 9px 22px rgba(37,99,235,.09); transform:translateY(-2px); }
.order-list-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.order-list-card__number,.order-list-card__date{ display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:12px; font-weight:700; }
.order-list-card__number{ color:#2563eb; }.order-list-card__date{ color:#64748b; white-space:nowrap; }
.order-list-card__customer{ overflow:hidden; margin:15px 0; color:#172033; font-size:18px; font-weight:700; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.order-list-card__info{ display:flex; flex-wrap:wrap; gap:9px 14px; padding-top:11px; border-top:1px solid #edf2f7; color:#52627a; }
.order-list-card__info span{ display:inline-flex; align-items:center; min-width:0; gap:6px; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.order-list-card__info i{ color:#2563eb; }
.order-list-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:13px; border-top:1px solid #edf2f7; }
.order-list-card__status,.order-item-card__status,.order-details-status{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; }
.order-list-card__status{ min-height:31px; padding:0 10px; }.order-list-card__status--warning,.order-item-card__status--warning,.order-details-status--warning{ background:#fef3c7; color:#92400e; }.order-list-card__status--primary,.order-item-card__status--primary,.order-details-status--primary{ background:#dbeafe; color:#1d4ed8; }.order-list-card__status--success,.order-item-card__status--success,.order-details-status--success{ background:#dcfce7; color:#166534; }.order-list-card__status--secondary,.order-item-card__status--secondary,.order-details-status--secondary{ background:#e2e8f0; color:#475569; }
.order-list-card__actions{ display:flex; gap:7px; }.order-list-card__actions form{ margin:0; }
.order-list-card__button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:5px 10px; border-radius:8px; font-size:12px; font-weight:700; line-height:1; }
.order-list-card__button--view{ border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; }.order-list-card__button--view:hover{ border-color:#2563eb; background:#2563eb; color:#fff; }
.order-list-card__button--edit{ border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; }.order-list-card__button--edit:hover{ border-color:#4f46e5; background:#4f46e5; color:#fff; }
.order-list-card__button--delete{ border:1px solid #fecaca; background:#fff; color:#dc2626; }.order-list-card__button--delete:hover{ border-color:#dc2626; background:#dc2626; color:#fff; }
.order-list-empty,.order-details-empty{ display:grid; grid-column:1 / -1; min-height:190px; place-content:center; justify-items:center; padding:24px; color:#64748b; text-align:center; }.order-list-empty i,.order-details-empty i{ margin-bottom:10px; color:#93c5fd; font-size:35px; }.order-list-empty h4{ margin:0 0 5px; color:#334155; font-size:16px; font-weight:700; }.order-list-empty p,.order-details-empty p{ margin:0; font-size:13px; }

.order-details-page .module-header{ margin-bottom:22px; }.order-details-back-button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #cbd5e1; background:#fff; color:#334155; font-weight:600; }.order-details-back-button:hover{ border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.order-details-summary{ margin-bottom:22px; }.order-details-summary__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #dbeafe; background:linear-gradient(135deg,#f8fbff 0%,#f2f7ff 100%); }.order-details-summary__label{ display:block; margin-bottom:5px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.order-details-summary h3{ display:flex; align-items:center; gap:8px; margin:0; color:#1769ff; font-size:18px; font-weight:700; }.order-details-status{ min-height:34px; padding:0 13px; }
.order-details-summary__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }.order-details-summary__grid>div,.order-dispatch-grid>div{ min-width:0; padding:16px 20px; border-right:1px solid #e5edf7; }.order-details-summary__grid>div:last-child{ border-right:0; }.order-details-summary__grid span,.order-dispatch-grid span{ display:flex; align-items:center; gap:6px; margin-bottom:7px; color:#64748b; font-size:11px; font-weight:700; }.order-details-summary__grid span i,.order-dispatch-grid span i{ color:#2563eb; }.order-details-summary__grid strong,.order-dispatch-grid strong{ display:block; overflow:hidden; color:#172033; font-size:14px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.order-details-section{ margin-bottom:22px; }.order-details-items-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px; }.order-item-card{ min-width:0; padding:16px; border:1px solid #dbe5f2; border-radius:12px; background:#fff; }.order-item-card h4{ overflow:hidden; margin:0 0 15px; color:#172033; font-size:15px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.order-item-card__quantities{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #e4ecf7; border-radius:9px; background:#f8fbff; }.order-item-card__quantities>div{ min-width:0; padding:10px; }.order-item-card__quantities>div+div{ border-left:1px solid #e4ecf7; }.order-item-card__quantities span,.order-item-card__footer>span:first-child{ display:block; margin-bottom:5px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }.order-item-card__quantities strong{ display:block; overflow:hidden; color:#172033; font-size:14px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.order-item-card__quantities small{ color:#64748b; font-size:11px; font-weight:700; }.order-item-card__loaded-by{ display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:6px; margin-top:13px; color:#64748b; font-size:12px; }.order-item-card__loaded-by i{ color:#2563eb; }.order-item-card__loaded-by strong{ overflow:hidden; color:#334155; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.order-item-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; padding-top:12px; border-top:1px solid #edf2f7; }.order-item-card__footer>span:first-child{ margin:0; }.order-item-card__status{ min-height:28px; padding:0 9px; font-size:11px; }
.order-dispatch-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }.order-dispatch-grid>div:last-child{ border-right:0; }

@media(max-width:1199px){ .order-list-grid,.order-details-items-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }.order-details-summary__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }.order-details-summary__grid>div:nth-child(even){ border-right:0; }.order-details-summary__grid>div:nth-child(-n+2){ border-bottom:1px solid #e5edf7; }.order-dispatch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }.order-dispatch-grid>div:nth-child(3n){ border-right:0; }.order-dispatch-grid>div:nth-child(-n+3){ border-bottom:1px solid #e5edf7; } }
@media(max-width:767px){ .order-list-panel__header,.order-details-section__header{ align-items:flex-start; flex-direction:column; padding:15px; }.order-list-panel__count,.order-details-section__count{ align-self:flex-start; }.order-list-grid,.order-details-items-grid{ grid-template-columns:1fr; gap:12px; padding:12px; }.order-list-card{ padding:14px; }.order-list-card__top{ align-items:flex-start; flex-direction:column; gap:6px; }.order-list-card__customer{ margin:12px 0; font-size:17px; }.order-list-card__footer{ align-items:stretch; flex-direction:column; }.order-list-card__status{ align-self:flex-start; }.order-list-card__actions{ display:grid; grid-template-columns:1fr; width:100%; }.order-list-card__actions form,.order-list-card__actions .btn{ width:100%; }.order-list-card__button{ min-height:38px; }.order-details-page .module-header{ margin-bottom:18px; }.order-details-back-button{ width:100%; }.order-details-summary__top{ align-items:flex-start; flex-direction:column; padding:16px; }.order-details-summary__grid,.order-dispatch-grid{ grid-template-columns:1fr; }.order-details-summary__grid>div,.order-dispatch-grid>div{ padding:14px 16px; border-right:0; border-bottom:1px solid #e5edf7; }.order-details-summary__grid>div:last-child,.order-dispatch-grid>div:last-child{ border-bottom:0; }.order-details-items-grid{ padding:12px; }.order-item-card{ padding:14px; } }
@media(max-width:390px){ .order-list-card__info{ gap:8px; }.order-list-card__info span{ width:100%; }.order-item-card__quantities{ grid-template-columns:1fr; }.order-item-card__quantities>div+div{ border-top:1px solid #e4ecf7; border-left:0; }.order-item-card__footer{ align-items:flex-start; flex-direction:column; } }

/* ==================================================
   DISPATCH ORDER
   ================================================== */
.dispatch-page{ max-width:1280px; }
.dispatch-page .receive-card{ padding:22px; }
.dispatch-order-details,.dispatch-form__details{ margin-bottom:4px; }
.dispatch-order-details textarea,.dispatch-form__details textarea{ min-height:48px; resize:vertical; }
.dispatch-items{ gap:14px; }
.dispatch-item{ grid-template-columns:minmax(220px,1.8fr) minmax(125px,1fr) minmax(145px,1fr) minmax(100px,.75fr) auto; align-items:end; min-width:0; }
.dispatch-item__action{ margin:0; }
.dispatch-item__action .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:112px; min-height:44px; white-space:nowrap; }
.dispatch-item__success{ display:flex; align-items:center; min-height:44px; margin:0; padding:10px 12px; white-space:nowrap; }
.dispatch-item .badge{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 10px; }
.dispatch-payment-instruction{ min-height:80px!important; height:auto!important; padding:12px!important; line-height:1.5; white-space:pre-wrap; }
.dispatch-form .form-actions{ align-items:center; }

@media(max-width:1199px){
    .dispatch-item{ grid-template-columns:minmax(0,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(105px,.8fr); }
    .dispatch-item__number{ grid-column:1 / -1; }
    .dispatch-item__action,.dispatch-item__success{ grid-column:4; }
}

@media(max-width:767px){
    .dispatch-page .receive-card{ padding:16px; }
    .dispatch-order-details,.dispatch-form__details{ gap:16px; }
    .dispatch-item{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
    .dispatch-item__number{ grid-column:1 / -1; min-height:auto; }
    .dispatch-item__field{ min-width:0; }
    .dispatch-item__field:last-of-type{ grid-column:1; }
    .dispatch-item__action,.dispatch-item__success{ grid-column:2; width:100%; }
    .dispatch-item__action .btn{ width:100%; min-width:0; }
    .dispatch-item__success{ justify-content:center; padding:9px; font-size:12px; white-space:normal; text-align:center; }
    .dispatch-form .form-actions{ gap:10px; }
}

@media(max-width:420px){
    .dispatch-page .receive-card{ padding:14px; }
    .dispatch-item{ grid-template-columns:1fr; }
    .dispatch-item__field,.dispatch-item__field:last-of-type,.dispatch-item__action,.dispatch-item__success{ grid-column:1; }
    .dispatch-item__action,.dispatch-item__success{ width:100%; }
}

/* Dispatch item cards */
.dispatch-items{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.dispatch-item{ display:flex; flex-direction:column; min-width:0; padding:0; overflow:hidden; border:1px solid #dbe5f2; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.05); }
.dispatch-item__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #e8eef6; background:linear-gradient(135deg,#f8fbff 0%,#f1f6ff 100%); }
.dispatch-item__product{ display:flex; min-width:0; gap:11px; }
.dispatch-item__icon{ display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:11px; background:#dbeafe; color:#2563eb; font-size:19px; }
.dispatch-item__eyebrow{ display:block; margin-bottom:3px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dispatch-item h5{ overflow:hidden; margin:0; color:#172033; font-size:15px; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.dispatch-item__status{ display:inline-flex; align-items:center; flex:0 0 auto; gap:5px; min-height:28px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.dispatch-item__status--loaded{ background:#dcfce7; color:#166534; }
.dispatch-item__status--pending{ background:#fef3c7; color:#92400e; }
.dispatch-item__status--cancelled{ background:#fee2e2; color:#991b1b; }
.dispatch-item__metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:14px 16px; }
.dispatch-item__metric{ min-width:0; padding:0 12px; }
.dispatch-item__metric:first-child{ padding-left:0; border-right:1px solid #e8eef6; }
.dispatch-item__metric:nth-child(2){ border-right:1px solid #e8eef6; }
.dispatch-item__metric:last-child{ padding-right:0; }
.dispatch-item__metric span{ display:block; margin-bottom:6px; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.dispatch-item__metric strong{ display:block; overflow:hidden; color:#172033; font-size:17px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.dispatch-item__metric small{ color:#52627a; font-size:11px; font-weight:700; }
.dispatch-item__action,.dispatch-item__success,.dispatch-item__resolved,.dispatch-item__cancelled{ width:auto; margin:0 16px 16px; }
.dispatch-item__action{ padding:13px; border:1px solid #dbe7f5; border-radius:11px; background:#f8fbff; }
.dispatch-item__action .btn{ width:100%; min-height:42px; }
.dispatch-item__success{ justify-content:center; min-height:42px; border:1px solid #bbf7d0; border-radius:9px; background:#f0fdf4; color:#166534; font-size:12px; font-weight:700; }
.dispatch-item__qty-label{ display:block; margin-bottom:7px; color:#475569; font-size:11px; font-weight:800; text-transform:uppercase; }
.dispatch-item__qty-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.dispatch-item__qty-input{ min-width:0; min-height:42px; border-color:#cbd9eb; background:#fff; font-weight:700; }
.dispatch-item__qty-input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.dispatch-item__qty-row .btn{ width:auto; min-width:90px; }
.dispatch-item__cancel{ min-height:40px!important; margin-top:8px; }
.dispatch-item__resolved{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; }
.dispatch-item__resolved .dispatch-item__success{ width:100%; margin:0; text-align:center; }
.dispatch-item__cancel-form{ margin:0; }
.dispatch-item__resolved .dispatch-item__cancel{ margin:0; white-space:nowrap; }
.dispatch-item__cancelled{ display:flex; align-items:center; justify-content:center; min-height:42px; border:1px solid #fecaca; border-radius:9px; background:#fff7f7; color:#991b1b; font-size:12px; font-weight:700; }
#actionModal .login-error-modal__button,#messageModal .login-error-modal__button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#actionModal .login-error-modal__icon,#messageModal .login-error-modal__icon{ font-size:22px; }
#actionModal .login-error-modal__eyebrow,#messageModal .login-error-modal__eyebrow{ text-transform:uppercase; }

@media(max-width:1199px){ .dispatch-items{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px){ .dispatch-items{ grid-template-columns:1fr; gap:14px; }.dispatch-item{ border-radius:14px; }.dispatch-item__header{ padding:15px; }.dispatch-item__metrics{ padding:13px 15px; }.dispatch-item__action,.dispatch-item__success,.dispatch-item__resolved,.dispatch-item__cancelled{ margin:0 15px 15px; } }
@media(max-width:480px){ .dispatch-item__resolved{ grid-template-columns:1fr; }.dispatch-item__resolved .dispatch-item__cancel{ width:100%; }.dispatch-item__metrics{ grid-template-columns:1fr; gap:12px; }.dispatch-item__metric,.dispatch-item__metric:first-child,.dispatch-item__metric:nth-child(2),.dispatch-item__metric:last-child{ padding:0; border:0; } }
@media(max-width:390px){ .dispatch-item__header{ gap:8px; }.dispatch-item__icon{ width:36px; height:36px; flex-basis:36px; font-size:17px; }.dispatch-item__status{ padding:0 7px; }.dispatch-item__status i{ display:none; }.dispatch-item h5{ font-size:14px; } }

/* Dispatch completion panel */
.dispatch-page > .receive-card > hr{ margin:30px 0!important; border:0; border-top:1px solid #dbe5f2; opacity:1; }
.dispatch-form{ padding:22px; border:1px solid #dbe5f2; border-radius:16px; background:linear-gradient(180deg,#fbfdff 0%,#fff 100%); box-shadow:0 4px 14px rgba(15,23,42,.035); }
.dispatch-form .receive-items-head{ align-items:flex-start; margin:0 0 22px!important; padding:0 0 17px; border-top:0; border-bottom:1px solid #e5edf7; }
.dispatch-form .receive-items-head h4{ font-size:18px; }
.dispatch-form .receive-items-head p{ max-width:620px; font-size:13px; line-height:1.5; }
.dispatch-form__details{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0!important; }
.dispatch-form__details .form-row{ min-width:0; margin:0!important; }
.dispatch-form__details .form-label{ display:flex; align-items:center; gap:3px; margin-bottom:8px; color:#172033; font-size:13px; font-weight:700; }
.dispatch-form__details .form-control{ border-color:#d8e2f0; background:#fff; }
.dispatch-form__details textarea.form-control{ height:104px!important; min-height:104px!important; padding:12px 14px; line-height:1.5; resize:vertical; }
.dispatch-form__details .dispatch-payment-instruction{ display:block; min-height:104px!important; padding:12px 14px!important; border:1px solid #e2e8f0!important; border-radius:9px; background:#f8fafc!important; color:#334155!important; font-family:inherit!important; font-size:14px!important; font-weight:500!important; letter-spacing:normal!important; }
.dispatch-form__details .form-row:nth-child(5){ grid-column:1 / -1; }
.dispatch-form .form-actions{ display:flex; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #e5edf7; }
.dispatch-form .form-actions .btn{ min-height:46px; padding-inline:18px; font-weight:700; }

@media(max-width:767px){
    .dispatch-page > .receive-card > hr{ margin:24px 0!important; }
    .dispatch-form{ padding:16px; border-radius:14px; }
    .dispatch-form .receive-items-head{ margin-bottom:18px!important; padding-bottom:14px; }
    .dispatch-form .receive-items-head h4{ font-size:17px; }
    .dispatch-form__details{ grid-template-columns:1fr; gap:16px; }
    .dispatch-form__details .form-row:nth-child(5){ grid-column:auto; }
    .dispatch-form__details textarea.form-control,.dispatch-form__details .dispatch-payment-instruction{ min-height:92px!important; height:92px!important; }
}

@media(max-width:420px){ .dispatch-form{ padding:14px; }.dispatch-form .form-actions{ margin-top:20px; padding-top:16px; } }

/* Prevent legacy receive-item grid rules from shifting dispatch card content. */
.dispatch-items > .dispatch-item{ display:flex!important; grid-column:auto!important; grid-row:auto!important; width:100%; max-width:none; margin:0; }
.dispatch-item > .dispatch-item__header,.dispatch-item > .dispatch-item__metrics,.dispatch-item > .dispatch-item__action,.dispatch-item > .dispatch-item__success,.dispatch-item > .dispatch-item__resolved,.dispatch-item > .dispatch-item__cancelled{ grid-column:auto!important; grid-row:auto!important; width:100%; max-width:none; }
.dispatch-item > .dispatch-item__action,.dispatch-item > .dispatch-item__success,.dispatch-item > .dispatch-item__resolved,.dispatch-item > .dispatch-item__cancelled{ width:calc(100% - 32px); }
@media(max-width:767px){ .dispatch-item > .dispatch-item__action,.dispatch-item > .dispatch-item__success,.dispatch-item > .dispatch-item__resolved,.dispatch-item > .dispatch-item__cancelled{ width:calc(100% - 30px); } }

/* Completed order payment details */
.completed-payment-info{ display:grid; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid #e8eef6; }
.completed-payment-info__item{ padding:12px; border:1px solid #dbe7f5; border-radius:10px; background:#f8fbff; }
.completed-payment-info__item--update{ border-color:#ccebd8; background:#f2fcf5; }
.completed-payment-info__label{ display:flex; align-items:center; gap:7px; margin-bottom:7px; color:#334155; font-size:11px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.completed-payment-info__label i{ color:#2563eb; font-size:14px; }
.completed-payment-info__item--update .completed-payment-info__label i{ color:#159957; }
.completed-payment-info__item p{ margin:0; color:#172033; font-size:13px; font-weight:600; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap; }
@media(max-width:767px){ .completed-payment-info{ margin-top:14px; }.completed-payment-info__item{ padding:11px; }.completed-payment-info__item p{ font-size:13px; } }
.completed-order-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.completed-order-actions__buttons{display:flex;align-items:center;gap:8px}.completed-order-actions__buttons .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700}.completed-whatsapp-btn{background:#16a34a;border-color:#16a34a}.completed-whatsapp-btn:hover{background:#15803d;border-color:#15803d}
.completed-status-text{padding:0!important;background:transparent!important;color:#198754!important;font-size:12px;font-weight:700}

/* Supplier-wise received material report */
.received-report-page .module-header{margin-bottom:18px}
.received-report-mobile-notice{display:none}
.received-report-filter{margin-bottom:18px;padding:16px;border:1px solid #dbe5f2;border-radius:14px;background:#f8fbff}
.received-report-filter .form-actions{margin-top:14px}
.received-report-search{margin-bottom:18px}
.received-supplier-period{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-size:11px;font-weight:600}
.received-supplier-period i{color:#2563eb}
.received-tally-wrap{background:#fff}
.received-tally-table{min-width:760px;margin:0!important;border-collapse:collapse;background:#fff;color:#1f2937}
.received-tally-table th{padding:11px 13px!important;border:1px solid #cfd6df!important;background:#fff!important;color:#334155!important;font-size:10px!important;font-weight:750!important;letter-spacing:.02em;text-transform:uppercase}
.received-tally-table td{padding:10px 13px!important;border-right:1px solid #dde3ea!important;border-bottom:1px solid #e5e9ef!important;background:#fff!important;font-size:11px!important;vertical-align:top!important}
.received-tally-table td:first-child{border-left:1px solid #dde3ea!important}
.received-tally-table td small{display:block;margin-top:3px;color:#94a3b8;font-size:9px;font-weight:600}
.received-tally-voucher-start td{border-top:2px solid #94a3b8!important}
.received-tally-total td{padding-block:7px!important;border-bottom:1px solid #94a3b8!important;background:#fff!important;color:#475569;font-size:10px!important;font-weight:700}
.received-tally-total td:first-child{text-align:right;text-transform:uppercase}
@media(max-width:767px){.received-report-filter{padding:13px}.received-tally-table{min-width:720px}}
@media(max-width:767px){
    .received-report-page{display:none!important}
    .received-report-mobile-notice{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:28px 20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.05)}
    .received-report-mobile-notice>span{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;color:#2563eb;background:#eff6ff;border-radius:18px;font-size:27px}
    .received-report-mobile-notice h2{margin:0 0 7px;color:#172033;font-size:18px;font-weight:700}
    .received-report-mobile-notice p{max-width:340px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
}
@media(max-width:420px){.completed-order-actions{align-items:stretch;flex-direction:column}.completed-order-actions>.badge{align-self:flex-start}.completed-order-actions__buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}.completed-order-actions__buttons .btn{width:100%;min-height:38px}}

/* Firm settings */
.firm-settings-page{width:100%;max-width:none;margin:0}.firm-settings-card{width:100%;padding:18px 20px}.firm-settings-card .module-header{margin-bottom:0}.firm-settings-form{margin-top:15px;padding-top:15px;border-top:1px solid #e5edf7}.firm-settings-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.firm-settings-form__wide{grid-column:1/-1}.firm-settings-form .form-label{display:block;margin-bottom:6px;color:#52627a;font-family:'Poppins','Segoe UI',sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em}.firm-settings-form .input-group{min-height:42px}.firm-settings-form .input-group-text{width:44px;justify-content:center;color:#2563eb;background:#f8fbff;border-color:#d8e2f0;font-size:14px}.firm-settings-form .form-control{height:42px;min-height:42px;padding:8px 12px;color:#172033;background:#fff;border-color:#d8e2f0;font-family:'Poppins','Segoe UI',sans-serif;font-size:13px;font-weight:400;line-height:1.45}.firm-settings-form .form-control::placeholder{color:#94a3b8;font-family:'Poppins','Segoe UI',sans-serif;font-size:12px;font-weight:400}.firm-settings-form .input-group:focus-within{border-radius:9px;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.firm-settings-form .input-group:focus-within .input-group-text,.firm-settings-form .input-group:focus-within .form-control{border-color:#2563eb}.firm-settings-form .form-control:focus{border-color:#2563eb;box-shadow:none}.firm-settings-form__address{align-items:stretch}.firm-settings-form__address .input-group-text{align-items:center;padding-top:0}.firm-settings-form__address textarea.form-control{height:74px!important;min-height:74px!important;padding:10px 12px!important;font-family:'Poppins','Segoe UI',sans-serif!important;font-size:13px!important;line-height:1.5;resize:vertical}.firm-settings-form__actions{display:flex;justify-content:flex-end;margin-top:15px;padding-top:14px;border-top:1px solid #e5edf7}.firm-settings-form__actions .btn{min-height:42px;padding-inline:17px;font-size:12px;font-weight:700}.firm-settings-mobile-notice{display:none}
.stock-report-mobile-notice{display:none}

@media(max-width:767px){
    .firm-settings-page{display:none!important}
    .stock-report-page{display:none!important}
    .firm-settings-mobile-notice{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:28px 20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.05)}
    .stock-report-mobile-notice{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:28px 20px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.05)}
    .firm-settings-mobile-notice>span{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;color:#2563eb;background:#eff6ff;border-radius:18px;font-size:27px}
    .stock-report-mobile-notice>span{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;color:#2563eb;background:#eff6ff;border-radius:18px;font-size:27px}
    .firm-settings-mobile-notice h2{margin:0 0 7px;color:#172033;font-size:18px;font-weight:700}
    .stock-report-mobile-notice h2{margin:0 0 7px;color:#172033;font-size:18px;font-weight:700}
    .firm-settings-mobile-notice p{max-width:330px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
    .stock-report-mobile-notice p{max-width:330px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
}

/* Professional active-order cards */
.staff-dashboard-page .staff-order-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    padding:0;
    overflow:hidden;
    border:1px solid #dfe7f1;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(15,23,42,.045);
    color:inherit;
    text-decoration:none;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.staff-dashboard-page .staff-order-card:hover{border-color:#bfdbfe;box-shadow:0 10px 25px rgba(37,99,235,.09);transform:translateY(-2px)}
.staff-dashboard-page .staff-order-card:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:3px}
.staff-dashboard-page .staff-order-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:13px 15px;border-bottom:1px solid #edf2f7;background:#fbfdff}
.staff-dashboard-page .staff-order-card__number{display:inline-flex;align-items:center;gap:7px;min-width:0;color:#1d4ed8;font-size:12px;font-weight:700;letter-spacing:.01em}
.staff-dashboard-page .staff-order-card__number i{font-size:14px}
.staff-dashboard-page .staff-status{flex:0 0 auto;height:28px;padding:0 9px;font-size:10px;font-weight:700}
.staff-dashboard-page .staff-order-card__customer-row{display:flex;align-items:center;gap:11px;padding:15px 15px 13px}
.staff-dashboard-page .staff-order-card__avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;color:#1d4ed8;background:#eaf2ff;border:1px solid #d5e5ff;border-radius:12px;font-size:17px;font-weight:700}
.staff-dashboard-page .staff-order-card__customer-content{min-width:0}
.staff-dashboard-page .staff-order-card__customer-content>span{display:block;margin-bottom:2px;color:#94a3b8;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.staff-dashboard-page .staff-order-card__customer-content h3{overflow:hidden;margin:0;color:#172033;font-size:17px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.staff-dashboard-page .staff-order-card__details{display:grid;gap:8px;padding:0 15px 14px}
.staff-dashboard-page .staff-order-card__detail{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;border:1px solid #e8eef6;border-radius:9px;background:#f8fafc}
.staff-dashboard-page .staff-order-card__detail-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;color:#2563eb;background:#fff;border:1px solid #dbe7f5;border-radius:8px;font-size:12px}
.staff-dashboard-page .staff-order-card__detail>div{min-width:0}
.staff-dashboard-page .staff-order-card__detail small{display:block;margin-bottom:1px;color:#94a3b8;font-size:8px;font-weight:700;text-transform:uppercase}
.staff-dashboard-page .staff-order-card__detail strong{display:block;overflow:hidden;color:#475569;font-size:11px;font-weight:600;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.staff-dashboard-page .staff-order-card__detail--address .staff-order-card__detail-icon{color:#dc2626}
.staff-dashboard-page .staff-order-card__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 0 0;padding:12px 15px;border-top:1px solid #edf2f7;background:#fff}
.staff-dashboard-page .staff-order-card__meta{display:flex;flex-wrap:wrap;gap:5px 11px;min-width:0}
.staff-dashboard-page .staff-order-card__meta span{display:inline-flex;align-items:center;gap:5px;color:#64748b;font-size:9px;font-weight:600;white-space:nowrap}
.staff-dashboard-page .staff-order-card__meta i{color:#2563eb;font-size:10px}
.staff-dashboard-page .staff-open-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;width:auto;min-height:34px;margin:0;padding:0 11px;color:#fff;background:#2563eb;border:1px solid #2563eb;border-radius:8px;font-size:10px;font-weight:700;text-decoration:none;transition:.2s ease}
.staff-dashboard-page .staff-order-card:hover .staff-open-btn{color:#fff;background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 5px 12px rgba(37,99,235,.2)}
.staff-dashboard-page .staff-open-btn i{font-size:11px;transition:transform .2s ease}
.staff-dashboard-page .staff-order-card:hover .staff-open-btn i{transform:translateX(2px)}

@media(max-width:767px){
    .staff-dashboard-page .staff-order-card__top{flex-direction:row;align-items:center;padding:12px 13px}
    .staff-dashboard-page .staff-order-card__customer-row{padding:14px 13px 12px}
    .staff-dashboard-page .staff-order-card__details{padding:0 13px 13px}
    .staff-dashboard-page .staff-order-card__footer{align-items:stretch;flex-direction:column;padding:12px 13px}
    .staff-dashboard-page .staff-open-btn{width:100%;min-height:40px;font-size:12px}
}

@media(max-width:390px){
    .staff-dashboard-page .staff-order-card__detail strong{font-size:10px}
    .staff-dashboard-page .staff-order-card__meta{justify-content:space-between;width:100%}
}

@keyframes staffLiveOrdersIn{
    from{opacity:.55;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes staffLiveValuePulse{
    50%{color:#2563eb;transform:scale(1.1)}
}

.staff-orders-grid--updated{animation:staffLiveOrdersIn .35s ease}
.live-value-updated{display:inline-block;animation:staffLiveValuePulse .55s ease}

@media(prefers-reduced-motion:reduce){
    .staff-orders-grid--updated,
    .live-value-updated{animation:none}
}

/* Staff live-order notifications */
.header-notification-btn{
    position:relative;
    width:36px;
    height:40px;
    margin-right:9px;
    padding:0;
    border:0!important;
    border-radius:0;
    background:transparent!important;
    box-shadow:none!important;
}
.header-notification-btn:hover{color:#2563eb;background:transparent!important}
.header-notification-badge{position:absolute;top:4px;right:3px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;color:#fff;background:#ef4444;border:2px solid #fff;border-radius:999px;font-size:8px;font-weight:800;line-height:1}
.header-notification-badge[hidden]{display:none}
.order-notification-panel{position:fixed;z-index:1100;top:58px;right:62px;width:min(360px,calc(100vw - 24px));overflow:hidden;background:#fff;border:1px solid #dbe5f0;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.18)}
.order-notification-panel--admin{width:min(440px,calc(100vw - 24px))}
.order-notification-panel[hidden]{display:none}
.order-notification-panel__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border-bottom:1px solid #e8eef6;background:#fbfdff}
.order-notification-panel__header strong{display:block;color:#172033;font-size:13px}.order-notification-panel__header span{display:block;margin-top:1px;color:#94a3b8;font-size:9px}.order-notification-panel__header button{padding:5px 8px;color:#dc2626;background:#fff;border:1px solid #fecaca;border-radius:7px;font-family:inherit;font-size:9px;font-weight:700;cursor:pointer}.order-notification-panel__header button:hover{color:#fff;background:#dc2626;border-color:#dc2626}
.order-notification-panel__list{max-height:min(430px,65vh);overflow-y:auto}
.order-notification-item{position:relative;display:flex;align-items:center;gap:11px;padding:12px 15px;color:inherit;background:#fff;border-bottom:1px solid #edf2f7;text-decoration:none;transition:.18s ease}.order-notification-item:last-child{border-bottom:0}.order-notification-item:hover{background:#f8fbff}.order-notification-item--unread{background:#eff6ff}.order-notification-item--unread::after{content:"";position:absolute;top:50%;right:13px;width:6px;height:6px;background:#2563eb;border-radius:50%;transform:translateY(-50%)}
.order-notification-item__icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;align-self:flex-start;color:#2563eb;background:#dbeafe;border-radius:10px;font-size:15px}.order-notification-item>div{min-width:0;padding-right:12px}.order-notification-item strong{display:block;overflow:hidden;color:#172033;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.order-notification-item small{display:block;margin-top:7px;color:#94a3b8;font-size:9px}.order-notification-item__details{display:grid;gap:3px;margin-top:7px;padding-top:7px;border-top:1px solid #dfe8f3}.order-notification-item__details p{display:grid;grid-template-columns:88px minmax(0,1fr);gap:6px;margin:0;font-size:9px;line-height:1.45}.order-notification-item__details span{color:#94a3b8}.order-notification-item__details b{color:#475569;font-weight:600;overflow-wrap:anywhere}
.order-notification-empty{display:flex;flex-direction:column;align-items:center;padding:34px 18px;text-align:center}.order-notification-empty i{margin-bottom:10px;color:#94a3b8;font-size:25px}.order-notification-empty strong{color:#475569;font-size:12px}.order-notification-empty span{margin-top:3px;color:#94a3b8;font-size:9px}
@keyframes notificationBellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-5deg)}}
.header-notification-btn--ringing i{display:inline-block;color:#2563eb;animation:notificationBellRing .65s ease}
.order-live-toast{position:fixed;z-index:1200;top:78px;right:22px;display:flex;align-items:center;gap:12px;width:min(360px,calc(100vw - 30px));padding:14px 16px;color:#172033;background:#fff;border:1px solid #bfdbfe;border-radius:13px;box-shadow:0 16px 38px rgba(15,23,42,.18);animation:staffLiveOrdersIn .3s ease;transition:opacity .3s ease,transform .3s ease}
.order-live-toast>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;color:#2563eb;background:#dbeafe;border-radius:10px;font-size:17px}.order-live-toast strong{display:block;margin-bottom:2px;font-size:12px}.order-live-toast p{margin:0;color:#64748b;font-size:10px;line-height:1.5}.order-live-toast--hide{opacity:0;transform:translateY(-8px)}
@media(max-width:767px){.order-live-toast{top:72px;right:15px}.header-notification-badge{top:3px;right:2px}.order-notification-panel{top:62px;right:12px;width:calc(100vw - 24px)}}
.dispatch-success-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.dispatch-success-actions .login-error-modal__button{width:100%;margin:0}.dispatch-success-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 12px;color:#fff;background:#16a34a;border:1px solid #16a34a;border-radius:10px;font-size:11px;font-weight:700;text-decoration:none}.dispatch-success-whatsapp:hover{color:#fff;background:#15803d;border-color:#15803d}
@media(max-width:390px){.dispatch-success-actions{grid-template-columns:1fr}.dispatch-success-whatsapp{min-height:40px}}
.stock-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}
@media(max-width:767px){.stock-header-actions{display:grid;grid-template-columns:1fr;width:100%}.stock-header-actions .stock-ledger-print-btn{width:100%}}

/* Accountant stock ledger workspace */
.accountant-dashboard-page{ width:100%; max-width:1500px; margin:0 auto; padding-bottom:28px; }
.accountant-welcome{ margin-bottom:22px; }
.accountant-welcome .welcome-card__avatar{ width:44px; height:44px; flex-basis:44px; font-size:21px; }
.accountant-ledger-workspace{ padding:22px; }
.accountant-session-badge{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:8px 13px; border:1px solid #cbd5e1; border-radius:8px; color:#334155; background:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.accountant-dashboard-mobile-notice{ display:none; }
.accountant-ledger-filter{ margin:20px 0 0; padding:17px; border:1px solid #dbe5f2; border-radius:12px; background:#f8fafc; }
.accountant-ledger-filter .receive-form__details{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.accountant-ledger-filter .form-row{ margin:0; }
.accountant-ledger-filter .form-select{ height:48px; min-height:48px; border-color:#d8e2f0; box-shadow:none; }
.accountant-ledger-filter .form-select:focus{ border-color:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.accountant-ledger-filter .form-actions{ margin-top:15px; }
.accountant-ledger-result[hidden]{ display:none!important; }
.accountant-ledger-paper{ margin-top:22px!important; font-variant-numeric:tabular-nums; outline:0; scroll-margin-top:76px; }
.accountant-ledger-paper__company{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:18px 16px; border-bottom:2px solid #111; color:#111; background:#fff; }
.accountant-ledger-paper__company>div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.accountant-ledger-paper__company strong{ font-size:20px; font-weight:800; letter-spacing:.01em; }
.accountant-ledger-paper__company span,.accountant-ledger-paper__company small{ color:#333; font-size:11px; line-height:1.45; }
.accountant-ledger-paper__session{ flex:0 0 auto; padding:7px 10px; border:1px solid #777; color:#111!important; font-weight:700; white-space:nowrap; }
.accountant-product-ledgers{ background:#fff; }
.accountant-product-ledger{ break-inside:auto; border-bottom:2px solid #111; }
.accountant-product-ledger:last-child{ border-bottom:0; }
.accountant-product-ledger__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px; border-bottom:1px solid #555; color:#111; background:#fff; }
.accountant-product-ledger__head>div{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.accountant-product-ledger__head strong{ font-size:14px; }
.accountant-product-ledger__head span{ color:#333; font-size:10px; font-weight:600; }
.accountant-tally-summary{ width:100%; border-collapse:collapse; color:#111; background:#fff; table-layout:fixed; }
.accountant-tally-summary th,.accountant-tally-summary td{ width:25%; padding:7px 10px; border-right:1px solid #aaa; border-bottom:1px solid #888; text-align:right; }
.accountant-tally-summary th{ font-size:9px; font-weight:700; text-transform:uppercase; }
.accountant-tally-summary td{ font-size:12px; }
.accountant-tally-summary th:last-child,.accountant-tally-summary td:last-child{ border-right:0; }
.accountant-ledger-table-wrap{ overflow-x:auto; }
.accountant-ledger-table{ min-width:820px; margin:0; }
.accountant-ledger-table th:first-child{ width:72px; }
.accountant-ledger-table td strong{ font-weight:700; }
.accountant-ledger-empty{ padding:26px!important; color:#555!important; text-align:center; }
.accountant-ledger-paper__footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border-top:1px solid #555; color:#333; background:#fff; font-size:9px; }
.accountant-ledger-print{ border:1px solid #111; font-family:inherit; }
.accountant-ledger-generate-modal{ width:min(420px,calc(100vw - 28px)); }
.accountant-ledger-generate-modal__icon{ color:#2563eb; border-color:#dbeafe; background:#eff6ff; }
.accountant-ledger-progress{ position:relative; overflow:hidden; width:100%; height:10px; margin-top:2px; border:1px solid #dbe5f2; border-radius:999px; background:#f1f5f9; }
.accountant-ledger-progress>span{ display:block; width:0; height:100%; border-radius:inherit; background:#2563eb; transition:width .18s ease; }
.accountant-ledger-progress>span.accountant-ledger-progress__bar--error{ background:#dc2626; }
.accountant-ledger-progress__text{ display:block; margin-top:9px; color:#334155; font-size:12px; font-weight:700; text-align:center; }

@media(max-width:991px){
    .accountant-ledger-filter .receive-form__details{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .accountant-ledger-filter .form-row:last-child{ grid-column:1 / -1; }
}

@media(max-width:767px){
    .accountant-ledger-workspace{ display:none!important; }
    .accountant-dashboard-mobile-notice{ display:flex!important; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 120px); padding:28px 20px; text-align:center; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 5px 18px rgba(15,23,42,.05); }
    .accountant-dashboard-mobile-notice>span{ display:grid; place-items:center; width:64px; height:64px; margin-bottom:16px; color:#2563eb; background:#eff6ff; border-radius:18px; font-size:27px; }
    .accountant-dashboard-mobile-notice h2{ margin:0 0 7px; color:#172033; font-size:18px; font-weight:700; }
    .accountant-dashboard-mobile-notice p{ max-width:340px; margin:0; color:#64748b; font-size:12px; line-height:1.65; }
    .accountant-welcome{ margin-bottom:18px; padding:13px 14px; gap:10px; }
    .accountant-welcome .welcome-card__avatar{ width:40px; height:40px; flex-basis:40px; font-size:19px; }
    .accountant-welcome .welcome-card__content h1{ font-size:16px; }
    .accountant-welcome .welcome-card__content span{ font-size:10px; }
    .accountant-session-badge{ width:100%; justify-content:center; }
    .accountant-ledger-filter{ padding:14px; }
    .accountant-ledger-filter .receive-form__details{ grid-template-columns:1fr; }
    .accountant-ledger-filter .form-row:last-child{ grid-column:auto; }
    .accountant-ledger-filter .form-actions{ display:grid; grid-template-columns:1fr; }
    .accountant-ledger-paper__company{ flex-direction:column; gap:10px; }
    .accountant-ledger-paper__session{ white-space:normal; }
    .accountant-product-ledger__head{ align-items:flex-start; flex-direction:column; gap:5px; }
    .accountant-product-ledger__head>div{ align-items:flex-start; flex-direction:column; gap:2px; }
    .accountant-ledger-paper__footer{ align-items:flex-start; flex-direction:column; }
}
@keyframes stockLiveUpdate{from{opacity:.65}to{opacity:1}}
.stock-live-updated{animation:stockLiveUpdate .35s ease}
@media(prefers-reduced-motion:reduce){.stock-live-updated{animation:none}}
[data-unit-row][hidden]{display:none!important}
.material-entry-card[hidden],
.order-list-card[hidden],
.staff-order-card[hidden],
.stock-summary-card[hidden],
[data-search-card][hidden],
table tbody tr[hidden]{display:none!important}
.live-search-empty{grid-column:1/-1;width:100%;padding:38px 16px;color:#64748b;text-align:center;font-size:12px}

@media(max-width:1199px){
    .header-notification-btn{
        z-index:4;
        display:flex!important;
        flex:0 0 36px;
        margin-left:auto;
        margin-right:8px;
        visibility:visible!important;
        opacity:1!important;
    }

    #profileBtn{position:relative;z-index:4;flex:0 0 40px}
    .order-notification-panel{top:72px;right:12px}
}