/* ==========================================================
   NUKA RENTALS — Professional Linen Management System
   Cyber Cube Africa Enterprises
   Redesigned: 2026
========================================================== */

:root{
    --gold:        #C9A96E;
    --gold-light:  #D4B87A;
    --gold-dark:   #A88B52;
    --gold-glow:   rgba(201,169,110,0.15);

    --bg:          #0D0D0F;
    --bg-elevated: #16161A;
    --bg-card:     #1C1C22;
    --bg-hover:    #24242C;
    --bg-input:    #25252E;

    --text:        #E8E8EC;
    --text-muted:  #8A8A95;
    --text-dim:    #5A5A68;

    --border:      rgba(255,255,255,0.06);
    --border-hover:rgba(255,255,255,0.12);

    --success:     #4ADE80;
    --success-bg:  rgba(74,222,128,0.10);
    --warning:     #FBBF24;
    --warning-bg:  rgba(251,191,36,0.10);
    --danger:      #F87171;
    --danger-bg:   rgba(248,113,113,0.10);
    --info:        #60A5FA;
    --info-bg:     rgba(96,165,250,0.10);

    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-xl:   20px;

    --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
    --shadow:      0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
    --shadow-gold: 0 0 20px rgba(201,169,110,0.08);

    --transition:  0.2s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ─── RESET ─── */
*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    font-size:14px;
    line-height:1.5;
    min-height:100vh;
    overflow-x:hidden;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{
    width:6px;
    height:6px;
}
::-webkit-scrollbar-track{
    background:transparent;
}
::-webkit-scrollbar-thumb{
    background:var(--text-dim);
    border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{
    background:var(--text-muted);
}

/* ─── SIDEBAR ─── */
.sidebar{
    width:260px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    background:var(--bg-elevated);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    z-index:100;
    transition:var(--transition-slow);
}

.sidebar-brand{
    padding:28px 24px 20px;
    border-bottom:1px solid var(--border);
}

.sidebar-brand .logo-icon{
    width:40px;
    height:40px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#000;
    margin-bottom:12px;
}

.sidebar-brand .logo-text{
    font-size:20px;
    font-weight:700;
    letter-spacing:0.5px;
    color:var(--text);
}

.sidebar-brand .logo-text span{
    color:var(--gold);
}

.sidebar-brand .logo-sub{
    font-size:11px;
    color:var(--text-dim);
    margin-top:2px;
    letter-spacing:0.5px;
}

.sidebar-nav{
    flex:1;
    padding:16px 12px;
    overflow-y:auto;
}

.sidebar-nav .nav-section{
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-dim);
    padding:16px 12px 8px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    text-decoration:none;
    font-size:13.5px;
    font-weight:500;
    transition:var(--transition);
    margin-bottom:2px;
}

.sidebar-nav a i{
    width:20px;
    text-align:center;
    font-size:15px;
    transition:var(--transition);
}

.sidebar-nav a:hover{
    background:var(--bg-hover);
    color:var(--text);
}

.sidebar-nav a:hover i{
    color:var(--gold);
}

.sidebar-nav a.active{
    background:var(--gold-glow);
    color:var(--gold);
    font-weight:600;
}

.sidebar-nav a.active i{
    color:var(--gold);
}

.sidebar-nav a .badge{
    margin-left:auto;
    background:var(--danger-bg);
    color:var(--danger);
    font-size:10px;
    padding:2px 8px;
    border-radius:20px;
    font-weight:600;
}

.sidebar-footer{
    padding:16px;
    border-top:1px solid var(--border);
}

.sidebar-footer .user-pill{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:var(--bg-card);
    border-radius:var(--radius);
    border:1px solid var(--border);
}

.sidebar-footer .user-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    color:#000;
}

.sidebar-footer .user-info{
    flex:1;
    min-width:0;
}

