:root{
  --brand-900:#0b3a43;
  --brand-700:#0f5d6b;
  --brand-500:#14a3b8;
  --brand-100:#d8f1f5;
  --bg:#f4f7f9;
  --surface:#ffffff;
  --border:#e2e8ec;
  --text:#1a2529;
  --muted:#66788a;
  --success:#0f9d58;
  --danger:#d9372a;
  --warn:#e6a700;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(11,58,67,.06), 0 1px 3px rgba(11,58,67,.08);
  --shadow-md:0 4px 12px rgba(11,58,67,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-700);text-decoration:none}
a:hover{color:var(--brand-500)}
h1,h2,h3{letter-spacing:-.01em;margin:0 0 .5rem}
h1{font-size:1.6rem;font-weight:700}
h2{font-size:1.2rem;font-weight:600}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(90deg,var(--brand-900),var(--brand-700));
  color:#fff;
  padding:0 24px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brand-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand-500),#0dd0c4);
  display:grid;place-items:center;font-weight:800;color:#04252b;font-size:.95rem;
}
.topbar nav{display:flex;gap:4px;align-items:center}
.topbar nav a{
  color:#d6ecf0;padding:8px 12px;border-radius:8px;font-size:.92rem;font-weight:500;
}
.topbar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.topbar nav a.active{background:rgba(255,255,255,.14);color:#fff}
.topbar .who{color:#a8cdd4;font-size:.85rem;margin-left:12px}

/* ---------- Layout ---------- */
.container{max-width:1180px;margin:28px auto;padding:0 20px}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px;
}
.stat{padding:18px 22px}
.stat span{display:block;color:var(--muted);font-size:.85rem;font-weight:500;margin-bottom:4px}
.stat strong{font-size:1.7rem;font-weight:700;color:var(--brand-900)}
.stat .unit{font-size:.9rem;color:var(--muted);font-weight:500;margin-left:4px}

/* ---------- Forms ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;color:var(--text)}
input,select,textarea{
  padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  font:inherit;color:var(--text);background:#fff;transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(20,163,184,.18);
}
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border:0;border-radius:8px;cursor:pointer;
  font:inherit;font-weight:600;font-size:.92rem;
  transition:background .15s, transform .05s;
}
button:active,.btn:active{transform:translateY(1px)}
.btn-primary,button[type=submit]{background:var(--brand-700);color:#fff}
.btn-primary:hover,button[type=submit]:hover{background:var(--brand-900)}
.btn-ghost{background:transparent;color:var(--brand-700);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--brand-100)}
.btn-danger{background:var(--danger);color:#fff}
.btn-accent{background:var(--brand-500);color:#fff}
.btn-accent:hover{background:#0f8ea1}
.btn-lg{padding:14px 22px;font-size:1rem}
button:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Alerts ---------- */
.alert{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:.92rem}
.alert-error,.alert-danger{background:#fde2e1;color:#8c1c14}
.alert-info{background:var(--brand-100);color:var(--brand-900)}
.alert-success{background:#e3f7e9;color:#0a6b3d}
.alert-warn{background:#fff4d6;color:#7a5a00}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.table th{background:#f8fafb;color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.table tr:hover td{background:#fafdfe}

/* ---------- Login ---------- */
.login-page{
  display:grid;place-items:center;min-height:100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(20,163,184,.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(15,93,107,.35), transparent 50%),
    linear-gradient(135deg,#082b33 0%, #0b3a43 55%, #0f5d6b 100%);
  padding:20px;
}
.login-card{
  background:#fff;padding:36px 32px;border-radius:14px;
  box-shadow:0 20px 50px rgba(4,20,26,.45);
  width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px;
}
.login-card .brand{justify-content:center;margin-bottom:8px;font-size:1.4rem;color:var(--brand-900)}
.login-card .brand-mark{width:40px;height:40px;font-size:1.1rem}
.login-card .subtitle{text-align:center;color:var(--muted);font-size:.88rem;margin-top:-8px;margin-bottom:6px}
.login-card button{width:100%;padding:12px;font-size:1rem}
.login-foot{text-align:center;color:var(--muted);font-size:.78rem;margin-top:6px}
/* --- Improved Navigation --- */
.topbar {
    padding: 0 20px;
    height: 64px;
}

.brand {
    font-size: 1.1rem;
}

.topbar nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
}

/* Base nav link */
.topbar nav > a, .nav-dropdown > a {
    color: #cbe1e6;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}

.topbar nav > a:hover, .nav-dropdown > a:hover, 
.topbar nav > a.active, .nav-dropdown > a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Dropdown Container */
.nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 1px solid #e2e8ec;
    z-index: 1000;
    padding: 8px 0;
    animation: fadeIn 0.15s ease;
}

/* Show dropdown on hover */
.nav-dropdown:hover .dropdown-menu {
    display: block;
}

/* Dropdown Links */
.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
}

.dropdown-menu a:hover {
    background: #f4f7f9;
    color: var(--brand-700);
}

/* Add a small arrow to dropdowns */
.nav-dropdown > a::after {
    content: '▾';
    font-size: 0.7rem;
    margin-left: 4px;
    opacity: 0.7;
}

/* Make POS button stand out */
.nav-pos-btn {
    background: var(--brand-500) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.nav-pos-btn:hover {
    background: #0f8ea1 !important;
    transform: translateY(-1px);
}

/* Cash Up button */
.nav-cashup {
    color: #f59e0b !important;
    font-weight: 600 !important;
}
.nav-cashup:hover {
    color: #fbbf24 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Masking Figures */
.mask-data {
    filter: blur(5px);
    user-select: none;
    transition: filter 0.3s ease;
}