:root {
    --qb-bg: #f5f7fb;
    --qb-surface: #ffffff;
    --qb-surface-alt: #f8fafc;
    --qb-text: #172033;
    --qb-muted: #667085;
    --qb-border: #dfe5ee;
    --qb-shadow: 0 10px 30px rgba(16, 24, 40, .08);
    --qb-overlay: rgba(245, 247, 251, .82);
}

body, .content-wrapper, .page-content, .login-page {
    background: var(--qb-bg) !important;
    color: var(--qb-text);
}

.sidebar, .topbar, .app-footer, .card, .modal-content, .offcanvas, .dropdown-menu,
.login-card, .login-form, .list-group-item, .page-link {
    background-color: var(--qb-surface) !important;
    color: var(--qb-text);
    border-color: var(--qb-border) !important;
}

.card, .login-card, .modal-content { box-shadow: var(--qb-shadow); }
.text-muted, .form-text, .page-kicker { color: var(--qb-muted) !important; }

.form-control, .form-select, textarea, input, select {
    background-color: var(--qb-surface) !important;
    color: var(--qb-text) !important;
    border-color: var(--qb-border) !important;
}

.form-control::placeholder, textarea::placeholder {
    color: var(--qb-muted) !important;
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    background-color: var(--qb-surface) !important;
    color: var(--qb-text) !important;
}

.table {
    --bs-table-bg: var(--qb-surface);
    --bs-table-color: var(--qb-text);
    --bs-table-border-color: var(--qb-border);
}

.table-light {
    --bs-table-bg: var(--qb-surface-alt);
    --bs-table-color: var(--qb-text);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--qb-surface-alt);
    color: var(--qb-text);
}

.nav-link, .brand, .page-title, label, h1, h2, h3, h4, h5, h6 { color: var(--qb-text); }
.nav-link:hover, .nav-link.active { background-color: var(--qb-surface-alt); }
.btn-close { filter: none; }
.topbar-actions { display: flex; align-items: center; }

.global-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--qb-overlay);
    backdrop-filter: blur(2px);
}

.global-loader.is-visible { display: flex; }

.loader-panel {
    min-width: 150px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--qb-border);
    border-radius: .9rem;
    background: var(--qb-surface);
    color: var(--qb-text);
    box-shadow: var(--qb-shadow);
    text-align: center;
}

.loader-panel .spinner-border { width: 2rem; height: 2rem; }
body.is-loading { cursor: wait; }

