/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* ---------------------------------------------------------------
   Montserrat — Local Font
   --------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat/Montserrat-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Override Velzon base font variable */
:root,
[data-layout-mode="light"],
[data-layout-mode="dark"] {
  --vz-font-sans-serif: "Montserrat", sans-serif;
  --vz-body-font-family: "Montserrat", sans-serif;
}

/* Override hardcoded Inter font in sidebar, headings & secondary elements */
.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link,
.ff-secondary,
label,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title,
.card-title,
.page-title-box h4 {
  font-family: "Montserrat", sans-serif !important;
}

/* ---------------------------------------------------------------
   Badge dark-subtle fix for dark theme
   --------------------------------------------------------------- */
[data-bs-theme="dark"] .badge.bg-dark-subtle {
  background-color: rgba(255,255,255,.15) !important;
}
[data-bs-theme="dark"] .badge.text-dark {
  color: #ced4da !important;
}

/* ---------------------------------------------------------------
   DataTable — Inactive/terminated row style (dark theme safe)
   --------------------------------------------------------------- */
.row-inactive {
  opacity: .5;
  text-decoration: line-through;
  text-decoration-color: rgba(128,128,128,.4);
}

/* ---------------------------------------------------------------
   Form Controls — Compact -sm font size
   --------------------------------------------------------------- */
.form-control-sm,
.form-select-sm {
  font-size: .75rem !important;
}

/* ---------------------------------------------------------------
   Alert Modal — 380px centered (delete, toggle, confirm)
   --------------------------------------------------------------- */
@media (min-width: 576px) {
  .modal-dialog.modal-alert {
    max-width: 380px;
  }
}
.modal-alert .modal-body .text-danger {
  font-size: 13px;
}

/* ---------------------------------------------------------------
   Select2 — Compact style (consistent with timezone selector)
   --------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  font-size: .75rem !important;
  padding: .15rem .5rem !important;
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #333 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: #666 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
  font-size: .75rem !important;
}
/* Select2 — All selectors compact 0.75rem */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  font-size: .75rem !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  font-size: .75rem !important;
}
.select2-container--bootstrap-5 .select2-results__option {
  font-size: .75rem !important;
  padding: .35rem .75rem !important;
}
.select2-container--bootstrap-5 .select2-results__group {
  font-size: .72rem !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: #405189 !important;
}
.select2-container--bootstrap-5 .select2-results__options--nested .select2-results__option {
  padding-left: 1.5rem !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  font-size: .75rem !important;
}

/* ---------------------------------------------------------------
   Card Header Filters — Compact font size 0.8rem
   --------------------------------------------------------------- */
.card-header .form-select-sm,
.card-header .form-control-sm {
  font-size: .8rem !important;
}
.card-header .btn-sm {
  font-size: .75rem !important;
}
.card-header .select2-container {
  min-width: 180px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* ---------------------------------------------------------------
   Advanced Filters — Mobile responsive
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #advancedFilters .row > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------
   DataTable — Disable sort icon on checkbox column ONLY.
   Match th that contains .bulk-check-all so # / ID columns keep arrows.
   --------------------------------------------------------------- */
table.dataTable thead th:has(.bulk-check-all) {
  cursor: default !important;
}
table.dataTable thead th:has(.bulk-check-all)::before,
table.dataTable thead th:has(.bulk-check-all)::after {
  display: none !important;
}

/* ---------------------------------------------------------------
   Bulk Action Bar — Inside card-body, above table
   --------------------------------------------------------------- */
.bulk-action-bar {
  background: #405189;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: .375rem;
  margin-bottom: .75rem;
  display: none;
}
.bulk-action-bar.show { display: flex !important; }
.bulk-action-bar .bulk-count { font-weight: 600; font-size: .85rem; }
@media (max-width: 767.98px) {
  .bulk-action-bar.show {
    flex-wrap: wrap !important;
    gap: .5rem;
    padding: .5rem .75rem;
  }
  .bulk-action-bar > div {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem !important;
  }
  .bulk-action-bar .btn { font-size: .75rem; padding: .2rem .5rem; }
  .bulk-action-bar .bulk-count { font-size: .8rem; display: block; width: 100%; text-align: center; }
}

/* Sidebar styling */
.navbar-menu .navbar-nav .nav-item {
  line-height: 1.2 !important;
}
.navbar-menu .navbar-nav .nav-link {
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.navbar-menu .navbar-nav .nav-sm .nav-link {
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
}
.navbar-menu .menu-title {
  color: #666666 !important;
}

/* Clickable DataTable rows — legacy row-wide click pattern.
   Tables that switched to the clickable-ID-cell pattern (td.rowDetailCell)
   must NOT be listed here; cursor:pointer on the whole row gives the
   misleading impression that any cell is clickable.
   #tblVouchers removed — uses ID-cell click pattern; the row-wide cursor
   here was overriding the more specific td.rowDetailCell rule (operators
   saw the hand cursor on every column, not just the ID). */
#tblAreas tbody tr,
#tblSales tbody tr,
#tblPayouts tbody tr,
#tblReport tbody tr,
#tblBalanceHistory tbody tr {
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Select2 — Fix placeholder vertical centering
   --------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection--single {
  padding: .575rem .75rem !important;
}

.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single{
  padding: .25rem 2.25rem .25rem .5rem !important;
}

code{
  font-size: .85rem !important;
}

/* ============================================================
   Check Session — Result panel (shared between full page + modal)
   `.cs-*` prefix. Velzon tokens (--vz-*) used throughout so light
   and dark themes flow naturally without overrides.
   Card surface intentionally relies on the standard Bootstrap/Velzon
   `.card` class (white bg, shadow); cs-* classes are MODIFIERS layered
   on top — they don't redefine surface to avoid theme drift.
   ============================================================ */
.cs-card-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--vz-border-color);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: var(--vz-secondary-color);
}
.cs-card-head i { color: var(--vz-primary); font-size: 1rem; }
.cs-card-body { padding: 1rem; }

