/**
 * ============================================
 * Serveotik ERP — ui-unified.css
 * ============================================
 * Purpose: Unified design-system layer that sits on top of AdminLTE/Bootstrap.
 *          Defines CSS custom properties (--ui-* tokens), card/table/button
 *          language, input styling, tab/menu harmonization, admin page packs
 *          (users, CRM, HR, marketing), modal/z-index layering, DataTable
 *          controls, chart (Highcharts) theming, loading states (skeleton,
 *          spinner, progress bar), and ~36% dark-mode overrides via
 *          html[data-ui-theme="dark"].
 * Dependencies: vendor.css (AdminLTE + Bootstrap base), app.css (loaded before)
 * Used by: Main layout (layouts/partials/css.blade.php) — all backend pages
 * Dark mode: Partial — contains ~121 dark-mode selectors inline;
 *            backend-dark-mode.css provides the full dark-mode layer and
 *            8 selectors overlap between the two files.
 * RTL: No — handled in rtl.css
 * Last audited: 2026-03-19
 * ============================================
 */

:root {
  --ui-brand-700: var(--app-brand-700, #0f4ed8);
  --ui-brand-800: var(--app-brand-800, #0a3fb5);
  --ui-brand-900: var(--app-brand-900, #082f8a);
  --ui-surface-0: #ffffff;
  --ui-surface-1: #f5f8ff;
  --ui-surface-2: #edf2ff;
  --ui-text-1: #0f172a;
  --ui-text-2: #475569;
  --ui-border: rgba(15, 23, 42, 0.12);
  --ui-shadow-sm: 0 8px 20px rgba(2, 14, 42, 0.08);
  --ui-shadow-md: 0 14px 34px rgba(2, 14, 42, 0.12);
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
}

body {
  color: var(--ui-text-1);
}

.content-wrapper,
.content {
  background: transparent;
}

/* Section rhythm */
.content-header {
  padding-top: 20px;
  padding-bottom: 8px;
}

.content-header > h1 {
  letter-spacing: -0.02em;
}

/* Card language */
.box,
.small-box,
.info-box,
.panel,
.well {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  background: linear-gradient(180deg, var(--ui-surface-0), var(--ui-surface-1));
}

/* Preserve AdminLTE bg-* color classes on info-boxes (forex cards, KPI cards, etc.) */
.info-box[class*="bg-"] {
  background-image: none;
}

.box-header,
.panel-heading {
  border-bottom: 1px solid var(--ui-border);
}

.box-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Table language */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table > thead > tr > th {
  background: var(--ui-surface-2);
  color: var(--ui-text-1);
  border-bottom: 1px solid var(--ui-border);
  font-weight: 700;
}

.table > tbody > tr > td {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.table-hover > tbody > tr:hover {
  background: rgba(10, 63, 181, 0.04);
}

/* Buttons: unify bootstrap + tw-dw */
.btn,
.tw-dw-btn {
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* ---------------------------------------------------------------------
   Spec 189 — give `.tw-dw-btn` an actual box.
   The daisyUI base component this class name comes from was never shipped;
   only the colour modifiers below (.tw-dw-btn-primary et al) and the three
   properties above ever existed. With no padding, height or display set,
   the element fell back to browser defaults — and those differ per tag:
   an <a class="tw-dw-btn"> rendered 20px tall with zero padding while a
   sibling <button class="tw-dw-btn"> rendered 26px tall (UA padding 1px 6px
   + 2px border). That is why paired action buttons look staggered and
   cramped wherever the two tags sit together, e.g. "Home / Open Register"
   in the Perfumery POS register modal. 133 views use this class, so this
   is fixed once, here, rather than per screen.
   Base first, size modifiers after — equal specificity, last wins.
   --------------------------------------------------------------------- */
.tw-dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 38px;
  border: 0;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}

a.tw-dw-btn:hover,
a.tw-dw-btn:focus {
  text-decoration: none;
}

.tw-dw-btn:disabled,
.tw-dw-btn.tw-dw-btn-disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.tw-dw-btn-xs {
  padding: 2px 8px;
  min-height: 24px;
  font-size: 12px;
}

.tw-dw-btn-sm {
  padding: 5px 12px;
  min-height: 31px;
  font-size: 13px;
}

.tw-dw-btn-lg {
  padding: 12px 22px;
  min-height: 46px;
  font-size: 16px;
}

.tw-dw-btn-block {
  display: flex;
  width: 100%;
}

.btn-primary,
.tw-dw-btn-primary,
.tw-dw-btn-info {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900));
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover,
.tw-dw-btn-primary:hover,
.tw-dw-btn-info:hover {
  background: linear-gradient(135deg, var(--ui-brand-800), var(--ui-brand-900));
  color: #fff;
  box-shadow: var(--ui-shadow-sm);
}

.btn-default,
.btn-secondary,
.tw-dw-btn-outline {
  background: #fff;
  border-color: var(--ui-border);
  color: var(--ui-text-1);
}

.btn-default:hover,
.btn-secondary:hover,
.tw-dw-btn-outline:hover {
  background: var(--ui-surface-1);
  color: var(--ui-text-1);
}

.btn-danger,
.tw-dw-btn-error {
  border-color: transparent;
}

/* Keep primary action language consistent across internal screens */
.tw-dw-btn-error,
.tw-dw-btn-success,
.btn-warning,
.btn-info {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900));
  border-color: transparent;
  color: #fff;
}

.tw-dw-btn-error:hover,
.tw-dw-btn-success:hover,
.btn-warning:hover,
.btn-info:hover {
  background: linear-gradient(135deg, var(--ui-brand-800), var(--ui-brand-900));
  color: #fff;
}

/* Inputs and filters */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border);
  background: #fff;
  color: var(--ui-text-1);
  min-height: 40px;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(10, 63, 181, 0.55);
  box-shadow: 0 0 0 3px rgba(10, 63, 181, 0.14);
}

.input-group .input-group-addon {
  border-color: var(--ui-border);
  background: var(--ui-surface-2);
}

/* Tabs/menus in business settings style */
.pos-tab-container {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  background: linear-gradient(180deg, var(--ui-surface-0), var(--ui-surface-1));
}

.pos-tab-menu .list-group-item {
  border-color: var(--ui-border);
  font-weight: 600;
  color: var(--ui-text-1);
  background: #fff;
}

.pos-tab-menu .list-group-item.active,
.list-group-item.active {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900));
  border-color: transparent;
}

/* Strong harmony for Business Settings tabs and tab content */
section.content .pos-tab-container {
  overflow: hidden;
}

section.content .pos-tab-menu {
  background: linear-gradient(180deg, rgba(8, 28, 66, 0.02), rgba(8, 28, 66, 0.05));
  border-right: 1px solid var(--ui-border);
}

section.content .pos-tab-menu .list-group {
  border-radius: 0;
}

section.content .pos-tab-menu .list-group > a {
  border-left: 0;
  border-right: 0;
  border-top-color: rgba(15, 23, 42, 0.1);
  border-bottom-color: rgba(15, 23, 42, 0.1);
  background: transparent;
  color: #1f2937;
}

section.content .pos-tab-menu .list-group > a.active,
section.content .pos-tab-menu .list-group > a.active .fa,
section.content .pos-tab-menu .list-group > a.active .glyphicon {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900)) !important;
  color: #fff !important;
}

section.content .pos-tab .pos-tab-content {
  background: linear-gradient(180deg, #f9fbff, #f1f6ff);
  padding: 16px 18px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.page-business-settings .pos-tab .pos-tab-content {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

section.content .pos-tab .pos-tab-content .row {
  margin-left: -8px;
  margin-right: -8px;
}

section.content .pos-tab .pos-tab-content [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

section.content .pos-tab .pos-tab-content .form-group {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 12px;
  min-height: 88px;
  box-shadow: 0 6px 18px rgba(2, 14, 42, 0.05);
}

.page-business-settings .pos-tab-menu .list-group > a {
  padding: 12px 10px;
}

.page-business-settings .pos-tab .pos-tab-content + .pos-tab-content {
  margin-top: 10px;
}

.page-business-settings .pos-tab .pos-tab-content .row {
  margin-bottom: 4px;
}

.page-business-settings .business-settings-submit-row {
  position: sticky;
  bottom: 10px;
  z-index: 5;
}

.page-business-settings .business-settings-submit-row .col-sm-12 {
  background: linear-gradient(180deg, rgba(245, 248, 255, 0), rgba(245, 248, 255, 0.92) 40%);
  padding-top: 12px;
}

/* Public marketing dashboard visual parity */
.page-admin-public-marketing .box-header.with-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 14px 18px;
}

.page-admin-public-marketing .box-header.with-border .box-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #2c3268;
}

.page-admin-public-marketing .box-body {
  padding: 18px;
}

.page-admin-public-marketing .info-box {
  border-radius: 14px;
  overflow: hidden;
}

.page-admin-public-marketing .info-box .info-box-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.24);
}