@media print {
    html, body, .receipt, .receipt * {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    .global-loader { display: none !important; }
}

/* Login light-theme corrections */
.login-brand,
.login-brand h1,
.login-brand h2,
.login-brand h3,
.login-brand p,
.login-brand .text-white-50 {
    color: #ffffff !important;
}

/* Preserve a visible Bootstrap checked state. The generic light-theme input
   background must not override checkbox and radio selection colours. */
.form-check-input {
    background-color: #ffffff !important;
    border-color: #b8c4d6 !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.form-check-input:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
    opacity: .65;
}


/* Compact professional sizing (about 7% reduction) */
body { font-size: .93rem; }
.topbar { min-height: 58px; padding-top: .55rem !important; padding-bottom: .55rem !important; }
.page-content { padding: 1rem !important; }
.card-body { padding: 1rem; }
.form-control, .form-select { min-height: 36px; padding: .36rem .6rem; font-size: .93rem; }
.btn { padding: .36rem .68rem; font-size: .91rem; }
.table > :not(caption) > * > * { padding: .48rem; }
.sidebar-nav .nav-link { padding-top: .62rem; padding-bottom: .62rem; }

/* Mobile navigation correction */
.mobile-sidebar { width: min(86vw, 320px) !important; max-width: 100vw; z-index: 1055; }
.mobile-sidebar .offcanvas-body { overflow-y: auto; overscroll-behavior: contain; }
.mobile-sidebar .sidebar-nav { min-height: calc(100dvh - 65px); padding: .75rem; display: flex; flex-direction: column; }
.mobile-sidebar .nav-divider { margin-top: auto; }
body.mobile-nav-open { overflow: hidden; touch-action: none; }
.offcanvas-backdrop { z-index: 1050; background-color: #111827; }
.global-loader { z-index: 20000; }
.gst-item-table { min-width: 1080px; }
@media (max-width: 991.98px) {
  .content-wrapper { margin-left: 0 !important; width: 100% !important; }
  .topbar { position: sticky; top: 0; z-index: 1030; }
  .page-title { font-size: 1.05rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-kicker { font-size: .7rem; }
}
@media (max-width: 575.98px) {
  .page-content { padding: .75rem !important; }
  .topbar { padding-left: .65rem !important; padding-right: .65rem !important; }
  .topbar-actions .btn { padding-left: .5rem; padding-right: .5rem; }
}

/* Do not render empty MVC validation summaries as blank alert boxes. */
.validation-summary-valid,
.alert:empty,
.alert ul:empty {
    display: none !important;
}


/* Shared compact screen UI.
   Scoped to application pages so receipt preview and thermal print output retain
   their existing dimensions, typography, alignment, and print CSS. */
@media screen {
    .qb-compact-ui {
        font-size: 13.5px;
    }

    .qb-compact-ui .page-content {
        padding: 14px !important;
    }

    .qb-compact-ui .topbar {
        min-height: 56px;
        height: 56px;
        padding: 0 16px !important;
    }

    .qb-compact-ui .page-title {
        font-size: 17px;
    }

    .qb-compact-ui .page-kicker {
        font-size: 10px;
    }

    .qb-compact-ui .card {
        border-radius: 12px;
    }

    .qb-compact-ui .card-header {
        padding: 9px 13px;
    }

    .qb-compact-ui .card-body {
        padding: 13px;
    }

    .qb-compact-ui .card-footer {
        padding: 9px 13px;
    }

    .qb-compact-ui .form-label {
        margin-bottom: 3px;
        font-size: 13px;
        line-height: 1.3;
    }

    .qb-compact-ui .form-control,
    .qb-compact-ui .form-select {
        min-height: 34px;
        padding: 5px 9px;
        font-size: 13px;
        line-height: 1.35;
    }

    .qb-compact-ui textarea.form-control {
        min-height: 66px;
    }

    .qb-compact-ui .input-group-text {
        min-height: 34px;
        padding: 5px 9px;
        font-size: 13px;
    }

    .qb-compact-ui .btn {
        min-height: 34px;
        padding: 5px 10px;
        font-size: 13px;
        line-height: 1.35;
    }

    .qb-compact-ui .btn-sm {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 12.5px;
    }

    .qb-compact-ui .form-text,
    .qb-compact-ui .invalid-feedback,
    .qb-compact-ui .valid-feedback,
    .qb-compact-ui .field-validation-error,
    .qb-compact-ui .validation-summary-errors,
    .qb-compact-ui .text-danger.small {
        font-size: 12px !important;
        line-height: 1.35;
    }

    .qb-compact-ui .form-check {
        min-height: 20px;
        margin-bottom: 8px;
    }

    .qb-compact-ui .form-check-label {
        font-size: 13px;
    }

    .qb-compact-ui .form-check-input {
        width: 1rem;
        height: 1rem;
        margin-top: .16rem;
    }

    .qb-compact-ui form .mb-4 {
        margin-bottom: 14px !important;
    }

    .qb-compact-ui form .mb-3 {
        margin-bottom: 10px !important;
    }

    .qb-compact-ui form .mt-4 {
        margin-top: 14px !important;
    }

    .qb-compact-ui form .mt-3 {
        margin-top: 10px !important;
    }

    .qb-compact-ui .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .qb-compact-ui .row.g-3 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .65rem;
    }

    .qb-compact-ui .gap-3 {
        gap: .65rem !important;
    }

    .qb-compact-ui .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qb-compact-ui .table {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .qb-compact-ui .table > :not(caption) > * > * {
        padding: 6px 7px;
        vertical-align: middle;
    }

    .qb-compact-ui .table thead th {
        font-size: 11.5px;
    }

    .qb-compact-ui .modal-header {
        padding: 9px 13px;
    }

    .qb-compact-ui .modal-body {
        padding: 13px;
    }

    .qb-compact-ui .modal-footer {
        padding: 8px 13px;
        gap: 6px;
    }

    .qb-compact-ui .modal-title {
        font-size: 16px;
    }

    .qb-compact-ui .alert {
        margin-bottom: 10px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .qb-compact-ui .badge {
        font-size: 11.5px;
    }

    .qb-compact-ui .pagination {
        margin-bottom: 0;
    }

    .qb-compact-ui .page-link {
        padding: 5px 9px;
        font-size: 12.5px;
    }

    .qb-compact-ui .login-page {
        padding: 16px;
    }

    .qb-compact-ui .login-brand,
    .qb-compact-ui .login-form {
        padding: 34px;
    }

    .qb-compact-ui .login-logo {
        width: 54px;
        height: 54px;
        border-radius: 15px;
        font-size: 23px;
    }

    .qb-compact-ui .password-toggle {
        top: 1px;
        width: 32px;
        height: 32px;
    }

    .qb-compact-ui .dashboard-summary-card {
        min-height: 126px;
    }

    .qb-compact-ui .dashboard-summary-card .card-body {
        padding: 16px;
    }

    .qb-compact-ui .dashboard-summary-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 14px;
        font-size: 19px;
    }
}

@media screen and (max-width: 575.98px) {
    .qb-compact-ui .page-content {
        padding: 10px !important;
    }

    .qb-compact-ui .card-body {
        padding: 11px;
    }

    .qb-compact-ui .form-control,
    .qb-compact-ui .form-select,
    .qb-compact-ui .btn {
        min-height: 36px;
    }

    .qb-compact-ui .login-form {
        padding: 24px 18px;
    }

    .qb-compact-ui .modal-dialog {
        margin: .5rem;
    }

    .qb-compact-ui .modal-body {
        max-height: calc(100dvh - 125px);
        overflow-y: auto;
    }
}