/* ════════════════════════════════════════════════════════════════════════════
   ALMUDIR — MASTER THEME   v2.0
   Complete design system: sidebar, navbar, cards, tables, buttons, forms,
   badges, modals, dropdowns, tabs, select2, alerts, pagination.
   Loads LAST — overrides everything via !important where needed.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0. DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Brand Blue (matches compiled tw-primary) */
  --tm-brand:           #0040c1;
  --tm-brand-hover:     #0034a0;
  --tm-brand-light:     #004eeb;
  --tm-brand-glow:      rgba(0, 64, 193, .18);
  --tm-brand-subtle:    #e8eeff;

  /* Sidebar — dark navy */
  --tm-sb-bg:           #071224;
  --tm-sb-surface:      #0d1f3c;
  --tm-sb-border:       rgba(255, 255, 255, .06);
  --tm-sb-text:         #8faac9;       /* inactive */
  --tm-sb-text-hover:   #cdd9eb;       /* hover     */
  --tm-sb-text-active:  #ffffff;       /* active    */
  --tm-sb-icon:         #4e6b8c;
  --tm-sb-active-bg:    rgba(0, 78, 235, .20);
  --tm-sb-active-accent:#004eeb;

  /* Body / Layout */
  --tm-body-bg:         #f0f4f9;
  --tm-card-bg:         #ffffff;
  --tm-card-border:     #e2e8f0;
  --tm-card-radius:     12px;

  /* Typography */
  --tm-text-heading:    #0b1829;
  --tm-text-body:       #2d3748;
  --tm-text-muted:      #718096;

  /* Semantic */
  --tm-success:         #047857;
  --tm-success-light:   #d1fae5;
  --tm-warning:         #b45309;
  --tm-warning-light:   #fef3c7;
  --tm-danger:          #b91c1c;
  --tm-danger-light:    #fee2e2;
  --tm-info:            #0369a1;
  --tm-info-light:      #dbeafe;

  /* Elevation */
  --tm-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --tm-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --tm-shadow-md: 0 4px 14px rgba(0,0,0,.10);
  --tm-shadow-lg: 0 10px 32px rgba(0,0,0,.13);
  --tm-shadow-xl: 0 20px 48px rgba(0,0,0,.15);
}

/* ── 1. BASE / BODY ────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--tm-body-bg) !important;
  color: var(--tm-text-body) !important;
}

.wrapper,
.content-wrapper {
  background-color: var(--tm-body-bg) !important;
}

/* ── 2. SIDEBAR ────────────────────────────────────────────────────────────── */

/* Outer container (<aside class="side-bar tw-bg-white ...">)  */
.side-bar {
  background-color: var(--tm-sb-bg) !important;
  border-right: 1px solid var(--tm-sb-border) !important;
  box-shadow: 4px 0 28px rgba(0, 0, 0, .22) !important;
}

/* Logo / brand area at top of sidebar */
.side-bar > a:first-of-type,
.side-bar > a.tw-flex.tw-items-center.tw-justify-center {
  background: linear-gradient(135deg, #0d1f3c 0%, #071224 100%) !important;
  border-bottom: 1px solid var(--tm-sb-border) !important;
  border-right: none !important;
}

.side-bar > a:first-of-type p,
.side-bar > a.tw-flex p {
  color: #e2eaf8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

/* Scrollable menu area  */
#side-bar {
  background-color: var(--tm-sb-bg) !important;
  border-right: none !important;
  /* Custom slim scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
#side-bar::-webkit-scrollbar        { width: 4px; }
#side-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
#side-bar::-webkit-scrollbar-track { background: transparent; }

/* Section header labels  */
#side-bar > div[class*="tw-px-3"][class*="tw-py-2"] {
  color: var(--tm-sb-icon) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding-top: 18px !important;
  padding-bottom: 6px !important;
}

/* Divider spacers */
#side-bar > div.tw-my-2,
#side-bar .tw-my-2 {
  border-top: 1px solid var(--tm-sb-border) !important;
  margin: 8px 12px !important;
}

/* ── All menu links ── */
#side-bar a.sb-link,
#side-bar a.drop_down {
  color: var(--tm-sb-text) !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

