/**
 * ============================================
 * 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;
}

.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;
}

/* 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;
}

.select2-container,
.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 fix ===== */
/* tw-bg-primary-700 doesn't render (Tailwind config missing) so bg is transparent.
   Override tw-text-white to primary color for sidebar active items.
   Exclude brand logo which should stay white on green header. */
.side-bar .tw-text-white {
    color: var(--tw-primary-700, #0f4ed8) !important;
}
.side-bar .tw-text-white span,
.side-bar .tw-text-white svg {
    color: var(--tw-primary-700, #0f4ed8) !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; }

/* ── US1: Fix action dropdown clipped by multiple overflow ancestors ── */
/* Problem: TD(overflow:hidden), dataTables_scrollBody(overflow:auto),
   table-responsive(overflow:auto), tw-overflow-y-auto(overflow:auto)
   all clip absolutely-positioned dropdown menus.
   Solution: Use position:fixed on dropdown menus so they escape ALL
   overflow containers. JS repositions them relative to the toggle. */
td .btn-group .dropdown-menu {
  position: fixed !important;
  z-index: 1050 !important;
  will-change: transform;
}