:root{
    --brand: #cc2b2b;
    --brand-dark: #a51f1f;
    --ink: #1f2430;
    --muted: #6b7280;
    --bg: #f4f5f8;
    --card: #ffffff;
    --border: #e7e8ee;
    --radius: 14px;
}
*{box-sizing:border-box;}
body{
    font-family:'Poppins', system-ui, -apple-system, sans-serif;
    background:var(--bg);
    color:var(--ink);
    margin:0;
}
a{text-decoration:none;color:inherit;}

/* Layout shell */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
    width:250px; background:#161923; color:#fff; display:flex; flex-direction:column;
    position:fixed; top:0; bottom:0; left:0; z-index:1000; transition:transform .2s ease;
}
.sidebar-brand{display:flex; align-items:center; gap:.6rem; padding:1.25rem 1rem; border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar-brand img{width:38px; height:38px; object-fit:cover; border-radius:8px; background:#fff;}
.brand-fallback{width:38px; height:38px; border-radius:8px; background:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.1rem;}
.brand-name{font-weight:600; font-size:.95rem; line-height:1.2;}
.brand-sub{font-size:.72rem; color:#9aa0b4;}
.sidebar-nav{flex:1; padding:1rem .75rem; overflow-y:auto;}
.sidebar-nav a{display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:10px; color:#c7cadb; font-size:.9rem; margin-bottom:.2rem;}
.sidebar-nav a i{font-size:1rem; width:18px;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar-nav a.active{background:var(--brand); color:#fff;}
.sidebar-heading{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#6f7488; margin:1rem .75rem .35rem;}
.sidebar-logout{padding:.85rem; border-top:1px solid rgba(255,255,255,.08);}
.sidebar-logout button{width:100%; background:none; border:1px solid rgba(255,255,255,.15); color:#c7cadb; padding:.55rem; border-radius:10px; font-size:.85rem; display:flex; gap:.5rem; align-items:center; justify-content:center;}
.sidebar-logout button:hover{background:rgba(255,255,255,.08); color:#fff;}

.main-area{margin-left:250px; flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
    display:flex; align-items:center; justify-content:space-between; padding:1rem 1.75rem;
    background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.page-title{font-size:1.15rem; font-weight:600; margin:0;}
.topbar-user{font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.4rem;}
.sidebar-toggle{background:none; border:none; font-size:1.4rem;}
.page-content{padding:1.75rem;}

@media (max-width: 991.98px){
    .sidebar{transform:translateX(-100%);}
    .app-shell.sidebar-open .sidebar{transform:translateX(0);}
    .main-area{margin-left:0;}
}

/* Cards */
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; margin-bottom:1.25rem; box-shadow:0 1px 2px rgba(16,24,40,.02);}
.panel-title{font-weight:600; font-size:1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;}
.panel-title i{color:var(--brand);}

.stat-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem;}
.stat-label{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.stat-value{font-size:1.5rem; font-weight:700; margin-top:.2rem;}
.stat-value.positive{color:#12875e;}
.stat-value.negative{color:var(--brand-dark);}

/* Table */
.table thead th{font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid var(--border); font-weight:600;}
.table td, .table th{vertical-align:middle;}
.table-modern{background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);}

.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn-brand:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;}
.btn-outline-brand{border-color:var(--brand); color:var(--brand);}
.btn-outline-brand:hover{background:var(--brand); color:#fff;}

.till-grid input, .line-items-table input, .line-items-table select{background:#fbfbfd;}
.remove-row{color:#c0392b; cursor:pointer; font-size:1.1rem;}
.total-box{background:#161923; color:#fff; border-radius:var(--radius); padding:1.4rem; text-align:center;}
.total-box .amount{font-size:2rem; font-weight:700;}
.total-box .label{font-size:.8rem; opacity:.75; text-transform:uppercase; letter-spacing:.05em;}

.auth-wrapper{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #161923, var(--brand-dark)); padding:1rem;}
.auth-card{background:#fff; border-radius:18px; padding:2.5rem; width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.25);}