/* ============================================================
   LightSwitch POS — theme
   Inspired by GotPOS: deep indigo sidebar, cool canvas,
   POS-blue primary, teal accent reserved for positive money.
   ============================================================ */
:root {
    --bg: #F4F6FB;
    --surface: #FFFFFF;
    --surface-2: #FAFBFE;

    --sidebar: #16182E;
    --sidebar-2: #1B1E3A;
    --sidebar-text: #AEB4D4;
    --sidebar-muted: #6A7099;

    --primary: #4361EE;
    --primary-600: #3a55d9;
    --primary-700: #2f47bd;
    --accent: #14B8A6;       /* teal — positive money only */
    --success: #2BA471;
    --danger: #E5484D;
    --warning: #F5A524;

    --ink: #1B1F31;
    --ink-2: #3a4055;
    --muted: #757B90;
    --line: #E8EBF4;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 10px 26px rgba(16, 24, 40, .07);

    --bs-primary: #4361EE;
    --bs-primary-rgb: 67, 97, 238;
    --bs-body-color: #1B1F31;
    --bs-border-color: #E8EBF4;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

html, body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
h1:focus, h1:focus-visible { outline: none; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-700); }

/* tabular figures for anything money-like */
.num, td.text-end, .fw-bold, .fs-3, .fs-5 { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .5rem .9rem; }
.btn-lg { padding: .7rem 1.2rem; }
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(67, 97, 238, .25);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-700); border-color: var(--primary-700); }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: #d4d9e8; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(67, 97, 238, .18);
    border-color: var(--primary);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card.shadow-sm { box-shadow: var(--shadow) !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    padding: .9rem 1.1rem;
}
.card-footer { background: var(--surface-2); border-top: 1px solid var(--line); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--line);
    padding: .55rem .8rem;
    background-color: var(--surface);
}
.form-label { font-weight: 600; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
.input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--muted); border-radius: var(--radius-sm); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: var(--ink); }
.table > thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.table > tbody td { border-color: #F0F2F8; padding-top: .7rem; padding-bottom: .7rem; }
.table-hover > tbody > tr:hover > * { background-color: #F6F8FE; }
.table-light, .table-light th { background-color: var(--surface-2) !important; }

/* code chips (item numbers) */
code { color: var(--primary-700); background: #EEF1FE; padding: .1rem .4rem; border-radius: 6px; font-size: .82em; }

.alert-light { border: 1px solid var(--line); }

/* page heading helper */
.page-title { font-size: 1.4rem; font-weight: 700; }

/* ============================================================
   App shell
   ============================================================ */
.page { display: flex; flex-direction: column; min-height: 100vh; }

.sidebar {
    background: var(--sidebar);
    background-image: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
}

.app-topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.content { padding: 1.5rem; }

@media (min-width: 768px) {
    .page { flex-direction: row; }
    .sidebar { width: 256px; height: 100vh; position: sticky; top: 0; flex-shrink: 0; }
    main { flex: 1; min-width: 0; }
    .app-topbar { position: sticky; top: 0; z-index: 5; }
    .content { padding: 1.75rem 2rem; }
}

/* ---------- Sidebar brand + nav ---------- */
.brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.25rem 1.35rem; color: #fff; font-weight: 800; font-size: 1.1rem;
    letter-spacing: -.02em;
}
.brand .brand-mark {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary) 0%, #6d83ff 100%);
    display: grid; place-items: center; color: #fff; font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(67, 97, 238, .4);
}

.nav-section { color: var(--sidebar-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1rem 1.6rem .35rem; }

.nav-scrollable { overflow-y: auto; height: calc(100vh - 70px); padding-bottom: 1rem; }

.sidebar .nav-link {
    color: var(--sidebar-text);
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .85rem; margin: .12rem .75rem; border-radius: var(--radius-sm);
    font-weight: 500; font-size: .92rem; white-space: nowrap;
}
.sidebar .nav-link .bi { font-size: 1.15rem; opacity: .9; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .nav-link.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(67, 97, 238, .35);
}
.sidebar .nav-link.active .bi { opacity: 1; }

.sidebar-user { border-top: 1px solid rgba(255, 255, 255, .07); margin-top: .5rem; padding: .85rem 1rem; }
.sidebar-user .nav-link { margin: 0; }
.sidebar form button.nav-link { width: 100%; background: none; border: 0; text-align: left; }

/* topbar user chip */
.user-chip { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 600; }
.user-chip .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6d83ff);
    color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700;
}

/* ============================================================
   Sale / register — the signature screen
   ============================================================ */
.pos-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .pos-layout { grid-template-columns: minmax(0, 1fr) 390px; } }

