/* ── RetailPro Design System ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --sidebar-bg:#1a1f2e;
  --page-bg:#f7f3ef;
  --card-bg:#ffffff;
  --accent:#f97316;
  --accent-hover:#ea6c0a;
  --primary:#3b82f6;
  --primary-light:#eff6ff;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --text-primary:#111827;
  --text-muted:#6b7280;
  --border-light:#e5e7eb;
  --shadow-card:0 2px 12px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --radius-card:16px;
  --radius-pill:50px;
  --sidebar-w:72px;
  --topbar-h:68px;
  --font-main:'Plus Jakarta Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-main);font-size:14px;background:var(--page-bg);color:var(--text-primary);line-height:1.5}
a{text-decoration:none;color:inherit}

/* ── LAYOUT ── */
.app-wrapper{display:flex;min-height:100vh}
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.content-area{padding:24px;flex:1}

/* ── ICON SIDEBAR ── */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;z-index:100;padding:16px 0;transition:transform .3s}
.sidebar-header{margin-bottom:24px}
.logo-icon{width:40px;height:40px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.sidebar-nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0 10px}
.nav-item{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:18px;transition:all .2s;position:relative;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.nav-item.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(249,115,22,.4)}
.nav-item .nav-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid var(--sidebar-bg)}
.nav-tooltip{position:absolute;left:calc(100% + 12px);background:#1e293b;color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:200}
.nav-item:hover .nav-tooltip{opacity:1}
.nav-divider{width:32px;height:1px;background:rgba(255,255,255,.08);margin:8px 0}
.sidebar-footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 10px}
.sidebar-footer .nav-item{width:48px;height:48px}

/* ── TOPBAR ── */
.topbar{height:var(--topbar-h);background:var(--page-bg);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.06)}
.topbar-left{display:flex;flex-direction:column;gap:3px}
.topbar-welcome{font-size:20px;font-weight:700;color:var(--text-primary)}
.topbar-sub{font-size:13px;color:var(--text-muted)}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-pill);padding:8px 16px;min-width:220px;box-shadow:var(--shadow-card)}
.topbar-search i{color:var(--text-muted);font-size:13px}
.topbar-search input{border:none;outline:none;background:transparent;font-size:13px;font-family:var(--font-main);color:var(--text-primary);width:100%}
.topbar-search input::placeholder{color:var(--text-muted)}
.topbar-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border-light);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;transition:all .18s;position:relative;box-shadow:var(--shadow-card)}
.topbar-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.topbar-btn .badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;border-radius:50%;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid var(--page-bg)}
.topbar-user{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-pill);padding:6px 14px 6px 6px;cursor:default;box-shadow:var(--shadow-card)}
.topbar-user .t-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.topbar-user .t-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.topbar-user .t-role{font-size:11px;color:var(--text-muted)}
.time-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-pill);padding:8px 14px;font-size:12px;color:var(--text-muted);font-weight:500;box-shadow:var(--shadow-card)}
.time-chip i{color:var(--accent);font-size:12px}