/* Profile header — banner + avatar */
.cs-profile { position: relative; }
.cs-profile-banner {
    height: 70px;
    background: linear-gradient(135deg, var(--vz-primary-bg-subtle), var(--vz-secondary-bg));
}
.cs-profile-body { padding: 0 1rem 1rem; margin-top: -32px; }
.cs-profile-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cs-profile-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--vz-card-bg);
    border: 4px solid var(--vz-card-bg);
    box-shadow: 0 0 0 1px var(--vz-border-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cs-profile-avatar i { font-size: 1.85rem; line-height: 1; }
.cs-profile-id { flex: 1 1 auto; min-width: 0; }
.cs-profile-name { font-size: 1.05rem; font-weight: 600; color: var(--vz-heading-color); line-height: 1.2; }
.cs-profile-sub  { font-size: .78rem; color: var(--vz-secondary-color); margin-top: .15rem; }

/* Status line — top-right of the profile card on desktop. Empty children
   hide automatically and the separator only renders between two non-empty
   siblings so the row degrades gracefully when fields are missing.
   On mobile (xs/sm) it drops out of absolute positioning and flows as
   its own row below the banner so long called-station strings can't
   collide with the avatar / name. */
.cs-profile-status {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .5rem;
    max-width: 60%;
    font-size: .78rem;
    color: var(--vz-secondary-color);
    text-align: right;
}
.cs-profile-status > * { min-width: 0; }
.cs-profile-status > :empty { display: none; }
.cs-profile-status > :not(:empty) ~ :not(:empty)::before {
    content: '·';
    margin-right: .35rem;
    color: var(--vz-tertiary-color);
}
@media (max-width: 767.98px) {
    /* Static layout on mobile — status renders inline as the last row
       of the body (full width, left-aligned). Avoids overlap with the
       avatar and wrapping artifacts on narrow screens. */
    .cs-profile-status {
        position: static;
        max-width: 100%;
        margin: .5rem 0 0;
        justify-content: flex-start;
        text-align: left;
    }
    .cs-profile-banner { height: 48px; }
}
.cs-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.cs-chips .badge { font-weight: 500; padding: .35rem .6rem; }

/* Live pulse dot */
.cs-pulse {
    position: relative; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%; background: var(--vz-success);
    margin-right: .35rem;
}
.cs-pulse::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: var(--vz-success); opacity: .35; animation: csPulse 1.6s ease-out infinite;
}
@keyframes csPulse { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(1.8); opacity: 0; } }

/* KPI mini cards — compact row-flex tile (icon | label+value). White
   surface drawn explicitly so the previous .card class isn't required
   (avoids Bootstrap's `flex-direction: column` stacking everything). */
