/* ==================================================================
   Billing System theme on top of Bootstrap 5.
   Colours follow the prototype: dark teal sidebar, green accent.
   ================================================================== */

@font-face {
    font-family: "DM Sans";
    src: url("../vendor/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand: #16825b;
    --brand-dark: #106a49;
    --brand-soft: #e7f6ee;
    --brand-border: #cdebdc;
    --sidebar: #13262d;
    --ink: #15222a;
    --muted: #5d6b73;
    --line: #e3e9ec;
    --page: #f6f8f9;
    --blue-soft: #e4f0fb;
    --blue-border: #cfe2f5;

    --bs-body-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--page);
    --bs-border-color: var(--line);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 22, 130, 91;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 22, 130, 91;
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 16, 106, 73;
    --bs-border-radius: .5rem;
    --bs-focus-ring-color: rgba(22, 130, 91, .25);
}

body { -webkit-font-smoothing: antialiased; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}

.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #dfe6e9; --bs-btn-hover-bg: #f1f5f6; --bs-btn-hover-border-color: #dfe6e9; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #8fd0b3;
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }

/* ---------- App shell ---------- */

.app-shell { min-height: 100vh; }

.sidebar {
    --bs-offcanvas-width: 230px;
    --bs-offcanvas-bg: var(--sidebar);
    /* !important: Bootstrap's .offcanvas-lg makes the background transparent on large screens. */
    background-color: var(--sidebar) !important;
    color: #dfe8ea;
}

/* Fixed column on desktop. Only for .offcanvas-lg: the POS screen uses the
   same menu as a slide-out panel at every size. */