.sidebar-footer .user-name{
    font-size:13px;
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-footer .user-role{
    font-size:11px;
    color:var(--text-dim);
}

/* ─── MAIN CONTENT ─── */
.main{
    margin-left:260px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ─── TOPBAR ─── */
.topbar{
    height:64px;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:50;
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.topbar-left h1{
    font-size:18px;
    font-weight:600;
    color:var(--text);
}

.topbar-left .breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--text-dim);
}

.topbar-left .breadcrumb a{
    color:var(--text-muted);
    text-decoration:none;
    transition:var(--transition);
}

.topbar-left .breadcrumb a:hover{
    color:var(--gold);
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-btn{
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    background:var(--bg-card);
    border:1px solid var(--border);
    color:var(--text-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition);
    position:relative;
}

.topbar-btn:hover{
    background:var(--bg-hover);
    color:var(--text);
    border-color:var(--border-hover);
}

.topbar-btn .dot{
    position:absolute;
    top:6px;
    right:6px;
    width:8px;
    height:8px;
    background:var(--danger);
    border-radius:50%;
    border:2px solid var(--bg-card);
}

/* ─── CONTENT AREA ─── */
.content{
    flex:1;
    padding:28px;
}

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

.content-header .title-group h1{
    font-size:22px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px;
}

.content-header .title-group p{
    font-size:13px;
    color:var(--text-muted);
}

/* ─── BUTTONS ─── */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    white-space:nowrap;
}

.btn-primary{
    background:var(--gold);
    color:#000;
}

.btn-primary:hover{
    background:var(--gold-light);
    transform:translateY(-1px);
    box-shadow:var(--shadow-gold);
}

.btn-secondary{
    background:var(--bg-card);
    color:var(--text);
    border:1px solid var(--border);
}

.btn-secondary:hover{
    background:var(--bg-hover);
    border-color:var(--border-hover);
}

.btn-outline{
    background:transparent;
    color:var(--text-muted);
    border:1px solid var(--border);
}

.btn-outline:hover{
    color:var(--text);
    border-color:var(--text-dim);
}

.btn-danger{
    background:var(--danger-bg);
    color:var(--danger);
}

.btn-danger:hover{
    background:rgba(248,113,113,0.20);
}

.btn-sm{
    padding:6px 12px;
    font-size:12px;
}

.btn-lg{
    padding:14px 24px;
    font-size:14px;
}

.btn-block{
    width:100%;
}

/* ─── CARDS ─── */
.card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:var(--transition);
}

.card:hover{
    border-color:var(--border-hover);
    box-shadow:var(--shadow);
}

.card-header{
    padding:20px 24px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.card-header h3{
    font-size:15px;
    font-weight:600;
    color:var(--text);
}

.card-body{
    padding:24px;
}

.card-body.p-0{
    padding:0;
}

/* ─── KPI CARDS ─── */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:28px;
}

.kpi-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:20px;
    transition:var(--transition);
}

.kpi-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}

.kpi-card .kpi-icon{
    width:40px;
    height:40px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    margin-bottom:14px;
}

.kpi-card .kpi-icon.gold{
    background:var(--gold-glow);
    color:var(--gold);
}

.kpi-card .kpi-icon.green{
    background:var(--success-bg);
    color:var(--success);
}

.kpi-card .kpi-icon.blue{
    background:var(--info-bg);
    color:var(--info);
}

.kpi-card .kpi-icon.purple{
    background:rgba(168,85,247,0.10);
    color:#A855F7;
}

.kpi-card .kpi-label{
    font-size:12px;
    color:var(--text-muted);
    font-weight:500;
    margin-bottom:6px;
}

.kpi-card .kpi-value{
    font-size:26px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
    letter-spacing:-0.5px;
}

.kpi-card .kpi-delta{
    font-size:12px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:4px;
}

.kpi-card .kpi-delta.up{
    color:var(--success);
}

.kpi-card .kpi-delta.down{
    color:var(--danger);
}

.kpi-card .kpi-delta.neutral{
    color:var(--text-dim);
}

/* ─── TABLES ─── */
.data-table{
    width:100%;
    border-collapse:collapse;
}

.data-table th{
    text-align:left;
    padding:14px 20px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-dim);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.data-table td{
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    font-size:13.5px;
    color:var(--text);
    vertical-align:middle;
}

.data-table tbody tr{
    transition:var(--transition);
    cursor:pointer;
}

.data-table tbody tr:hover{
    background:var(--bg-hover);
}

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

/* ─── STATUS BADGES ─── */
.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.status::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
}

.status-pending{
    background:var(--warning-bg);
    color:var(--warning);
}
.status-pending::before{background:var(--warning);}

.status-packed{
    background:var(--info-bg);
    color:var(--info);
}
.status-packed::before{background:var(--info);}

.status-delivered{
    background:var(--success-bg);
    color:var(--success);
}
.status-delivered::before{background:var(--success);}

