/* ====== SuperElan app styles (plain CSS, vendor-agnostic) ====== */

/* ---------- Brand palettes (Customize > Color) ---------- */
:root,
html[data-color="emerald"] {
  --brand-50:  236 253 245;
  --brand-100: 209 250 229;
  --brand-200: 167 243 208;
  --brand-300: 110 231 183;
  --brand-400:  52 211 153;
  --brand-500:  16 185 129;
  --brand-600:   5 150 105;
  --brand-700:   4 120  87;
  --brand-800:   6  95  70;
  --brand-900:   6  78  59;
}
html[data-color="blue"] {
  --brand-50:  239 246 255;
  --brand-100: 219 234 254;
  --brand-200: 191 219 254;
  --brand-300: 147 197 253;
  --brand-400:  96 165 250;
  --brand-500:  59 130 246;
  --brand-600:  37  99 235;
  --brand-700:  29  78 216;
  --brand-800:  30  64 175;
  --brand-900:  30  58 138;
}
html[data-color="violet"] {
  --brand-50:  245 243 255;
  --brand-100: 237 233 254;
  --brand-200: 221 214 254;
  --brand-300: 196 181 253;
  --brand-400: 167 139 250;
  --brand-500: 139  92 246;
  --brand-600: 124  58 237;
  --brand-700: 109  40 217;
  --brand-800:  91  33 182;
  --brand-900:  76  29 149;
}
html[data-color="rose"] {
  --brand-50:  255 241 242;
  --brand-100: 255 228 230;
  --brand-200: 254 205 211;
  --brand-300: 253 164 175;
  --brand-400: 251 113 133;
  --brand-500: 244  63  94;
  --brand-600: 225  29  72;
  --brand-700: 190  18  60;
  --brand-800: 159  18  57;
  --brand-900: 136  19  55;
}
html[data-color="orange"] {
  --brand-50:  255 247 237;
  --brand-100: 255 237 213;
  --brand-200: 254 215 170;
  --brand-300: 253 186 116;
  --brand-400: 251 146  60;
  --brand-500: 249 115  22;
  --brand-600: 234  88  12;
  --brand-700: 194  65  12;
  --brand-800: 154  52  18;
  --brand-900: 124  45  18;
}
html[data-color="slate"] {
  --brand-50:  248 250 252;
  --brand-100: 241 245 249;
  --brand-200: 226 232 240;
  --brand-300: 203 213 225;
  --brand-400: 148 163 184;
  --brand-500: 100 116 139;
  --brand-600:  71  85 105;
  --brand-700:  51  65  85;
  --brand-800:  30  41  59;
  --brand-900:  15  23  42;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Density (Customize > Density) ---------- */
html[data-density="compact"]    { font-size: 13.5px; }
html[data-density="comfortable"]{ font-size: 14.5px; }
html[data-density="spacious"]   { font-size: 15.5px; }
html[data-density="compact"]    .card-pad { padding: 0.75rem; }
html[data-density="spacious"]   .card-pad { padding: 1.5rem 1.75rem; }
html[data-density="compact"]    .nav-link { padding-top: .35rem; padding-bottom: .35rem; }

/* ---------- Container (Customize > Container) ---------- */
html[data-container="boxed"] body { max-width: 1440px; margin: 0 auto; }
html[data-container="boxed"] #main-shell { max-width: 1440px; margin: 0 auto; }

/* ---------- Shell motion ---------- */
#sidebar {
  transition:
    width .32s cubic-bezier(.22, 1, .36, 1),
    transform .32s cubic-bezier(.22, 1, .36, 1),
    box-shadow .24s ease;
  will-change: width, transform;
}
#main-shell {
  transition: margin-inline-start .32s cubic-bezier(.22, 1, .36, 1);
}
#sidebar-backdrop {
  transition: opacity .26s ease;
}
#sidebar.sidebar-mobile-open {
  box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
}
#sidebar .nav-text,
#sidebar [data-brand-text],
#sidebar #sidebar-user .nav-text,
#sidebar .nav-section span,
#sidebar .nav-section [data-chevron],
#sidebar .nav-link .ms-auto,
#sidebar .nav-sub .ms-auto {
  transition:
    opacity .18s ease,
    max-width .28s cubic-bezier(.22, 1, .36, 1),
    transform .28s cubic-bezier(.22, 1, .36, 1),
    margin .28s cubic-bezier(.22, 1, .36, 1);
}
/* ---------- Sidebar collapsed (icon-only) ---------- */
html[data-sidebar-collapsed="1"] #sidebar           { width: 4.5rem; }
html[data-sidebar-collapsed="1"] #sidebar .nav-text,
html[data-sidebar-collapsed="1"] #sidebar .nav-section span,
html[data-sidebar-collapsed="1"] #sidebar .nav-section [data-chevron],
html[data-sidebar-collapsed="1"] #sidebar .nav-link .ms-auto,
html[data-sidebar-collapsed="1"] #sidebar #sidebar-user .nav-text,
html[data-sidebar-collapsed="1"] #sidebar [data-brand-text] {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: scale(.96);
  margin: 0 !important;
  pointer-events: none;
}
html[data-sidebar-collapsed="1"] #sidebar .nav-section {
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
html[data-sidebar-collapsed="1"] #sidebar [data-collapsible-group] { display: block !important; }
html[data-sidebar-collapsed="1"] #sidebar .nav-link,
html[data-sidebar-collapsed="1"] #sidebar .nav-sub {
  justify-content: center;
  margin-inline: .5rem;
  padding-inline: .75rem;
}
html[data-sidebar-collapsed="1"] #sidebar .nav-sub {
  margin-inline-start: .5rem;
}
html[data-sidebar-collapsed="1"] #main-shell        { margin-inline-start: 4.5rem; }

