:root { --navy:#0a1628; --cyan:#29B6E8; --orange:#f97316; }

body { background:#f4f6fa; }

/* ---- Login ---- */
.login-page { display:grid; place-items:center; min-height:100vh; background:linear-gradient(135deg,#0a1628,#13243d); }
.login-card { width:100%; max-width:380px; border:0; border-radius:1rem; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.brand { color:var(--navy); font-weight:700; letter-spacing:.5px; }
.login-card .brand { color:var(--navy); }
.brand span { color:var(--cyan); }

/* ---- Layout ---- */
.sidebar { background:var(--navy); min-height:100vh; width:240px; position:fixed; top:0; left:0; overflow-y:auto; }
.sidebar .brand { color:#fff; }
.sidebar a { color:#aab7c4; text-decoration:none; display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-radius:.5rem; margin:.15rem .6rem; font-size:.92rem; }
.sidebar a:hover, .sidebar a.active { background:rgba(41,182,232,.15); color:#fff; }
.sidebar a.disabled { opacity:.55; pointer-events:none; }
.sidebar a i { width:18px; text-align:center; }
.sidebar-section { color:#5a6b7d; font-size:.7rem; }

.content { margin-left:240px; padding:1.5rem 2rem; }
.topbar { background:#fff; border-radius:.75rem; padding:.75rem 1.25rem; margin-bottom:1.25rem; box-shadow:0 2px 10px rgba(10,22,40,.05); }

.card { border:0; border-radius:.9rem; box-shadow:0 4px 18px rgba(10,22,40,.06); }
.stat-card .icon { width:48px; height:48px; border-radius:.7rem; display:grid; place-items:center; font-size:1.3rem; }

.btn-cyan { background:var(--cyan); border-color:var(--cyan); color:#fff; }
.btn-cyan:hover { background:#1ea3d4; border-color:#1ea3d4; color:#fff; }
.bg-cyan-subtle { background:#e0f4fc; }
.text-cyan { color:#1ea3d4; }

.table thead th { background:#f8fafc; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:#64748b; }

@media (max-width:768px){
    .sidebar { position:static; width:100%; min-height:auto; }
    .content { margin-left:0; padding:1rem; }
}

/* ---- Print (invoices / POs / quotations) ---- */
@media print {
    .sidebar, .topbar, .no-print, .alert { display:none !important; }
    .content { margin-left:0 !important; padding:0 !important; }
    .card { box-shadow:none !important; border:1px solid #ddd !important; }
    body { background:#fff !important; }
}