.status-collected{
    background:rgba(168,85,247,0.10);
    color:#A855F7;
}
.status-collected::before{background:#A855F7;}

.status-issue{
    background:var(--danger-bg);
    color:var(--danger);
}
.status-issue::before{background:var(--danger);}

.status-active{
    background:var(--success-bg);
    color:var(--success);
}
.status-active::before{background:var(--success);}

.status-cleaning{
    background:var(--warning-bg);
    color:var(--warning);
}
.status-cleaning::before{background:var(--warning);}

/* ─── AVATARS ─── */
.avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    color:#000;
    flex-shrink:0;
}

.avatar-gold{
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
}

.avatar-blue{
    background:linear-gradient(135deg,#60A5FA,#3B82F6);
}

.avatar-green{
    background:linear-gradient(135deg,#4ADE80,#22C55E);
}

.avatar-purple{
    background:linear-gradient(135deg,#A855F7,#7C3AED);
}

/* ─── ENTITY ROW (for tables) ─── */
.entity-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.entity-row .entity-info{
    min-width:0;
}

.entity-row .entity-name{
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.entity-row .entity-meta{
    font-size:12px;
    color:var(--text-dim);
    margin-top:1px;
}

/* ─── FORMS ─── */
.form-group{
    margin-bottom:20px;
}

.form-label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--text-muted);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.form-control{
    width:100%;
    padding:11px 14px;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-size:14px;
    font-family:inherit;
    transition:var(--transition);
    outline:none;
}

.form-control:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-glow);
}

.form-control::placeholder{
    color:var(--text-dim);
}

textarea.form-control{
    resize:vertical;
    min-height:100px;
}

select.form-control{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8A95' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:36px;
}

/* ─── SEARCH BOX ─── */
.search-box{
    position:relative;
}

.search-box input{
    width:280px;
    padding:10px 14px 10px 38px;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-size:13px;
    outline:none;
    transition:var(--transition);
}

.search-box input:focus{
    border-color:var(--gold);
    width:320px;
}

.search-box i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-dim);
    font-size:13px;
}

/* ─── GRID SYSTEM ─── */
.row{
    display:flex;
    flex-wrap:wrap;
    margin:0 -10px;
}

.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-lg-3,.col-lg-4,.col-lg-6,.col-lg-8{
    padding:0 10px;
    flex:1 0 0%;
}

.col-1{flex:0 0 8.333%;max-width:8.333%;}
.col-2{flex:0 0 16.666%;max-width:16.666%;}
.col-3{flex:0 0 25%;max-width:25%;}
.col-4{flex:0 0 33.333%;max-width:33.333%;}
.col-5{flex:0 0 41.666%;max-width:41.666%;}
.col-6{flex:0 0 50%;max-width:50%;}
.col-7{flex:0 0 58.333%;max-width:58.333%;}
.col-8{flex:0 0 66.666%;max-width:66.666%;}
.col-9{flex:0 0 75%;max-width:75%;}
.col-10{flex:0 0 83.333%;max-width:83.333%;}
.col-11{flex:0 0 91.666%;max-width:91.666%;}
.col-12{flex:0 0 100%;max-width:100%;}

@media(min-width:768px){
    .col-md-3{flex:0 0 25%;max-width:25%;}
    .col-md-4{flex:0 0 33.333%;max-width:33.333%;}
    .col-md-5{flex:0 0 41.666%;max-width:41.666%;}
    .col-md-6{flex:0 0 50%;max-width:50%;}
    .col-md-7{flex:0 0 58.333%;max-width:58.333%;}
    .col-md-8{flex:0 0 66.666%;max-width:66.666%;}
}

@media(min-width:992px){
    .col-lg-3{flex:0 0 25%;max-width:25%;}
    .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
    .col-lg-6{flex:0 0 50%;max-width:50%;}
    .col-lg-8{flex:0 0 66.666%;max-width:66.666%;}
}

.g-3{margin:-6px;}
.g-3>[class*="col"]{padding:6px;}
.g-4{margin:-10px;}
.g-4>[class*="col"]{padding:10px;}

/* ─── MARGINS & PADDINGS ─── */
.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}
.mb-4{margin-bottom:20px;}
.mb-5{margin-bottom:32px;}
.mt-3{margin-top:12px;}
.mt-4{margin-top:20px;}
.mt-5{margin-top:32px;}
.ms-auto{margin-left:auto;}
.me-2{margin-right:8px;}

