@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: auto;
    max-width: 100%;
    width: 31.25rem;
}

.or {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 0.3125rem 0;
}

.or .or-line {
    opacity: 0.2;
    width: 100%;
    border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest);
}

.or .or-text {
    padding: 0 0.625rem 0 0.625rem;
    font-size: var(--dxds-font-size-caption-md);
    line-height: var(--dxds-line-height-caption-md);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.links-container {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.links-container .dot {
    border-radius: 50%;
    height: 0.3125rem;
    margin: 0 0.1875rem;
    opacity: 0.7;
    width: 0.3125rem;
    background-color: var(--dxds-color-surface-neutral-default-rest);
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    background: var(--dxds-color-surface-info-subdued-rest);
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    font-size: 1.875rem;
    height: 4.3125rem;
}

.title-content-text-secondary {
    font-size: var(--dxds-font-size-title-md);
    line-height: var(--dxds-line-height-title-md);
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

/* ============================================================
   VISION UI – Design Tokens
   ============================================================ */
:root {
    --bg-app:          #0b1437;
    --bg-card:         rgba(255, 255, 255, 0.07);
    --bg-card-hover:   rgba(255, 255, 255, 0.11);
    --bg-input:        rgba(255, 255, 255, 0.06);
    --bg-topbar:       rgba(11, 20, 55, 0.75);
    --border-card:     1px solid rgba(255, 255, 255, 0.11);
    --border-input:    1px solid rgba(255, 255, 255, 0.16);
    --border-subtle:   rgba(255, 255, 255, 0.08);
    --accent-start:    #4318FF;
    --accent-end:      #0075FF;
    --accent-gradient: linear-gradient(127deg, #4318FF 0%, #0075FF 100%);
    --accent-glow:     0 4px 28px rgba(67, 24, 255, 0.38);
    --color-success:   #01b574;
    --color-danger:    #ee3d3d;
    --color-warning:   #f4c34d;
    --color-info:      #4da6ff;
    --icon-bg-blue:    rgba(67,  24,  255, 0.18);
    --icon-bg-green:   rgba(1,   181, 116, 0.18);
    --icon-bg-orange:  rgba(244, 195, 77,  0.18);
    --icon-bg-purple:  rgba(130, 87,  229, 0.18);
    --icon-bg-red:     rgba(238, 61,  61,  0.18);
    --icon-bg-cyan:    rgba(77,  166, 255, 0.18);
    --text-primary:    #ffffff;
    --text-secondary:  #a0aec0;
    --text-muted:      #718096;
    --radius-card:     20px;
    --radius-btn:      12px;
    --radius-input:    12px;
    --shadow-card:     0 20px 60px rgba(0, 0, 0, 0.45);
    --font-base:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family:       var(--font-base);
    background-color:  var(--bg-app);
    background-image:  var(--bg-app);
    background-attachment: fixed;
    min-height:        100vh;
    color:             var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 700; }
a, .btn-link { color: var(--accent-end); }
h1:focus { outline: none; }

.glass-card {
    background:        var(--bg-card);
    border:            var(--border-card);
    border-radius:     var(--radius-card);
    backdrop-filter:   blur(21px) saturate(180%);
    -webkit-backdrop-filter: blur(21px) saturate(180%);
    box-shadow:        var(--shadow-card);
}

.kpi-icon-wrap { width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0; }
.kpi-label { font-size:0.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem; }
.kpi-value { font-size:1.75rem;font-weight:800;color:var(--text-primary);line-height:1; }

.page-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem; }
.page-title { font-size:1.35rem;font-weight:700;color:var(--text-primary);margin:0; }
.page-subtitle { font-size:0.78rem;color:var(--text-secondary);margin-top:.2rem; }

.btn-primary { background:var(--accent-gradient)!important;border:none!important;border-radius:var(--radius-btn)!important;color:#fff!important;font-weight:600!important;box-shadow:var(--accent-glow)!important;transition:opacity .2s,box-shadow .2s!important; }
.btn-primary:hover { opacity:.88!important;box-shadow:0 4px 38px rgba(67,24,255,0.55)!important; }
.btn-secondary { background:rgba(255,255,255,0.08)!important;border:1px solid rgba(255,255,255,0.14)!important;border-radius:var(--radius-btn)!important;color:var(--text-primary)!important;font-weight:500!important;transition:background .18s!important; }
.btn-secondary:hover { background:rgba(255,255,255,0.14)!important;color:#fff!important; }
.btn:focus,.btn:active:focus,.form-control:focus,.form-check-input:focus { box-shadow:0 0 0 0.15rem rgba(67,24,255,0.35)!important; }

.dxbl-grid { --dxbl-grid-bg:transparent;--dxbl-grid-row-bg:transparent;--dxbl-grid-hover-bg:rgba(255,255,255,0.05);--dxbl-grid-hover-color:var(--text-primary);--dxbl-grid-header-bg:rgba(255,255,255,0.05);--dxbl-grid-header-color:var(--text-secondary);--dxbl-grid-footer-bg:transparent;--dxbl-grid-group-footer-bg:transparent;border:none!important; }
.dxbl-grid>.dxbl-scroll-viewer,.dxbl-grid>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content { background-color:transparent!important; }
.dxbl-grid-header-row th,.dxbl-grid-header-cell { background:rgba(255,255,255,0.05)!important;color:var(--text-secondary)!important;border-color:rgba(255,255,255,0.07)!important;font-size:0.7rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important; }
.dxbl-grid .dxbl-grid-table>tbody>tr { background-color:transparent!important; }
.dxbl-grid .dxbl-grid-table>tbody>tr>td { background-color:transparent!important;color:var(--text-primary)!important;border-color:rgba(255,255,255,0.06)!important;font-size:0.875rem!important; }
.dxbl-grid-pager { background:transparent!important;border-color:rgba(255,255,255,0.07)!important;color:var(--text-secondary)!important; }

.dxbl-popup-window,.dxbl-popup { background:rgba(13,20,58,0.97)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:var(--radius-card)!important;backdrop-filter:blur(30px)!important;color:var(--text-primary)!important;box-shadow:0 30px 80px rgba(0,0,0,0.6)!important; }
.dxbl-popup-header { background:transparent!important;color:var(--text-primary)!important;border-bottom:1px solid rgba(255,255,255,0.09)!important;font-weight:700!important;font-size:1rem!important; }
.dxbl-popup-footer { background:transparent!important;border-top:1px solid rgba(255,255,255,0.09)!important; }

.dxbl-form-layout-item-caption { color:var(--text-secondary)!important;font-size:0.72rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.05em!important; }
.dxbl-text-edit .dxbl-input-editor,.dxbl-spin-edit .dxbl-input-editor,.dxbl-date-edit .dxbl-input-editor,.dxbl-combo-box .dxbl-input-editor { background:var(--bg-input)!important;border:var(--border-input)!important;border-radius:var(--radius-input)!important;color:var(--text-primary)!important; }
.dxbl-text-edit .dxbl-input-editor:focus-within,.dxbl-spin-edit .dxbl-input-editor:focus-within,.dxbl-date-edit .dxbl-input-editor:focus-within,.dxbl-combo-box .dxbl-input-editor:focus-within { border-color:var(--accent-end)!important;box-shadow:0 0 0 2px rgba(0,117,255,0.22)!important; }
.dxbl-calendar,.dxbl-dropdown-area { background:rgba(13,20,58,0.98)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:14px!important;color:var(--text-primary)!important; }
.dxbl-list-item:hover { background:rgba(255,255,255,0.07)!important; }
.dxbl-list-item.dxbl-focused,.dxbl-list-item.dxbl-selected { background:rgba(67,24,255,0.28)!important; }

.dxbl-chart { background:transparent!important; }

.dxbl-btn.dxbl-btn-primary { background:var(--accent-gradient)!important;border:none!important;border-radius:var(--radius-btn)!important;color:#fff!important;font-weight:600!important;box-shadow:var(--accent-glow)!important; }
.dxbl-btn.dxbl-btn-secondary { background:rgba(255,255,255,0.08)!important;border:1px solid rgba(255,255,255,0.14)!important;border-radius:var(--radius-btn)!important;color:var(--text-primary)!important;font-weight:500!important; }
.dxbl-btn.dxbl-btn-secondary:hover { background:rgba(255,255,255,0.14)!important; }
.dxbl-btn.dxbl-btn-danger { background:rgba(238,61,61,0.18)!important;border:1px solid rgba(238,61,61,0.35)!important;border-radius:var(--radius-btn)!important;color:var(--color-danger)!important;font-weight:600!important; }
.dxbl-btn.dxbl-btn-danger:hover { background:rgba(238,61,61,0.30)!important; }
.dxbl-btn.dxbl-btn-success { background:rgba(1,181,116,0.18)!important;border:1px solid rgba(1,181,116,0.35)!important;border-radius:var(--radius-btn)!important;color:var(--color-success)!important;font-weight:600!important; }
.dxbl-btn.dxbl-btn-success:hover { background:rgba(1,181,116,0.30)!important; }

.badge.bg-success { background-color:var(--color-success)!important; }
.badge.bg-danger  { background-color:var(--color-danger)!important; }
.badge.bg-warning { background-color:var(--color-warning)!important;color:#0b1437!important; }

.text-success { color:var(--color-success)!important; }
.text-danger  { color:var(--color-danger)!important; }
.text-warning { color:var(--color-warning)!important; }
.text-muted   { color:var(--text-secondary)!important; }

.accent-text { background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

.form-field-label { display:block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:0.45rem; }
.bs-form .dxbl-text-edit,.bs-form .dxbl-spin-edit,.bs-form .dxbl-combobox,.bs-form .dxbl-date-edit { width:100%!important;display:block!important; }
.bs-form .col-6:nth-child(odd)  { padding-right:0.45rem; }
.bs-form .col-6:nth-child(even) { padding-left:0.45rem; }

.dxbl-popup-window { display:flex!important;flex-direction:column!important;max-height:90vh!important;max-width:96vw!important; }
.dxbl-popup-body { overflow-y:auto!important;overflow-x:hidden!important;flex:1 1 auto!important;min-height:0!important; }
.dxbl-popup-footer { flex-shrink:0!important;background:transparent!important;border-top:1px solid rgba(255,255,255,0.09)!important;padding:0.65rem 1.25rem!important; }

.product-img-avatar { width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.12);flex-shrink:0; }
.product-img-placeholder { width:44px;height:44px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;flex-shrink:0; }
.popup-img-preview { width:72px;height:72px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,0.12);flex-shrink:0; }
.popup-img-placeholder { width:72px;height:72px;border-radius:14px;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:white;font-size:1.8rem;flex-shrink:0; }
.img-upload-input { display:none!important; }
.img-upload-label { display:inline-flex;align-items:center;padding:0.3rem 0.8rem;border-radius:var(--radius-btn);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:var(--text-primary);font-size:0.8rem;font-weight:500;cursor:pointer;transition:background .18s; }
.img-upload-label:hover { background:rgba(255,255,255,0.14); }
.img-remove-btn { display:inline-flex;align-items:center;gap:0.25rem;background:none;border:none;color:var(--color-danger);font-size:0.8rem;cursor:pointer;padding:0.3rem 0.5rem; }
.img-remove-btn:hover { text-decoration:underline; }

.delete-confirm-body { text-align:center;padding:1.5rem 1rem;line-height:1.7; }

.order-line-row { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:0.5rem 0.6rem;margin-bottom:0.4rem; }
.order-lines-label { font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:0.5rem;margin-top:1rem; }
.order-total-row { display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0.25rem 0;font-size:0.95rem;font-weight:700;color:var(--text-primary);border-top:1px solid rgba(255,255,255,0.15);margin-top:0.2rem; }
.order-summary-block { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:0.6rem 0.85rem;margin-top:0.75rem;display:flex;flex-direction:column;gap:0.35rem; }
.order-summary-row { display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;color:var(--text-secondary);gap:0.5rem; }
.order-summary-row .tax-spin { width:80px; }

.filter-bar { display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap; }
.filter-label { font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);white-space:nowrap; }

.fin-row { display:flex;justify-content:space-between;align-items:center;padding:0.65rem 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:0.875rem; }
.fin-row:last-child { border-bottom:none;padding-bottom:0; }
.fin-row-label { color:var(--text-secondary);font-weight:500; }
.fin-row-value { font-weight:700;font-size:1rem; }

.card-section-header { display:flex;align-items:center;padding:1.1rem 1.25rem 0.75rem;font-size:0.92rem;font-weight:700;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,0.07);letter-spacing:.01em; }
.card-section-body { padding:0.5rem 0; }

.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;color:var(--text-secondary);font-size:0.875rem;text-align:center; }

.status-badge { display:inline-flex;align-items:center;padding:0.2rem 0.65rem;border-radius:20px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent; }
.status-badge.status-draft    { background:rgba(160,174,192,0.15);color:var(--text-secondary);border-color:rgba(160,174,192,0.25); }
.status-badge.status-confirmed{ background:rgba(0,117,255,0.15);color:var(--color-info);border-color:rgba(0,117,255,0.30); }
.status-badge.status-completed{ background:rgba(1,181,116,0.15);color:var(--color-success);border-color:rgba(1,181,116,0.30); }
.status-badge.status-cancelled{ background:rgba(238,61,61,0.15);color:var(--color-danger);border-color:rgba(238,61,61,0.28); }
.status-badge.status-pending  { background:rgba(244,195,77,0.15);color:var(--color-warning);border-color:rgba(244,195,77,0.28); }
.status-badge.status-partialpay{ background:rgba(244,145,0,0.15);color:#f49100;border-color:rgba(244,145,0,0.28); }
.status-badge.status-paid     { background:rgba(1,181,116,0.18);color:var(--color-success);border-color:rgba(1,181,116,0.35); }
.status-badge.status-open     { background:rgba(244,195,77,0.15);color:var(--color-warning);border-color:rgba(244,195,77,0.28); }
.status-badge.status-received { background:rgba(1,181,116,0.15);color:var(--color-success);border-color:rgba(1,181,116,0.30); }

.content { padding-top:1.1rem; }
.form-error { display:flex;align-items:center;gap:0.5rem;padding:0.55rem 0.85rem;border-radius:10px;background:rgba(238,61,61,0.14);border:1px solid rgba(238,61,61,0.30);color:var(--color-danger);font-size:0.82rem;font-weight:500;margin-top:0.75rem; }

/* ── Popup utility helpers ───────────────────────────────────────────────── */
.popup-title { font-weight:700;font-size:1rem;color:var(--text-primary); }
.popup-empty-hint { color:var(--text-secondary);font-size:.85rem;padding:.6rem 0; }
.form-plaintext { display:block;padding:.3rem .1rem;font-size:.9rem;color:var(--text-primary);font-weight:600; }

/* DevExpress DxButton Info variant */
.dxbl-btn.dxbl-btn-info { background:rgba(0,117,255,0.15)!important;border:1px solid rgba(0,117,255,0.35)!important;border-radius:var(--radius-btn)!important;color:var(--color-info)!important;font-weight:600!important; }
.dxbl-btn.dxbl-btn-info:hover { background:rgba(0,117,255,0.28)!important; }
.dxbl-btn.dxbl-btn-warning { background:rgba(244,195,77,0.15)!important;border:1px solid rgba(244,195,77,0.35)!important;border-radius:var(--radius-btn)!important;color:var(--color-warning)!important;font-weight:600!important; }

/* ── Vision-UI popup table (payments, PO lines, etc.) ───────────────────── */
.popup-table-wrap { margin-top:.75rem;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.09); }
.popup-table { width:100%;border-collapse:collapse;font-size:.83rem; }
.popup-table thead tr { background:rgba(255,255,255,0.07); }
.popup-table thead th { padding:.55rem .7rem;color:var(--text-secondary);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,0.09);white-space:nowrap; }
.popup-table tbody tr { transition:background .15s; }
.popup-table tbody tr:hover { background:rgba(255,255,255,0.04); }
.popup-table tbody td { padding:.5rem .7rem;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,0.06);vertical-align:middle; }
.popup-table tbody tr:last-child td { border-bottom:none; }
.popup-table tbody tr.edit-row td { background:rgba(0,117,255,0.06);border-bottom:1px solid rgba(0,117,255,0.18); }
.popup-table tfoot tr { background:rgba(255,255,255,0.05); }
.popup-table tfoot td { padding:.5rem .7rem;font-size:.83rem;color:var(--text-secondary);border-top:1px solid rgba(255,255,255,0.09); }
.popup-table .col-amt { text-align:right;width:110px; }
.popup-table .col-act { width:80px;text-align:right;white-space:nowrap; }
.popup-table .col-act .dx-btn, .popup-table td .dx-btn { display:inline-flex; }

/* Override Bootstrap table-dark inside popups to use glass style */
.dxbl-popup-body .table-dark,
.dxbl-popup-body .table { --bs-table-bg:transparent;--bs-table-border-color:rgba(255,255,255,0.08);--bs-table-striped-bg:rgba(255,255,255,0.04);color:var(--text-primary)!important;border-color:rgba(255,255,255,0.09)!important; }
.dxbl-popup-body .table thead th,.dxbl-popup-body .table th { background:rgba(255,255,255,0.07)!important;color:var(--text-secondary)!important;font-size:.68rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;border-color:rgba(255,255,255,0.09)!important; }
.dxbl-popup-body .table td { border-color:rgba(255,255,255,0.06)!important;vertical-align:middle!important; }
.dxbl-popup-body .table tbody tr:hover td { background:rgba(255,255,255,0.04)!important; }

/* ── DxMemo (textarea) dark style ──────────────────────────────────────── */
.dxbl-memo textarea { background:var(--bg-input)!important;border:var(--border-input)!important;border-radius:var(--radius-input)!important;color:var(--text-primary)!important;resize:vertical; }
.dxbl-memo textarea:focus { border-color:var(--accent-end)!important;box-shadow:0 0 0 2px rgba(0,117,255,0.22)!important;outline:none!important; }

/* ── Transfer qty spinner in stock transfer popup ───────────────────────── */
.transfer-qty-spin { max-width:90px; }

/* ── Product card grid layout utils ─────────────────────────────────────── */
.product-catalog-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem; }