#side-bar a.sb-link:hover,
#side-bar a.drop_down:hover {
  color: var(--tm-sb-text-hover) !important;
  background-color: rgba(255, 255, 255, .07) !important;
}

/* Active top-level item */
#side-bar a.sb-active {
  color: var(--tm-sb-text-active) !important;
  background-color: var(--tm-sb-active-bg) !important;
  box-shadow: inset 3px 0 0 var(--tm-sb-active-accent) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* Active parent dropdown */
#side-bar > div.sb-parent-active > a.drop_down {
  color: var(--tm-sb-text-hover) !important;
  background-color: rgba(255, 255, 255, .06) !important;
}

/* SVG chevron arrow in dropdowns */
#side-bar a.drop_down .svg {
  color: var(--tm-sb-icon) !important;
  transition: color 150ms ease !important;
}
#side-bar a.drop_down:hover .svg,
#side-bar a.drop_down.sb-parent-active .svg {
  color: var(--tm-sb-text-hover) !important;
}

/* ── Icons in menu items ── */
#side-bar a.sb-link svg:not(.svg),
#side-bar a.drop_down svg:not(.svg),
#side-bar a.sb-link i,
#side-bar a.drop_down i {
  color: var(--tm-sb-icon) !important;
  flex-shrink: 0 !important;
  transition: color 150ms ease !important;
}
#side-bar a.sb-link:hover svg:not(.svg),
#side-bar a.drop_down:hover svg:not(.svg),
#side-bar a.sb-link:hover i,
#side-bar a.drop_down:hover i {
  color: var(--tm-sb-text-hover) !important;
}
#side-bar a.sb-active svg:not(.svg),
#side-bar a.sb-active i {
  color: #7fb3ff !important;
}

/* ── Child / submenu items ── */
#side-bar .chiled {
  background-color: transparent !important;
}
#side-bar .chiled .tw-absolute.tw-w-px {
  background-color: rgba(255, 255, 255, .10) !important;
}
#side-bar .chiled a.sb-child {
  color: var(--tm-sb-text) !important;
  font-size: 12.5px !important;
  padding: 5px 4px !important;
  border-radius: 6px !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}
#side-bar .chiled a.sb-child:hover {
  color: var(--tm-sb-text-hover) !important;
  background-color: rgba(255,255,255,.05) !important;
}
#side-bar .chiled a.sb-child-active {
  color: #7fb3ff !important;  /* light blue — readable on dark */
  font-weight: 700 !important;
}

/* ── 3. TOP NAVBAR ─────────────────────────────────────────────────────────── */
/* The header has tw-bg-gradient which is fine. Just refine shadow and ensure
   consistent border-bottom */
.main-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important;
}

/* Ensure header nav area is transparent (already is, but reinforce) */
.main-header .navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Navbar notification / menu count badge */
.navbar-nav > .notifications-menu > a .label,
.navbar-nav > .messages-menu > a .label,
.navbar-nav > .tasks-menu > a .label {
  background-color: #ef4444 !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  padding: 2px 5px !important;
}

/* ── 4. CONTENT AREA ───────────────────────────────────────────────────────── */
.content-header {
  padding: 14px 22px 4px !important;
}

.content-header h1 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--tm-text-heading) !important;
  letter-spacing: -0.4px !important;
}

.breadcrumb {
  background-color: transparent !important;
  padding: 4px 0 0 !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
}

.breadcrumb > .active {
  color: var(--tm-text-muted) !important;
}

.breadcrumb > li + li::before {
  color: #bec8d5 !important;
}

/* ── 5. CARDS / BOXES ──────────────────────────────────────────────────────── */
.box {
  background-color: var(--tm-card-bg) !important;
  border: 1px solid var(--tm-card-border) !important;
  border-radius: var(--tm-card-radius) !important;
  box-shadow: var(--tm-shadow-sm) !important;
  overflow: visible !important;
  transition: box-shadow .2s ease !important;
  margin-bottom: 20px !important;
}

/* Remove the old colored top border on boxes */
.box.box-primary   { border-top: none !important; }
.box.box-success   { border-top: none !important; }
.box.box-danger    { border-top: none !important; }
.box.box-warning   { border-top: none !important; }
.box.box-info      { border-top: none !important; }
.box.box-default   { border-top: none !important; }