.p-3{padding:12px;}
.p-4{padding:20px;}
.p-5{padding:32px;}

/* ─── UTILITIES ─── */
.d-flex{display:flex;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center;}
.gap-2{gap:8px;}
.gap-3{gap:12px;}

.text-muted{color:var(--text-muted);}
.text-dim{color:var(--text-dim);}
.text-gold{color:var(--gold);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}

.text-center{text-align:center;}
.text-end{text-align:right;}

.w-100{width:100%;}

/* ─── LOGIN PAGE ─── */
.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(ellipse at 20% 20%,rgba(201,169,110,0.08) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 80%,rgba(96,165,250,0.05) 0%,transparent 50%),
        var(--bg);
}

.login-card{
    width:420px;
    max-width:92%;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:48px;
    box-shadow:var(--shadow-lg);
}

.login-card .login-logo{
    text-align:center;
    margin-bottom:32px;
}

.login-card .login-logo .logo-icon{
    width:56px;
    height:56px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#000;
    margin:0 auto 16px;
}

.login-card .login-logo h1{
    font-size:24px;
    font-weight:700;
    color:var(--text);
}

.login-card .login-logo p{
    font-size:13px;
    color:var(--text-muted);
    margin-top:4px;
}

.login-card .form-group{
    margin-bottom:16px;
}

.login-card .form-control{
    padding:13px 16px;
    font-size:14px;
}

.login-card .login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
    font-size:13px;
}

.login-card .login-options label{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    cursor:pointer;
}

.login-card .login-options input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:var(--gold);
}

.login-card .login-options a{
    color:var(--gold);
    text-decoration:none;
    font-weight:500;
}

.login-card .login-options a:hover{
    text-decoration:underline;
}

.login-card .btn-login{
    width:100%;
    padding:14px;
    background:var(--gold);
    color:#000;
    border:none;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
}

.login-card .btn-login:hover{
    background:var(--gold-light);
    transform:translateY(-1px);
    box-shadow:var(--shadow-gold);
}

.login-card .login-footer{
    text-align:center;
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--border);
}

.login-card .login-footer p{
    font-size:12px;
    color:var(--text-dim);
}

.login-card .login-footer .demo-link{
    display:inline-block;
    margin-top:8px;
    color:var(--gold);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.login-card .login-footer .demo-link:hover{
    text-decoration:underline;
}

/* ─── PACKING SCREEN ─── */
.pack-progress{
    margin-bottom:24px;
}

.pack-progress .progress-bar-track{
    height:8px;
    background:var(--bg-hover);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:8px;
}

.pack-progress .progress-bar-fill{
    height:100%;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    border-radius:4px;
    transition:width 0.5s ease;
}

.pack-progress .progress-text{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--text-muted);
}

.pack-item{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 20px;
    margin-bottom:12px;
    transition:var(--transition);
}

.pack-item:hover{
    border-color:var(--border-hover);
}

.pack-item.completed{
    border-color:rgba(74,222,128,0.2);
    background:rgba(74,222,128,0.03);
}

.pack-item .pack-item-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.pack-item .pack-item-name{
    font-weight:600;
    font-size:14px;
}

.pack-item .pack-item-meta{
    font-size:12px;
    color:var(--text-dim);
}

.pack-item .pack-item-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pack-item .pack-qty-group{
    display:flex;
    align-items:center;
    gap:8px;
}

.pack-item .qty-btn{
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    background:var(--bg-hover);
    border:1px solid var(--border);
    color:var(--text);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
}

.pack-item .qty-btn:hover{
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
}

.pack-item .qty-value{
    width:48px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:var(--gold);
}

.pack-item .pack-status{
    font-size:12px;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
}

.pack-item .pack-status.pending{
    background:var(--warning-bg);
    color:var(--warning);
}

.pack-item .pack-status.done{
    background:var(--success-bg);
    color:var(--success);
}

/* ─── DELIVERY SCREEN ─── */
.delivery-info-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
}

.delivery-info-card h4{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
}

.delivery-info-card h4 i{
    color:var(--gold);
}

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    font-size:13.5px;
}

.info-row:last-child{
    border-bottom:none;
}

.info-row .info-label{
    color:var(--text-muted);
}

.info-row .info-value{
    font-weight:600;
    color:var(--text);
}

