:root{--sidebar-width:250px;--sidebar-bg:#1a2035;--sidebar-text:#b0bec5;--sidebar-hover:#252f48;--sidebar-active:#f59e0b;--topbar-h:60px;}
body{background:#f0f4f8;font-family:'Segoe UI',sans-serif;font-size:.9rem;}
/* Sidebar */
.wrapper{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--sidebar-text);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:1000;transition:.3s;}
.sidebar-brand{padding:18px 20px;border-bottom:1px solid #2d3a55;display:flex;align-items:center;gap:10px;color:#fff;font-size:1.1rem;font-weight:700;}
.sidebar-brand i{color:var(--sidebar-active);font-size:1.4rem;}
.sidebar .nav-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#607080;padding:16px 20px 6px;}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--sidebar-text);border-radius:6px;margin:2px 10px;font-size:.85rem;transition:.15s;text-decoration:none;}
.sidebar .nav-link:hover{background:var(--sidebar-hover);color:#fff;}
.sidebar .nav-link.active{background:var(--sidebar-active);color:#1a2035;font-weight:600;}
.sidebar .nav-link i{width:18px;text-align:center;font-size:.9rem;}
/* Main content */
.main-content{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:.3s;}
.topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:900;}
.topbar .toggle-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;}
.content{padding:24px;flex:1;}
/* Cards */
.stat-card{border:none;border-radius:12px;padding:20px;color:#fff;position:relative;overflow:hidden;}
.stat-card .icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:3rem;opacity:.2;}
.stat-card h3{font-size:1.5rem;font-weight:700;margin:0;}
.stat-card p{font-size:.8rem;margin:0;opacity:.85;}
.card{border:none;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.07);}
.card-header{background:#fff;border-bottom:1px solid #f0f0f0;font-weight:600;border-radius:12px 12px 0 0!important;}
/* Tables */
.table-hover tbody tr:hover{background:#f8fafc;}
.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;border-top:none;}
/* Badges */
.badge{font-weight:500;font-size:.72rem;}
/* Buttons */
.btn-action{padding:4px 10px;font-size:.78rem;}
/* Login page */
.login-wrapper{min-height:100vh;background:linear-gradient(135deg,#1a2035 0%,#252f48 100%);display:flex;align-items:center;justify-content:center;}
.login-card{background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.3);padding:40px;width:100%;max-width:420px;}
.login-logo{font-size:2.5rem;color:var(--sidebar-active);margin-bottom:8px;}
/* Food grid */
.food-card{transition:.2s;} .food-card:hover{transform:translateY(-2px);}
.food-img{width:100%;height:160px;object-fit:cover;border-radius:8px 8px 0 0;}
.food-img-placeholder{width:100%;height:160px;background:#f0f4f8;display:flex;align-items:center;justify-content:center;font-size:3rem;border-radius:8px 8px 0 0;}
/* Order form */
#order-items-table .remove-row{cursor:pointer;}
/* Quotation print */
@media print{.no-print{display:none!important;} .sidebar,.topbar{display:none!important;} .main-content{margin:0!important;} .content{padding:0!important;}}
/* Sidebar collapsed */
.sidebar.collapsed{width:60px;}
.sidebar.collapsed .sidebar-brand span,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-link span{display:none;}
.sidebar.collapsed+.main-content{margin-left:60px;}
/* Responsive */
@media(max-width:768px){.sidebar{left:-250px;} .sidebar.show{left:0;} .main-content{margin-left:0!important;}}
/* Page header */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.page-header h4{font-weight:700;color:#1a2035;margin:0;}
/* Avatar */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--sidebar-active);display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a2035;font-size:.9rem;}
/* Timeline */
.timeline-item{border-left:2px solid #e2e8f0;padding-left:16px;margin-bottom:16px;position:relative;}
.timeline-item::before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--sidebar-active);}
/* Chart container */
.chart-container{position:relative;height:260px;}

/* Extra small button */
.btn-xs {
    padding: 2px 7px;
    font-size: 0.72rem;
    border-radius: 4px;
    line-height: 1.4;
}