/* ── Dashboard alert list ───────────────────────────────────────────────── */
.alert-list-item { display:flex;align-items:center;gap:.65rem;padding:.45rem .1rem;border-bottom:1px solid rgba(255,255,255,0.07); }
.alert-list-item:last-child { border-bottom:none; }

/* ── Scrollable modal body cap ─────────────────────────────────────────── */
.dxbl-popup-body { max-height:72vh!important; }

/* ── DxComboBox search-box inside dropdown ──────────────────────────────── */
.dxbl-combo-box-dropdown .dxbl-search { background:var(--bg-input)!important;border-bottom:1px solid rgba(255,255,255,0.08)!important; }
.dxbl-combo-box-dropdown .dxbl-search input { color:var(--text-primary)!important; }

/* ── MudDataGrid global empty-row fix ─────────────────────────────────────
   MudBlazor renders a div.mud-table-empty-row when Items is empty.
   It inherits --mud-palette-surface (rgb(55,55,64) in dark theme), which
   clashes with the glass-card background. Force transparent on all grids.
   ──────────────────────────────────────────────────────────────────────── */
.mud-table-empty-row {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Dashboard period filter buttons ─────────────────────────────────── */
.dash-period-btn { background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-btn);color:var(--text-secondary);font-size:.78rem;font-weight:600;padding:.3rem .85rem;cursor:pointer;transition:all .18s;letter-spacing:.02em; }
.dash-period-btn:hover { background:rgba(255,255,255,0.13);color:var(--text-primary); }
.dash-period-btn.active { background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:var(--accent-glow); }