.check-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:var(--bg-hover);
    border-radius:var(--radius-sm);
    margin-bottom:10px;
    cursor:pointer;
    transition:var(--transition);
}

.check-item:hover{
    background:var(--bg-input);
}

.check-item input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--gold);
    flex-shrink:0;
}

.check-item label{
    font-size:13.5px;
    color:var(--text);
    cursor:pointer;
    flex:1;
}

.signature-pad{
    height:160px;
    border:2px dashed var(--border-hover);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-dim);
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
    background:var(--bg-hover);
}

.signature-pad:hover{
    border-color:var(--gold);
    color:var(--gold);
}

.photo-upload{
    height:160px;
    border:2px dashed var(--border-hover);
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--text-dim);
    cursor:pointer;
    transition:var(--transition);
    background:var(--bg-hover);
    gap:8px;
}

.photo-upload:hover{
    border-color:var(--gold);
    color:var(--gold);
}

.photo-upload i{
    font-size:32px;
}

/* ─── COLLECTION SCREEN ─── */
.collect-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:20px;
}

.collect-card h4{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
}

.collect-card h4 i{
    color:var(--gold);
}

.collect-card.damage{
    border-color:rgba(248,113,113,0.2);
    background:rgba(248,113,113,0.03);
}

.collect-card.damage h4 i{
    color:var(--danger);
}

/* ─── CLIENT CARDS ─── */
.client-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:var(--transition);
    cursor:pointer;
    height:100%;
}

.client-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--border-hover);
}

.client-card .client-header{
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:#000;
    padding:20px;
}

.client-card .client-header h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}

.client-card .client-header .client-type{
    font-size:12px;
    opacity:0.8;
    font-weight:500;
}

.client-card .client-body{
    padding:20px;
}

.client-card .client-body p{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-size:13px;
    color:var(--text-muted);
}

.client-card .client-body p i{
    width:16px;
    text-align:center;
    color:var(--text-dim);
}

.client-card .client-body hr{
    border:none;
    border-top:1px solid var(--border);
    margin:14px 0;
}

/* ─── PROPERTY CARDS ─── */
.property-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:var(--transition);
    cursor:pointer;
    height:100%;
}

.property-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--border-hover);
}

.property-card .property-image{
    height:160px;
    background:linear-gradient(135deg,#2a2a35,#1a1a22);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:var(--gold);
    opacity:0.6;
}

.property-card .property-body{
    padding:20px;
}

.property-card .property-body h4{
    font-size:15px;
    font-weight:600;
    color:var(--text);
    margin-bottom:4px;
}

.property-card .property-body .property-client{
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:12px;
}

.property-card .property-body .property-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
}

.property-card .property-body .property-meta span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--text-muted);
}

.property-card .property-body .property-meta span i{
    width:16px;
    text-align:center;
    color:var(--text-dim);
}

.property-card .property-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:14px;
    border-top:1px solid var(--border);
}

/* ─── ORDER VIEW ─── */
.timeline{
    position:relative;
    padding-left:24px;
}

.timeline::before{
    content:'';
    position:absolute;
    left:7px;
    top:4px;
    bottom:4px;
    width:2px;
    background:var(--border);
}

.timeline-item{
    position:relative;
    padding-bottom:24px;
}

.timeline-item::before{
    content:'';
    position:absolute;
    left:-21px;
    top:2px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--bg-card);
    border:2px solid var(--gold);
}

.timeline-item.completed::before{
    background:var(--gold);
}

.timeline-item strong{
    font-size:13.5px;
    color:var(--text);
    display:block;
    margin-bottom:2px;
}

.timeline-item p{
    font-size:12px;
    color:var(--text-dim);
}

/* ─── FINANCIAL TABLE ─── */
.fin-table{
    width:100%;
}

.fin-table td{
    padding:10px 0;
    font-size:13.5px;
    color:var(--text-muted);
    border-bottom:1px solid var(--border);
}

.fin-table td:last-child{
    text-align:right;
    color:var(--text);
    font-weight:500;
}

.fin-table tr:last-child td{
    border-bottom:none;
    padding-top:14px;
}

.fin-table tr:last-child td:first-child{
    color:var(--text);
    font-weight:600;
}

.fin-table tr:last-child td:last-child{
    color:var(--gold);
    font-size:16px;
    font-weight:700;
}

/* ─── TABS ─── */
.tabs{
    display:flex;
    gap:4px;
    border-bottom:1px solid var(--border);
    margin-bottom:24px;
}