@media (min-width: 992px) {
    .sidebar.offcanvas-lg {
        width: 230px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 18px 10px; height: 100%; }

.brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 26px;
    color: #fff; font-weight: 600; font-size: 1rem;
}
.brand .bi { color: #3fc98e; font-size: 1.5rem; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }

.side-link, .side-logout {
    display: flex; align-items: center; gap: 12px;
    height: 44px; padding: 0 14px;
    border: 0; border-radius: 8px;
    color: #fff; font-size: .9rem; text-decoration: none;
    background: transparent; width: 100%; text-align: left;
}
.side-link:hover, .side-logout:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.side-link.active { background: var(--brand); }
.side-link .bi, .side-logout .bi { font-size: 1.05rem; }
.side-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #7f9aa3; padding: 14px 14px 4px; }

.app-main { min-width: 0; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 28px 0; }
.user-menu-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); padding: 6px 8px; border-radius: 6px; font-size: .9rem; }
.user-menu-btn:hover { background: #e9eef0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #d5dde0; color: var(--sidebar); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }

.page { padding: 6px 28px 32px; max-width: 1400px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.date-pill { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: .82rem; color: #33424a; }

@media (max-width: 575.98px) {
    .page, .topbar { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Cards, tables ---------- */

.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.panel-title { font-size: 1rem; font-weight: 600; margin: 0; }

.table-app { --bs-table-bg: transparent; font-size: .85rem; margin: 0; }
.table-app thead th { background: #f1f5f6; font-weight: 600; border-bottom: 0; padding: 9px 12px; white-space: nowrap; }
.table-app td { padding: 10px 12px; border-color: #eef2f4; vertical-align: middle; }
.table-app tbody tr[data-href] { cursor: pointer; }
.table-app tbody tr[data-href]:hover { background: #f4f8f6; }
.table-app tr.is-selected td { background: var(--brand-soft); }
.table-app tfoot td { background: var(--brand-soft); font-weight: 700; font-size: .9rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty-state { padding: 28px 10px; text-align: center; color: #8a979e; font-size: .85rem; }

/* ---------- Stat cards ---------- */

.stat { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 10px; height: 100%; }
.stat-icon { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; }
.stat-label { font-size: .8rem; color: #33424a; }
.stat-value { font-size: 1.25rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-green { background: var(--brand-soft); } .stat-green .stat-icon { background: var(--brand); }
.stat-blue { background: var(--blue-soft); } .stat-blue .stat-icon { background: #3b82f6; }
.stat-orange { background: #fdeee0; } .stat-orange .stat-icon { background: #f47b3b; }
.stat-purple { background: #f1eafc; } .stat-purple .stat-icon { background: #9b5de5; }
.stat-plain { background: #fff; border: 1px solid var(--line); }

/* ---------- Bar chart (pure CSS, heights set by app.js) ---------- */

.bar-chart { display: flex; gap: 10px; height: 230px; margin-top: 18px; }
.bar-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: var(--muted); text-align: right; padding-bottom: 22px; min-width: 30px; }
.bar-axis span { line-height: 0; }
.bar-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bar-plot {
    flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 0 6px;
    border-left: 1px solid #dfe6e9; border-bottom: 1px solid #dfe6e9;
    background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #eef2f4 calc(25% - 1px), #eef2f4 25%);
}
.bar { flex: 1; min-width: 0; height: 0; background: #3fbf8a; border-radius: 2px 2px 0 0; transition: height .3s; }
.bar:hover { background: var(--brand); }
.bar-labels { display: flex; gap: 6px; padding: 6px 6px 0; height: 22px; }
.bar-labels span { flex: 1; min-width: 0; text-align: center; font-size: .68rem; color: var(--muted); overflow: hidden; }

/* ---------- Chips (filters, report tabs) ---------- */

.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; font-size: .8rem; font-weight: 500; border: 1px solid #dfe6e9; background: #fff; color: #33424a; text-decoration: none; }
.chip:hover { background: #f1f5f6; color: #33424a; }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-square { border-radius: 6px; }

.group-head { display: flex; justify-content: space-between; align-items: center; background: #f1f5f6; border-radius: 6px; padding: 8px 12px; font-size: .82rem; }
.group-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eef2f4; font-size: .9rem; }
.group-row.is-selected { background: var(--brand-soft); }

.pay-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pay-badge-cash { background: var(--brand-soft); color: var(--brand-dark); }
.pay-badge-card { background: var(--blue-soft); color: #1d4f91; }

.item-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #eef1f3; flex-shrink: 0; }
.item-photo-preview { display: block; width: 120px; height: 90px; border-radius: 10px; object-fit: cover; background: #eef1f3; border: 1px solid var(--line); }
.item-photo-preview[hidden] { display: none; }
.min-w-0 { min-width: 0; }

.btn-icon { border: 0; background: none; color: #e5484d; padding: 6px; line-height: 1; }
.btn-icon:hover { color: #b8262b; }
.btn-icon:disabled { color: #c9d1d5; }

.btn-soft-danger { background: #fdecec; border: 1px solid #f6c9ca; color: #d0353b; font-weight: 600; }
.btn-soft-danger:hover { background: #fbdcdc; color: #d0353b; border-color: #f6c9ca; }
.btn-soft { background: #eef2f4; border: 1px solid #dfe6e9; color: var(--ink); font-weight: 600; }
.btn-soft:hover { background: #e3e9ec; }

/* The New Bill (point of sale) screen has its own file: pos.css */

/* ---------- Login / guest pages ---------- */

.guest-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px;
    background: radial-gradient(120% 80% at 50% 110%, #cfe9e6 0%, #eef6f6 55%, #f6f9fa 100%);
}
.guest-brand { text-align: center; }
.guest-brand .bi { font-size: 2.4rem; color: var(--sidebar); }
.guest-brand h1 { font-size: 1.6rem; font-weight: 700; margin: 4px 0 2px; }
.guest-brand p { font-size: .82rem; color: var(--muted); margin: 0; }
.guest-card { width: 100%; max-width: 360px; background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 10px 30px rgba(19, 38, 45, .08); }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a979e; }
.input-icon .form-control { padding-left: 36px; height: 44px; }
.input-icon .toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: 6px; }

/* ---------- Receipt ---------- */

.receipt-page { background: #eef3f5; min-height: 100vh; padding: 24px 12px; }
.receipt { width: 80mm; max-width: 100%; margin: 0 auto; background: #fff; padding: 16px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #000; position: relative; }
.receipt .center { text-align: center; }
.receipt .shop { font-weight: 700; font-size: 15px; }
.receipt .rule { border-top: 1px dashed #999; margin: 8px 0; }
.receipt .row-line { display: flex; justify-content: space-between; gap: 8px; }
.receipt .total { font-weight: 700; font-size: 15px; }
.receipt .void-stamp { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); border: 3px solid #d0353b; color: #d0353b; font-size: 28px; font-weight: 700; padding: 2px 14px; opacity: .8; }
.receipt-actions { width: 80mm; max-width: 100%; margin: 14px auto 0; display: flex; gap: 8px; }

@media print {
    @page { margin: 0; }
    .noprint { display: none !important; }
    .receipt-page { background: #fff; padding: 0; }
    .receipt { width: 100%; padding: 4mm; }
}

/* ---------- Inventory ---------- */

.stock-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.stock-badge-ok { background: #eef2f4; color: #33424a; }
.stock-badge-low { background: #fdeee0; color: #a84a12; }
.stock-badge-out { background: #fdecec; color: #c0282e; }
.stock-change-in { color: var(--brand-dark); font-weight: 600; }
.stock-change-out { color: #c0282e; font-weight: 600; }
.table-app tr.stock-row-removed td { background: #fbf1f1; }