/* Refined left accent instead */
.box.box-primary   { border-left: 3px solid var(--tm-brand) !important; }
.box.box-success   { border-left: 3px solid var(--tm-success) !important; }
.box.box-danger    { border-left: 3px solid var(--tm-danger) !important; }
.box.box-warning   { border-left: 3px solid var(--tm-warning) !important; }
.box.box-info      { border-left: 3px solid var(--tm-info) !important; }

.box-header {
  background-color: var(--tm-card-bg) !important;
  padding: 14px 18px !important;
  border-radius: var(--tm-card-radius) var(--tm-card-radius) 0 0 !important;
}

.box-header.with-border {
  border-bottom: 1px solid var(--tm-card-border) !important;
}

.box-header .box-title {
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--tm-text-heading) !important;
  letter-spacing: -0.2px !important;
}

.box-body {
  background-color: var(--tm-card-bg) !important;
  padding: 18px !important;
  border-radius: 0 0 var(--tm-card-radius) var(--tm-card-radius) !important;
}

.box-footer {
  background-color: #f7fafc !important;
  border-top: 1px solid var(--tm-card-border) !important;
  padding: 12px 18px !important;
  border-radius: 0 0 var(--tm-card-radius) var(--tm-card-radius) !important;
}

/* ── 6. TABLES ─────────────────────────────────────────────────────────────── */
.table {
  background-color: var(--tm-card-bg) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Header */
.table > thead > tr > th,
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background: linear-gradient(180deg, #132035 0%, #0d1829 100%) !important;
  color: #c8d8ee !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
  border: none !important;
  white-space: nowrap !important;
}

.table > thead > tr > th a,
.table thead th a {
  color: #c8d8ee !important;
}

/* DataTable sort arrows */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: rgba(200,216,238,.5) !important;
}

/* Body rows */
.table > tbody > tr > td,
.table tbody td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f0f4f8 !important;
  color: var(--tm-text-body) !important;
  font-size: 13.5px !important;
  background-color: var(--tm-card-bg) !important;
}

.table > tbody > tr:nth-child(even) > td {
  background-color: #fafcfe !important;
}

.table > tbody > tr:hover > td {
  background-color: #eef4fb !important;
}

/* DataTables footer */
table.dataTable tfoot th,
table.dataTable tfoot td {
  background-color: #f7fafc !important;
  border-top: 2px solid var(--tm-card-border) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--tm-text-heading) !important;
  padding: 10px 14px !important;
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid #d1d5db !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  background-color: #fff !important;
  color: var(--tm-text-body) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--tm-brand) !important;
  box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 12.5px !important;
  color: var(--tm-text-muted) !important;
  padding-top: 10px !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  border: none !important;
  margin: 0 2px !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  color: var(--tm-text-body) !important;
  transition: background-color .15s ease, color .15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--tm-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--tm-brand-glow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--tm-brand-subtle) !important;
  color: var(--tm-brand) !important;
  border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #bdc7d3 !important;
  cursor: default !important;
}

/* Table responsive wrapper */
.table-responsive {
  border-radius: var(--tm-card-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--tm-card-border) !important;
  box-shadow: var(--tm-shadow-sm) !important;
}