/* ── KPI sub-label ─────────────────────────────────────────────────────── */
.kpi-sub { font-size:.7rem;color:var(--text-muted);margin:0;margin-top:.25rem; }

/* ── Dashboard charts ──────────────────────────────────────────────────── */
.dash-chart { width:100%;height:220px;background:transparent!important; }
.dash-tooltip { background:rgba(13,20,58,0.97);border:1px solid rgba(255,255,255,0.13);border-radius:8px;padding:.35rem .65rem;font-size:.78rem;color:var(--text-primary);white-space:nowrap; }

/* DxChart dark overrides */
.dxbl-chart-background { fill:transparent!important; }
.dxbl-chart text { fill:var(--text-secondary)!important;font-size:10px!important; }
.dxbl-chart .dxbl-chart-grid-line { stroke:rgba(255,255,255,0.07)!important; }
.dxbl-chart .dxbl-chart-axis-line { stroke:rgba(255,255,255,0.12)!important; }

/* Charts 2x2 grid */
.dash-charts-grid { display:grid;grid-template-columns:1fr 1fr;gap:0;padding:.5rem; }
.dash-chart-cell { padding:.75rem 1rem 1rem;position:relative; }
.dash-chart-cell:nth-child(1),.dash-chart-cell:nth-child(2) { border-bottom:1px solid rgba(255,255,255,0.07); }
.dash-chart-cell:nth-child(1),.dash-chart-cell:nth-child(3) { border-right:1px solid rgba(255,255,255,0.07); }
.dash-chart-title { font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.5rem; }
.dash-chart-inner { width:100%;height:180px;background:transparent!important; }
.small-empty { min-height:120px; }