.page-admin-public-marketing .info-box .info-box-icon i {
  font-size: 30px;
}

.page-admin-public-marketing .info-box .info-box-text {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-admin-public-marketing .info-box .info-box-number {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
}

/* =========================
   Admin internal pages pack
   ========================= */

.page-admin-revenue,
.page-admin-intel-metrics,
.page-admin-upgrade-requests,
.page-admin-upgrade-requests-my,
.page-admin-upgrade-analytics,
.page-admin-ops-my,
.page-admin-intel-leaderboard,
.page-admin-saas-rbac,
.page-admin-systems-index,
.page-admin-systems-form {
  --ui-panel-pad: 14px;
}

.page-admin-revenue .box,
.page-admin-intel-metrics .box,
.page-admin-upgrade-requests .box,
.page-admin-upgrade-requests-my .box,
.page-admin-upgrade-analytics .box,
.page-admin-ops-my .box,
.page-admin-intel-leaderboard .box,
.page-admin-saas-rbac .box,
.page-admin-systems-index .box,
.page-admin-systems-form .box {
  margin-bottom: 16px;
}

.page-admin-revenue .box-header,
.page-admin-intel-metrics .box-header,
.page-admin-upgrade-requests .box-header,
.page-admin-upgrade-requests-my .box-header,
.page-admin-upgrade-analytics .box-header,
.page-admin-ops-my .box-header,
.page-admin-intel-leaderboard .box-header,
.page-admin-saas-rbac .box-header,
.page-admin-systems-index .box-header,
.page-admin-systems-form .box-header {
  min-height: 56px;
  padding: 12px 16px;
}

.page-admin-revenue .box-body,
.page-admin-intel-metrics .box-body,
.page-admin-upgrade-requests .box-body,
.page-admin-upgrade-requests-my .box-body,
.page-admin-upgrade-analytics .box-body,
.page-admin-ops-my .box-body,
.page-admin-intel-leaderboard .box-body,
.page-admin-saas-rbac .box-body,
.page-admin-systems-index .box-body,
.page-admin-systems-form .box-body {
  padding: var(--ui-panel-pad);
}

.page-admin-revenue .small-box,
.page-admin-intel-metrics .small-box,
.page-admin-upgrade-requests .small-box,
.page-admin-upgrade-requests-my .small-box,
.page-admin-upgrade-analytics .small-box,
.page-admin-ops-my .small-box,
.page-admin-intel-leaderboard .small-box {
  background: linear-gradient(135deg, #123f90, #0a2b67) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-admin-revenue .small-box .inner h3,
.page-admin-intel-metrics .small-box .inner h3,
.page-admin-upgrade-requests .small-box .inner h3,
.page-admin-upgrade-requests-my .small-box .inner h3,
.page-admin-upgrade-analytics .small-box .inner h3,
.page-admin-ops-my .small-box .inner h3,
.page-admin-intel-leaderboard .small-box .inner h3 {
  color: #ffffff !important;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.page-admin-revenue .small-box .inner p,
.page-admin-intel-metrics .small-box .inner p,
.page-admin-upgrade-requests .small-box .inner p,
.page-admin-upgrade-requests-my .small-box .inner p,
.page-admin-upgrade-analytics .small-box .inner p,
.page-admin-ops-my .small-box .inner p,
.page-admin-intel-leaderboard .small-box .inner p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
}

.page-admin-revenue .form-inline,
.page-admin-intel-metrics .form-inline,
.page-admin-upgrade-requests .form-inline,
.page-admin-upgrade-requests-my .form-inline,
.page-admin-upgrade-analytics .form-inline,
.page-admin-intel-leaderboard .form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
}

.page-admin-revenue .form-inline .form-group,
.page-admin-intel-metrics .form-inline .form-group,
.page-admin-upgrade-requests .form-inline .form-group,
.page-admin-upgrade-requests-my .form-inline .form-group,
.page-admin-upgrade-analytics .form-inline .form-group,
.page-admin-intel-leaderboard .form-inline .form-group {
  margin-left: 0 !important;
  margin-right: 0;
}

.page-admin-upgrade-requests .nav-tabs,
.page-admin-systems-form .nav-tabs {
  border-bottom-color: rgba(15, 23, 42, 0.12);
}

.page-admin-upgrade-requests .nav-tabs > li > a,
.page-admin-systems-form .nav-tabs > li > a {
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  color: #334155;
}

.page-admin-upgrade-requests .nav-tabs > li.active > a,
.page-admin-upgrade-requests .nav-tabs > li.active > a:hover,
.page-admin-upgrade-requests .nav-tabs > li.active > a:focus,
.page-admin-systems-form .nav-tabs > li.active > a,
.page-admin-systems-form .nav-tabs > li.active > a:hover,
.page-admin-systems-form .nav-tabs > li.active > a:focus {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900));
  color: #fff;
  border-color: transparent;
}

