/* !
 * DharmiERP — custom.css
 * Theme-specific overrides on top of AdminLTE v4.
 * Do NOT add HopeUI / iqonic rules here.
 */

/* ──────────────────────────────────────────
   Base
────────────────────────────────────────── */
:focus {
  outline: none;
}

/* Font smoothing — prevents blurry fonts on Retina/macOS */
body,
.app-sidebar,
.app-header,
.card,
.btn,
.form-control,
.form-select,
.table,
.badge,
.modal-content {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.5;
}

/* ──────────────────────────────────────────
   Sidebar brand icon alignment
────────────────────────────────────────── */
.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ──────────────────────────────────────────
   Sidebar active link
────────────────────────────────────────── */
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:not(.static-item).active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ──────────────────────────────────────────
   Buttons — remove Safari/Chrome native styling
────────────────────────────────────────── */
.btn,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* ──────────────────────────────────────────
   Forms — consistent border/radius rendering
────────────────────────────────────────── */
input[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ──────────────────────────────────────────
   Custom select arrow (consistent across browsers)
────────────────────────────────────────── */
.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.75rem center;
  background-size:     12px;
  padding-right:       2.25rem;
}

/* ──────────────────────────────────────────
   Scrollbar (WebKit/macOS)
────────────────────────────────────────── */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius:    3px;
}

/* ──────────────────────────────────────────
   GPU acceleration for animated elements
────────────────────────────────────────── */
.app-sidebar,
.nav-link,
.btn,
.card,
.dropdown-menu,
.modal-dialog {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

/* ──────────────────────────────────────────
   Utility icon sizes
────────────────────────────────────────── */
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }

/* ──────────────────────────────────────────
   Progress bar utility
────────────────────────────────────────── */
.progress-xs {
  height: 4px;
}

/* ──────────────────────────────────────────
   DataTables search fix (Safari oval pill)
────────────────────────────────────────── */
div.dataTables_wrapper input[type="search"] {
  -webkit-appearance: none;
  border-radius: 4px;
  border: 1px solid #ced4da;
  padding: 4px 8px;
}

/* ──────────────────────────────────────────
   Cards — subtle hover lift
────────────────────────────────────────── */
.card {
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ──────────────────────────────────────────
   Table — improved readability
────────────────────────────────────────── */
.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* ──────────────────────────────────────────
   Toastr z-index (above BS5 modals = 1060)
────────────────────────────────────────── */
#toast-container {
  z-index: 1100;
}

:focus {
  outline: none;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

/* ──────────────────────────────────────────
   Login page — validation error display
────────────────────────────────────────── */
.login-field-error {
  display    : block;
  font-size  : .78rem;
  color      : #e74c3c;
  margin-top : 5px;
  font-weight: 500;
  min-height : 1em;
}
.login-card-body .input-group.is-invalid-group .form-control {
  border-color: #e74c3c;
}

/* ──────────────────────────────────────────
   ERP Footer — match ERP design system
────────────────────────────────────────── */
.app-footer {
  background    : #fff;
  border-top    : 1px solid #e4e2de;
  padding       : 14px 24px;
  font-size     : .78rem;
  color         : #6b6860;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 10px;
  flex-wrap     : wrap;
  font-family   : 'DM Sans', system-ui, sans-serif;
}
.app-footer strong {
  font-weight: 600;
  color      : #1a1917;
}
.app-footer a {
  color          : #1a1917;
  text-decoration: none;
  font-weight    : 500;
}
.app-footer a:hover {
  text-decoration: underline;
  color          : var(--bs-primary, #3a57e8);
}
.app-footer .footer-right {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : .73rem;
  color      : #9b9890;
}
.app-footer .footer-version {
  background   : #f5f4f1;
  border       : 1px solid #e4e2de;
  border-radius: 20px;
  padding      : 2px 10px;
  font-size    : .71rem;
  font-weight  : 600;
  color        : #6b6860;
  letter-spacing: .03em;
}

/* ──────────────────────────────────────────
   Sidebar — replace big fat circle dots with
   inline SVG icons added via Walker
────────────────────────────────────────── */
.nav-icon.erp-nav-svg {
  width      : 16px;
  height     : 16px;
  flex-shrink: 0;
  opacity    : .75;
  transition : opacity .15s;
  vertical-align: middle;
}
.nav-link.active  .erp-nav-svg,
.nav-link:hover   .erp-nav-svg { opacity: 1; }
/* Hide the default AdminLTE bi-circle fallback when our SVG is present */
.nav-link .nav-icon.bi-circle-fill { display: none; }

/* ──────────────────────────────────────────
   Lock Screen — validation + form helpers
────────────────────────────────────────── */
/* Error message inside unlock form */
.lockscreen-field-error {
  display    : block;
  font-size  : .78rem;
  color      : #e74c3c;
  font-weight: 500;
  margin-top : 2px;
}
#unlock-error-wrap {
  min-height : 22px;
  text-align : center;
}
/* Bootstrap 3 help-block compat */
.lockscreen-wrapper .help-block {
  display  : block;
  font-size: .82rem;
  color    : #adb5bd;
  margin   : 6px 0 0;
}
/* Unlock button icon sizing */
#unlock-btn .bi {
  font-size : 1.15rem;
  display   : block;
}
/* Red border on invalid password field */
#unlock-password.is-invalid {
  border-color: #e74c3c;
  box-shadow  : 0 0 0 2px rgba(231,76,60,.15);
}