/* ── Theme Picker ─────────────────────────────────────────────────────────── */
/* ── Theme Picker ─────────────────────────────────────────────────────────── */
.theme-picker-wrap { position:relative; }

.theme-picker-btn {
    display:flex;align-items:center;gap:.45rem;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    color:var(--text-secondary);
    font-size:.78rem;font-weight:500;
    padding:.3rem .65rem;
    cursor:pointer;transition:all .18s;line-height:1;
    white-space:nowrap;
}
.theme-picker-btn:hover { background:rgba(255,255,255,0.13);color:var(--text-primary); }
.theme-picker-btn .bi-palette-fill { font-size:.82rem; }
.theme-picker-swatch {
    width:9px;height:9px;border-radius:50%;flex-shrink:0;
    box-shadow:0 0 0 1.5px rgba(255,255,255,0.25);
}
.theme-picker-label { color:var(--text-secondary);font-size:.75rem; }

.theme-panel {
    position:absolute;top:calc(100% + 10px);right:0;
    background:#0f1729;
    border:1px solid rgba(255,255,255,0.13);
    border-radius:16px;
    padding:1rem;
    min-width:210px;
    z-index:9999;
    box-shadow:0 20px 60px rgba(0,0,0,0.65);
    animation:fadeInDown .14s ease;
}
@keyframes fadeInDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.theme-panel-title {
    font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(255,255,255,0.35);margin-bottom:.7rem;padding:0 .2rem;
}

