/* ===== Base ===== */
body {
    background-color: #f4f6f9;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ===== Navbar ===== */
.navbar-brand { font-size: 1.25rem; letter-spacing: 0.5px; }
.navbar-dark .nav-link { transition: opacity 0.2s; }
.navbar-dark .nav-link:hover { opacity: 0.85; }

/* ===== Cards ===== */
.card { border-radius: 0.5rem; border: 1px solid rgba(0,0,0,0.08); }
.card-header { font-weight: 600; }

/* ===== Tables ===== */
.table th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: #6c757d; }
.table-hover tbody tr:hover { background-color: rgba(67, 97, 238, 0.04); }

/* ===== Product Grid (POS) ===== */
.product-item { transition: transform 0.15s, box-shadow 0.15s; }
.product-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }

/* ===== Badges ===== */
.badge { font-size: 0.75rem; font-weight: 500; }

/* ===== Buttons ===== */
.btn { border-radius: 0.375rem; transition: all 0.15s; }

/* ===== Alerts ===== */
.alert { border-radius: 0.375rem; }

/* ===== Login Card ===== */
.card.shadow { max-width: 420px; margin: 0 auto; }

/* ===== Responsive helpers ===== */
@media (max-width: 768px) {
    .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
}