.cs-kpi {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .85rem;
    background-color: var(--vz-white, #fff);
    border-radius: .42rem;
    box-shadow: var(--vz-box-shadow-sm, 0 1px 2px rgba(15, 30, 50, .06));
    transition: transform .15s ease, box-shadow .15s ease;
}
[data-bs-theme="dark"] .cs-kpi { background-color: var(--vz-card-bg); }
.cs-kpi:hover { transform: translateY(-1px); box-shadow: 0 .35rem .85rem rgba(0,0,0,.08); }
.cs-kpi .cs-kpi-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: .42rem; font-size: 1.1rem;
}
.cs-kpi .cs-kpi-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vz-secondary-color); font-weight: 600; line-height: 1; }
.cs-kpi .cs-kpi-value { font-size: 1rem; font-weight: 600; color: var(--vz-heading-color); font-variant-numeric: tabular-nums; margin-top: .2rem; line-height: 1.1; }

/* Progress block */
.cs-pg + .cs-pg { margin-top: .9rem; }
.cs-pg-head {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 600; color: var(--vz-body-color);
    margin-bottom: .35rem;
}
.cs-pg-label i { color: var(--vz-primary); margin-right: .35rem; }
.cs-pg-pct { font-variant-numeric: tabular-nums; color: var(--vz-heading-color); }
.cs-pg-bar { height: 8px; border-radius: 6px; }
.cs-pg-foot { display: flex; justify-content: space-between; font-size: .72rem; color: var(--vz-secondary-color); margin-top: .3rem; }
.cs-pill {
    display: inline-block; padding: .2rem .55rem; font-size: .68rem; font-weight: 600;
    background: var(--vz-success-bg-subtle); color: var(--vz-success); border-radius: .35rem;
}
.cs-pill-info    { background: var(--vz-info-bg-subtle); color: var(--vz-info); }
.cs-pill-danger  { background: var(--vz-danger-bg-subtle); color: var(--vz-danger); }
.cs-pill-warning { background: var(--vz-warning-bg-subtle); color: var(--vz-warning); }

/* Definition list — key/value rows inside detail cards */
.cs-dl { list-style: none; padding: 0; margin: 0; font-size: .82rem; }
.cs-dl li {
    display: flex; justify-content: space-between; gap: .85rem;
    padding: .45rem 0; border-bottom: 1px dashed var(--vz-border-color);
    align-items: baseline;
}
.cs-dl li:last-child { border-bottom: 0; }
.cs-dl .cs-dl-k { color: var(--vz-secondary-color); white-space: nowrap; }
.cs-dl .cs-dl-k i { margin-right: .35rem; color: var(--vz-primary); width: 14px; text-align: center; }
.cs-dl .cs-dl-v { color: var(--vz-heading-color); text-align: right; min-width: 0; word-break: break-word; }
.cs-dl .cs-dl-v.text-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Empty-state inside detail card */
.cs-empty {
    text-align: center; padding: 1.5rem .75rem;
    color: var(--vz-secondary-color); font-size: .82rem;
}
.cs-empty i { font-size: 2rem; color: var(--vz-tertiary-color); display: block; margin-bottom: .35rem; }