.theme-swatches { display:flex;flex-direction:column;gap:.2rem; }

.theme-swatch-btn {
    display:flex;align-items:center;gap:.7rem;
    background:transparent;border:1px solid transparent;
    border-radius:10px;padding:.45rem .6rem;
    cursor:pointer;transition:all .14s;width:100%;text-align:left;
    color:rgba(255,255,255,0.72);font-size:.8rem;
}
.theme-swatch-btn:hover { background:rgba(255,255,255,0.07);color:#fff;border-color:rgba(255,255,255,0.08); }
.theme-swatch-btn.active {
    background:rgba(255,255,255,0.09);
    border-color:rgba(255,255,255,0.20);
    color:#fff;font-weight:600;
}

.swatch-bg {
    width:30px;height:30px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:flex-end;justify-content:flex-end;
    padding:5px;border:1px solid rgba(255,255,255,0.15);
    background-size:cover;
}
.swatch-accent { width:10px;height:10px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5); }
.swatch-label { flex:1; }
.swatch-check { font-size:.72rem;color:#01b574;margin-left:auto;flex-shrink:0; }

/* ============================================================
   COLLAPSED SIDEBAR — desktop only (ancestor class is on .page)
   ============================================================ */
@media (min-width: 641px) {
    .sidebar-collapsed .nav-section-label { display: none; }
    .sidebar-collapsed .nav-text          { display: none; }

    .sidebar-collapsed .sidebar-nav {
        padding: 0 0.5rem 1rem;
    }

    .sidebar-collapsed .sidebar-divider {
        margin: 0 0.5rem 0.5rem;
    }

    .sidebar-collapsed .nav-link {
        justify-content: center !important;
        padding:         0.65rem !important;
        gap:             0 !important;
    }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app, #060b28);
    padding: 2rem;
}

.login-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

.login-logo { display:flex;justify-content:center;margin-bottom:1rem; }
.login-logo-img { width:72px;height:72px;border-radius:50%;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }

.login-title {
    text-align:  center;
    font-size:   1.3rem;
    font-weight: 700;
    color:       #fff;
    margin-bottom: .15rem;
}

.login-sub {
    text-align:  center;
    font-size:   .78rem;
    color:       rgba(255,255,255,0.38);
    margin-bottom: 2rem;
    letter-spacing: .04em;
}

.login-form { display:flex;flex-direction:column;gap:1rem; }

.login-field { display:flex;flex-direction:column;gap:.35rem; }

.login-label {
    font-size:   .76rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.55);
    letter-spacing: .04em;
}

