/* Shared AD Admin styles extracted from base_admin.html. */

/* AD Admin override: keep shared action buttons in the site blue palette. */
body.dark-theme .admin-bg,
body.dark-theme .text-end.admin-bg,
body.dark-theme .text-white.admin-bg {
  background-color: #4B0082 !important;
  color: #F5EBFF !important;
}
body.dark-theme .table thead tr th.custom-thead {
  background-color: #4B0082 !important;
  color: #6CA6CD !important;
}
body.light-theme .admin-bg,
body.light-theme .text-end.admin-bg,
body.light-theme .text-white.admin-bg {
  background-color: #001f3f !important;
  color: #6CA6CD !important;
}
body.light-theme .table thead tr th.custom-thead {
  background-color: #001f3f !important;
  color: #6CA6CD !important;
}
.add-new-btn, .btn-purple {
  background-color: #0d6efd !important;
  color: #ffffff !important;
  border-color: #001f3f !important;
}
/* Ensure btn-primary + add-new-btn uses exact same color (covers anchors/buttons and hover/focus) */
.btn.add-new-btn, a.btn.add-new-btn, button.btn.add-new-btn {
  background-color: #0d6efd !important;
  color: #ffffff !important;
  border-color: #001f3f !important;
}
.btn.add-new-btn:hover, .btn.add-new-btn:focus {
  background-color: #6ea8fe !important;
  color: #001f3f !important;
  border-color: #001f3f !important;
}
/* AD Admin left-tab styling: bordered vertical tabs with active highlight.
   Default state is transparent so tabs visually sit flush against the list border. */
.ad-admin-tabs { padding: 0.25rem; margin: 0 0 0 0; }
.ad-admin-tabs .nav-link {
  display: block;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.18rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: #001f3f;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
  position: relative;
  z-index: 3; /* sit above the list border so it appears flush */
  margin-right: 0; /* prevent overlapping table cells */
}
.ad-admin-tabs .nav-link:hover {
  background-color: rgba(255,255,255,0.03);
  text-decoration: none;
  color: #001f3f;
  border-color: #ffffff;
}
.ad-admin-tabs .nav-link.active, .ad-admin-tabs .nav-link:focus {
  background-color: #ffffff !important;
  color: #001f3f !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.06rem rgba(0,0,0,0.12);
}
.ad-admin-tabs .nav-link { border-left-width: 4px; border-left-color: transparent; }
.ad-admin-tabs .nav-link.active { border-left-color: transparent; }