.tab-btn{
    padding:12px 18px;
    background:transparent;
    border:none;
    color:var(--text-muted);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    transition:var(--transition);
    font-family:inherit;
}

.tab-btn:hover{
    color:var(--text);
}

.tab-btn.active{
    color:var(--gold);
}

.tab-btn.active::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--gold);
    border-radius:2px 2px 0 0;
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:block;
    animation:fadeIn 0.25s ease;
}

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

/* ─── TOGGLE SWITCH ─── */
.toggle-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    border-bottom:1px solid var(--border);
}

.toggle-row:last-child{
    border-bottom:none;
}

.toggle-row .toggle-label{
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    margin-bottom:2px;
}

.toggle-row .toggle-desc{
    font-size:12px;
    color:var(--text-dim);
}

.toggle-switch{
    position:relative;
    width:44px;
    height:24px;
    flex-shrink:0;
    cursor:pointer;
}

.toggle-switch input{
    opacity:0;
    width:0;
    height:0;
}

.toggle-slider{
    position:absolute;
    inset:0;
    background:var(--bg-hover);
    border:1px solid var(--border);
    border-radius:24px;
    transition:var(--transition);
}

.toggle-slider::before{
    content:'';
    position:absolute;
    width:16px;
    height:16px;
    left:3px;
    top:3px;
    background:var(--text-dim);
    border-radius:50%;
    transition:var(--transition);
}

.toggle-switch input:checked + .toggle-slider{
    background:var(--gold-glow);
    border-color:var(--gold);
}

.toggle-switch input:checked + .toggle-slider::before{
    transform:translateX(20px);
    background:var(--gold);
}

/* ─── SETTINGS ─── */
.settings-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:24px;
    align-items:start;
}

.settings-nav{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:10px;
}

.settings-nav button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:11px 14px;
    background:transparent;
    border:none;
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    font-size:13px;
    font-weight:500;
    text-align:left;
    cursor:pointer;
    transition:var(--transition);
    font-family:inherit;
    margin-bottom:2px;
}

.settings-nav button:hover{
    background:var(--bg-hover);
    color:var(--text);
}

.settings-nav button.active{
    background:var(--gold-glow);
    color:var(--gold);
}

.avatar-lg{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:700;
    color:#000;
}

.danger-zone{
    border:1px solid rgba(248,113,113,0.2);
    background:rgba(248,113,113,0.03);
    border-radius:var(--radius-lg);
    padding:20px 24px;
}

/* ─── INVENTORY ─── */
.stock-bar-track{
    width:100%;
    height:6px;
    background:var(--bg-hover);
    border-radius:3px;
    overflow:hidden;
}

.stock-bar-fill{
    height:100%;
    border-radius:3px;
}

.stock-bar-fill.ok{background:var(--success);}
.stock-bar-fill.low{background:var(--warning);}
.stock-bar-fill.critical{background:var(--danger);}

.filter-pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.filter-pill{
    padding:8px 16px;
    border-radius:20px;
    background:var(--bg-card);
    border:1px solid var(--border);
    color:var(--text-muted);
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.filter-pill:hover{
    border-color:var(--border-hover);
    color:var(--text);
}

.filter-pill.active{
    background:var(--gold-glow);
    border-color:var(--gold);
    color:var(--gold);
}

/* ─── EMPTY STATE ─── */
.empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--text-dim);
}

.empty-state i{
    font-size:36px;
    margin-bottom:14px;
    opacity:0.5;
}

.empty-state p{
    font-size:13.5px;
}

/* ─── MOBILE SIDEBAR TOGGLE (JS-driven) ─── */
.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:99;
}

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

/* ─── RESPONSIVE ─── */
@media(max-width:991px){
    .sidebar{
        transform:translateX(-100%);
    }
    .sidebar.open{
        transform:translateX(0);
    }
    .main{
        margin-left:0;
    }
    .kpi-grid{
        grid-template-columns:repeat(2,1fr);
    }
    #menuToggle{
        display:flex !important;
    }
}

@media(max-width:768px){
    .content{
        padding:16px;
    }
    .kpi-grid{
        grid-template-columns:1fr;
    }
    .topbar{
        padding:0 16px;
    }
    .search-box input{
        width:180px;
    }
    .search-box input:focus{
        width:200px;
    }
    .settings-layout{
        grid-template-columns:1fr;
    }
}