.login-dx-input { width: 100%; }

.login-input {
    background:    rgba(255,255,255,0.06) !important;
    border:        1px solid rgba(255,255,255,0.13) !important;
    border-radius: 10px !important;
    color:         #fff !important;
    font-size:     .88rem !important;
    height:        40px !important;
    padding:       0 .8rem !important;
}

.login-error {
    background:    rgba(232, 93, 106, 0.15);
    border:        1px solid rgba(232, 93, 106, 0.30);
    border-radius: 8px;
    padding:       .5rem .75rem;
    color:         #ff8a8a;
    font-size:     .8rem;
}

.login-btn {
    width:         100%;
    height:        42px;
    border-radius: 10px !important;
    font-weight:   600 !important;
    margin-top:    .5rem;
    transition:    opacity .18s, box-shadow .18s, transform .12s !important;
}

.login-btn:hover:not(:disabled) {
    opacity:    .88;
    box-shadow: 0 6px 32px rgba(67, 24, 255, 0.55) !important;
    transform:  translateY(-1px);
}

.login-btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-btn:disabled,
.login-btn[disabled] {
    opacity: .65;
    cursor:  not-allowed;
}

.login-footer {
    text-align:  center;
    margin-top:  1.5rem;
    font-size:   .72rem;
    color:       rgba(255,255,255,0.25);
}