/* ============================================================
   Global Header Search  (gs-*)
   ============================================================ */
.gs-nav-item {
    position : relative;
}
.gs-wrap {
    position  : relative;
    width     : 320px;
}
.gs-bar {
    display       : flex;
    align-items   : center;
    height        : 34px;
    border        : 1.5px solid #dee2e6;
    border-radius : 8px;
    background    : #f8f9fa;
    overflow      : hidden;
    transition    : border-color .15s, box-shadow .15s, background .15s;
}
.gs-bar:focus-within {
    border-color : #86b7fe;
    background   : #fff;
    box-shadow   : 0 0 0 3px rgba(13,110,253,.12);
}
.gs-type-select {
    flex-shrink         : 0;
    width               : 100px;
    height              : 100%;
    padding             : 0 22px 0 10px;
    border              : none;
    border-right        : 1.5px solid #dee2e6;
    border-radius       : 0;
    background          : transparent;
    font-size           : .78rem;
    font-weight         : 500;
    color               : #495057;
    appearance          : none;
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 7px center;
    cursor              : pointer;
    outline             : none;
}
.gs-inner {
    flex        : 1;
    display     : flex;
    align-items : center;
    height      : 100%;
    padding     : 0 10px;
}
.gs-icon {
    flex-shrink  : 0;
    color        : #adb5bd;
    margin-right : 7px;
}
.gs-input {
    flex       : 1;
    min-width  : 0;
    border     : none;
    background : transparent;
    font-size  : .875rem;
    color      : #212529;
    outline    : none;
    padding    : 0;
}
.gs-input::placeholder { color: #adb5bd; }
.gs-spinner {
    flex-shrink : 0;
    margin-left : 4px;
    color       : #adb5bd;
    display     : flex;
    align-items : center;
}
.gs-clear-btn {
    flex-shrink     : 0;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 20px;
    height          : 20px;
    border          : none;
    border-radius   : 50%;
    background      : #dee2e6;
    color           : #495057;
    font-size       : .6rem;
    cursor          : pointer;
    margin-left     : 4px;
    line-height     : 1;
    padding         : 0;
    transition      : background .12s, color .12s;
}
.gs-clear-btn:hover { background: #adb5bd; color: #fff; }

/* ── Results dropdown ── */
.gs-dropdown {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 0;
    right         : 0;
    background    : #fff;
    border        : 1.5px solid #dee2e6;
    border-radius : 10px;
    box-shadow    : 0 8px 28px rgba(0,0,0,.13);
    z-index       : 9999;
    max-height    : 380px;
    overflow-y    : auto;
}
.gs-no-results {
    padding    : 18px 16px;
    color      : #6c757d;
    font-size  : .85rem;
    text-align : center;
}
.gs-item {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    padding       : 10px 14px;
    cursor        : pointer;
    transition    : background .12s;
    border-bottom : 1px solid #f1f3f5;
}
.gs-item:last-child { border-bottom: none; }
.gs-item:hover,
.gs-item:focus { background: #f8f9fa; outline: none; }
.gs-item-icon {
    width           : 34px;
    height          : 34px;
    border-radius   : 50%;
    background      : #e9ecef;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    font-size       : 1rem;
    color           : #495057;
}
.gs-item-info    { flex: 1; min-width: 0; }
.gs-item-name {
    font-size    : .875rem;
    font-weight  : 500;
    color        : #212529;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.gs-item-sub {
    font-size  : .78rem;
    color      : #6c757d;
    margin-top : 2px;
}
.gs-item-badge {
    flex-shrink    : 0;
    font-size      : .7rem;
    font-weight    : 600;
    padding        : 2px 9px;
    border-radius  : 20px;
    text-transform : capitalize;
    white-space    : nowrap;
}
.gs-item-badge.customer          { background: #e7f5ff; color: #1971c2; }
.gs-item-badge.status-processing { background: #fff3bf; color: #9c6700; }
.gs-item-badge.status-completed  { background: #ebfbee; color: #2b7a3c; }
.gs-item-badge.status-cancelled  { background: #fff5f5; color: #c92a2a; }
.gs-item-badge.status-pending    { background: #f3f0ff; color: #5f3dc4; }
.gs-item-badge.status-on-hold    { background: #fff9db; color: #9c6700; }
.gs-item-badge.status-refunded   { background: #f1f3f5; color: #495057; }
.gs-item-badge.status-failed     { background: #fff5f5; color: #c92a2a; }

/* ── Modal overlay ── */
.gs-modal-overlay {
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.46);
    z-index         : 99999;
}
.gs-modal-box {
    position      : relative;
    background    : #fff;
    border-radius : 14px;
    box-shadow    : 0 20px 60px rgba(0,0,0,.2);
    width         : 540px;
    max-width     : calc(100vw - 32px);
    max-height    : 88vh;
    overflow-y    : auto;
    padding       : 26px 26px 22px;
}
.gs-modal-close {
    position    : absolute;
    top         : 14px;
    right       : 16px;
    background  : none;
    border      : none;
    font-size   : 1.5rem;
    line-height : 1;
    color       : #adb5bd;
    cursor      : pointer;
    padding     : 0 4px;
    transition  : color .12s;
}
.gs-modal-close:hover { color: #495057; }
.gs-modal-loading,
.gs-modal-error {
    padding    : 40px 16px;
    text-align : center;
    color      : #6c757d;
    font-size  : .875rem;
}
.gs-modal-error { color: #dc3545; }

/* ── Detail header ── */
.gs-detail-header {
    display        : flex;
    align-items    : center;
    gap            : 14px;
    padding-bottom : 16px;
    margin-bottom  : 18px;
    border-bottom  : 1.5px solid #f1f3f5;
}
.gs-detail-avatar {
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    background      : #e9ecef;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.5rem;
    color           : #495057;
    flex-shrink     : 0;
}
.gs-detail-avatar.order { background: #fff3bf; color: #9c6700; }
.gs-detail-title {
    font-size   : 1.05rem;
    font-weight : 600;
    color       : #212529;
    margin      : 0 0 5px;
}
.gs-detail-badge {
    font-size      : .72rem;
    font-weight    : 600;
    padding        : 3px 11px;
    border-radius  : 20px;
    text-transform : capitalize;
    display        : inline-block;
}
.gs-detail-badge.customer          { background: #e7f5ff; color: #1971c2; }
.gs-detail-badge.status-processing { background: #fff3bf; color: #9c6700; }
.gs-detail-badge.status-completed  { background: #ebfbee; color: #2b7a3c; }
.gs-detail-badge.status-cancelled  { background: #fff5f5; color: #c92a2a; }
.gs-detail-badge.status-pending    { background: #f3f0ff; color: #5f3dc4; }
.gs-detail-badge.status-on-hold    { background: #fff9db; color: #9c6700; }
.gs-detail-badge.status-refunded   { background: #f1f3f5; color: #495057; }
.gs-detail-badge.status-failed     { background: #fff5f5; color: #c92a2a; }

/* ── Detail grid ── */
.gs-detail-grid {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    margin-bottom  : 20px;
}
.gs-detail-row   { display: flex; gap: 12px; }
.gs-detail-label {
    flex-shrink : 0;
    width       : 110px;
    font-size   : .8rem;
    font-weight : 500;
    color       : #6c757d;
    padding-top : 1px;
}
.gs-detail-value {
    flex       : 1;
    font-size  : .875rem;
    color      : #212529;
    word-break : break-word;
}

/* ── Order items table ── */
.gs-items-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : .82rem;
}
.gs-items-table th,
.gs-items-table td {
    padding       : 7px 10px;
    border-bottom : 1px solid #f1f3f5;
    color         : #495057;
}
.gs-items-table thead th {
    font-weight    : 600;
    font-size      : .73rem;
    color          : #6c757d;
    text-transform : uppercase;
    letter-spacing : .04em;
    background     : #f8f9fa;
}
.gs-items-table tfoot td  { border-top: 1.5px solid #dee2e6; border-bottom: none; }
.gs-total-row td           { font-size: .9rem; }
.gs-no-items               { padding: 12px; color: #adb5bd; font-size: .8rem; }

/* ── Date Range Picker ─────────────────────────────────────── */
.erp-dr-wrap {
    display          : inline-flex;
    align-items      : center;
    gap              : 6px;
    height           : 38px;
    padding          : 0 10px 0 12px;
    border           : 1.5px solid var(--erp-border, #dee2e6);
    border-radius    : 8px;
    background-color : #ffffff !important;
    cursor           : pointer;
    transition       : border-color .15s, box-shadow .15s;
    flex-shrink      : 0;
    box-sizing       : border-box;
}
.erp-dr-wrap:hover        { border-color: var(--erp-primary, #5a78ee); }
.erp-dr-wrap:focus-within { border-color: var(--erp-primary, #5a78ee); box-shadow: 0 0 0 3px rgba(90,120,238,.12); }

.erp-dr-icon {
    color       : var(--erp-text-muted, #adb5bd);
    font-size   : .85rem;
    flex-shrink : 0;
    pointer-events: none;
}

.erp-dr-input {
    border           : none !important;
    background-color : transparent !important;
    box-shadow       : none !important;
    outline          : none;
    font-size        : .8rem;
    width            : 160px;
    color            : var(--erp-text, #1a1917);
    cursor           : pointer;
    padding          : 0;
    line-height      : 1;
    white-space      : nowrap;
    overflow         : hidden;
    text-overflow    : ellipsis;
    flex-shrink      : 0;
}
.erp-dr-input::placeholder { color: var(--erp-text-muted, #adb5bd); }

/* Flatpickr range — style the selected range highlight */
.flatpickr-day.inRange    { background: rgba(90,120,238,.12) !important; border-color: transparent !important; box-shadow: none !important; }
.flatpickr-day.startRange,
.flatpickr-day.endRange   { background: var(--erp-primary, #5a78ee) !important; border-color: var(--erp-primary, #5a78ee) !important; color: #fff !important; }

/* ── Flatpickr: selected day & today indicator ───────────────────────────── */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background   : var(--erp-primary, #5a78ee) !important;
    border-color : var(--erp-primary, #5a78ee) !important;
    color        : #fff !important;
    font-weight  : 600;
}
.flatpickr-day.today:not(.selected) {
    border-bottom : 2px solid var(--erp-primary, #5a78ee) !important;
    font-weight   : 600;
    color         : inherit;
    background    : transparent !important;
}
.flatpickr-day:hover:not(.selected):not(.disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background   : rgba(90,120,238,.12) !important;
    border-color : transparent !important;
}

/* ── Dashboard Activity Overview: top products + status ─────────────────── */
.dash-section-label {
    font-size    : .72rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color        : var(--erp-text-muted, #6c757d);
    margin       : 0 0 8px;
}
.dash-top-products, .dash-status-list {
    list-style   : none;
    margin       : 0;
    padding      : 0;
    display      : flex;
    flex-direction: column;
    gap          : 6px;
}
.dash-top-product-item {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 8px;
    padding        : 6px 10px;
    border-radius  : 6px;
    background     : var(--bs-light, #f8f9fa);
    font-size      : .83rem;
}
.dark .dash-top-product-item { background: rgba(255,255,255,.05); }
.dash-top-product-name {
    flex         : 1;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
    font-weight  : 500;
}
.dash-top-product-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-badge-qty {
    font-size   : .75rem;
    padding     : 2px 6px;
    border-radius: 20px;
    background  : rgba(90,120,238,.12);
    color       : var(--erp-primary, #5a78ee);
    white-space : nowrap;
}
.dash-top-product-val {
    font-weight : 600;
    font-size   : .83rem;
    white-space : nowrap;
}
.dash-status-item {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 5px 10px;
    border-radius  : 6px;
    background     : var(--bs-light, #f8f9fa);
    font-size      : .83rem;
}
.dark .dash-status-item { background: rgba(255,255,255,.05); }
.dash-status-count {
    flex       : 1;
    color      : var(--erp-text-muted, #6c757d);
    font-size  : .8rem;
}
.dash-status-total { font-weight: 600; font-size: .83rem; flex-shrink: 0; }

/* ── Salary calculation — month + year select row ───────────── */
.erp-month-year-wrap {
    display     : inline-flex;
    align-items : center;
    gap         : 8px;
}

/* circular × clear button */
.erp-dr-clear {
    width          : 20px;
    height         : 20px;
    border-radius  : 50%;
    border         : none;
    background     : #e9ecef;
    color          : #868e96;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    font-size      : .9rem;
    flex-shrink    : 0;
    line-height    : 1;
    padding        : 0;
    transition     : background .15s, color .15s;
}
.erp-dr-clear:hover { background: #ffe3e3; color: #dc3545; }

/* ── ERP Pagination ─────────────────────────────────────────────────────── */
.erp-pagination {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 12px 16px;
    border-top     : 1px solid var(--bs-border-color, #e5e7eb);
    flex-wrap      : wrap;
    gap            : 8px;
    background     : #fff;
}
.erp-pagination-info { font-size: 13px; color: #6b7280; }
.erp-pagination-pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.erp-page-btn {
    min-width      : 34px;
    height         : 34px;
    padding        : 0 10px;
    border         : 1px solid var(--bs-border-color, #dee2e6);
    background     : #fff;
    color          : #374151;
    border-radius  : 6px;
    font-size      : 13px;
    font-weight    : 500;
    cursor         : pointer;
    transition     : background .15s, color .15s, border-color .15s;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    line-height    : 1;
}
.erp-page-btn:hover:not(:disabled):not(.active) { background: #f3f4f6; border-color: #adb5bd; }
.erp-page-btn.active { background: #3b5bdb; color: #fff; border-color: #3b5bdb; }
.erp-page-btn:disabled { opacity: .4; cursor: default; }
/* Dark mode */
.dark .erp-pagination { background: transparent; border-color: rgba(255,255,255,.1); }
.dark .erp-page-btn   { background: #1e293b; color: #cbd5e1; border-color: rgba(255,255,255,.12); }
.dark .erp-page-btn:hover:not(:disabled):not(.active) { background: #334155; }
.dark .erp-pagination-info { color: #94a3b8; }

/* ── Customer Purchase Analytics ─────────────────────────────────────────── */
.dash-cust-table-wrap { overflow-x: auto; }
.dash-cust-table-wrap .dash-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dash-cust-table-wrap .dash-table thead tr { border-bottom: 1px solid var(--bs-border-color, #e5e7eb); }
.dash-cust-table-wrap .dash-table th { padding: 10px 14px; font-weight: 600; color: #6b7280; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.dash-cust-table-wrap .dash-table td { padding: 10px 14px; border-bottom: 1px solid var(--bs-border-color, #f3f4f6); vertical-align: middle; }
.dash-cust-table-wrap .dash-table tbody tr:last-child td { border-bottom: none; }
.dash-cust-table-wrap .dash-table tbody tr:hover { background: rgba(59,91,219,.04); }
.dash-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f5f9; font-size: .78rem; font-weight: 700; color: #3b5bdb; }
.dash-spend-bar-bg { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.dash-spend-bar-fill { height: 100%; background: linear-gradient(90deg, #3b5bdb, #4bc7d2); border-radius: 3px; transition: width .4s ease; }
/* Dark mode */
.dark .dash-cust-table-wrap .dash-table thead tr { border-color: rgba(255,255,255,.1); }
.dark .dash-cust-table-wrap .dash-table th { color: #94a3b8; }
.dark .dash-cust-table-wrap .dash-table td { border-color: rgba(255,255,255,.06); }
.dark .dash-cust-table-wrap .dash-table tbody tr:hover { background: rgba(255,255,255,.04); }
.dark .dash-rank-badge { background: #1e293b; color: #818cf8; }
.dark .dash-spend-bar-bg { background: #334155; }