.cat-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.cat-pill {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    border-radius: 999px; padding: .45rem .95rem; font-weight: 600; font-size: .85rem;
    white-space: nowrap; cursor: pointer;
}
.cat-pill:hover { border-color: #c9d1ee; }
.cat-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.product-card {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    padding: .85rem; cursor: pointer; text-align: left;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex; flex-direction: column; gap: .5rem;
}
.product-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.product-thumb {
    aspect-ratio: 1 / 1; border-radius: var(--radius-sm); display: grid; place-items: center;
    font-size: 1.6rem; font-weight: 700; color: #fff;
}
.product-name { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.product-meta { color: var(--muted); font-size: .76rem; }
.product-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stock-pill {
    font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
    background: #E9F7F1; color: var(--success); font-variant-numeric: tabular-nums;
}
.stock-pill.low { background: #FEF3E2; color: #B5740F; }
.stock-pill.out { background: #FDECEC; color: var(--danger); }

/* cart rail */
.cart-rail { position: sticky; top: 84px; }
.cart-scroll { max-height: 44vh; overflow-y: auto; }
.cart-line { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #F0F2F8; }
.cart-line:last-child { border-bottom: 0; }
.cart-qty { width: 4.5rem; }
.cart-total-row { display: flex; justify-content: space-between; padding: .25rem 0; color: var(--ink-2); }
.cart-total-row.grand { font-size: 1.35rem; font-weight: 800; color: var(--ink); padding-top: .5rem; border-top: 1px dashed var(--line); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.change-due { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.btn-checkout {
    width: 100%; border: 0; color: #fff; font-weight: 700; font-size: 1.05rem;
    padding: .85rem; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary) 0%, #6d83ff 100%);
    box-shadow: 0 10px 22px rgba(67, 97, 238, .35);
}
.btn-checkout:disabled { opacity: .55; box-shadow: none; }

.pay-tabs { display: flex; gap: .4rem; }
.pay-tab {
    flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
    padding: .55rem; font-weight: 600; font-size: .85rem; cursor: pointer; text-align: center; color: var(--ink-2);
}
.pay-tab.active { background: #EEF1FE; border-color: var(--primary); color: var(--primary-700); }

/* empty states */
.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty-state .bi { font-size: 2rem; opacity: .4; display: block; margin-bottom: .5rem; }

/* ============================================================
   Auth pages (login, forgot/reset password, register…)
   Standalone split-screen layout — NO app sidebar/menu.
   ============================================================ */
.auth-shell { display: flex; min-height: 100vh; background: var(--bg); }

/* left branded hero */
.auth-hero {
    display: none;
    width: 44%;
    max-width: 560px;
    padding: 2.5rem 3rem;
    color: #fff;
    background: radial-gradient(120% 120% at 0% 0%, #25295A 0%, var(--sidebar-2) 38%, var(--sidebar) 100%);
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.auth-hero::after {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    right: -120px; bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67,97,238,.55) 0%, rgba(67,97,238,0) 70%);
}
.auth-hero-top { flex: 0 0 auto; }
.auth-hero-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.auth-hero-foot { flex: 0 0 auto; color: var(--sidebar-muted); font-size: .8rem; }

.auth-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.auth-brand-pos { color: #8ea2ff; }
.auth-brand-mark {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--primary) 0%, #6d83ff 100%);
    display: grid; place-items: center; font-size: 1.2rem;
    box-shadow: 0 8px 20px rgba(67, 97, 238, .45);
}

.auth-hero-body h2 { color: #fff; font-size: 2rem; line-height: 1.15; font-weight: 800; margin-bottom: .9rem; max-width: 18ch; }
.auth-hero-body > p { color: var(--sidebar-text); font-size: 1rem; line-height: 1.6; max-width: 36ch; margin-bottom: 2rem; }

.auth-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.auth-hero-points li { display: flex; align-items: center; gap: .75rem; color: #D7DCF5; font-weight: 500; font-size: .95rem; }
.auth-hero-points .bi {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; font-size: 1rem;
    background: rgba(255,255,255,.08); color: #8ea2ff;
}

/* right form column */
.auth-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-card {
    width: 100%;
    max-width: 410px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.25rem 2.1rem;
}

.auth-head { margin-bottom: 1.5rem; }
.auth-head h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .35rem; }
.auth-sub { color: var(--muted); font-size: .92rem; margin: 0; }

/* input with leading icon */
.auth-input { position: relative; }
.auth-input > .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1rem; pointer-events: none; }
.auth-input .form-control { padding-left: 2.5rem; }

.auth-row { display: flex; align-items: center; justify-content: space-between; }
.auth-remember { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-2); font-weight: 500; cursor: pointer; }
.auth-row a { font-size: .88rem; font-weight: 600; }

.auth-alt { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 1.5rem; }
.auth-alt a { font-weight: 600; }
.auth-dot { margin: 0 .4rem; color: var(--line); }

@media (min-width: 992px) {
    .auth-hero { display: flex; }
}

/* ---------- Blazor framework bits (kept) ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: .82rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b32121; padding: 1rem; color: white; border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ---------- Print: receipt only ---------- */
@media print {
    .sidebar, .app-topbar, .d-print-none { display: none !important; }
    .content { padding: 0 !important; }
    .page { display: block !important; }
    body { background: #fff; }
    .card { box-shadow: none !important; border: none !important; }
    .alert { display: none !important; }
}