/* ============================================================
   USER MENU DROPDOWN (topbar)
   ============================================================ */
.user-menu-wrap {
    position: relative;
}

.user-menu-btn {
    display:       flex;
    align-items:   center;
    gap:           .45rem;
    background:    rgba(255,255,255,0.05);
    border:        1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding:       .3rem .6rem .3rem .3rem;
    cursor:        pointer;
    transition:    background .18s;
    color:         var(--text-primary, #fff);
}

.user-menu-btn:hover { background: rgba(255,255,255,0.10); }

.user-menu-name {
    font-size:  .8rem;
    font-weight: 500;
    color:      var(--text-secondary, rgba(255,255,255,0.7));
    max-width:  120px;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

.user-menu-caret {
    font-size:  .65rem;
    color:      rgba(255,255,255,0.4);
    transition: transform .2s;
}
.user-menu-caret.rotated { transform: rotate(180deg); }

.user-dropdown {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     190px;
    background:    rgba(18, 22, 48, 0.96);
    border:        1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow:    0 12px 36px rgba(0,0,0,0.45);
    z-index:       9999;
    overflow:      hidden;
    backdrop-filter: blur(20px);
}

.user-dropdown-header {
    padding: .75rem 1rem .6rem;
}
.ud-name {
    font-size:   .88rem;
    font-weight: 600;
    color:       #fff;
}
.ud-role {
    font-size: .72rem;
    color:     rgba(255,255,255,0.38);
    margin-top: 1px;
}

.ud-divider {
    height:     1px;
    background: rgba(255,255,255,0.07);
    margin:     0;
}

.ud-item {
    display:    flex;
    align-items: center;
    width:      100%;
    background: transparent;
    border:     none;
    padding:    .6rem 1rem;
    font-size:  .83rem;
    color:      rgba(255,255,255,0.72);
    cursor:     pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.ud-item:hover        { background: rgba(255,255,255,0.07); color: #fff; }
.ud-item-danger:hover { background: rgba(232,80,80,0.12);  color: #ff7b7b; }

/* ============================================================
   CHANGE PASSWORD DIALOG & SHARED FORM STYLES
   ============================================================ */
.chpwd-form {
    display:        flex;
    flex-direction: column;
    gap:            .9rem;
    padding:        .25rem 0;
}

.chpwd-field { display: flex; flex-direction: column; gap: .3rem; }

.chpwd-label {
    font-size:   .76rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.55);
    letter-spacing: .03em;
}

.chpwd-input { width: 100%; }

.chpwd-error {
    background:    rgba(232,93,106,0.14);
    border:        1px solid rgba(232,93,106,0.28);
    border-radius: 8px;
    padding:       .45rem .7rem;
    color:         #ff9090;
    font-size:     .8rem;
}

.chpwd-success {
    background:    rgba(76,175,130,0.14);
    border:        1px solid rgba(76,175,130,0.28);
    border-radius: 8px;
    padding:       .45rem .7rem;
    color:         #6ee4b4;
    font-size:     .8rem;
}

/* ============================================================
   STATUS BADGES (users grid)
   ============================================================ */
.status-badge {
    display:       inline-block;
    border-radius: 20px;
    padding:       .15rem .65rem;
    font-size:     .72rem;
    font-weight:   600;
    letter-spacing: .04em;
}
.status-active   { background: rgba(76,175,130,0.18); color: #6ee4b4; border: 1px solid rgba(76,175,130,0.25); }
.status-inactive { background: rgba(180,180,180,0.12); color: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.08); }

/* ============================================================
   USERS GRID
   ============================================================ */
.users-grid { border-radius: 16px; }

.perm-item { display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.85rem;color:var(--text-primary);padding:.25rem .4rem;border-radius:6px;user-select:none; }
.perm-item:hover { background:rgba(255,255,255,0.06); }
.perm-item input[type=checkbox] { width:15px;height:15px;accent-color:#4318FF;cursor:pointer;flex-shrink:0; }

/* ============================================================
   LOGIN — remember me & forgot password extras
   ============================================================ */
.login-remember {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      -.2rem;
}

.remember-label {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    font-size:   .78rem;
    color:       rgba(255,255,255,0.50);
    cursor:      pointer;
    user-select: none;
}
.remember-check { accent-color: var(--accent-mid, #4318FF); cursor: pointer; }

.forgot-link {
    background:  transparent;
    border:      none;
    font-size:   .78rem;
    color:       var(--accent-mid, #5b8af7);
    cursor:      pointer;
    padding:     0;
    transition:  color .15s;
}
.forgot-link:hover { color: #fff; }

.forgot-panel {
    background:    rgba(255,255,255,0.04);
    border:        1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding:       1.5rem 1.25rem;
    text-align:    center;
}
.forgot-icon {
    font-size: 2rem;
    color:     rgba(255,255,255,0.25);
    display:   block;
    margin-bottom: .75rem;
}
.forgot-title {
    font-size:   .95rem;
    font-weight: 600;
    color:       #fff;
    margin-bottom: .6rem;
}
.forgot-msg {
    font-size:   .8rem;
    color:       rgba(255,255,255,0.50);
    line-height: 1.6;
}

.forgot-back-btn {
    background:    transparent;
    border:        1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding:       .45rem .85rem;
    color:         rgba(255,255,255,0.55);
    font-size:     .8rem;
    cursor:        pointer;
    transition:    all .15s;
    width:         100%;
    margin-top:    .25rem;
}
.forgot-back-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ── Location selection badge (pie chart) ───────────────────────────────── */
.location-sel-badge {
    font-size:     .72rem;
    font-weight:   600;
    color:         var(--accent-end, #4fc3f7);
    background:    rgba(77,166,255,0.12);
    border:        1px solid rgba(77,166,255,0.22);
    border-radius: 20px;
    padding:       .15rem .6rem;
    white-space:   nowrap;
}

/* ── Scan Receipt ─────────────────────────────────────────────────────────── */
.scan-drop-zone {
    border: 2px dashed rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(255,255,255,0.025);
    transition: border-color .2s;
}
.scan-preview-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.scan-preview-img {
    max-height: 380px;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: contain;
    display: block;
}
.scan-remove-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-danger, #ef4444);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.scan-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .9rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.scan-upload-btn:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.28);
}

/* ============================================================
   MOBILE SIDEBAR DRAWER (global — scoped CSS can't do descendant selectors reliably)
   ============================================================ */
.mobile-nav-overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,0.55);
    z-index:        999;
    backdrop-filter: blur(2px);
}

@media (max-width: 640.98px) {
    .topbar-hide-mobile { display: none !important; }

    .top-row {
        padding-left:  .75rem !important;
        padding-right: .75rem !important;
        height:        3.25rem;
    }
    .top-row-right { gap: .4rem; }

    .sidebar {
        position:   fixed !important;
        top:        0;
        left:       0;
        height:     100vh;
        width:      260px;
        z-index:    1000;
        transform:  translateX(-100%);
        transition: transform .25s ease;
        overflow:   hidden;
    }
    .mobile-nav-open .sidebar       { transform: translateX(0); }
    .mobile-nav-open .mobile-nav-overlay { display: block; }

    article.content {
        padding-left:  .75rem !important;
        padding-right: .75rem !important;
    }
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 640.98px) {

    /* Page header */
    .page-header { flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
    .page-title  { font-size: 1.1rem; }

    /* Reduce card padding */
    .glass-card { border-radius: 14px; }
    .card-section-header { padding: .85rem 1rem .6rem; font-size: .85rem; }
    .card-section-body   { padding: .25rem 0; }

    /* Popup — fill most of the screen and scroll internally */
    .dxbl-popup-window {
        max-height: 88vh !important;
        border-radius: 16px !important;
    }
    .dxbl-popup-body { max-height: 68vh !important; }

    /* Order line rows: stack on mobile */
    .order-line-row.row {
        flex-direction: column !important;
    }
    .order-line-row > [class^="col-"],
    .order-line-row > [class*=" col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Grid: horizontal scroll */
    .dxbl-grid {
        overflow-x: auto !important;
        display:    block !important;
    }

    /* Toolbar wraps on mobile */
    .dxbl-toolbar { flex-wrap: wrap !important; }

    /* KPI grid — 2 columns on mobile instead of 4 */
    .row.g-3 > [class*="col-md"] {
        flex:      0 0 50%;
        max-width: 50%;
    }
}