:root {
    --teal: #0d7d6f;
    --teal-dark: #0a5f54;
    --teal-light: #e6f5f3;
    --accent: #ff8a3d;
    --danger: #d9534f;
    --bg: #f4f7f6;
    --sidebar-bg: #0a3d38;
    --sidebar-text: #cfe8e3;
}

* { box-sizing: border-box; }
body { background: var(--bg); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* LOGIN */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg, var(--teal-dark), var(--teal)); }
.login-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background:#fff; border-radius: 16px; padding: 40px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-brand { text-align:center; margin-bottom: 24px; }
.login-icon { font-size: 42px; color: var(--teal); }
.btn-teal { background: var(--teal); border-color: var(--teal); color:#fff; }
.btn-teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); color:#fff; }
.btn-outline-teal { background: transparent; border: 1px solid var(--teal); color: var(--teal); }
.btn-outline-teal:hover { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); }

/* SHELL */
.app-shell { display:flex; min-height:100vh; }
.sidebar { width: 250px; background: var(--sidebar-bg); color: var(--sidebar-text); flex-shrink:0; position: sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding: 20px; font-size:1.15rem; font-weight:700; color:#fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-icon { font-size: 1.5rem; }
.sidebar-nav { padding: 12px 0; }
.sidebar-nav a { display:flex; align-items:center; gap:10px; padding: 11px 20px; color: var(--sidebar-text); text-decoration:none; font-size:.92rem; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active { background: rgba(255,255,255,.1); color:#fff; border-left-color: var(--accent); font-weight:600; }
.main-area { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 24px; background:#fff; border-bottom:1px solid #e5e5e5; position:sticky; top:0; z-index:10; }
.user-avatar { width:34px; height:34px; border-radius:50%; background: var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.content-area { padding: 24px; flex:1; }

/* CARDS / WIDGETS */
.stat-card { background:#fff; border-radius:12px; padding:20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 4px solid var(--teal); }
.stat-card .stat-value { font-size: 1.6rem; font-weight:700; color: var(--teal-dark); }
.stat-card.warn { border-left-color: var(--accent); }
.stat-card.danger { border-left-color: var(--danger); }
.card { border:none; border-radius:12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.table thead th { background: var(--teal-light); color: var(--teal-dark); border-bottom:none; font-size:.82rem; text-transform:uppercase; letter-spacing:.02em; }
.badge-expiring { background: var(--accent); }
.badge-expired { background: var(--danger); }
.badge-lowstock { background:#e0a800; }

/* POS SCREEN */
.pos-grid { display:grid; grid-template-columns: 1fr 380px; gap: 16px; height: calc(100vh - 140px); }
.pos-products { overflow-y:auto; }
.pos-cart { background:#fff; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.pos-cart-items { flex:1; overflow-y:auto; padding: 10px 14px; }
.pos-cart-footer { border-top:1px solid #eee; padding: 14px; }
.product-tile { background:#fff; border-radius:10px; padding:12px; cursor:pointer; border:1px solid #eee; transition: all .15s; height:100%; }
.product-tile:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(13,125,111,.15); transform: translateY(-2px); }
.product-tile .rx-badge { font-size:.65rem; }
.cart-line { display:flex; justify-content:space-between; align-items:center; padding: 8px 0; border-bottom: 1px dashed #eee; font-size:.88rem; }
.qty-btn { width:26px; height:26px; padding:0; line-height:1; }

@media (max-width: 991px) {
    .sidebar { position: fixed; left: -260px; z-index: 1050; transition: left .2s; }
    .sidebar.show { left: 0; }
    .pos-grid { grid-template-columns: 1fr; height:auto; }
}