:root {
    --sidebar-width: 250px;
    --accent: #ff9f43;
    --accent-soft: #fff3e6;
    --ink: #212b36;
    --muted: #6b7280;
    --line: #e8eaed;
    --bs-primary: #ff9f43;
    --bs-link-color: #e8801a;
}

body { background: #fafbfe; color: var(--ink); font-size: .9rem; }

.app-shell { display: flex; min-height: 100vh; }

/* ---- Sidebar (light, grouped) ---- */
.sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 1rem;
}
.sidebar-brand { padding: 1.1rem 1.25rem; font-weight: 700; font-size: 1.15rem; color: var(--ink); display: flex; gap: .5rem; align-items: center; }
.sidebar-brand i { color: var(--accent); font-size: 1.4rem; }
.nav-group { padding: 1rem 1.25rem .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9aa1ab; }
.sidebar .nav-link { color: #4b5563; margin: .1rem .75rem; padding: .5rem .75rem; border-radius: .5rem; display: flex; align-items: center; gap: .65rem; }
.sidebar .nav-link i { font-size: 1.05rem; }
.sidebar .nav-link:hover { background: #f6f7f9; color: var(--ink); }
.sidebar .nav-link.active { background: var(--accent-soft); color: #e8801a; font-weight: 600; }
.sidebar .nav-link.disabled { opacity: .55; cursor: not-allowed; }
.phase-tag { margin-left: auto; font-size: .65rem; padding: .05rem .4rem; border-radius: .6rem; background: #eef0f3; color: #6b7280; }

/* ---- Top bar & content ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; background: #fff; border-bottom: 1px solid var(--line); }
.page-title { font-size: 1.1rem; margin: 0; font-weight: 600; }
.content { padding: 1.5rem; }

.btn-orange { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-orange:hover { background: #f08c2a; border-color: #f08c2a; color: #fff; }
.text-orange { color: var(--accent); }

.card { border: 1px solid var(--line); border-radius: .75rem; }

/* ---- Stat cards ---- */
.stat-card { border-radius: .75rem; padding: 1.1rem 1.25rem; color: #fff; height: 100%; }
.stat-card .label { opacity: .9; font-size: .8rem; }
.stat-card .value { font-size: 1.5rem; font-weight: 700; }
.stat-orange { background: linear-gradient(135deg, #ff9f43, #ff8a1f); }
.stat-navy { background: linear-gradient(135deg, #1f3a5f, #0f2a4a); }
.stat-teal { background: linear-gradient(135deg, #1ba08a, #0d8a76); }
.stat-blue { background: linear-gradient(135deg, #2f6df6, #1c55d8); }
.stat-plain .value { font-size: 1.3rem; font-weight: 700; }
.stat-plain .label { color: var(--muted); }
.stat-icon { width: 2.5rem; height: 2.5rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); font-size: 1.2rem; margin-bottom: .6rem; }
.stat-plain .stat-icon { background: var(--accent-soft); color: #e8801a; }

@media (max-width: 991.98px) {
    .sidebar { position: fixed; z-index: 1040; left: calc(-1 * var(--sidebar-width)); transition: left .2s; box-shadow: 0 0 20px rgba(0,0,0,.1); }
    .sidebar.open { left: 0; }
}

/* ---- Login ---- */
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fff7ee; }
.login-card { width: 100%; max-width: 400px; margin: 1rem; }

/* ---- POS ---- */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; max-height: 62vh; overflow-y: auto; }
.pos-tile { cursor: pointer; transition: box-shadow .1s; }
.pos-tile:hover, .pos-tile:focus { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.pos-cart { position: sticky; top: 1rem; }
@media (max-width: 1199.98px) { .pos-cart { position: static; } .pos-grid { max-height: none; } }
@media print { .sidebar, .topbar, .d-print-none { display: none !important; } .content { padding: 0; } }