/* ── 7. BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  letter-spacing: 0.01em !important;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease !important;
  border: none !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn:active {
  transform: scale(.96) !important;
}

.btn i, .btn svg {
  flex-shrink: 0 !important;
}

/* Primary */
.btn-primary,
.btn-primary:visited {
  background: linear-gradient(135deg, #0050e6, #0040c1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,64,193,.28) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1a64ff, #0050e6) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,64,193,.38) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Success */
.btn-success,
.btn-success:visited {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(5,150,105,.28) !important;
}
.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(5,150,105,.38) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Danger */
.btn-danger,
.btn-danger:visited {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(185,28,28,.28) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(185,28,28,.38) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Warning */
.btn-warning,
.btn-warning:visited {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(180,83,9,.28) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(180,83,9,.38) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Info */
.btn-info,
.btn-info:visited {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(3,105,161,.28) !important;
}
.btn-info:hover,
.btn-info:focus {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(3,105,161,.38) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Default */
.btn-default,
.btn-default:visited {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: var(--tm-shadow-xs) !important;
}
.btn-default:hover,
.btn-default:focus {
  background: #f8fafc !important;
  color: var(--tm-text-heading) !important;
  border-color: #9ba8b6 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Link button — no shadow/transform */
.btn.btn-link {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--tm-brand) !important;
  display: inline !important;
  font-weight: 500 !important;
}
.btn.btn-link:hover {
  color: var(--tm-brand-hover) !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: underline !important;
}

/* Small/XS */
.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  gap: 4px !important;
}
.btn-xs {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  gap: 3px !important;
}

/* Large */
.btn-lg {
  font-size: 15px !important;
  padding: 10px 22px !important;
  border-radius: 9px !important;
}

/* ── 8. FORM CONTROLS ──────────────────────────────────────────────────────── */
.form-control {
  border: 1.5px solid #d1d5db !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--tm-text-heading) !important;
  background-color: #ffffff !important;
  box-shadow: var(--tm-shadow-xs) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.form-control:focus {
  border-color: var(--tm-brand) !important;
  box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
  outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #f3f6f9 !important;
  border-color: #e2e8f0 !important;
  color: var(--tm-text-muted) !important;
  cursor: not-allowed !important;
}

.form-group label,
.control-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  margin-bottom: 5px !important;
}

/* Input groups */
.input-group-addon {
  background-color: #f3f6f9 !important;
  border: 1.5px solid #d1d5db !important;
  color: var(--tm-text-muted) !important;
  font-size: 13.5px !important;
  border-radius: 7px 0 0 7px !important;
  padding: 8px 12px !important;
}

.input-group .form-control:not(:first-child) {
  border-left: none !important;
  border-radius: 0 7px 7px 0 !important;
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tm-brand) !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
}

/* ── 9. SELECT2 ────────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid #d1d5db !important;
  border-radius: 7px !important;
  height: 36px !important;
  background-color: #fff !important;
  box-shadow: var(--tm-shadow-xs) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--tm-brand) !important;
  box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tm-text-heading) !important;
  font-size: 13.5px !important;
  line-height: 34px !important;
  padding: 0 30px 0 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 8px !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1.5px solid #d1d5db !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  padding: 4px 6px !important;
  min-height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--tm-brand) !important;
  box-shadow: 0 0 0 3px var(--tm-brand-glow) !important;
}

.select2-dropdown {
  border: 1px solid var(--tm-card-border) !important;
  border-radius: 9px !important;
  box-shadow: var(--tm-shadow-lg) !important;
  overflow: hidden !important;
  background-color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1.5px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  margin: 6px !important;
  width: calc(100% - 12px) !important;
}

.select2-container--default .select2-results__option {
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  color: var(--tm-text-body) !important;
  transition: background .12s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tm-brand) !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--tm-brand-subtle) !important;
  color: var(--tm-brand) !important;
}

/* Multiple select - selected tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--tm-brand-subtle) !important;
  border: 1px solid rgba(0,64,193,.2) !important;
  border-radius: 5px !important;
  color: var(--tm-brand) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  margin: 2px 3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--tm-brand) !important;
  margin-left: 5px !important;
  opacity: 0.6 !important;
}

/* ── 10. BADGES & LABELS ───────────────────────────────────────────────────── */
.label,
.badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1.6 !important;
}

.label-primary, .badge-primary {
  background: var(--tm-brand) !important;
  color: #fff !important;
}
.label-success, .badge-success {
  background: var(--tm-success) !important;
  color: #fff !important;
}
.label-danger,  .badge-danger  {
  background: var(--tm-danger) !important;
  color: #fff !important;
}
.label-warning, .badge-warning {
  background: var(--tm-warning) !important;
  color: #fff !important;
}
.label-info,    .badge-info    {
  background: var(--tm-info) !important;
  color: #fff !important;
}
.label-default, .badge-default {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

/* ── 11. ALERTS ────────────────────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: 9px !important;
  padding: 13px 18px !important;
  font-size: 13.5px !important;
  border-left: 4px solid transparent !important;
  box-shadow: var(--tm-shadow-xs) !important;
}

.alert-success {
  background-color: #ecfdf5 !important;
  color: #064e3b !important;
  border-left-color: var(--tm-success) !important;
}
.alert-danger, .alert-error {
  background-color: #fff1f2 !important;
  color: #7f1d1d !important;
  border-left-color: var(--tm-danger) !important;
}
.alert-warning {
  background-color: #fffbeb !important;
  color: #78350f !important;
  border-left-color: var(--tm-warning) !important;
}
.alert-info {
  background-color: #eff6ff !important;
  color: #1e3a8a !important;
  border-left-color: var(--tm-info) !important;
}

/* ── 12. MODALS ────────────────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .2) !important;
  overflow: hidden !important;
}

.modal-header {
  background: linear-gradient(135deg, #132035 0%, #071224 100%) !important;
  color: #e8f0fe !important;
  border-bottom: none !important;
  padding: 16px 22px !important;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4 {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #e8f0fe !important;
  letter-spacing: -0.2px !important;
}

.modal-header .close {
  color: #8faac9 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: -2px 0 0 !important;
  transition: color .15s ease !important;
}
.modal-header .close:hover {
  color: #e8f0fe !important;
}

.modal-body {
  background-color: var(--tm-card-bg) !important;
  padding: 22px 24px !important;
  color: var(--tm-text-body) !important;
}

.modal-footer {
  background-color: #f7fafc !important;
  border-top: 1px solid var(--tm-card-border) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* ── 13. DROPDOWN MENUS ────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--tm-card-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--tm-shadow-lg) !important;
  padding: 6px !important;
  background-color: var(--tm-card-bg) !important;
  min-width: 180px !important;
  animation: tmDropIn .18s cubic-bezier(.4,0,.2,1) forwards !important;
}

@keyframes tmDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--tm-text-body) !important;
  font-weight: 500 !important;
  transition: background-color .12s ease, color .12s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover {
  background-color: var(--tm-brand-subtle) !important;
  color: var(--tm-brand) !important;
  text-decoration: none !important;
}

.dropdown-menu > li > a > i,
.dropdown-menu > li > a > svg {
  color: var(--tm-text-muted) !important;
  width: 16px !important;
  text-align: center !important;
}

.dropdown-menu > li > a:hover > i,
.dropdown-menu > li > a:hover > svg {
  color: var(--tm-brand) !important;
}

.dropdown-menu .divider {
  background-color: var(--tm-card-border) !important;
  margin: 4px 6px !important;
  height: 1px !important;
}

.dropdown-header {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--tm-text-muted) !important;
  padding: 8px 12px 4px !important;
}

/* User menu header */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  background: linear-gradient(135deg, #132035, #071224) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 18px 14px !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
  color: #c8d8ee !important;
  font-size: 14px !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
  background-color: #f7fafc !important;
  border-top: 1px solid var(--tm-card-border) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 10px 14px !important;
}

/* ── 14. TABS ──────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--tm-card-border) !important;
  gap: 3px !important;
}

.nav-tabs > li > a {
  border: none !important;
  border-radius: 7px 7px 0 0 !important;
  color: var(--tm-text-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  margin-bottom: -2px !important;
  transition: color .15s ease, background-color .15s ease !important;
}

.nav-tabs > li > a:hover {
  background-color: var(--tm-brand-subtle) !important;
  color: var(--tm-brand) !important;
  border-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none !important;
  border-bottom: 2px solid var(--tm-brand) !important;
  color: var(--tm-brand) !important;
  background-color: var(--tm-card-bg) !important;
  font-weight: 700 !important;
}

/* Tab content */
.tab-content {
  padding: 18px 0 0 !important;
}

/* ── 15. PAGINATION ────────────────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  border-radius: 6px !important;
  border: 1px solid var(--tm-card-border) !important;
  margin: 0 2px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: var(--tm-text-body) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.pagination > li > a:hover {
  background-color: var(--tm-brand-subtle) !important;
  border-color: rgba(0,64,193,.2) !important;
  color: var(--tm-brand) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background-color: var(--tm-brand) !important;
  border-color: var(--tm-brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--tm-brand-glow) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: #bdc7d3 !important;
  border-color: #e8edf2 !important;
  cursor: not-allowed !important;
}

/* ── 16. PROGRESS BARS ─────────────────────────────────────────────────────── */
.progress {
  background-color: #e9eef5 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  height: 8px !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: 20px !important;
  transition: width .6s ease !important;
}

.progress-bar-primary {
  background: linear-gradient(90deg, #0050e6, #0040c1) !important;
}

.progress-bar-success {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}

.progress-bar-warning {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

.progress-bar-danger {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

/* ── 17. NOTIFICATIONS MENU ────────────────────────────────────────────────── */
.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .messages-menu > .dropdown-menu {
  min-width: 280px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header {
  background: linear-gradient(135deg, #132035, #071224) !important;
  color: #c8d8ee !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--tm-text-body) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  border-radius: 0 !important;
  transition: background .12s ease !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover {
  background-color: var(--tm-brand-subtle) !important;
  color: var(--tm-brand) !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a {
  background-color: #f7fafc !important;
  color: var(--tm-brand) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-top: 1px solid var(--tm-card-border) !important;
  display: block !important;
}

/* ── 18. PRINT-FRIENDLY ────────────────────────────────────────────────────── */
@media print {
  .side-bar, .main-header, .no-print { display: none !important; }
  body, .content-wrapper { background: #fff !important; }
  .table > thead > tr > th, table.dataTable thead th {
    background: #1e293b !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── 19. DARK MODE ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --tm-body-bg:         #060f1e;
  --tm-card-bg:         #0d1829;
  --tm-card-border:     #1a2e4a;
  --tm-text-heading:    #e2eaf8;
  --tm-text-body:       #94a3b8;
  --tm-text-muted:      #4e6b8c;
  --tm-sb-bg:           #040c18;
  --tm-sb-surface:      #071224;
}

[data-theme="dark"] body,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content-wrapper {
  background-color: var(--tm-body-bg) !important;
  color: var(--tm-text-body) !important;
}

[data-theme="dark"] .box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--tm-card-bg) !important;
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .box-header,
[data-theme="dark"] .box-body,
[data-theme="dark"] .box-footer,
[data-theme="dark"] .modal-body {
  background-color: var(--tm-card-bg) !important;
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .box-header .box-title,
[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .content-header h1 {
  color: var(--tm-text-heading) !important;
}

[data-theme="dark"] .table > tbody > tr > td {
  color: var(--tm-text-body) !important;
  background-color: var(--tm-card-bg) !important;
  border-top-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .table > tbody > tr:nth-child(even) > td {
  background-color: #0f1e32 !important;
}

[data-theme="dark"] .table > tbody > tr:hover > td {
  background-color: rgba(255,255,255,.04) !important;
}

[data-theme="dark"] .form-control {
  background-color: #0d1829 !important;
  border-color: var(--tm-card-border) !important;
  color: var(--tm-text-heading) !important;
}

[data-theme="dark"] .btn-default {
  background: #0d1829 !important;
  border-color: var(--tm-card-border) !important;
  color: var(--tm-text-body) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--tm-text-body) !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: rgba(0,78,235,.18) !important;
  color: #7fb3ff !important;
}

[data-theme="dark"] .modal-footer,
[data-theme="dark"] .box-footer {
  background-color: #060f1e !important;
}

[data-theme="dark"] .nav-tabs {
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .nav-tabs > li > a {
  color: var(--tm-text-muted) !important;
}

[data-theme="dark"] .nav-tabs > li.active > a {
  background-color: var(--tm-card-bg) !important;
  color: #7fb3ff !important;
  border-bottom-color: #7fb3ff !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #0d1829 !important;
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tm-text-heading) !important;
}

[data-theme="dark"] .select2-dropdown {
  background-color: #0d1829 !important;
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--tm-text-body) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tm-brand) !important;
  color: #fff !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: #0d1829 !important;
  border-color: var(--tm-card-border) !important;
  color: var(--tm-text-heading) !important;
}

[data-theme="dark"] .table-responsive {
  border-color: var(--tm-card-border) !important;
}

[data-theme="dark"] .progress {
  background-color: #1a2e4a !important;
}

/* ── 20. RESPONSIVE ADJUSTMENTS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    font-size: 12.5px !important;
    padding: 6px 13px !important;
  }

  .box-header {
    padding: 12px 14px !important;
  }

  .box-body {
    padding: 14px !important;
  }

  .table > tbody > tr > td,
  .table tbody td {
    font-size: 12.5px !important;
    padding: 8px 10px !important;
  }

  .modal-body {
    padding: 16px !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
  }
}