:root {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-hover-color: #3730a3;

    --app-bg: #f7f8fa;
    --app-surface: #ffffff;
    --app-border: #e5e7eb;
    --app-border-strong: #d1d5db;
    --app-text: #111827;
    --app-muted: #6b7280;
    --app-subtle: #f9fafb;

    --app-radius: 0.6rem;
    --app-radius-sm: 0.45rem;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar ---------- */
.navbar.app-navbar {
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e293b;
    padding: 0.6rem 0;
}

.navbar.app-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.15rem;
    color: #fff;
}

.navbar.app-navbar .nav-link {
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: var(--app-radius-sm);
    margin: 0 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.navbar.app-navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff !important;
}

.navbar.app-navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

.navbar.app-navbar .dropdown-menu {
    border-color: var(--app-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-radius: var(--app-radius);
    padding: 0.4rem;
    margin-top: 0.4rem;
}

.navbar.app-navbar .dropdown-item {
    border-radius: var(--app-radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Page header ---------- */
.page-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header h1,
.page-header h2 {
    margin-bottom: 0.15rem;
    font-weight: 600;
    font-size: 1.55rem;
    letter-spacing: -0.015em;
}

.page-header .page-subtitle {
    color: var(--app-muted);
    font-size: 0.95rem;
    margin: 0;
}

.page-header .page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background-color: var(--app-surface);
}

.card.shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.card-body {
    padding: 1.4rem;
}

/* ---------- Tables ---------- */
.card .table {
    margin-bottom: 0;
}

.table {
    color: var(--app-text);
}

.table > :not(caption) > * > * {
    padding: 0.85rem 1rem;
    border-bottom-color: var(--app-border);
}

.table thead th {
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted);
    background-color: var(--app-subtle);
    border-bottom: 1px solid var(--app-border);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table-hover tbody tr:hover {
    background-color: rgba(79, 70, 229, 0.03);
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: var(--app-radius-sm);
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.83rem;
    gap: 0.3rem;
}

.btn-primary {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #4338ca;
    border-color: #4338ca;
}

.btn-outline-secondary {
    color: #374151;
    border-color: var(--app-border-strong);
}

.btn-outline-secondary:hover {
    background-color: #f3f4f6;
    color: #111827;
    border-color: var(--app-border-strong);
}

.btn-outline-primary {
    color: #4f46e5;
    border-color: #c7d2fe;
}

.btn-outline-primary:hover {
    background-color: #eef2ff;
    color: #4338ca;
    border-color: #a5b4fc;
}

.btn-outline-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-outline-danger:hover {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.form-label {
    font-weight: 500;
    font-size: 0.88rem;
    color: #374151;
    margin-bottom: 0.4rem;
}

.form-text {
    font-size: 0.83rem;
    color: var(--app-muted);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 500;
    font-size: 0.74rem;
    padding: 0.32em 0.62em;
    border-radius: 999px;
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--app-muted);
}

.empty-state .empty-icon {
    font-size: 2.4rem;
    color: #d1d5db;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.empty-state .empty-title {
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 0.25rem;
}

.empty-state .empty-message {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* ---------- Stat cards (dashboard) ---------- */
.stat-card {
    height: 100%;
}

.stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
    font-size: 1.25rem;
}

.stat-icon.tone-primary {
    background-color: #eef2ff;
    color: #4f46e5;
}

.stat-icon.tone-success {
    background-color: #ecfdf5;
    color: #047857;
}

.stat-icon.tone-info {
    background-color: #ecfeff;
    color: #0e7490;
}

.stat-icon.tone-warning {
    background-color: #fff7ed;
    color: #c2410c;
}

.stat-label {
    color: var(--app-muted);
    font-size: 0.83rem;
    margin-bottom: 0.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-trend {
    margin-top: 0.4rem;
    font-size: 0.83rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trend {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    padding: 0.05rem 0.4rem 0.05rem 0.25rem;
    border-radius: 999px;
    line-height: 1.4;
}

.trend .bi {
    font-size: 1.05rem;
    line-height: 1;
}

.trend-up { color: #047857; background-color: #ecfdf5; }
.trend-down { color: #b91c1c; background-color: #fef2f2; }
.trend-flat { color: #6b7280; background-color: #f3f4f6; }

/* ---------- Today hero ---------- */
.today-hero {
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
    border-color: #c7d2fe;
}

/* ---------- Sparkline KPI card ---------- */
.stat-card-spark .card-body {
    padding: 1.1rem 1.2rem;
}

.stat-card-spark .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.stat-card-spark .stat-label {
    margin-bottom: 0.15rem;
}

.stat-card-spark .stat-value {
    font-size: 1.5rem;
    line-height: 1.1;
}

.sparkline {
    width: 90px;
    height: 36px;
    flex: none;
}

/* ---------- Compact stat card (used on list pages) ---------- */
.stat-card-compact .stat-label {
    color: var(--app-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.stat-card-compact .stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ---------- Removable filter chip ---------- */
.filter-chip {
    background-color: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    font-weight: 500;
    padding: 0.4em 0.7em;
    transition: background-color 0.15s ease;
}

.filter-chip:hover {
    background-color: #e0e7ff;
    color: #3730a3;
}

/* ---------- Voided sale row ---------- */
.row-voided td {
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-color: #d1d5db;
}

.row-voided td:first-child {
    box-shadow: inset 3px 0 0 #ef4444;
    text-decoration: none;
}

.row-voided td a {
    color: #6b7280;
}

/* ---------- Stock pill (products list) ---------- */
.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    min-width: 48px;
    justify-content: center;
}

.stock-ok {
    color: #047857;
    background-color: #ecfdf5;
}

.stock-low {
    color: #b45309;
    background-color: #fef3c7;
}

.stock-out {
    color: #b91c1c;
    background-color: #fef2f2;
}

/* ---------- New sale: prominent total card ---------- */
.sale-summary-card {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #fff;
    border: none;
}

.sale-summary-card .summary-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.sale-summary-card .summary-row {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.sale-summary-card .summary-total {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.sale-summary-card hr {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- New sale: stock-after indicator ---------- */
.stock-after {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.2rem;
    display: block;
    line-height: 1.3;
}

.stock-after.stock-after-warning {
    color: #b45309;
}

.stock-after.stock-after-danger {
    color: #b91c1c;
    font-weight: 600;
}

/* ---------- New sale: line item card ---------- */
.line-item {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1rem 1rem 0.9rem;
    margin-bottom: 0.75rem;
    background-color: #fafbfc;
    transition: border-color 0.15s ease;
}

.line-item:hover {
    border-color: var(--app-border-strong);
}

.line-item .remove-row {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.line-item .remove-row .bi {
    font-size: 1rem;
}

.line-item .product-select {
    padding-right: 2.5rem;
}

.line-total-display {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.3;
    padding: 0.4rem 0;
}

/* ---------- Clickable lookup row ---------- */
.lookup-row:hover {
    background-color: rgba(79, 70, 229, 0.04);
}

/* ---------- Auth (login) ---------- */
.auth-shell {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-brand .brand-icon {
    width: 52px;
    height: 52px;
    background-color: #4f46e5;
    color: #fff;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.auth-brand h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.auth-brand .auth-subtitle {
    color: var(--app-muted);
    font-size: 0.93rem;
    margin: 0;
}

/* ---------- Receipt ---------- */
.receipt {
    max-width: 760px;
    margin: 0 auto;
}

/* ---------- Print (thermal receipt printer, 80mm) ---------- */
@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
    .d-print-none { display: none !important; }
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 80mm;
        color: #000 !important;
        font-family: "Courier New", ui-monospace, monospace;
        font-size: 11px;
        line-height: 1.25;
    }
    .container, .container-fluid, main, .main-content {
        max-width: 80mm !important;
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .card { border: none !important; box-shadow: none !important; background: transparent !important; }
    .receipt {
        max-width: 80mm !important;
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .receipt .card-body { padding: 3mm !important; }
    .receipt h4 { font-size: 13px; font-weight: bold; margin: 0 0 2mm 0; }
    .receipt h4 i.bi { display: none; }
    .receipt .small, .receipt small { font-size: 10px !important; }
    .receipt .text-muted { color: #000 !important; }
    .receipt hr { border-top: 1px dashed #000; margin: 2mm 0; }
    .receipt .row { display: block; margin: 0; }
    .receipt .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 1mm;
    }
    .receipt table {
        width: 100% !important;
        font-size: 10px;
        border-collapse: collapse;
        margin: 2mm 0;
    }
    .receipt table th,
    .receipt table td {
        padding: 1px 2px !important;
        border: none !important;
        vertical-align: top;
        word-break: break-word;
    }
    .receipt table thead th {
        border-top: 1px dashed #000 !important;
        border-bottom: 1px dashed #000 !important;
        font-weight: bold;
    }
    .receipt table tfoot tr:first-child th,
    .receipt table tfoot tr:first-child td {
        border-top: 1px dashed #000 !important;
    }
    .receipt .fs-5 { font-size: 12px !important; font-weight: bold; }
    .receipt .border-top { border-top: 1px dashed #000 !important; }
    .receipt .mt-3, .receipt .mt-4 { margin-top: 2mm !important; }
    .receipt .pt-3 { padding-top: 2mm !important; }
    .receipt .mb-3 { margin-bottom: 2mm !important; }
    a { color: #000 !important; text-decoration: none !important; }
}