.page-admin-upgrade-requests .badge {
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.page-admin-upgrade-requests .table td,
.page-admin-upgrade-requests-my .table td,
.page-admin-revenue .table td,
.page-admin-intel-metrics .table td,
.page-admin-upgrade-analytics .table td,
.page-admin-ops-my .table td,
.page-admin-intel-leaderboard .table td {
  vertical-align: middle;
}

.page-admin-saas-rbac .panel {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(2, 14, 42, 0.07);
}

.page-admin-saas-rbac .panel-heading {
  background: linear-gradient(180deg, #f8fbff, #eff5ff);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.page-admin-saas-rbac .rbac-role-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.page-admin-systems-index .app-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-admin-systems-index .app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 14, 42, 0.12);
}

.page-admin-systems-form .tab-content {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #f9fbff, #f3f8ff);
  padding: 12px;
}

.page-admin-systems-form .tab-pane .form-group {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  padding: 10px;
}

@media (max-width: 991px) {
  .page-admin-revenue .small-box .inner h3,
  .page-admin-intel-metrics .small-box .inner h3,
  .page-admin-upgrade-requests .small-box .inner h3,
  .page-admin-upgrade-requests-my .small-box .inner h3,
  .page-admin-upgrade-analytics .small-box .inner h3,
  .page-admin-ops-my .small-box .inner h3,
  .page-admin-intel-leaderboard .small-box .inner h3 {
    font-size: 26px;
  }
}

section.content .pos-tab .pos-tab-content .form-group label {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

section.content .pos-tab .pos-tab-content .help-block {
  color: #64748b;
}

section.content .pos-tab .pos-tab-content .checkbox label {
  font-weight: 600;
  color: #1f2937;
}

section.content .pos-tab .pos-tab-content .input-group-addon {
  background: rgba(10, 63, 181, 0.08);
  border-color: rgba(10, 63, 181, 0.24);
  color: var(--ui-brand-800);
}

section.content .pos-tab .pos-tab-content textarea.form-control {
  min-height: 160px;
}

/* Mobile spacing guard */
@media (max-width: 767px) {
  .content {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Header + sidebar harmony */
.app-theme-header {
  box-shadow: 0 10px 26px rgba(3, 12, 34, 0.24);
  position: relative;
  z-index: 20;
  overflow: visible !important;
}

.app-theme-header .tw-inline-flex,
.app-theme-header .tw-hidden.lg\:tw-inline-flex,
.app-theme-header .tw-hidden.md\:tw-inline-flex,
.app-theme-header summary {
  border-radius: 11px !important;
}

/* Keep all topbar dropdowns above page content across all modules */
.app-theme-header .dropdown-menu,
.app-theme-header details[open] > ul {
  z-index: 6500 !important;
}

main > #scrollable-container {
  position: relative;
  z-index: 1;
}

.side-bar {
  background: linear-gradient(180deg, #f7faff 0%, #f0f5ff 100%);
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

.side-bar .treeview-menu > li > a,
.side-bar .sidebar-menu > li > a {
  border-radius: 10px;
  margin: 2px 8px;
}

.side-bar .sidebar-menu > li.active > a,
.side-bar .treeview-menu > li.active > a {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900)) !important;
  color: #fff !important;
}

/* ====================================================================
   App shell scrolling — the sidebar scrolls inside itself
   --------------------------------------------------------------------
   The sidebar menu could not scroll on any screen, so operators had to
   scroll the whole page to reach the items near the bottom, and the
   brand header went off-screen with them. Three causes stacked up, all
   measured before this block was written:

   1. `#side-bar` (the menu wrapper the nwidart presenter emits) is
      `flex-1 overflow-y-auto`, but a flex item defaults to
      `min-height: auto`, which floors it at CONTENT height. It could
      never shrink below its own menu, so `overflow-y: auto` had nothing
      to overflow and the internal scrollbar never appeared.
   2. `.thetop`, the flex row holding the sidebar and the content, had no
      height at all on desktop, so the row grew to content height and the
      sidebar stretched with it, past the bottom of the viewport.
   3. `#scrollable-container` is `h-screen` (100vh) and sits UNDER the
      ~60px header inside `main`, so the shell was always taller than the
      viewport and the body scrolled by that difference.

   This is the same chain Spec 192.3 fixed for the POS screen; that fix
   was scoped to one blade. This generalises it to the shell so every
   profile and every user gets it. `min-height: 0` is the load-bearing
   half — without it the height clamp alone changes nothing, because the
   flex items still refuse to shrink.

   Scoped to >=769px on purpose: at 768px and below `.thetop` is already
   `display: block` and `.side-bar` is `position: fixed` with a slide-in
   transform, so mobile never enters this layout and is untouched.
   ==================================================================== */
@media (min-width: 769px) {
  .thetop {
    height: 100vh;
    min-height: 0;
  }

  .thetop > main {
    min-height: 0;
  }

  /* Was 100vh under a 60px header, which is what pushed the shell past
     the fold. As a flex child of a now-definite main it resolves to the
     space actually left over. */
  .thetop > main > #scrollable-container {
    height: 100%;
    min-height: 0;
  }

  .side-bar {
    min-height: 0;
  }

  /* The menu is the only part that scrolls. The brand, the superadmin
     preview switcher and the search box stay pinned via tw-shrink-0 in
     the blade. */
  .side-bar > #side-bar {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* A wheel gesture that bottoms out in the menu must not start
       scrolling the page behind it. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
  }

  .side-bar > #side-bar::-webkit-scrollbar {
    width: 8px;
  }

  .side-bar > #side-bar::-webkit-scrollbar-track {
    background: transparent;
  }

  .side-bar > #side-bar::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 8px;
  }

  .side-bar > #side-bar:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.32);
  }

  html[data-ui-theme="dark"] .side-bar > #side-bar {
    scrollbar-color: rgba(226, 232, 240, 0.28) transparent;
  }

  html[data-ui-theme="dark"] .side-bar > #side-bar::-webkit-scrollbar-thumb {
    background: rgba(226, 232, 240, 0.22);
  }

  html[data-ui-theme="dark"] .side-bar > #side-bar:hover::-webkit-scrollbar-thumb {
    background: rgba(226, 232, 240, 0.38);
  }
}