/* Recent sessions table */
.cs-recent { font-size: .78rem; }
.cs-recent th { white-space: nowrap; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-recent td { white-space: nowrap; }

.gm-style .gm-style-iw{
  font-weight: 400 !important;
}
.gm-ui-hover-effect {
  width: 30px !important;
  height: 28px !important;
}

/* ---------------------------------------------------------------
   Select2 — Dark theme overrides (bootstrap-5 theme)
   Velzon ships only light variants; mirror against [data-bs-theme="dark"]
   so all .select2-selection containers (single + multiple) blend with
   card-bg, plus the dropdown popup that's appended to <body>.
   --------------------------------------------------------------- */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--vz-input-bg, #2a2f34) !important;
  border-color: var(--vz-border-color, #404040) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--vz-secondary-color, #878a99) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--vz-primary, #405189) !important;
  box-shadow: 0 0 0 .15rem rgba(64, 81, 137, .25) !important;
}

/* Selected chips inside multi-select on dark */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--vz-tertiary-bg, #3b3f45) !important;
  border-color: var(--vz-border-color, #404040) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--vz-secondary-color, #878a99) !important;
}

/* Dropdown popup is appended to <body>, NOT inside any [data-bs-theme] —
   target via .select2-container itself + media-style attr selector on html. */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--vz-input-bg, #2a2f34) !important;
  border-color: var(--vz-border-color, #404040) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background-color: var(--vz-input-bg, #2a2f34) !important;
  border-color: var(--vz-border-color, #404040) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--vz-body-color, #ced4da) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
  background-color: var(--vz-primary, #405189) !important;
  color: #fff !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__group {
  color: var(--vz-info, #6691e7) !important;
  background-color: var(--vz-tertiary-bg, #3b3f45) !important;
}

/* ---------------------------------------------------------------
   Browser autofill — kill yellow/olive background on dark theme.
   Chromium ignores background-color on autofilled inputs; the only
   reliable fix is `-webkit-box-shadow inset` to repaint the bg, plus
   `-webkit-text-fill-color` (color is also overridden).
   --------------------------------------------------------------- */
[data-bs-theme="dark"] input:-webkit-autofill:not(:placeholder-shown),
[data-bs-theme="dark"] input:-webkit-autofill:hover:not(:placeholder-shown),
[data-bs-theme="dark"] input:-webkit-autofill:focus:not(:placeholder-shown),
[data-bs-theme="dark"] input:-webkit-autofill:active:not(:placeholder-shown),
[data-bs-theme="dark"] textarea:-webkit-autofill:not(:placeholder-shown),
[data-bs-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--vz-input-bg, #2a2f34) inset !important;
  -webkit-text-fill-color: var(--vz-body-color, #ced4da) !important;
  caret-color: var(--vz-body-color, #ced4da) !important;
  border-color: var(--vz-border-color, #404040) !important;
  transition: background-color 9999s ease-in-out 0s;  /* delay native paint indefinitely */
}

/* Light theme — only repaint when the input has a real value. The
   `:not(:placeholder-shown)` guard keeps Chrome's autofill-candidate state
   from forcing the dark body-color onto the placeholder text (which made
   empty password inputs look like they had real content). */
input:-webkit-autofill:not(:placeholder-shown),
input:-webkit-autofill:hover:not(:placeholder-shown),
input:-webkit-autofill:focus:not(:placeholder-shown),
textarea:-webkit-autofill:not(:placeholder-shown),
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--vz-input-bg, #fff) inset !important;
  -webkit-text-fill-color: var(--vz-body-color, #495057) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------------------------------------------------------------
   Inline-style override — many filter panels across the app use
   `style="background:#f8f9fa;"` (hardcoded light gray). We can't
   easily edit 20+ view files, so override via attribute selector
   + !important. Inline-without-!important loses to !important CSS.
   --------------------------------------------------------------- */
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background-color: #f8f9fa"] {
  background: var(--vz-tertiary-bg, #2c3035) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
/* Labels inside the panel — make sure form-label.small isn't grayed-out */
[data-bs-theme="dark"] [style*="background:#f8f9fa"] .form-label,
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"] .form-label {
  color: var(--vz-body-color, #ced4da) !important;
}
/* `.text-dark` (Bootstrap = near-black) inside the overridden panels becomes
   dark-on-dark = invisible. Force readable color in dark theme. Same for
   `.text-muted` which Velzon dims to ~40% opacity — too faint on dark cards. */
[data-bs-theme="dark"] [style*="background:#f8f9fa"] .text-dark,
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"] .text-dark,
[data-bs-theme="dark"] [style*="background:#f8f9fa"] .text-muted,
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"] .text-muted {
  color: var(--vz-body-color, #ced4da) !important;
}

/* Bootstrap icon variant color — `.text-primary`, `.text-success`, etc. on
   icons stay readable. Just `.text-dark` is the problem. Apply globally so
   any dark-themed surface is safe (modal, card, dropdown). */
[data-bs-theme="dark"] .text-dark {
  color: var(--vz-body-color, #ced4da) !important;
}

/* ---------------------------------------------------------------
   Bootstrap contextual table rows (`.table-success`, `.table-danger`,
   `.table-warning`, `.table-info`) keep pastel bg + DARK text in dark
   theme = unreadable. Soften the bg + force readable text color.
   Used in: profit_loss, payout reports, any contextual highlights.
   --------------------------------------------------------------- */
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-success,
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success > td,
[data-bs-theme="dark"] .table-success > th {
  background-color: rgba(10, 179, 156, .18) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-danger,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger > td,
[data-bs-theme="dark"] .table-danger > th {
  background-color: rgba(240, 101, 72, .18) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-warning,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning > td,
[data-bs-theme="dark"] .table-warning > th {
  background-color: rgba(247, 184, 75, .18) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-info,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info > td,
[data-bs-theme="dark"] .table-info > th {
  background-color: rgba(41, 156, 219, .18) !important;
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-primary,
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-primary > td,
[data-bs-theme="dark"] .table-primary > th {
  background-color: rgba(64, 81, 137, .25) !important;
  color: var(--vz-body-color, #ced4da) !important;
}

/* ---------------------------------------------------------------
   Permissions modal (panel/users/index.php) — scoped <style> block
   uses many hardcoded light colors that ignore dark theme. Override
   here to keep the file untouched.
   --------------------------------------------------------------- */
[data-bs-theme="dark"] .perm-group-card {
  border-color: var(--vz-border-color, #404040) !important;
}
[data-bs-theme="dark"] .perm-group-header {
  background: var(--vz-tertiary-bg, #2c3035) !important;
  border-bottom-color: var(--vz-border-color, #404040) !important;
}
[data-bs-theme="dark"] .perm-group-header span {
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .perm-group-note {
  background: rgba(240, 101, 72, .12) !important;   /* danger tint */
  border-bottom-color: var(--vz-border-color, #404040) !important;
  color: var(--vz-danger, #f06548) !important;
}
[data-bs-theme="dark"] .perm-item:hover {
  background: var(--vz-tertiary-bg, #3b3f45) !important;
}
[data-bs-theme="dark"] .perm-item span {
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .perm-item input:checked + span {
  color: #fff !important;
  font-weight: 500;
}
[data-bs-theme="dark"] .perm-group-card.perm-group-disabled .perm-group-header {
  background: rgba(255, 255, 255, .05) !important;
}

/* ---------------------------------------------------------------
   Export/Import (tools/export_import) — selected Data Type card is
   styled by JS with inline `background:#f0f2f8` (light lavender).
   Override via attribute selector.
   --------------------------------------------------------------- */
[data-bs-theme="dark"] [style*="background:#f0f2f8"],
[data-bs-theme="dark"] [style*="background-color:#f0f2f8"],
[data-bs-theme="dark"] [style*="background: #f0f2f8"] {
  background: rgba(64, 81, 137, .20) !important;     /* primary tint */
  color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] [style*="background:#f0f2f8"] .text-muted,
[data-bs-theme="dark"] [style*="background-color:#f0f2f8"] .text-muted {
  color: var(--vz-body-color, #ced4da) !important;
}

/* ---------------------------------------------------------------
   Pastel highlight panels — preserve semantic color cue (blue=info,
   green=success, amber=warning) but use low-opacity tint instead of
   solid pastel so dark-on-dark text becomes readable.
   --------------------------------------------------------------- */
/* Blue / info tints */
[data-bs-theme="dark"] [style*="background:#f0f9ff"],
[data-bs-theme="dark"] [style*="background-color:#f0f9ff"],
[data-bs-theme="dark"] [style*="background: #f0f9ff"],
[data-bs-theme="dark"] [style*="background:#f0f7ff"],
[data-bs-theme="dark"] [style*="background-color:#f0f7ff"] {
  background: rgba(41, 156, 219, .12) !important;
  color: var(--vz-body-color, #ced4da) !important;
  border-color: rgba(41, 156, 219, .35) !important;
}
/* Green / success tints */
[data-bs-theme="dark"] [style*="background:#f0fdf4"],
[data-bs-theme="dark"] [style*="background-color:#f0fdf4"],
[data-bs-theme="dark"] [style*="background: #f0fdf4"] {
  background: rgba(10, 179, 156, .12) !important;
  color: var(--vz-body-color, #ced4da) !important;
  border-color: rgba(10, 179, 156, .35) !important;
}
/* Amber / warning tints */
[data-bs-theme="dark"] [style*="background:#fff8e1"],
[data-bs-theme="dark"] [style*="background-color:#fff8e1"],
[data-bs-theme="dark"] [style*="background:#fef3c7"],
[data-bs-theme="dark"] [style*="background-color:#fef3c7"] {
  background: rgba(247, 184, 75, .12) !important;
  color: var(--vz-body-color, #ced4da) !important;
  border-color: rgba(247, 184, 75, .35) !important;
}
/* Neutral light variants (gray-ish) — same dark tertiary bg as f8f9fa */
[data-bs-theme="dark"] [style*="background:#f8f9fb"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fb"],
[data-bs-theme="dark"] [style*="background:#f8f9fc"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fc"] {
  background: var(--vz-tertiary-bg, #2c3035) !important;
  color: var(--vz-body-color, #ced4da) !important;
}

/* Common text-muted inside ALL these tinted panels — readable */
[data-bs-theme="dark"] [style*="background:#f0f9ff"] .text-muted,
[data-bs-theme="dark"] [style*="background:#f0f7ff"] .text-muted,
[data-bs-theme="dark"] [style*="background:#f0fdf4"] .text-muted,
[data-bs-theme="dark"] [style*="background:#fff8e1"] .text-muted,
[data-bs-theme="dark"] [style*="background:#fef3c7"] .text-muted,
[data-bs-theme="dark"] [style*="background:#f8f9fb"] .text-muted,
[data-bs-theme="dark"] [style*="background:#f8f9fc"] .text-muted,
[data-bs-theme="dark"] [style*="background:#f0f9ff"] .form-text,
[data-bs-theme="dark"] [style*="background:#f0fdf4"] .form-text,
[data-bs-theme="dark"] [style*="background:#fff8e1"] .form-text,
[data-bs-theme="dark"] [style*="background:#fef3c7"] .form-text,
[data-bs-theme="dark"] [style*="background:#f8f9fb"] .form-text,
[data-bs-theme="dark"] [style*="background:#f8f9fc"] .form-text {
  color: var(--vz-body-color, #ced4da) !important;
}

/* Special: amber inline color (`color:#92400e`) on warning hints —
   too dark on tinted dark bg. Force amber that contrasts. */
[data-bs-theme="dark"] [style*="color:#92400e"] {
  color: var(--vz-warning, #f7b84b) !important;
}

table.dataTable > tbody > tr > td  { padding: .5rem .6rem !important }

/* Modal footer save/cancel */
.modal-footer .btn:not(.btn-sm) {
    padding: 6px 12px !important;
}

/* Wizard / standalone form action buttons. Covers form bodies (.card-body),
   action footers (.card-footer — Back/Save buttons on full-page edit forms),
   and any button inside a <form> element. */
.card-body .btn:not(.btn-sm):not(.dropdown-toggle):not(.btn-close),
.card-footer .btn:not(.btn-sm):not(.dropdown-toggle):not(.btn-close),
form .btn:not(.btn-sm):not(.dropdown-toggle) {
    padding: 6px 12px !important;
}
/* ── DataTable: clickable ID-cell pattern ───────────────────────────
   Tables containing `td.rowDetailCell` route click → detail modal
   only on the ID/number column. Scope:
   - Suppress Bootstrap table-hover row-tint ONLY on tables that have
     rowDetailCell (uses :has() — supported in all modern browsers).
   - Apply a subtle hover tint to the rowDetailCell cell so hover
     feedback is scoped to the clickable area, not the whole row.
   Tables without rowDetailCell retain default Bootstrap row-hover. */
table.table-hover:has(td.rowDetailCell) tbody tr:hover > * {
    --bs-table-accent-bg: transparent;
}
table tbody td.rowDetailCell:hover {
    background-color: rgba(64, 81, 137, 0.07);
}


/* ── DataTable cell font-size — force consistent across all DT instances ── */
table.dataTable thead th,
table.dataTable tbody td {
    font-size: .78rem !important;
}

/* ── Bulk-select checkbox column — keep body cell aligned with the header
   checkbox. Without this, DataTables can leave the body td as text-left
   (its default for non-numeric columns), so the row checkbox renders
   shifted left of the header `bulk-check-all` cell.                       */
table.dataTable thead th .bulk-check-all,
table.dataTable tbody td .bulk-check {
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}
table.dataTable tbody td:has(> .bulk-check) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* BADGE — global force (Bootstrap default 0.75em compounds inconsistently). */
.badge { font-size: .72rem !important; }
.badge-sm,
.badge.badge-sm { font-size: .6rem !important; }

/* DT cell MONOSPACE / CODE — IDs, ticket numbers, IPs, MAC */
table.dataTable tbody td code,
table.dataTable tbody td .font-monospace {
    font-size: .8rem !important;
}

/* KPI summary card LABEL — keep the small uppercase muted heading at .7rem
   regardless of the parent body font (was previously inline; centralised here
   so all pages stay visually aligned with payment-transactions reference). */
/* .card-animate .card-body p.text-uppercase.text-muted {
    font-size: .7rem;
} */

/* Tab-scroll: horizontal scroll for nav-tabs-custom on narrow screens.
   Used by Customer Edit (and any other page that wraps tab nav in
   `.tab-scroll`). Children stay on one line; thin scrollbar appears
   only when overflow exists. iOS smooth-scroll momentum enabled. */
.tab-scroll                       { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tab-scroll::-webkit-scrollbar    { height: 3px; }
.tab-scroll::-webkit-scrollbar-thumb { background: var(--vz-border-color); border-radius: 2px; }
.tab-scroll .nav-tabs-custom      { flex-wrap: nowrap !important; min-width: max-content; gap: .15rem; }
.tab-scroll .nav-tabs-custom .nav-link { white-space: nowrap; padding-left: .6rem; padding-right: .6rem; }

/* Tooltip variant that preserves line breaks for multi-line note bodies
   (Commission Payout notes, autopayout context lines, etc.). Bootstrap's
   default tooltip collapses whitespace, which mashes "Created: …\nPaid: …"
   into a single illegible line. Apply via data-bs-custom-class="tooltip-pre". */
.tooltip.tooltip-pre .tooltip-inner { white-space: pre-line; text-align: left; max-width: 320px; }

/* ─────────────────────────────────────────────
   Choices.js — match Bootstrap form-select sizing
   ─────────────────────────────────────────── */
/* !important needed because Velzon ships choices.min.css after this file
   in the page <head> ordering (head-css.php → custom.css; then choices.min.css
   in the per-page head block). */
/* Margin-bottom 0 — let the surrounding Bootstrap row gutter (.row.g-3)
   handle vertical spacing. .75rem extra was too much for usergroups
   where outlet-restrict section sits right under the reseller select. */
.choices { margin-bottom: 0 !important; }

/* Tighten the gap between Reseller Access multi-select and the
   "Restrict to Specific Outlets" box that follows. Different pages name
   the wrapper differently (area-, ug-, promo-, …) so list them
   explicitly. Without this they sit a full row-gutter (1rem) apart and
   look disconnected from the field they belong to. */

.choices__inner {
    min-height: 38px !important;
    font-size: .8125rem !important;
    background-color: var(--vz-input-bg) !important;
    border-radius: .25rem !important;
    line-height: 1.5 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.choices[data-type*="select-multiple"] .choices__inner { padding-left: .5rem !important; }
.choices__list--multiple .choices__item {
    font-size: .75rem !important;
    padding: .15rem .5rem !important;
    margin: .1rem .25rem .1rem 0 !important;
    line-height: 1.4 !important;
    border-radius: .25rem !important;
}
/* Velzon app.css ships .choices__list--dropdown .choices__list with
   `margin: 0 -16px -16px` which yanks list items flush to the left edge.
   Kill the negative side margins so dropdown items respect their own
   padding-left. */
.choices__list--dropdown .choices__list,
.choices__list[aria-multiselectable] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-multiselectable] .choices__item {
    padding: .375rem 1.5rem !important;
    font-size: .8125rem !important;
    line-height: 1.35 !important;
}
/* Indent items that belong to an optgroup (the Choices group heading sits
   above its children — sibling selector picks up all subsequent options).
   Used by Restrict to Specific Outlets dropdowns where outlets are
   grouped by reseller. */
.choices__group ~ .choices__item--choice {
    padding-left: 2.5rem !important;
}
.choices__input.choices__input--cloned {
    font-size: .8125rem !important;
    padding: 0 .25rem !important;
    margin-bottom: .25rem !important;
    background-color: transparent !important;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-multiselectable] { padding: .25rem 0 !important; }
.choices__list--dropdown { border-radius: .25rem !important; }
.choices__list{padding:0 !important;}
/* Phone picker — Select2 compact selector */
[data-phone-flag] .phone-flag-select{display:none;}
[data-phone-flag] .input-group{flex-wrap:nowrap;}
[data-phone-flag] .input-group .select2-container{flex:0 0 100px;width:100px !important;}
[data-phone-flag] .input-group .select2-container .select2-selection.select2-selection--single{
    height:38px !important;
    border-top-right-radius:0;border-bottom-right-radius:0;
    border:var(--vz-border-width,1px) solid var(--vz-input-border,#ced4da);
    box-shadow:none !important;
    background-color:var(--vz-input-bg,#fff);
}
[data-phone-flag] .input-group .select2-selection__rendered{font-size:0.8rem;}
[data-phone-flag] .input-group .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-phone-flag] .input-group .select2-container--bootstrap-5.select2-container--open .select2-selection{
    box-shadow:none !important;outline:0;
}
[data-phone-flag] .input-group [data-phone-display]{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;flex:1 1 auto;min-width:0;box-shadow:none;}
[data-phone-flag] .input-group [data-phone-display]:focus{box-shadow:none;border-color:var(--vz-input-border,#ced4da);}
.phone-flag-dropdown{min-width:260px;}

/* ────────────────────────────────────────────────────────────────────────
   Dark-theme primary brighten (accessibility). Velzon's default primary
   #4b38b3 sits at ~2:1 contrast on the dark surface, so links / .text-primary
   / action icons are hard to read. Light theme keeps the original (already
   ~8:1) — only DARK is remapped to a brighter on-brand violet (#a78bfa ≈ 5:1
   on the dark background). Covers plain <a> (--vz-link-color), .link-primary /
   .text-primary (--vz-primary[-rgb]), and primary buttons / active states.
   ──────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --vz-primary: #a78bfa;
    --vz-primary-rgb: 167, 139, 250;
    --vz-link-color: #a78bfa;
    --vz-link-color-rgb: 167, 139, 250;
    --vz-link-hover-color: #c4b5fd;
    --vz-link-hover-color-rgb: 196, 181, 253;
}

/* nav-tabs-custom hardcodes #4b38b3 for the active label + underline (it does
   NOT use var(--vz-primary)), so the token override above can't reach it.
   Patch just the dark-theme active tab color + underline to the same violet. */
[data-bs-theme="dark"] .nav-tabs-custom .nav-item .nav-link.active,
[data-bs-theme="dark"] .nav-tabs-custom .nav-link.active {
  color: #c4b5fd;                 /* active tab text: brighter violet → pops vs the muted inactive tabs */
}
[data-bs-theme="dark"] .nav-tabs-custom .nav-item .nav-link::after,
[data-bs-theme="dark"] .nav-tabs-custom .nav-link::after {
  background: #a78bfa;            /* accent underline */
  height: 2px;                    /* thicker underline = clearer "selected" cue */
}

/* Solid primary BUTTONS keep the original deep indigo in dark. The brightened
   --vz-primary above is for TEXT/BORDER on the dark bg (links, outline, nav) —
   but a solid .btn-primary fills WITH it, putting a low-contrast white label on
   a light violet fill. Restore just the solid fill + its interaction states. */
[data-bs-theme="dark"] .btn-primary {
  --vz-btn-bg: #4b38b3;
  --vz-btn-border-color: #4b38b3;
  --vz-btn-hover-bg: #403098;
  --vz-btn-hover-border-color: #3c2d8f;
  --vz-btn-active-bg: #3c2d8f;
  --vz-btn-active-border-color: #382a86;
  --vz-btn-disabled-bg: #4b38b3;
  --vz-btn-disabled-border-color: #4b38b3;
}

/* Archived-owner catalog marker — a red border on the catalog selectors
   (bandwidth / usergroup / product) of an edit form whose Ownership is an
   ARCHIVED entity. The resource keeps loading that owner's catalog so the
   existing relation stays intact (the product/promo/addon just can't be used
   for new customers/vouchers); the border cues the admin that these options
   belong to an inactive owner. Toggled by entity-select2.js markArchivedCatalog()
   via the .owner-archived-catalog class on the underlying <select>. */
.owner-archived-catalog.form-select,
.owner-archived-catalog.form-control,
.owner-archived-catalog + .select2-container .select2-selection {
  border-color: var(--vz-danger) !important;
}

/* Sidebar brand box - jarak vertikal logo di DESKTOP saja (arahan user
   2026-08-10): tema asli padding 0 1.3rem. Mobile/drawer tetap bawaan. */
@media (min-width: 768px) {
  .app-menu .navbar-brand-box { padding: 1.3rem 1.3rem; }
}