/* Wrapper used by AD Admin pages — give it a bordered container so left tabs butt against it */
.ad-admin-wrapper { position: relative; z-index: 1; border: 1px solid #ddd; border-radius: 0.375rem; padding: 0.25rem 0.25rem 0.2rem 0.25rem; margin: 0 0 10px 0; background-color: inherit; box-shadow: none; display: block; }

/* Reduce the default container gutters inside the admin wrapper so the border is compact with content
  and allow the wrapper to shrink-wrap its inner table instead of expanding to full width. */
.ad-admin-wrapper > .container { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: auto !important; max-width: none !important; display: block; }
  .ad-admin-wrapper .container .row { margin-left: 0; margin-right: 0; gap: 0.25rem; width: auto !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
.ad-admin-wrapper .container .row > [class*="col-"] { padding-left: 0.25rem; padding-right: 0.25rem; }

/* Reduce top/bottom spacing inside the admin wrapper so the border is close to content */
.ad-admin-wrapper h1, .ad-admin-wrapper h2, .ad-admin-wrapper h3 { margin-top: 0.25rem; margin-bottom: 0.35rem; }
.ad-admin-wrapper .table { margin-bottom: 0.25rem; }
.ad-admin-wrapper .back-button { margin-bottom: 0.25rem; display: inline-block; }

/* Prefer natural column widths so tables only grow to their content width */
.ad-admin-wrapper .col-lg-5,
.ad-admin-wrapper .col-lg-6,
.ad-admin-wrapper .col-lg-8,
.ad-admin-wrapper .col-lg-10 { flex: 0 0 auto !important; max-width: none !important; }

/* Ensure rows inside the admin wrapper don't add extra gutters */

/* Ensure tables size to their content inside the wrapper (but never overflow it) */
.ad-admin-wrapper table.table { width: auto !important; max-width: 100% !important; margin-bottom: 0.25rem; }

/* Ensure DataTables controls (length, filter, info, paginate) align correctly inside the admin wrapper */
.ad-admin-wrapper .dataTables_wrapper > .row:first-child,
.ad-admin-wrapper .dataTables_wrapper > .row:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.ad-admin-wrapper .dataTables_wrapper .dataTables_filter { text-align: right; float: none !important; }
.ad-admin-wrapper .dataTables_wrapper .dataTables_length { text-align: left; float: none !important; }
.ad-admin-wrapper .dataTables_wrapper .dataTables_info { text-align: left; float: none !important; }
.ad-admin-wrapper .dataTables_wrapper .dataTables_paginate { text-align: right; float: none !important; }

/* Smaller screens: stack controls vertically but keep filter/pagination right-aligned */
@media (max-width: 575.98px) {
  .ad-admin-wrapper .dataTables_wrapper > .row:first-child,
  .ad-admin-wrapper .dataTables_wrapper > .row:last-child { flex-direction: column; align-items: stretch; }
  .ad-admin-wrapper .dataTables_wrapper .dataTables_filter,
  .ad-admin-wrapper .dataTables_wrapper .dataTables_paginate { text-align: right; }
}

/* Strong desktop overrides: ensure the two DataTables columns sit on one line and align left/right */
@media (min-width: 576px) {
  .ad-admin-wrapper .dataTables_wrapper .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .ad-admin-wrapper .dataTables_wrapper .row > [class*="col-"] {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .ad-admin-wrapper .dataTables_wrapper .row:first-child > [class*="col-"]:first-child,
  .ad-admin-wrapper .dataTables_wrapper .row:last-child > [class*="col-"]:first-child {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .ad-admin-wrapper .dataTables_wrapper .row:first-child > [class*="col-"]:last-child,
  .ad-admin-wrapper .dataTables_wrapper .row:last-child > [class*="col-"]:last-child {
    margin-left: auto !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  .ad-admin-wrapper .dataTables_wrapper .dataTables_filter,
  .ad-admin-wrapper .dataTables_wrapper .dataTables_paginate { margin-left: 0 !important; }
}

/* Stronger overrides: force DataTables column containers to align left/right regardless of parent centering utilities */
.ad-admin-wrapper .dataTables_wrapper .row { margin: 0 !important; width: 100% !important; }
.ad-admin-wrapper .dataTables_wrapper .row > [class*="col-"] { display: flex !important; align-items: center !important; }
.ad-admin-wrapper .dataTables_wrapper .row > [class*="col-"]:first-child { justify-content: flex-start !important; }
.ad-admin-wrapper .dataTables_wrapper .row > [class*="col-"]:last-child { justify-content: flex-end !important; }

@media (max-width: 767.98px) {
  .ad-admin-wrapper .dataTables_wrapper .row > [class*="col-"] { justify-content: flex-start !important; }
}

/* tighten spacing between sidebar and main content on medium+ screens so tabs sit closer to lists */
@media (min-width: 768px) {
  nav.sidebar { padding-right: 0; padding-top: 0.25rem !important; }
  nav.sidebar + main { padding-left: 0.5rem !important; }
  /* remove overlap so tabs don't intrude on table cells */
  .ad-admin-tabs .nav-link { margin-right: 0; }
}

/* Center the admin navigation + main content as a shrink-wrapped unit when requested
   by adding the `ad-admin-row` class to the page row. This keeps the tabs flush
   against the ad-admin-wrapper box while the whole block is centered on the page. */
.row.ad-admin-row { display: flex !important; justify-content: center !important; align-items: flex-start; gap: 1rem; }
.row.ad-admin-row > nav.sidebar { flex: 0 0 200px !important; width: 200px !important; }
.row.ad-admin-row > main { flex: 0 0 auto !important; width: auto !important; padding-left: 0.5rem !important; }

@media (max-width: 767.98px) {
  .row.ad-admin-row { flex-direction: column !important; align-items: stretch !important; }
  .row.ad-admin-row > nav.sidebar { flex: 0 0 auto !important; width: 100% !important; }
  .row.ad-admin-row > main { width: 100% !important; padding-left: 0 !important; }
}

/* New: center the admin nav + main as a shrink-wrapped block using ad-admin-block.
   Use this when templates wrap the include/main inside a simple centered flex container. */
.ad-admin-block { display: inline-flex; align-items: flex-start; gap: 1rem; justify-content: center; }
.ad-admin-block nav.sidebar { flex: 0 0 200px; width: 200px; position: relative; z-index: 20; }
.ad-admin-block main { flex: 0 0 auto; }

/* When the admin area is rendered as a centered block, remove the negative
  right-margin that intentionally overlaps the wrapper border so tabs do
  not cover table cells. This keeps the visual "butt up to the border"
  look while preventing overlap on narrow admin blocks. */
.ad-admin-block .ad-admin-tabs .nav-link { margin-right: 0 !important; }

/* small screens: avoid overlap on small admin blocks */
@media (max-width: 767.98px) {
  .ad-admin-tabs .nav-link { margin-right: 0 !important; }
}

/* When using the centered admin block/row patterns, force the admin wrapper to
   shrink-wrap to its inner table and keep DataTables control rows constrained
   to the table width so left tabs do not visually overlap table content. */
.ad-admin-block .ad-admin-wrapper,
.row.ad-admin-row .ad-admin-wrapper {
  display: inline-block !important;
  vertical-align: top !important;
  width: auto !important;
  max-width: none !important;
}
.ad-admin-block .ad-admin-wrapper .dataTables_wrapper,
.row.ad-admin-row .ad-admin-wrapper .dataTables_wrapper {
  display: block !important;
  width: auto !important;
  max-width: none !important;
}
.ad-admin-block .ad-admin-wrapper .dataTables_wrapper .row,
.row.ad-admin-row .ad-admin-wrapper .dataTables_wrapper .row {
  width: auto !important;
  max-width: none !important;
}
.ad-admin-block .ad-admin-wrapper table.table,
.row.ad-admin-row .ad-admin-wrapper table.table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
/* Ensure filter toggle buttons in table headers don't overlap the header text */
.ad-admin-wrapper thead th.filterable { position: relative; padding-right: calc(2.75rem + 15px); }
.ad-admin-wrapper thead th.filterable .filter-toggle {
  position: absolute; right: calc(0.5rem + 15px); top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: inherit; padding: 0.15rem 0.35rem 0.15rem 0.35rem; cursor: pointer;
  padding-right: 15px; /* ensure 15px space to the right of the arrow so it doesn't overlap sort icons */
}

/* Prefer natural, content-driven column widths for admin lists.
   Remove forced min-widths so columns size to their contents and sorting/filter icons don't push layout.
   If a specific list needs a fixed width, add a targeted rule for that template only. */
.ad-admin-wrapper table thead th,
.ad-admin-wrapper table tbody td {
  min-width: 0 !important;
  white-space: normal;
}

/* Keep DataTables controls aligned but allow the table to size naturally */
.ad-admin-wrapper table.table { width: auto !important; max-width: 100% !important; table-layout: auto !important; }
.ad-admin-wrapper thead th.filterable .filter-toggle:focus { outline: 2px solid rgba(13,110,253,0.25); }
.ad-admin-wrapper thead th.filterable .filter-dropdown { right: 0.5rem; }

/* Ensure AD Admin respects site theme variables when dark-theme is active */
body.dark-theme .admin-bg, body.dark-theme .text-end.admin-bg, body.dark-theme .text-white.admin-bg {
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .table thead tr th.custom-thead {
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--menu-link-hover-color, #6CA6CD) !important;
}
/* Dark-theme: make left tabs show a white hover border and white active pill with dark text */
body.dark-theme .ad-admin-tabs .nav-link {
  color: var(--card-text, #F5EBFF) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}
body.dark-theme .ad-admin-tabs .nav-link:hover {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--card-text, #F5EBFF) !important;
  text-decoration: none !important;
  border-color: #ffffff !important;
}
body.dark-theme .ad-admin-tabs .nav-link.active,
body.dark-theme .ad-admin-tabs .nav-link:focus {
  background-color: #ffffff !important;
  color: #001f3f !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.06rem rgba(0,0,0,0.12) !important;
  border-left-color: transparent !important;
}
body.dark-theme .ad-admin-wrapper {
  border: 1px solid var(--card-border, rgba(245,235,255,0.06)) !important;
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper .table,
body.dark-theme .ad-admin-wrapper table.table,
body.dark-theme .ad-admin-wrapper table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--card-text, #F5EBFF);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-striped-color: var(--card-text, #F5EBFF);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
  --bs-table-hover-color: var(--card-text, #F5EBFF);
  --bs-table-active-bg: rgba(255,255,255,0.08);
  --bs-table-active-color: var(--card-text, #F5EBFF);
  --bs-table-border-color: rgba(245,235,255,0.12);
  background-color: transparent !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper .table > :not(caption) > * > *,
body.dark-theme .ad-admin-wrapper table.table > :not(caption) > * > *,
body.dark-theme .ad-admin-wrapper table.dataTable > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--card-text, #F5EBFF) !important;
  border-color: rgba(245,235,255,0.12) !important;
  box-shadow: none !important;
}
body.dark-theme .ad-admin-wrapper .table-striped > tbody > tr:nth-of-type(odd) > *,
body.dark-theme .ad-admin-wrapper table.dataTable.stripe > tbody > tr.odd > *,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr.odd > * {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper .table-striped > tbody > tr:nth-of-type(even) > *,
body.dark-theme .ad-admin-wrapper table.dataTable.stripe > tbody > tr.even > *,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr.even > * {
  background-color: transparent !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper .table-hover > tbody > tr:hover > *,
body.dark-theme .ad-admin-wrapper table.dataTable.hover > tbody > tr:hover > *,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr:hover > * {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper table.dataTable.order-column > tbody > tr > .sorting_1,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr > .sorting_1 {
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr.odd > .sorting_1 {
  background-color: rgba(255,255,255,0.05) !important;
}
body.dark-theme .ad-admin-wrapper table.dataTable.order-column.stripe > tbody > tr:hover > .sorting_1,
body.dark-theme .ad-admin-wrapper table.dataTable.display > tbody > tr:hover > .sorting_1 {
  background-color: rgba(255,255,255,0.07) !important;
}
body.dark-theme #ajaxModal .modal-header {
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme #ajaxModal .modal-content {
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
  border: 1px solid var(--card-border, rgba(245,235,255,0.08)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.45) !important;
}
body.dark-theme #ajaxModal .modal-body,
body.dark-theme #ajaxModal .container,
body.dark-theme #ajaxModal .container-fluid,
body.dark-theme #ajaxModal form,
body.dark-theme #ajaxModal .table-responsive {
  background-color: transparent !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--card-text, #F5EBFF);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-striped-color: var(--card-text, #F5EBFF);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
  --bs-table-hover-color: var(--card-text, #F5EBFF);
  --bs-table-border-color: rgba(245,235,255,0.12);
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .table td,
body.dark-theme #ajaxModal .table th:not(.admin-bg),
body.dark-theme #ajaxModal label,
body.dark-theme #ajaxModal .form-label,
body.dark-theme #ajaxModal .form-check-label,
body.dark-theme #ajaxModal p,
body.dark-theme #ajaxModal small,
body.dark-theme #ajaxModal .text-muted,
body.dark-theme #ajaxModal .helptext {
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .table-bordered > :not(caption) > * > * {
  border-color: rgba(245,235,255,0.12) !important;
}
body.dark-theme #ajaxModal .admin-bg,
body.dark-theme #ajaxModal .text-end.admin-bg,
body.dark-theme #ajaxModal .text-white.admin-bg {
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme #ajaxModal .table-striped > tbody > tr.admin-bg > th,
body.dark-theme #ajaxModal .table-striped > tbody > tr.admin-bg > td,
body.dark-theme #ajaxModal .table-bordered > tbody > tr.admin-bg > th,
body.dark-theme #ajaxModal .table-bordered > tbody > tr.admin-bg > td {
  --bs-table-accent-bg: var(--menu-link-color, #4B0082) !important;
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .btn-secondary,
body.dark-theme #ajaxModal a.btn.btn-secondary {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(245,235,255,0.12) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .btn-secondary:hover,
body.dark-theme #ajaxModal .btn-secondary:focus,
body.dark-theme #ajaxModal a.btn.btn-secondary:hover,
body.dark-theme #ajaxModal a.btn.btn-secondary:focus {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(245,235,255,0.18) !important;
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme #ajaxModal .modal-title { color: var(--card-text, #F5EBFF) !important; }

/* Defensive: ensure injected ajax modal form controls use dark inputs */
body.dark-theme #ajaxModal .modal-content input,
body.dark-theme #ajaxModal .modal-content textarea,
body.dark-theme #ajaxModal .modal-content select,
body.dark-theme #ajaxModal .modal-content .form-control,
body.dark-theme #ajaxModal .modal-content .form-select {
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
  border: 1px solid rgba(245,235,255,0.06) !important;
  box-shadow: none !important;
}

body.dark-theme #ajaxModal .modal-content input::placeholder,
body.dark-theme #ajaxModal .modal-content textarea::placeholder,
body.dark-theme #ajaxModal .modal-content .form-control::placeholder,
body.dark-theme #ajaxModal .modal-content .form-select::placeholder {
  color: var(--card-subtext) !important;
  opacity: 1 !important;
}

body.dark-theme #ajaxModal .modal-content input:not([type="checkbox"]):focus,
body.dark-theme #ajaxModal .modal-content input:not([type="checkbox"]):active,
body.dark-theme #ajaxModal .modal-content textarea:focus,
body.dark-theme #ajaxModal .modal-content textarea:active,
body.dark-theme #ajaxModal .modal-content select:focus,
body.dark-theme #ajaxModal .modal-content select:active,
body.dark-theme #ajaxModal .modal-content .form-control:focus,
body.dark-theme #ajaxModal .modal-content .form-select:focus {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--card-text, #F5EBFF) !important;
  outline: none !important;
  border-color: rgba(245,235,255,0.12) !important;
  box-shadow: none !important;
}


/* User add/edit modals need solid grey inputs so purple row backgrounds do not tint them. */
body.dark-theme #ajaxModal .user-admin-form input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme #ajaxModal .user-admin-form textarea,
body.dark-theme #ajaxModal .user-admin-form select,
body.dark-theme #ajaxModal .user-admin-form .form-control,
body.dark-theme #ajaxModal .user-admin-form .form-select {
  background-color: var(--card-bg, #352b4a) !important;
}


/* Product add/edit modals: keep purple rows visible by using solid dark inputs
   and narrower field widths for text/number controls. */
body.dark-theme #ajaxModal .product-admin-form input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme #ajaxModal .product-admin-form textarea,
body.dark-theme #ajaxModal .product-admin-form select,
body.dark-theme #ajaxModal .product-admin-form .form-control,
body.dark-theme #ajaxModal .product-admin-form .form-select {
  background-color: var(--card-bg, #352b4a) !important;
  display: inline-block !important;
  width: 18rem !important;
  max-width: 100% !important;
}

body.dark-theme #ajaxModal .product-admin-form input[type="number"],
body.dark-theme #ajaxModal .product-admin-form input[type="number"].form-control {
  width: 7rem !important;
}

body.dark-theme #ajaxModal .product-admin-form textarea,
body.dark-theme #ajaxModal .product-admin-form textarea.form-control {
  width: 22rem !important;
  max-width: 100% !important;
}


body.dark-theme #ajaxModal .product-admin-form input:not([type="checkbox"]):not([type="radio"]):focus,
body.dark-theme #ajaxModal .product-admin-form input:not([type="checkbox"]):not([type="radio"]):active,
body.dark-theme #ajaxModal .product-admin-form textarea:focus,
body.dark-theme #ajaxModal .product-admin-form textarea:active,
body.dark-theme #ajaxModal .product-admin-form select:focus,
body.dark-theme #ajaxModal .product-admin-form select:active,
body.dark-theme #ajaxModal .product-admin-form .form-control:focus,
body.dark-theme #ajaxModal .product-admin-form .form-control:active,
body.dark-theme #ajaxModal .product-admin-form .form-select:focus,
body.dark-theme #ajaxModal .product-admin-form .form-select:active {
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
  border-color: rgba(245,235,255,0.12) !important;
  outline: none !important;
  box-shadow: none !important;
}


/* Compact admin modals (fandoms, characters, items, coupons): keep purple rows
   visible and avoid full-width controls swallowing the row background. */
body.dark-theme #ajaxModal .compact-admin-form input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme #ajaxModal .compact-admin-form textarea,
body.dark-theme #ajaxModal .compact-admin-form select,
body.dark-theme #ajaxModal .compact-admin-form .form-control,
body.dark-theme #ajaxModal .compact-admin-form .form-select {
  background-color: var(--card-bg, #352b4a) !important;
  display: inline-block !important;
  width: 18rem !important;
  max-width: 100% !important;
}

body.dark-theme #ajaxModal .compact-admin-form input[type="number"],
body.dark-theme #ajaxModal .compact-admin-form input[type="number"].form-control {
  width: 7rem !important;
}

body.dark-theme #ajaxModal .compact-admin-form textarea,
body.dark-theme #ajaxModal .compact-admin-form textarea.form-control {
  width: 22rem !important;
  max-width: 100% !important;
}

body.dark-theme #ajaxModal .compact-admin-form input:not([type="checkbox"]):not([type="radio"]):focus,
body.dark-theme #ajaxModal .compact-admin-form input:not([type="checkbox"]):not([type="radio"]):active,
body.dark-theme #ajaxModal .compact-admin-form textarea:focus,
body.dark-theme #ajaxModal .compact-admin-form textarea:active,
body.dark-theme #ajaxModal .compact-admin-form select:focus,
body.dark-theme #ajaxModal .compact-admin-form select:active,
body.dark-theme #ajaxModal .compact-admin-form .form-control:focus,
body.dark-theme #ajaxModal .compact-admin-form .form-control:active,
body.dark-theme #ajaxModal .compact-admin-form .form-select:focus,
body.dark-theme #ajaxModal .compact-admin-form .form-select:active {
  background-color: var(--card-bg, #352b4a) !important;
  color: var(--card-text, #F5EBFF) !important;
  border-color: rgba(245,235,255,0.12) !important;
  outline: none !important;
  box-shadow: none !important;
}
body.dark-theme #ajaxModal td.checkbox-cell input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.dark-theme #ajaxModal td.checkbox-cell label {
  position: relative !important;
  padding-left: 26px !important;
}

/* Final dark-theme admin modal checkbox override: keep unchecked and checked
   boxes on the same grey field fill, and use a white checkmark for clarity. */
body.dark-theme #ajaxModal input[type="checkbox"],
body.dark-theme #ajaxModal .form-check-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  opacity: 1 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  background: var(--card-bg, #352b4a) !important;
  background-color: var(--card-bg, #352b4a) !important;
  border: 1px solid rgba(245,235,255,0.12) !important;
  border-color: rgba(245,235,255,0.12) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  background-image: none !important;
  --bs-form-check-bg: var(--card-bg, #352b4a) !important;
  --bs-form-check-bg-image: none !important;
}

body.dark-theme #ajaxModal input[type="checkbox"]:checked,
body.dark-theme #ajaxModal .form-check-input:checked {
  background: rgba(255,255,255,0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") no-repeat center !important;
  background-color: var(--card-bg, #352b4a) !important;
  border-color: rgba(245,235,255,0.26) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  --bs-form-check-bg: var(--card-bg, #352b4a) !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
}

body.dark-theme #ajaxModal input[type="checkbox"]:focus,
body.dark-theme #ajaxModal .form-check-input:focus,
body.dark-theme #ajaxModal input[type="checkbox"]:active,
body.dark-theme #ajaxModal .form-check-input:active {
  border-color: rgba(245,235,255,0.26) !important;
  box-shadow: 0 0 0 0.22rem rgba(245,235,255,0.10) !important;
  outline: none !important;
}

body.dark-theme #ajaxModal td.checkbox-cell label::before {
  background-color: var(--card-bg, #352b4a) !important;
  border: 1px solid rgba(245,235,255,0.12) !important;
}

body.dark-theme #ajaxModal td.checkbox-cell input[type="checkbox"]:checked + label::before,
body.dark-theme #ajaxModal td.checkbox-cell label:has(input[type="checkbox"]:checked)::before {
  background-color: var(--card-bg, #352b4a) !important;
  border-color: rgba(245,235,255,0.26) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

body.dark-theme #ajaxModal td.checkbox-cell input[type="checkbox"]:focus + label::before,
body.dark-theme #ajaxModal td.checkbox-cell label:has(input[type="checkbox"]:focus)::before {
  outline: 2px solid rgba(245,235,255,0.10) !important;
  outline-offset: 2px !important;
}

/* For standard Bootstrap form-check rows in ajax modals, draw the checkbox
   on the label so browser-native checkbox paint cannot bleed purple back in. */
body.dark-theme #ajaxModal .form-check {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-left: 0 !important;
}

body.dark-theme #ajaxModal .form-check > .form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

body.dark-theme #ajaxModal .form-check > .form-check-label {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding-left: 26px !important;
  color: var(--card-text, #F5EBFF) !important;
  cursor: pointer !important;
}

body.dark-theme #ajaxModal .form-check > .form-check-label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background-color: var(--card-bg, #352b4a) !important;
  border: 1px solid rgba(245,235,255,0.12) !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  background-image: none !important;
}

body.dark-theme #ajaxModal .form-check > .form-check-input:checked + .form-check-label::before {
  background-color: var(--card-bg, #352b4a) !important;
  border-color: rgba(245,235,255,0.26) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

body.dark-theme #ajaxModal .form-check > .form-check-input:focus + .form-check-label::before,
body.dark-theme #ajaxModal .form-check > .form-check-input:active + .form-check-label::before {
  outline: 2px solid rgba(245,235,255,0.10) !important;
  outline-offset: 2px !important;
}

body.dark-theme .btn.add-new-btn,
body.dark-theme a.btn.add-new-btn,
body.dark-theme button.btn.add-new-btn {
  background-color: #0d6efd !important;
  border-color: #001f3f !important;
  color: #ffffff !important;
}

body.dark-theme .btn.add-new-btn:hover,
body.dark-theme .btn.add-new-btn:focus,
body.dark-theme .btn.add-new-btn:active,
body.dark-theme a.btn.add-new-btn:hover,
body.dark-theme a.btn.add-new-btn:focus,
body.dark-theme a.btn.add-new-btn:active,
body.dark-theme button.btn.add-new-btn:hover,
body.dark-theme button.btn.add-new-btn:focus,
body.dark-theme button.btn.add-new-btn:active {
  background-color: #6ea8fe !important;
  border-color: #001f3f !important;
  color: #001f3f !important;
}
body.dark-theme .ad-admin-wrapper .form-check-label,
body.dark-theme .ad-admin-wrapper .form-check-input {
  color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .ad-admin-wrapper thead th.filterable .filter-toggle:focus {
  outline: 2px solid rgba(255,255,255,0.08) !important;
}

.date-input-wrap {
  position: relative;
  display: inline-block;
}

.ajax-debug-response {
  max-height: 40vh;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 0.5rem;
  background: #fff;
  margin-top: 0.5rem;
}

.ajax-debug-pre {
  white-space: pre-wrap;
}

/* AD Admin: stronger override to ensure rounded, colored buttons and modal headers */
/* Modal-specific rules (modal is rendered outside the wrapper so target by id) */
#ajaxModal .btn, #ajaxModal button, #ajaxModal a.btn {
  border-radius: 0.5rem !important;
  color: #ffffff !important;
}
#ajaxModal .btn-primary, #ajaxModal .btn.btn-primary, #ajaxModal a.btn.btn-primary {
  border-radius: 0.5rem !important;
}
#ajaxModal .btn-primary, #ajaxModal .btn.btn-primary, #ajaxModal a.btn.btn-primary,
#ajaxModal .btn-primary:hover, #ajaxModal .btn.btn-primary:hover, #ajaxModal a.btn.btn-primary:hover,
#ajaxModal .btn-primary:focus, #ajaxModal .btn.btn-primary:focus, #ajaxModal a.btn.btn-primary:focus {
  background-color: #0d6efd !important;
  border-color: #001f3f !important;
  color: #ffffff !important;
}
#ajaxModal .modal-header {
  background-color: #001f3f !important;
  color: #ffffff !important;
}
/* Use the admin title blue for modal titles to match Orders modals */
#ajaxModal .modal-title { color: #6CA6CD !important; }

/* Ensure dark-theme modal header overrides the default admin header when active */
body.dark-theme #ajaxModal .modal-header {
  background-color: var(--menu-link-color, #4B0082) !important;
  color: var(--card-text, #F5EBFF) !important;
}

/* Small ajax modal sizing override to avoid overly-wide delete confirmations */
#ajaxModal .modal-dialog.modal-sm { max-width: 540px; }

/* Env pill used in ajax modal titles (matches Orders modal style) */
#ajaxModal .modal-title .env-pill {
  display: inline-block;
  margin-left: 0.5rem;
  background: #ffeb3b; /* bright yellow like the env-banner */
  color: #000;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  vertical-align: middle;
}

/* Keep the original admin-wrapper-scoped rules too for non-modal buttons */
.ad-admin-wrapper .btn, .ad-admin-wrapper button, .ad-admin-wrapper a.btn {
  border-radius: 0.5rem !important;
  color: #ffffff !important;
}
.ad-admin-wrapper .btn-primary, .ad-admin-wrapper .btn.btn-primary, .ad-admin-wrapper a.btn.btn-primary {
  border-radius: 0.5rem !important;
}
.ad-admin-wrapper .btn-primary,
.ad-admin-wrapper .btn.btn-primary,
.ad-admin-wrapper a.btn.btn-primary,
.ad-admin-wrapper button.btn.btn-primary,
.ad-admin-wrapper .btn.add-new-btn,
.ad-admin-wrapper a.btn.add-new-btn,
.ad-admin-wrapper button.btn.add-new-btn {
  background-color: #0d6efd !important;
  border-color: #001f3f !important;
  color: #ffffff !important;
}
.ad-admin-wrapper .btn-primary:hover,
.ad-admin-wrapper .btn.btn-primary:hover,
.ad-admin-wrapper a.btn.btn-primary:hover,
.ad-admin-wrapper button.btn.btn-primary:hover,
.ad-admin-wrapper .btn.add-new-btn:hover,
.ad-admin-wrapper a.btn.add-new-btn:hover,
.ad-admin-wrapper button.btn.add-new-btn:hover,
.ad-admin-wrapper .btn-primary:focus,
.ad-admin-wrapper .btn.btn-primary:focus,
.ad-admin-wrapper a.btn.btn-primary:focus,
.ad-admin-wrapper button.btn.btn-primary:focus,
.ad-admin-wrapper .btn.add-new-btn:focus,
.ad-admin-wrapper a.btn.add-new-btn:focus,
.ad-admin-wrapper button.btn.add-new-btn:focus {
  background-color: #6ea8fe !important;
  border-color: #001f3f !important;
  color: #001f3f !important;
}
.ad-admin-wrapper .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  margin: 0.25rem 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0.25rem !important;
}
.ad-admin-wrapper .form-check-input {
  margin: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  vertical-align: middle !important;
}
.ad-admin-wrapper .form-check-label { margin-left: 0 !important; padding-left: 0 !important; }
/* When table cells are center-aligned, keep checkbox+label together and prevent wrapping */
.ad-admin-wrapper table td > .form-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
  vertical-align: middle !important;
}
.ad-admin-wrapper table td > .form-check .form-check-label {
  display: inline-block !important;
  margin-left: 0 !important;
}
/* Avoid floats from Bootstrap interfering with flex layout inside admin tables */
.ad-admin-wrapper .form-check-input { float: none !important; }
/* Specific overrides for ajax modal injected forms (modal content isn't wrapped in .ad-admin-wrapper) */
#ajaxModal .form-check { padding-left: 0 !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; justify-content: center !important; }
#ajaxModal .form-check-input { float: none !important; margin: 0 !important; }
#ajaxModal table td > .form-check { justify-content: center !important; padding-left: 0 !important; }

/* Defensive: hide large page headings inside injected modal body so the
  modal header remains the single visible title. This prevents duplicate
  oversized headings when pages include H1/H2/H3 at the top. */
#ajaxModalBody h1, #ajaxModalBody h2, #ajaxModalBody h3 { display: none !important; }

.admin-label-cell {
  width: 30%;
}

.admin-datetime-field {
  position: relative;
}

.admin-datetimepicker-offset {
  position: relative;
  top: 30px;
}

.datetimepicker table {
  height: auto;
  overflow-y: hidden;
}

.applicable-items {
  display: flex;
  align-items: center;
}

.applicable-items select {
  margin-left: 20px;
}

.applicable-items label {
  color: var(--card-text, inherit) !important;
}

.datetimepicker .month {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.bootstrap-datetimepicker-widget .datepicker-months .table-condensed tbody td span {
  display: block;
  width: 100%;
  text-align: center;
}

.datepicker-years .datepicker-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.datepicker-years td {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

.datepicker-days td.disabled {
  display: none;
}

.bootstrap-datetimepicker-widget .datepicker table tr td,
.bootstrap-datetimepicker-widget .datepicker table tr th,
.bootstrap-datetimepicker-widget .datepicker-days .day,
.bootstrap-datetimepicker-widget .datepicker-switch,
.bootstrap-datetimepicker-widget .datepicker-months .month,
.bootstrap-datetimepicker-widget .datepicker-years .year {
  color: var(--card-text, inherit) !important;
}

.save-coupon-button {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0.375rem;
}