/* Shared component cards */
.ui-shell-card {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: linear-gradient(180deg, #ffffff, #f5f9ff) !important;
}

.ui-shell-card-header {
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.ui-filter-card .box-body {
  background: linear-gradient(180deg, #f8fbff, #eff5ff);
  border-radius: 12px;
  padding: 10px;
}

/* Datatable controls */
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  min-height: 36px;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #fff !important;
  color: #0f172a !important;
  margin: 0 2px !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Legacy nav tabs and pills */
.nav-tabs-custom,
.nav-tabs {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs > li.active > a {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900)) !important;
  border: 0 !important;
  border-radius: 10px;
}

/* Modal */
.modal-content {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: var(--ui-shadow-md);
}

.modal-header {
  background: linear-gradient(135deg, #f7faff, #eef4ff);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.modal-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Targeted sprint wave: Manage Users + Multi Currency + CRM Leads */
.page-manage-users .user-card,
.page-manage-users .user-group-card,
.page-multi-currency .box,
.page-crm-leads .crm-lead-list-card,
.page-crm-leads .box {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 12px 28px rgba(2, 14, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.page-manage-users .user-group-header,
.page-crm-leads .content-header {
  border-color: rgba(15, 23, 42, 0.12);
}

.page-manage-users .btn-group > .btn,
.page-multi-currency .btn,
.page-crm-leads .btn,
.page-crm-leads .tw-dw-btn {
  border-radius: 10px;
}

.page-multi-currency .box-header,
.page-crm-leads .box-header,
.page-manage-users .box-header {
  background: linear-gradient(180deg, rgba(8, 28, 66, 0.03), rgba(8, 28, 66, 0.08));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.page-multi-currency .help-block,
.page-crm-leads .crm-lead-list-meta,
.page-manage-users .tw-text-gray-600 {
  color: #5b6b82 !important;
}

.page-multi-currency .table > thead > tr > th,
.page-crm-leads .table > thead > tr > th,
.page-manage-users .table > thead > tr > th {
  background: linear-gradient(180deg, #eaf0ff, #dce8ff);
}

.page-multi-currency .label,
.page-crm-leads .label,
.page-manage-users .label {
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
}

.page-manage-users #user_search,
.page-manage-users #user_role_filter,
.page-manage-users #user_sort,
.page-multi-currency .form-control,
.page-crm-leads .form-control {
  border-radius: 10px;
}

/* Wave 2: HR Payroll + Admin Business Manage + Public Marketing Admin */
.page-hr-payroll .box,
.page-admin-business-manage .box,
.page-admin-public-marketing .box,
.page-admin-public-marketing .info-box {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 12px 30px rgba(2, 14, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.page-hr-payroll .box-header,
.page-admin-business-manage .box-header,
.page-admin-public-marketing .box-header {
  background: linear-gradient(180deg, rgba(8, 28, 66, 0.03), rgba(8, 28, 66, 0.08));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.page-hr-payroll .btn,
.page-admin-business-manage .btn,
.page-admin-public-marketing .btn {
  border-radius: 10px;
}

.page-hr-payroll .table > thead > tr > th,
.page-admin-business-manage .table > thead > tr > th,
.page-admin-public-marketing .table > thead > tr > th {
  background: linear-gradient(180deg, #e9f0ff, #dce8ff);
}

.page-admin-business-manage .nav-tabs {
  border: 0;
  background: transparent;
}

.page-admin-business-manage .nav-tabs > li > a {
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  margin-right: 6px;
  color: #1f2937;
  font-weight: 600;
}

.page-admin-business-manage .nav-tabs > li.active > a,
.page-admin-business-manage .nav-tabs > li.active > a:hover,
.page-admin-business-manage .nav-tabs > li.active > a:focus {
  background: linear-gradient(135deg, var(--ui-brand-700), var(--ui-brand-900));
  color: #fff;
  border-color: transparent;
}

.page-admin-business-manage .tab-content {
  background: linear-gradient(180deg, #f9fbff, #f1f6ff);
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 14px;
}

.page-admin-business-manage .module-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  padding: 4px 10px;
  margin: 0 6px 8px 0;
}

.page-admin-public-marketing .info-box {
  overflow: hidden;
}

.page-admin-public-marketing .info-box .info-box-icon {
  color: #fff;
}

.page-admin-public-marketing .info-box .info-box-content {
  padding: 10px 12px;
}

.page-admin-public-marketing .form-inline .form-group {
  margin-right: 10px;
}

/* KPI contrast guard (system-wide) */
.small-box.ui-kpi-contrast-light,
.info-box.ui-kpi-contrast-light {
  color: #f8fafc !important;
}

.small-box.ui-kpi-contrast-light .inner h3,
.small-box.ui-kpi-contrast-light .inner p,
.small-box.ui-kpi-contrast-light .icon,
.small-box.ui-kpi-contrast-light .small-box-footer,
.info-box.ui-kpi-contrast-light .info-box-text,
.info-box.ui-kpi-contrast-light .info-box-number,
.info-box.ui-kpi-contrast-light .info-box-icon,
.info-box.ui-kpi-contrast-light a {
  color: #f8fafc !important;
}

.small-box.ui-kpi-contrast-light .small-box-footer {
  background: rgba(0, 0, 0, 0.18);
}

.small-box.ui-kpi-contrast-dark,
.info-box.ui-kpi-contrast-dark {
  color: #0f172a !important;
}

.small-box.ui-kpi-contrast-dark .inner h3,
.small-box.ui-kpi-contrast-dark .inner p,
.small-box.ui-kpi-contrast-dark .icon,
.small-box.ui-kpi-contrast-dark .small-box-footer,
.info-box.ui-kpi-contrast-dark .info-box-text,
.info-box.ui-kpi-contrast-dark .info-box-number,
.info-box.ui-kpi-contrast-dark .info-box-icon,
.info-box.ui-kpi-contrast-dark a {
  color: #0f172a !important;
}

.small-box.ui-kpi-contrast-dark .small-box-footer {
  background: rgba(255, 255, 255, 0.42);
}

/* CRM reports language pack */
.page-crm-report .box {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2, 14, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  margin-bottom: 14px;
}

.page-crm-report .box-header {
  min-height: 56px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(8, 28, 66, 0.03), rgba(8, 28, 66, 0.08));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.page-crm-report .box-body {
  padding: 14px;
}

.page-crm-report .small-box {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(2, 14, 42, 0.1);
}

.page-crm-report .small-box .inner {
  padding: 16px 14px;
}

.page-crm-report .small-box .inner h3 {
  font-size: 30px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-crm-report .small-box .inner p {
  font-weight: 600;
  margin: 0;
}

.page-crm-report .small-box .small-box-footer {
  font-weight: 700;
}

.page-crm-report .table > thead > tr > th {
  background: linear-gradient(180deg, #eaf0ff, #dce8ff);
}

.page-crm-report .table > tbody > tr > td {
  background: rgba(255, 255, 255, 0.92);
}

.page-crm-report .form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-end;
}

.page-crm-report .form-inline .form-group {
  margin-left: 0 !important;
  margin-right: 0;
}

.page-crm-report .btn {
  border-radius: 10px;
}

/* Global dark mode */
html[data-ui-theme="dark"],
html[data-ui-theme="dark"] body {
  background: #0b1220 !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .content-wrapper,
html[data-ui-theme="dark"] .content,
html[data-ui-theme="dark"] .main-footer {
  background: #0f1729 !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] #scrollable-container {
  background: #0f1729 !important;
}

html[data-ui-theme="dark"] .app-theme-header {
  filter: saturate(0.9) brightness(0.88);
}

html[data-ui-theme="dark"] .side-bar {
  background: linear-gradient(180deg, #101a2f 0%, #0b1425 100%) !important;
  border-right-color: rgba(148, 163, 184, 0.16);
}

html[data-ui-theme="dark"] .side-bar #side-bar {
  border-right-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-ui-theme="dark"] .side-bar .sidebar-menu > li > a,
html[data-ui-theme="dark"] .side-bar .drop_down,
html[data-ui-theme="dark"] .side-bar .treeview-menu > li > a {
  color: #dce7fb !important;
  font-weight: 500;
}

html[data-ui-theme="dark"] .side-bar .sidebar-menu > li > a:hover,
html[data-ui-theme="dark"] .side-bar .drop_down:hover,
html[data-ui-theme="dark"] .side-bar .treeview-menu > li > a:hover {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #f2f7ff !important;
}

html[data-ui-theme="dark"] .side-bar .sidebar-menu > li.active > a,
html[data-ui-theme="dark"] .side-bar .treeview-menu > li.active > a,
html[data-ui-theme="dark"] .side-bar .sidebar-menu > li.menu-open > a,
html[data-ui-theme="dark"] .side-bar .drop_down.tw-bg-gray-200,
html[data-ui-theme="dark"] .side-bar .tw-bg-gray-200 {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .side-bar .treeview-menu .tw-absolute.tw-bg-gray-200 {
  background: rgba(148, 163, 184, 0.22) !important;
}

html[data-ui-theme="dark"] .side-bar .treeview-menu > li > a.tw-text-white,
html[data-ui-theme="dark"] .side-bar .treeview-menu > li > a.tw-font-semibold {
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .side-bar .svg,
html[data-ui-theme="dark"] .side-bar .sidebar-menu i {
  color: #9fb3d9 !important;
}

html[data-ui-theme="dark"] .box,
html[data-ui-theme="dark"] .panel,
html[data-ui-theme="dark"] .well,
html[data-ui-theme="dark"] .nav-tabs,
html[data-ui-theme="dark"] .nav-tabs-custom,
html[data-ui-theme="dark"] .modal-content {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .box-header,
html[data-ui-theme="dark"] .panel-heading,
html[data-ui-theme="dark"] .modal-header {
  background: linear-gradient(180deg, rgba(27, 43, 75, 0.72), rgba(19, 33, 60, 0.72)) !important;
  border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-ui-theme="dark"] .box-title,
html[data-ui-theme="dark"] .content-header h1,
html[data-ui-theme="dark"] h1,
html[data-ui-theme="dark"] h2,
html[data-ui-theme="dark"] h3,
html[data-ui-theme="dark"] h4,
html[data-ui-theme="dark"] h5 {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content-header h1 small,
html[data-ui-theme="dark"] .content-header .breadcrumb,
html[data-ui-theme="dark"] .content-header .breadcrumb > li > a {
  color: #b7caea !important;
  background: transparent !important;
}

html[data-ui-theme="dark"] .content-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

html[data-ui-theme="dark"] .content-header > h1 {
  color: #f3f8ff !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

html[data-ui-theme="dark"] .content-header > h1 small {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.68em;
  font-weight: 600;
}

html[data-ui-theme="dark"] .table > thead > tr > th {
  background: #1e2e50 !important;
  border-bottom-color: rgba(148, 163, 184, 0.24) !important;
  color: #dbe8ff !important;
}

html[data-ui-theme="dark"] .table > tbody > tr > td {
  background: #15243d !important;
  border-top-color: rgba(148, 163, 184, 0.16);
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] table.dataTable tbody tr:nth-child(even) > td {
  background: #132037 !important;
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_scrollHead,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_scrollHeadInner,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_scrollBody {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-ui-theme="dark"] .dataTables_wrapper table.dataTable.no-footer,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_scrollBody {
  background: #101b31 !important;
}

html[data-ui-theme="dark"] div.dataTables_wrapper .dataTables_length label,
html[data-ui-theme="dark"] div.dataTables_wrapper .dataTables_filter label,
html[data-ui-theme="dark"] div.dataTables_wrapper .dataTables_info {
  color: #b5c8e8 !important;
}

html[data-ui-theme="dark"] div.dataTables_wrapper div.dataTables_filter input,
html[data-ui-theme="dark"] div.dataTables_wrapper div.dataTables_length select {
  background: #0f1b31 !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .text-muted,
html[data-ui-theme="dark"] .help-block {
  color: #9fb1cf !important;
}

html[data-ui-theme="dark"] .form-control,
html[data-ui-theme="dark"] .select2-container--default .select2-selection--single,
html[data-ui-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: #0f1b31 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .input-group .input-group-addon {
  background: #172541 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #c7d7f3 !important;
}

html[data-ui-theme="dark"] .btn-default,
html[data-ui-theme="dark"] .btn-secondary,
html[data-ui-theme="dark"] .tw-dw-btn-outline {
  background: #13213b !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .btn-default:hover,
html[data-ui-theme="dark"] .btn-secondary:hover,
html[data-ui-theme="dark"] .tw-dw-btn-outline:hover {
  background: #1a2d4f !important;
}

html[data-ui-theme="dark"] .app-main-footer,
html[data-ui-theme="dark"] .app-main-footer p,
html[data-ui-theme="dark"] .no-print.app-main-footer {
  color: #9fb1cf !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, #0f1729, #0b1423) !important;
  padding-top: 10px;
  padding-bottom: 6px;
  margin-bottom: 0 !important;
}

html[data-ui-theme="dark"] .box,
html[data-ui-theme="dark"] .panel,
html[data-ui-theme="dark"] .nav-tabs-custom,
html[data-ui-theme="dark"] .card,
html[data-ui-theme="dark"] .widget-user,
html[data-ui-theme="dark"] .small-box {
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.45) !important;
}

html[data-ui-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-ui-theme="dark"] .tab-content {
  background: #111d33 !important;
  color: #dbe8ff !important;
}

/* Sidebar contrast guard (dark mode): force readable text in all states */
html[data-ui-theme="dark"] .side-bar #side-bar a,
html[data-ui-theme="dark"] .side-bar #side-bar .drop_down,
html[data-ui-theme="dark"] .side-bar #side-bar .treeview-menu a {
  color: #dbe7ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-ui-theme="dark"] .side-bar #side-bar a:hover,
html[data-ui-theme="dark"] .side-bar #side-bar .drop_down:hover,
html[data-ui-theme="dark"] .side-bar #side-bar .treeview-menu a:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.88), rgba(30, 64, 175, 0.88)) !important;
}

html[data-ui-theme="dark"] .side-bar #side-bar .tw-bg-primary-700,
html[data-ui-theme="dark"] .side-bar #side-bar .tw-bg-primary-700:hover,
html[data-ui-theme="dark"] .side-bar #side-bar .tw-text-white {
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .side-bar #side-bar .sidebar-menu > li > a,
html[data-ui-theme="dark"] .side-bar #side-bar .treeview-menu > li > a,
html[data-ui-theme="dark"] .side-bar #side-bar .list-group-item {
  border-radius: 10px;
}

/* Business settings dark-mode hard override (same selectors, higher specificity) */
html[data-ui-theme="dark"] .page-business-settings .pos-tab-container {
  background: linear-gradient(180deg, #121f37, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu {
  background: linear-gradient(180deg, #0f1a30, #0c1527) !important;
  border-right-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu .list-group > a,
html[data-ui-theme="dark"] .page-business-settings .pos-tab-menu .list-group-item {
  background: #111d33 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #d9e6ff !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu .list-group > a:hover {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu .list-group > a.active,
html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu .list-group > a.active .fa,
html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab-menu .list-group > a.active .glyphicon {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab .pos-tab-content {
  background: #0f1a2f !important;
  border-left-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .page-business-settings .pos-tab .pos-tab-content {
  border-top-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .page-business-settings section.content .pos-tab .pos-tab-content .form-group {
  background: #13213b !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.4) !important;
}

html[data-ui-theme="dark"] .page-business-settings .business-settings-submit-row .col-sm-12 {
  background: linear-gradient(180deg, rgba(15, 26, 47, 0), rgba(15, 26, 47, 0.95) 45%) !important;
}

/* Generic internal surface unification for remaining white blocks */
html[data-ui-theme="dark"] .well,
html[data-ui-theme="dark"] .box-body,
html[data-ui-theme="dark"] .panel-body,
html[data-ui-theme="dark"] .table-responsive,
html[data-ui-theme="dark"] .dataTables_wrapper {
  background-color: transparent !important;
  color: #dbe7fb !important;
}

/* Dark compliance for legacy POS tab system used by settings pages */
html[data-ui-theme="dark"] div.pos-tab-container {
  background: linear-gradient(180deg, #121f37, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.45) !important;
}

html[data-ui-theme="dark"] div.pos-tab-menu,
html[data-ui-theme="dark"] div.pos-tab-menu div.list-group {
  background: #0f1a30 !important;
}

html[data-ui-theme="dark"] div.pos-tab-menu div.list-group > a {
  background: #111d33 !important;
  color: #d9e6ff !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-ui-theme="dark"] div.pos-tab-menu div.list-group > a:hover {
  background: rgba(37, 99, 235, 0.3) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] div.pos-tab-menu div.list-group > a.active,
html[data-ui-theme="dark"] div.pos-tab-menu div.list-group > a.active .glyphicon,
html[data-ui-theme="dark"] div.pos-tab-menu div.list-group > a.active .fa {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] div.pos-tab-content {
  background: #0f1a2f !important;
}

html[data-ui-theme="dark"] .content .row .form-group {
  border-color: rgba(148, 163, 184, 0.24) !important;
}

html[data-ui-theme="dark"] .content .box,
html[data-ui-theme="dark"] .content .nav-tabs-custom,
html[data-ui-theme="dark"] .content .panel,
html[data-ui-theme="dark"] .content .well,
html[data-ui-theme="dark"] .content .list-group-item {
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Home/dashboard Tailwind cards and generic table wrappers */
html[data-ui-theme="dark"] .tw-bg-white,
html[data-ui-theme="dark"] .content .tw-bg-white,
html[data-ui-theme="dark"] .content .tw-bg-gray-50,
html[data-ui-theme="dark"] .content .tw-bg-slate-50,
html[data-ui-theme="dark"] .content .tw-bg-neutral-50 {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  color: #e5edf8 !important;
}

html[data-ui-theme="dark"] .tw-ring-gray-200,
html[data-ui-theme="dark"] .tw-border-gray-200,
html[data-ui-theme="dark"] .tw-border-gray-100,
html[data-ui-theme="dark"] .content .tw-ring-1,
html[data-ui-theme="dark"] .content .tw-border,
html[data-ui-theme="dark"] .content .tw-border-2 {
  border-color: rgba(148, 163, 184, 0.18) !important;
  --tw-ring-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-ui-theme="dark"] .content .tw-shadow-sm,
html[data-ui-theme="dark"] .content .tw-shadow,
html[data-ui-theme="dark"] .content .hover\:tw-shadow-md:hover {
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.42) !important;
}

html[data-ui-theme="dark"] .content .tw-text-gray-900,
html[data-ui-theme="dark"] .content .tw-text-gray-800,
html[data-ui-theme="dark"] .content .tw-text-slate-900,
html[data-ui-theme="dark"] .content .tw-text-slate-800,
html[data-ui-theme="dark"] .content .tw-text-neutral-900 {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .tw-text-gray-700,
html[data-ui-theme="dark"] .content .tw-text-gray-600,
html[data-ui-theme="dark"] .content .tw-text-gray-500,
html[data-ui-theme="dark"] .content .tw-text-slate-600,
html[data-ui-theme="dark"] .content .tw-text-slate-500,
html[data-ui-theme="dark"] .content .tw-text-neutral-500 {
  color: #9fb1cf !important;
}

html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-900,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-800,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-font-bold,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-font-semibold,
html[data-ui-theme="dark"] .content .tw-bg-white h1,
html[data-ui-theme="dark"] .content .tw-bg-white h2,
html[data-ui-theme="dark"] .content .tw-bg-white h3,
html[data-ui-theme="dark"] .content .tw-bg-white h4 {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .table-responsive,
html[data-ui-theme="dark"] .content .dataTables_wrapper,
html[data-ui-theme="dark"] .content .box-body.table-responsive,
html[data-ui-theme="dark"] .content .box.box-solid,
html[data-ui-theme="dark"] .content .box.box-solid .box-body,
html[data-ui-theme="dark"] .content .box.box-solid .box-header,
html[data-ui-theme="dark"] .content .nav-tabs-custom > .tab-content {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .content .box.box-solid .box-header.with-border,
html[data-ui-theme="dark"] .content .box.box-solid > .box-header,
html[data-ui-theme="dark"] .content .box.box-solid .box-header {
  background: linear-gradient(180deg, rgba(27, 43, 75, 0.78), rgba(19, 33, 60, 0.78)) !important;
  border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .content .box.box-solid .box-title,
html[data-ui-theme="dark"] .content .box.box-solid .box-header .box-title,
html[data-ui-theme="dark"] .content .box.box-solid .box-tools,
html[data-ui-theme="dark"] .content .box.box-solid .box-tools i {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .table-responsive .table > tbody > tr > td,
html[data-ui-theme="dark"] .content .table-responsive .table > tbody > tr > th,
html[data-ui-theme="dark"] .content .dataTables_wrapper .table > tbody > tr > td {
  background: #15243d !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .content .table-responsive .table > thead > tr > th,
html[data-ui-theme="dark"] .content .dataTables_wrapper .table > thead > tr > th {
  background: #1e2e50 !important;
  color: #dbe8ff !important;
}

html[data-ui-theme="dark"] .content .small-box,
html[data-ui-theme="dark"] .content .info-box,
html[data-ui-theme="dark"] .content .widget-user {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  color: #e5edf8 !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

html[data-ui-theme="dark"] .content .small-box .inner h3,
html[data-ui-theme="dark"] .content .small-box .inner p,
html[data-ui-theme="dark"] .content .info-box .info-box-text,
html[data-ui-theme="dark"] .content .info-box .info-box-number {
  color: #eff6ff !important;
}

/* Widget shell internals */
html[data-ui-theme="dark"] .ui-shell-card,
html[data-ui-theme="dark"] .ui-shell-card.ui-shell-card,
html[data-ui-theme="dark"] .ui-shell-card > div,
html[data-ui-theme="dark"] .ui-shell-card .ui-shell-card-frame,
html[data-ui-theme="dark"] .ui-shell-card .ui-shell-card-content,
html[data-ui-theme="dark"] .ui-shell-card .ui-shell-card-content-inner,
html[data-ui-theme="dark"] .ui-shell-card .ui-shell-card-body,
html[data-ui-theme="dark"] .ui-shell-card .tw-flow-root,
html[data-ui-theme="dark"] .ui-shell-card .tw-align-middle,
html[data-ui-theme="dark"] .ui-shell-card .sm\:tw-px-5,
html[data-ui-theme="dark"] .ui-shell-card .tw-py-2,
html[data-ui-theme="dark"] .ui-shell-card .box-body,
html[data-ui-theme="dark"] .ui-shell-card .box-body.table-responsive {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .content .ui-shell-card .box-header,
html[data-ui-theme="dark"] .content .ui-shell-card .ui-shell-card-header {
  background: linear-gradient(180deg, rgba(30, 46, 80, 0.92), rgba(22, 36, 64, 0.92)) !important;
  color: #eff6ff !important;
  border-bottom-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-ui-theme="dark"] .content .ui-shell-card .box-header *,
html[data-ui-theme="dark"] .content .ui-shell-card .ui-shell-card-header *,
html[data-ui-theme="dark"] .content .ui-shell-card .box-title,
html[data-ui-theme="dark"] .content .ui-shell-card .help-block,
html[data-ui-theme="dark"] .content .ui-shell-card small {
  color: #e5eefc !important;
}

html[data-ui-theme="dark"] .content .ui-shell-card .form-control,
html[data-ui-theme="dark"] .content .ui-shell-card .select2-container--default .select2-selection--single,
html[data-ui-theme="dark"] .content .ui-shell-card .select2-container--default .select2-selection--multiple {
  background: #10203a !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #e5eefc !important;
}

html[data-ui-theme="dark"] .content .ui-shell-card .text-muted,
html[data-ui-theme="dark"] .content .ui-shell-card .help-inline,
html[data-ui-theme="dark"] .content .ui-shell-card .help-block,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_info,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_length label,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_filter label {
  color: #9fb1cf !important;
}

html[data-ui-theme="dark"] .content .ui-shell-card .table,
html[data-ui-theme="dark"] .content .ui-shell-card .table-responsive,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_wrapper,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_scroll,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_scrollHead,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_scrollHeadInner,
html[data-ui-theme="dark"] .content .ui-shell-card .dataTables_scrollBody {
  background: transparent !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .ui-shell-card .row,
html[data-ui-theme="dark"] .ui-shell-card .col-md-12,
html[data-ui-theme="dark"] .ui-shell-card .col-md-6,
html[data-ui-theme="dark"] .ui-shell-card .col-md-4,
html[data-ui-theme="dark"] .ui-shell-card .col-md-3 {
  background: transparent !important;
}

/* Charts: Highcharts dark mode */
html[data-ui-theme="dark"] .highcharts-container,
html[data-ui-theme="dark"] .highcharts-root,
html[data-ui-theme="dark"] .highcharts-background,
html[data-ui-theme="dark"] .highcharts-plot-background,
html[data-ui-theme="dark"] .highcharts-plot-border,
html[data-ui-theme="dark"] .highcharts-series-group {
  background: transparent !important;
}

html[data-ui-theme="dark"] .highcharts-background,
html[data-ui-theme="dark"] .highcharts-plot-background {
  fill: #111c31 !important;
}

html[data-ui-theme="dark"] .highcharts-container svg,
html[data-ui-theme="dark"] .highcharts-root,
html[data-ui-theme="dark"] .highcharts-container rect:not(.highcharts-point):not(.highcharts-legend-box):not(.highcharts-tooltip-box) {
  background: transparent !important;
}

html[data-ui-theme="dark"] .highcharts-container .highcharts-background,
html[data-ui-theme="dark"] .highcharts-root .highcharts-background,
html[data-ui-theme="dark"] .highcharts-container .highcharts-plot-background,
html[data-ui-theme="dark"] .highcharts-root .highcharts-plot-background,
html[data-ui-theme="dark"] .highcharts-container .highcharts-plot-border,
html[data-ui-theme="dark"] .highcharts-root .highcharts-plot-border {
  fill: #111c31 !important;
  stroke: rgba(148, 163, 184, 0.14) !important;
}

html[data-ui-theme="dark"] .highcharts-title,
html[data-ui-theme="dark"] .highcharts-subtitle,
html[data-ui-theme="dark"] .highcharts-axis-title,
html[data-ui-theme="dark"] .highcharts-axis-labels text,
html[data-ui-theme="dark"] .highcharts-legend-item text,
html[data-ui-theme="dark"] .highcharts-data-label text,
html[data-ui-theme="dark"] .highcharts-stack-labels text,
html[data-ui-theme="dark"] .highcharts-tooltip text {
  fill: #dbe7fb !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .highcharts-grid-line,
html[data-ui-theme="dark"] .highcharts-axis-line,
html[data-ui-theme="dark"] .highcharts-tick,
html[data-ui-theme="dark"] .highcharts-plot-line,
html[data-ui-theme="dark"] .highcharts-plot-band {
  stroke: rgba(148, 163, 184, 0.18) !important;
}

html[data-ui-theme="dark"] .highcharts-plot-band {
  fill: rgba(148, 163, 184, 0.06) !important;
}

html[data-ui-theme="dark"] .highcharts-legend-box {
  fill: transparent !important;
  stroke: transparent !important;
}

html[data-ui-theme="dark"] .highcharts-tooltip-box {
  fill: #0f1b31 !important;
  stroke: rgba(148, 163, 184, 0.24) !important;
}

/* DataTables shell and controls */
html[data-ui-theme="dark"] .dataTables_wrapper .row,
html[data-ui-theme="dark"] .dataTables_wrapper .col-sm-6,
html[data-ui-theme="dark"] .dataTables_wrapper .col-sm-12,
html[data-ui-theme="dark"] .dataTables_wrapper .col-md-12 {
  background: transparent !important;
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a,
html[data-ui-theme="dark"] .pagination > li > a,
html[data-ui-theme="dark"] .pagination > li > span {
  background: #13213b !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-ui-theme="dark"] .pagination > .active > a,
html[data-ui-theme="dark"] .pagination > .active > span {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  color: #ffffff !important;
}

/* Repeated internal dark-mode patterns still used across home/users/roles/analytics */
html[data-ui-theme="dark"] .content .box.box-primary,
html[data-ui-theme="dark"] .content .box.box-default,
html[data-ui-theme="dark"] .content .box.box-widget,
html[data-ui-theme="dark"] .content .box,
html[data-ui-theme="dark"] .content .panel,
html[data-ui-theme="dark"] .content .well,
html[data-ui-theme="dark"] .content .ui-shell-card,
html[data-ui-theme="dark"] .content .ui-filter-card {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .content .box > .box-body,
html[data-ui-theme="dark"] .content .box > .box-footer,
html[data-ui-theme="dark"] .content .panel > .panel-body,
html[data-ui-theme="dark"] .content .well > .table-responsive,
html[data-ui-theme="dark"] .content .table-responsive > .table,
html[data-ui-theme="dark"] .content .ui-shell-card .list-group,
html[data-ui-theme="dark"] .content .ui-shell-card .list-group-item,
html[data-ui-theme="dark"] .content .ui-shell-card .box-body > .row,
html[data-ui-theme="dark"] .content .ui-shell-card .box-body > .col-md-12 {
  background: transparent !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .content .box > .box-header,
html[data-ui-theme="dark"] .content .panel > .panel-heading,
html[data-ui-theme="dark"] .content .ui-shell-card > .ui-shell-card-frame > .box-header,
html[data-ui-theme="dark"] .content .ui-shell-card .ui-shell-card-header {
  background: linear-gradient(180deg, rgba(30, 46, 80, 0.92), rgba(22, 36, 64, 0.92)) !important;
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .box > .box-header *,
html[data-ui-theme="dark"] .content .panel > .panel-heading *,
html[data-ui-theme="dark"] .content .box > .box-body h1,
html[data-ui-theme="dark"] .content .box > .box-body h2,
html[data-ui-theme="dark"] .content .box > .box-body h3,
html[data-ui-theme="dark"] .content .box > .box-body h4,
html[data-ui-theme="dark"] .content .box > .box-body strong,
html[data-ui-theme="dark"] .content .box > .box-body label,
html[data-ui-theme="dark"] .content .ui-shell-card h1,
html[data-ui-theme="dark"] .content .ui-shell-card h2,
html[data-ui-theme="dark"] .content .ui-shell-card h3,
html[data-ui-theme="dark"] .content .ui-shell-card h4,
html[data-ui-theme="dark"] .content .ui-shell-card strong,
html[data-ui-theme="dark"] .content .ui-shell-card label {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .box > .box-body,
html[data-ui-theme="dark"] .content .panel > .panel-body,
html[data-ui-theme="dark"] .content .ui-shell-card .box-body,
html[data-ui-theme="dark"] .content .ui-shell-card .list-group-item,
html[data-ui-theme="dark"] .content .ui-shell-card .text-muted,
html[data-ui-theme="dark"] .content .box > .box-body .text-muted,
html[data-ui-theme="dark"] .content .box > .box-body p,
html[data-ui-theme="dark"] .content .ui-shell-card p {
  color: #9fb1cf !important;
}

/* Header user dropdown dark-mode polish */
.user-menu-dropdown {
  backdrop-filter: blur(14px);
}

.user-theme-mode-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.user-theme-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  color: #334155;
  padding: 8px 6px;
  transition: all 0.2s ease;
}

.user-theme-mode-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

.user-theme-mode-btn.tw-bg-blue-600,
.user-theme-mode-btn.tw-border-blue-600,
.user-theme-mode-btn.tw-text-white {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown {
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.98), rgba(14, 27, 49, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45) !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown p,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown span,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown li,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown strong {
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown hr {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-link {
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-link:hover {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #c8d5eb !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn:hover {
  background: rgba(30, 41, 59, 0.94) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn.tw-bg-blue-600,
html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn.tw-border-blue-600,
html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn.tw-text-white {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Repeated white utility cards in dashboards and CRUD pages */
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-sm.tw-rounded-xl,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-sm.tw-rounded-2xl,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-rounded-xl.tw-ring-1,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-rounded-2xl.tw-ring-1,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-sm.tw-ring-1,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-md.tw-rounded-xl,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-md.tw-rounded-2xl {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28) !important;
}

html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-sm.tw-rounded-xl *,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-shadow-sm.tw-rounded-2xl *,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-rounded-xl.tw-ring-1 *,
html[data-ui-theme="dark"] .content .tw-bg-white.tw-rounded-2xl.tw-ring-1 * {
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-900,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-slate-900,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-800,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-slate-800,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-font-semibold,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-font-medium {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-500,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-gray-600,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-slate-500,
html[data-ui-theme="dark"] .content .tw-bg-white .tw-text-slate-600 {
  color: #9fb1cf !important;
}

/* Download center parity */
html[data-ui-theme="dark"] .page-download-center .download-hero-title,
html[data-ui-theme="dark"] .page-download-center .download-card__head,
html[data-ui-theme="dark"] .page-download-center .download-card__head span,
html[data-ui-theme="dark"] .page-download-center .first-use-box strong,
html[data-ui-theme="dark"] .page-download-center .terminal-steps strong {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .page-download-center .download-hero-subtitle,
html[data-ui-theme="dark"] .page-download-center .download-card__desc,
html[data-ui-theme="dark"] .page-download-center .steps-list,
html[data-ui-theme="dark"] .page-download-center .terminal-steps,
html[data-ui-theme="dark"] .page-download-center .first-use-box,
html[data-ui-theme="dark"] .page-download-center .platform-pill {
  color: #9fb1cf !important;
}

html[data-ui-theme="dark"] .page-download-center .download-card,
html[data-ui-theme="dark"] .page-download-center .first-use-box,
html[data-ui-theme="dark"] .page-download-center .terminal-steps {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28) !important;
}

html[data-ui-theme="dark"] .page-download-center .download-card__head {
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-ui-theme="dark"] .page-download-center .platform-pill {
  background: rgba(37, 99, 235, 0.18) !important;
}

html[data-ui-theme="dark"] .page-download-center .box > .box-body,
html[data-ui-theme="dark"] .page-download-center .box > .box-header {
  background: transparent !important;
}

.user-theme-mode-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.user-theme-mode-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border-radius: 14px;
}

.user-theme-mode-btn svg {
  width: 18px;
  height: 18px;
}

.user-menu-dropdown .user-theme-mode-group {
  padding: 2px;
}

.user-menu-dropdown .user-theme-mode-btn + .user-theme-mode-btn {
  margin-left: 0;
}

.user-theme-mode-btn--active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
}

html[data-ui-theme="dark"] .app-theme-header .user-theme-mode-btn--active {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
}

html[data-ui-theme="dark"] .page-download-center .first-use-box,
html[data-ui-theme="dark"] .page-download-center .alert.alert-warning {
  background: linear-gradient(180deg, #121d34, #0f192d) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .page-download-center .first-use-box h4,
html[data-ui-theme="dark"] .page-download-center .first-use-box li,
html[data-ui-theme="dark"] .page-download-center .first-use-box .small,
html[data-ui-theme="dark"] .page-download-center .alert.alert-warning,
html[data-ui-theme="dark"] .page-download-center .alert.alert-warning strong,
html[data-ui-theme="dark"] .page-download-center .alert.alert-warning code {
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown .tw-text-gray-900,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown .tw-text-gray-500,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown .tw-truncate,
html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown [role="none"] {
  color: #eff6ff !important;
}

html[data-ui-theme="dark"] .app-theme-header .user-menu-dropdown p:first-child {
  color: #93a9c9 !important;
}


html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown * {
  color: #dbe7fb;
}

html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown > div > p:first-child,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown li > p:first-child {
  color: #93a9c9 !important;
}

html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown > div > p:nth-child(2) {
  color: #f8fbff !important;
  font-weight: 700 !important;
}

html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link svg,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link span,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link i {
  color: #dbe7fb !important;
}

html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link:hover,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link:hover svg,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link:hover span,
html[data-ui-theme="dark"] .app-theme-header details.tw-dw-dropdown[open] .user-menu-link:hover i {
  color: #ffffff !important;
}

/* Global layering: keep header above page content but below modals */
.app-theme-header {
  position: relative;
  z-index: 20;
}

.app-theme-header details.tw-dw-dropdown[open] .user-menu-dropdown {
  z-index: 30;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.modal,
.modal.in,
.modal.show {
  z-index: 1050 !important;
}

/* Floating panels have to clear modals (1050) — but only while they are OPEN.
   Every widget on this list except one is absent or display:none until it opens,
   so a blanket z-index was harmless for them. `.select2-container` is the
   exception: it is the always-visible replacement for the <select> box itself,
   so raising it unconditionally put every closed select2 on the page above any
   modal or overlay layered below 1060. Reported on /businesses, where the
   Industry and Plan filter boxes painted straight through the tenant detail
   overlay (z-index 1050) and stayed clickable through its backdrop (1040);
   the same happened anywhere a Bootstrap modal opened over a page carrying a
   select2. Select2 renders its panel into a SEPARATE body-level wrapper that
   also carries `--open`, so scoping to `--open` keeps the panel above modals
   while the closed box drops back into normal flow. Verified against Select2's
   attach-body rendering — see Select2StackingContractTest. */
.select2-container--open,
.pac-container,
.daterangepicker,
.ui-datepicker,
.popover {
  z-index: 1060;
}

/* Bootstrap modals should fully own the viewport when open */
body.modal-open .app-theme-header {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.modal-open .app-theme-header,
body.modal-open .app-theme-header * {
  z-index: 20 !important;
}

/* Keep modal content clear of the fixed/sticky top chrome */
.modal,
.modal.in,
.modal.show,
body.modal-open .modal {
  padding-top: 86px !important;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog,
body.modal-open .modal .modal-dialog {
  margin-top: 0 !important;
}

.modal.in .modal-content,
.modal.show .modal-content,
body.modal-open .modal .modal-content {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal,
  .modal.in,
  .modal.show,
  body.modal-open .modal {
    padding-top: 68px !important;
  }

  .modal.in .modal-dialog,
  .modal.show .modal-dialog,
  body.modal-open .modal .modal-dialog {
    margin-top: 0 !important;
  }

  .modal.in .modal-content,
  .modal.show .modal-content,
  body.modal-open .modal .modal-content {
    max-height: calc(100vh - 88px);
  }
}


.modal-safe-offset.modal,
.modal-safe-offset.modal.in,
.modal-safe-offset.modal.show,
body.modal-open .modal-safe-offset.modal {
  padding-top: 118px !important;
}

.modal-safe-offset .modal-dialog {
  margin-top: 0 !important;
}

.modal-safe-offset .modal-content {
  max-height: calc(100vh - 142px);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal-safe-offset.modal,
  .modal-safe-offset.modal.in,
  .modal-safe-offset.modal.show,
  body.modal-open .modal-safe-offset.modal {
    padding-top: 84px !important;
  }

  .modal-safe-offset .modal-content {
    max-height: calc(100vh - 98px);
  }
}

/* ====================================================================
   Loading States
   ==================================================================== */

/* --- DataTable loading spinner --- */
.dataTables_processing {
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 1rem 2rem !important;
    font-size: 0.875rem;
    color: #4b5563;
    z-index: 100;
}
.dataTables_processing::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #6366f1;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dt-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes dt-spin {
    to { transform: rotate(360deg); }
}

/* --- Page transition progress bar --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
}
.page-loader-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(99,102,241,0.4);
}
.page-loader.active .page-loader-bar {
    animation: page-load 2s ease-in-out;
}
@keyframes page-load {
    0%   { width: 0; }
    20%  { width: 30%; }
    50%  { width: 60%; }
    80%  { width: 80%; }
    100% { width: 95%; }
}

/* --- Skeleton loading --- */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}
.skeleton-circle {
    border-radius: 50%;
}

/* --- Button loading state --- */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dt-spin 0.6s linear infinite;
    margin-left: 6px;
    vertical-align: middle;
}

/* ====================================================================
   Mobile Responsive
   ==================================================================== */
@media (max-width: 768px) {
    /* Sidebar collapses on mobile */
    .thetop {
        display: block !important;
    }
    .side-bar {
        position: fixed !important;
        z-index: 1050 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .side-bar.mobile-open {
        transform: translateX(0);
    }

    /* Content takes full width */
    #scrollable-container {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Tables scroll horizontally (keep overflow-y visible for dropdowns) */
    .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper {
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards stack vertically */
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6 {
        width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Header toolbar compact */
    .header-tools {
        gap: 4px !important;
    }
    .header-tools > * {
        font-size: 0.85rem;
    }

    /* Hide non-essential header items on mobile */
    .header-tools .tw-hidden-mobile {
        display: none !important;
    }

    /* Modal full width on mobile */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Breadcrumbs compact */
    nav[aria-label="Breadcrumb"] {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem !important;
    }

    /* Forms stack */
    .form-group .col-sm-3,
    .form-group .col-sm-9 {
        width: 100% !important;
    }

    /* Dashboard KPI cards compact */
    .small-box .inner h3 {
        font-size: 1.5rem;
    }

    /* Global search modal responsive */
    #global-search-overlay > div:nth-child(2) {
        margin: 0 8px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .content-header h1 {
        font-size: 1.25rem;
    }

    /* DataTable buttons wrap */
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .dt-buttons .btn {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* ===== Sidebar active state ===== */
/* Active links already carry the theme background; keep their nested label/icons
   on the same high-contrast foreground instead of overriding them with blue. */
.side-bar .tw-text-white {
    color: #fff !important;
}
.side-bar .tw-text-white span,
.side-bar .tw-text-white svg {
    color: inherit !important;
}
.side-bar .chiled a.tw-text-white {
    font-weight: 700;
}
/* Brand logo must stay white — override back */
.side-bar .app-theme-sidebar-brand,
.side-bar .app-theme-sidebar-brand *,
.side-bar .app-theme-sidebar-brand p,
.side-bar .app-theme-sidebar-brand span {
    color: #fff !important;
}

/* ==========================================================================
   Modern DataTable Card — extracted from app.blade.php inline styles
   Applied via .modern-dt-card class on 120+ DataTable pages
   ========================================================================== */
.modern-dt-card .box-header { border-bottom: 1px solid #f3f4f6; padding: 16px 20px; }
.modern-dt-card .box-header .box-title { font-size: 16px; font-weight: 700; color: #111827; }
.modern-dt-card .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.modern-dt-card .table-striped > tbody > tr:hover { background-color: #f9fafb; }
.modern-dt-card .table > thead > tr > th { background: #f9fafb; color: #374151; font-weight: 600; font-size: 13px; border-bottom: 2px solid #e5e7eb; text-transform: uppercase; letter-spacing: 0.025em; }
.modern-dt-card .table > tbody > tr > td { vertical-align: middle; padding: 12px 8px; border-color: #f3f4f6; }
.modern-dt-card .tw-dw-btn-outline.tw-dw-btn-primary { border-color: #4f46e5 !important; color: #4f46e5 !important; background: transparent !important; border-radius: 8px !important; font-size: 12px; }
.modern-dt-card .tw-dw-btn-outline.tw-dw-btn-primary:hover { background: #4f46e5 !important; color: white !important; }
.modern-dt-card .tw-dw-btn-outline.tw-dw-btn-error { border-color: #ef4444 !important; color: #ef4444 !important; background: transparent !important; border-radius: 8px !important; font-size: 12px; }
.modern-dt-card .tw-dw-btn-outline.tw-dw-btn-error:hover { background: #ef4444 !important; color: white !important; }
.modern-dt-card .dataTables_paginate .paginate_button { border-radius: 6px !important; margin: 0 2px; }
.modern-dt-card .dataTables_paginate .paginate_button.active { background: #4f46e5 !important; border-color: #4f46e5 !important; }
.modern-dt-card .dataTables_paginate .paginate_button.active a { color: white !important; }
.modern-dt-card .dataTables_paginate .paginate_button:not(.disabled):not(.active):hover { background: #e0e7ff !important; border-color: #e0e7ff !important; }
.modern-dt-card .dataTables_paginate .paginate_button:not(.disabled):not(.active):hover a { color: #4f46e5 !important; }
.modern-dt-card .dataTables_paginate .paginate_button:not(.disabled) a { color: #4f46e5 !important; font-weight: 600; }
.modern-dt-card .dataTables_paginate .paginate_button.disabled a { color: #9ca3af !important; }
.modern-dt-card .dt-buttons .btn { border-radius: 6px; border-color: #e5e7eb; color: #374151; font-size: 12px; margin-right: 4px; }
.modern-dt-card .dt-buttons .btn:hover { background: #f3f4f6; }

/* ── Global action-menu (dropdown) geometry ──────────────────────────────
   Paired with public/js/ui-dropdown.js, which computes top/left.
   position:fixed lets the menu escape every clipping ancestor
   (td{overflow:hidden}, .table-responsive, .dataTables_scrollBody,
   .tw-overflow-y-auto shells, modal bodies). The JS clamps it inside the
   viewport and gives it an internal scroll when the screen is too short,
   so a long "Actions" list can never leave the page.
   Replaces the old US1 hotfix (`td .btn-group .dropdown-menu`), which was
   unclamped and only covered table cells. */
.ui-dd-float {
  position: fixed !important;
  z-index: 1060 !important;          /* above modals (1050) */
  margin: 0 !important;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

/* JS owns the horizontal alignment — kill Bootstrap's right:0 rule. */
.ui-dd-float.dropdown-menu-right,
.ui-dd-float.pull-right {
  right: auto;
}

/* Scrollbar polish for long action lists */
.ui-dd-float::-webkit-scrollbar { width: 8px; }
.ui-dd-float::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 8px; }

/* ── Phones: bottom sheet instead of a cramped anchored menu ─────────── */
.ui-dd-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1055;
}

@media (max-width: 575px) {
  .ui-dd-float.ui-dd-sheet {
    position: fixed !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    max-height: 65vh;
    border-radius: 14px;
    padding: 6px 0;
    animation: uiDdSheetIn 0.16s ease-out;
  }
  .ui-dd-float.ui-dd-sheet > li > a,
  .ui-dd-float.ui-dd-sheet > li > button {
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.4;
  }
}

@keyframes uiDdSheetIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}