@media (min-width: 1024px) {
  html[data-sidebar-collapsed="1"] #main-shell { margin-inline-start: 4.5rem !important; }
}
/* ---------- Sidebar theme override (independent of global theme) ---------- */
html[data-sidebar-theme="dark"] #sidebar {
  background-color: #0a0b0f;
  color: #cbd5e1;
  border-color: rgba(255,255,255,.08);
}
html[data-sidebar-theme="dark"] #sidebar a,
html[data-sidebar-theme="dark"] #sidebar .nav-link,
html[data-sidebar-theme="dark"] #sidebar [data-collapse-toggle] { color: #cbd5e1; }
html[data-sidebar-theme="dark"] #sidebar .nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
html[data-sidebar-theme="dark"] #sidebar .nav-link.active {
  background: rgba(var(--brand-500) / .12);
  color: rgb(var(--brand-400));
}
html[data-sidebar-theme="dark"] #sidebar .nav-section span { color: #64748b; }
html[data-sidebar-theme="dark"] #sidebar .nav-section { border-color: rgba(255,255,255,.06); }

/* ---------- Deep dark mode tweaks (match Apex template) ---------- */
.dark body                { background-color: #0a0b0f; color: #cbd5e1; }
.dark .card               { background-color: #11131a; border-color: rgba(255,255,255,.06); }
.dark .card-pad,
.dark .input              { background-color: transparent; }
.dark .input              { background-color: #11131a; border-color: rgba(255,255,255,.08); }
.dark header              { background-color: rgba(10,11,15,.78) !important; border-color: rgba(255,255,255,.06); }
.dark #sidebar            { background-color: #0a0b0f; border-color: rgba(255,255,255,.06); }

/* ---------- Misc ---------- */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.dark .scroll-thin { scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
.dark .scroll-thin::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); }

.toastify { font-family: inherit !important; border-radius: 12px !important; }

.dataTables_wrapper .dt-search input,
.dataTables_wrapper .dt-length select {
  border-radius: 0.5rem !important;
  border-color: #e2e8f0 !important;
  font-size: 0.875rem !important;
}
.dark .dataTables_wrapper .dt-search input,
.dark .dataTables_wrapper .dt-length select {
  background-color: #11131a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
.dark .dataTables_wrapper .dt-search label,
.dark .dataTables_wrapper .dt-length label,
.dark .dataTables_wrapper .dt-info {
  color: #94a3b8 !important;
}
.dark .dataTables_wrapper .dt-paging .dt-paging-button {
  background: #11131a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.dark .dataTables_wrapper .dt-paging .dt-paging-button.current,
.dark .dataTables_wrapper .dt-paging .dt-paging-button:hover:not(.disabled) {
  background: rgb(var(--brand-600)) !important;
  border-color: rgb(var(--brand-600)) !important;
  color: #fff !important;
}
.dark .dataTables_wrapper .dt-paging .dt-paging-button.disabled {
  color: #475569 !important;
}

/* Bulk selection toolbar: keep action buttons in one row on mobile */
.bulk-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
@media (min-width: 640px) {
  .bulk-actions-row { width: auto; margin-inline-start: auto; }
}
.bulk-actions-row .btn-outline {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 640px) {
  .bulk-actions-row .btn-outline { flex: none; width: auto; }
}

/* intl-tel-input: LTR phone with flag/dial code on the left */
.iti-ltr-left.iti { direction: ltr; text-align: left; }
.iti-ltr-left .iti__flag-container { left: 0; right: auto; }
.iti-ltr-left input[type="tel"] {
  direction: ltr;
  text-align: left;
  padding-left: 3.25rem !important;
  padding-right: 0.75rem !important;
}
.iti-ltr-left.iti--separate-dial-code input[type="tel"] {
  padding-left: 4.5rem !important;
}

/* Modal selects: avoid clipping dropdown */
.modal-scroll-body { overflow-y: auto; max-height: calc(100vh - 8rem); }
.modal-card { overflow: visible !important; }

/* Chart.js safety: keep canvases inside containers and prevent infinite resize. */
canvas.kpi-spark { display: block; width: 100% !important; height: 60px !important; }
.chart-box { position: relative; width: 100%; }
.chart-box > canvas { position: absolute; inset: 0; }

/* Sidebar collapse pill: floating arrow between sidebar and content */
/* Sidebar collapse pill: floating arrow between sidebar and content */
#sidebar-collapse-pill {
  position: fixed;
  top: 70px;
  inset-inline-start: calc(18rem - 14px); /* sidebar width 72 = 18rem */
  z-index: 45;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition:
    inset-inline-start .32s cubic-bezier(.22, 1, .36, 1),
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}
@media (min-width: 1024px) { #sidebar-collapse-pill { display: flex; } }
.dark #sidebar-collapse-pill { background: #11131a; border-color: rgba(255,255,255,.1); color: #cbd5e1; }
html[data-sidebar-collapsed="1"] #sidebar-collapse-pill { inset-inline-start: calc(4.5rem - 14px); }

/* ---------- Global modal scroll behavior ---------- */
/* Any modal opened via [data-open-modal] gets .is-open. Make the overlay
   scrollable on small viewports so long forms don't get clipped. The inner
   .relative card sits at the top and grows naturally; the overlay scrolls. */
[id$="-modal"].is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}
[id$="-modal"].is-open > .relative {
  margin-top: 0 !important;
  width: 100%;
}

/* ---------- Tables: single-line cells, centered variant ---------- */
.table-nowrap th,
.table-nowrap td {
  white-space: nowrap;
}
.table-center th,
.table-center td {
  text-align: center;
}
.table-head-strong thead th {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ---------- DataTables: no zebra striping (match vouchers panel) ---------- */
table.dataTable.table-plain tbody tr,
table.dataTable.vp-dt-table tbody tr,
table.dataTable.tx-dt-table tbody tr,
#card-sales-dt tbody tr {
  background-color: transparent !important;
}
table.dataTable.table-plain tbody tr > td,
table.dataTable.vp-dt-table tbody tr > td,
table.dataTable.tx-dt-table tbody tr > td,
#card-sales-dt tbody tr > td {
  box-shadow: none !important;
}

/* ---------- Horizontal scroll tabs ---------- */
.tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll .net-tab,
.tabs-scroll .batch-modal-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Filter icon + badge ---------- */
.filter-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  color: rgb(71 85 105);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dark .filter-icon-btn {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.filter-icon-btn:hover {
  background: rgb(248 250 252);
}
.dark .filter-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
.filter-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: rgb(var(--brand-600));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.125rem;
  text-align: center;
  pointer-events: none;
}

/* ---------- Dropdown menus: keep inside viewport on mobile ---------- */
[data-dropdown] {
  max-width: min(20rem, calc(100vw - 1rem));
}
[data-dropdown-anchor] {
  transform-origin: top end;
}
.vp-row-actions-menu {
  max-height: min(70vh, 20rem);
  overflow-y: auto;
}

/* ---------- Toolbar: inline on small screens (search + button same row) ---------- */
@media (max-width: 639px) {
  .toolbar-inline-mobile.toolbar-wrap {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .toolbar-inline-mobile .toolbar-form {
    flex-direction: row;
    flex: 1;
    min-width: 0;
  }
  .toolbar-inline-mobile .toolbar-search {
    width: 100%;
    min-width: 0;
  }
  .toolbar-inline-mobile .toolbar-btn {
    width: auto;
    margin-inline-start: 0;
    flex-shrink: 0;
  }
  .toolbar-filters-inline {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar-filters-inline .toolbar-select,
  .toolbar-filters-inline .input {
    width: auto;
    min-width: 7rem;
    flex-shrink: 0;
  }
}

/* Select2 dropdown inside modals / viewport */
.select2-container--open .select2-dropdown {
  max-width: calc(100vw - 1.5rem);
}
.select2-container .select2-results__options {
  max-height: min(50vh, 16rem);
}