/*
 * DOX SMS Gateway — Admin Panel
 * Complete dark theme for AdminLTE (skin-blue override)
 * Palette: Slate dark — single coherent system
 * ─────────────────────────────────────────────────────
 */

/* ── 0. FONT ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── 1. DESIGN TOKENS ────────────────────────────── */
:root {
  /* Backgrounds */
  --c-bg:        #0f172a;   /* page bg */
  --c-surface:   #1e293b;   /* sidebar, header, cards */
  --c-surface2:  #263548;   /* elevated / hover */
  --c-surface3:  #2d3f58;   /* active / selected */

  /* Borders */
  --c-border:    #2d3f58;
  --c-border2:   #3b5068;

  /* Text */
  --c-text:      #f1f5f9;   /* primary */
  --c-text2:     #94a3b8;   /* secondary */
  --c-text3:     #64748b;   /* muted */

  /* Accent — single primary */
  --c-blue:      #3b82f6;
  --c-blue-dk:   #2563eb;
  --c-blue-bg:   rgba(59,130,246,.12);

  /* Semantic */
  --c-green:     #22c55e;
  --c-green-bg:  rgba(34,197,94,.12);
  --c-yellow:    #f59e0b;
  --c-yellow-bg: rgba(245,158,11,.12);
  --c-red:       #ef4444;
  --c-red-bg:    rgba(239,68,68,.12);
  --c-cyan:      #06b6d4;
  --c-cyan-bg:   rgba(6,182,212,.12);

  /* Spacing / Shape */
  --r:     10px;
  --r-sm:  7px;
  --r-lg:  14px;
  --shadow: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65);
  --trans: .18s ease;
}

/* ── 2. GLOBAL RESET ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px !important; }

body,
.skin-blue body {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  background: var(--c-bg) !important;
  color: var(--c-text2) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  line-height: 1.3 !important;
}
h1 { font-size: 1.7rem !important; }
h2 { font-size: 1.45rem !important; }
h3 { font-size: 1.4rem !important; }
h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; }

p { color: var(--c-text2); font-size: .97rem; line-height: 1.65; }

a { color: var(--c-blue); transition: color var(--trans); }
a:hover { color: #93c5fd; text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-border2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text3); }

/* ── 3. TOP HEADER ───────────────────────────────── */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: 0 1px 0 var(--c-border), var(--shadow) !important;
}

/* Logo area */
.skin-blue .main-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
}
.skin-blue .main-header .logo:hover {
  background: var(--c-surface2) !important;
}
.skin-blue .main-header .logo .logo-lg {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.skin-blue .main-header .logo .logo-lg img,
.skin-blue .main-header .logo .logo-mini img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  flex-shrink: 0;
}
#application-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  white-space: nowrap;
}

/* Navbar icons / links */
.skin-blue .main-header .navbar .nav > li > a {
  color: var(--c-text3) !important;
  transition: background var(--trans), color var(--trans) !important;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: var(--c-text3) !important;
  border-right: 1px solid var(--c-border) !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}

/* User block in navbar */
.user-name,
.navbar-custom-menu .user-name {
  font-size: .97rem !important;
  font-weight: 600 !important;
  color: var(--c-text2) !important;
}
.main-header .user-image {
  border: 2px solid var(--c-border2) !important;
  border-radius: 50% !important;
}

/* ── 4. SIDEBAR ──────────────────────────────────── */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: var(--c-surface) !important;
  border-right: 1px solid var(--c-border) !important;
}

/* User panel */
.sidebar .user-panel {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: rgba(0,0,0,.15) !important;
}
.sidebar .user-panel .info p,
.sidebar .user-panel .info p.user-name {
  font-size: .96rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 0 2px !important;
}
.sidebar .user-panel .info a {
  font-size: .97rem !important;
  font-weight: 500 !important;
  color: var(--c-green) !important;
}
.user-panel > .image > img {
  border: 2px solid var(--c-border2) !important;
  border-radius: 50% !important;
}

/* Menu items */
.sidebar-menu > li {
  border-left: 3px solid transparent !important;
  transition: border-color var(--trans) !important;
}
.sidebar-menu > li > a {
  color: var(--c-text3) !important;
  font-size: .97rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  transition: background var(--trans), color var(--trans) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > i {
  width: 16px !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  color: var(--c-text3) !important;
  flex-shrink: 0 !important;
  transition: color var(--trans) !important;
}
.sidebar-menu > li > a:hover {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}
.sidebar-menu > li > a:hover > i,
.sidebar-menu > li > a:hover > .fa {
  color: var(--c-blue) !important;
}
.skin-blue .sidebar-menu > li.active,
.sidebar-menu > li.active {
  border-left-color: var(--c-blue) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
  background: var(--c-blue-bg) !important;
  color: var(--c-text) !important;
  font-weight: 600 !important;
}
.skin-blue .sidebar-menu > li.active > a > i,
.skin-blue .sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > i,
.sidebar-menu > li.active > a > .fa {
  color: var(--c-blue) !important;
}

/* Section headers */
.sidebar-menu li.header {
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--c-text3) !important;
  padding: 16px 16px 6px !important;
  background: transparent !important;
}

/* Treeview sub-menu */
.treeview-menu {
  background: rgba(0,0,0,.15) !important;
  padding: 4px 0 !important;
}
.treeview-menu > li > a {
  padding: 8px 16px 8px 42px !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--c-text3) !important;
  transition: color var(--trans), background var(--trans) !important;
}
.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
  background: transparent !important;
  color: var(--c-blue) !important;
}
.treeview-menu > li > a > i { color: var(--c-text3) !important; }

/* ── 5. CONTENT WRAPPER ──────────────────────────── */
.content-wrapper {
  background: var(--c-bg) !important;
  min-height: 100vh;
}
.content-header {
  padding: 18px 20px 10px !important;
  background: transparent !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.content-header h1 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -.3px !important;
  line-height: 1.2 !important;
}
.content-header h1 small {
  font-size: 1.1rem !important;
  color: var(--c-text3) !important;
  font-weight: 400 !important;
}
.content { padding: 0 20px 20px !important; }

/* Breadcrumb */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
}
.breadcrumb > li,
.breadcrumb > li > a { font-size: 1.1rem !important; color: var(--c-text3) !important; }
.breadcrumb > li.active { color: var(--c-text2) !important; }
.breadcrumb > li + li::before { color: var(--c-text3) !important; }

/* Footer */
.main-footer {
  background: var(--c-surface) !important;
  border-top: 1px solid var(--c-border) !important;
  color: var(--c-text3) !important;
  font-size: 1.1rem !important;
}

/* ── 6. BOXES / CARDS ────────────────────────────── */
.box {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 20px !important;
}
.box-header {
  padding: 14px 18px !important;
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-header.with-border { border-bottom: 1px solid var(--c-border) !important; }
.box-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  letter-spacing: -.1px !important;
}
.box-body { color: var(--c-text2) !important; }
.box-footer {
  background: rgba(0,0,0,.1) !important;
  border-top: 1px solid var(--c-border) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  padding: 10px 18px !important;
  color: var(--c-text3) !important;
}

/* Colored top borders */
.box.box-primary  { border-top: 2px solid var(--c-blue) !important; }
.box.box-success  { border-top: 2px solid var(--c-green) !important; }
.box.box-warning  { border-top: 2px solid var(--c-yellow) !important; }
.box.box-danger   { border-top: 2px solid var(--c-red) !important; }
.box.box-info     { border-top: 2px solid var(--c-cyan) !important; }

/* Box tools */
.box-tools .btn {
  background: transparent !important;
  border: 1px solid var(--c-border2) !important;
  color: var(--c-text3) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
  font-size: 1.1rem !important;
}
.box-tools .btn:hover {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}

/* ── 7. STAT CARDS (small-box) ───────────────────── */
.small-box {
  border-radius: var(--r) !important;
  border: none !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  transition: transform var(--trans), box-shadow var(--trans) !important;
}
.small-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.small-box > .inner { padding: 16px 18px 12px !important; }
.small-box > .inner h3 {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  color: #fff !important;
  margin: 0 0 3px !important;
  line-height: 1 !important;
}
.small-box > .inner p {
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: rgba(255,255,255,.75) !important;
  margin: 0 !important;
}
.small-box > .small-box-footer {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  background: rgba(0,0,0,.2) !important;
  color: rgba(255,255,255,.6) !important;
  transition: background var(--trans), color var(--trans) !important;
}
.small-box > .small-box-footer:hover {
  background: rgba(0,0,0,.35) !important;
  color: #fff !important;
}
.small-box .icon {
  opacity: .15 !important;
  transition: opacity var(--trans) !important;
}
.small-box:hover .icon { opacity: .25 !important; }
.small-box .icon > i { font-size: 72px !important; }

/* Card color themes */
.bg-aqua,  .small-box.bg-aqua  { background: #0e7490 !important; }
.bg-green, .small-box.bg-green { background: #15803d !important; }
.bg-yellow,.small-box.bg-yellow{ background: #b45309 !important; }
.bg-red,   .small-box.bg-red   { background: #b91c1c !important; }
.bg-blue,  .small-box.bg-blue  { background: #1d4ed8 !important; }
.bg-purple,.small-box.bg-purple{ background: #7e22ce !important; }
.bg-navy,  .small-box.bg-navy  { background: #1e3a8a !important; }

/* Info-boxes */
.info-box {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  min-height: 64px !important;
}
.info-box-icon {
  width: 58px !important;
  line-height: 58px !important;
  font-size: 1.75rem !important;
  border-radius: var(--r) 0 0 var(--r) !important;
}
.info-box-text {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--c-text3) !important;
}
.info-box-number {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -1px !important;
}

/* ── 8. BUTTONS ──────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  font-size: .96rem !important;
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans) !important;
  border: none !important;
  cursor: pointer;
}
.btn:active { transform: translateY(0) !important; }

.btn-primary {
  background: var(--c-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--c-blue-dk) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(59,130,246,.45) !important;
  transform: translateY(-1px) !important;
}

.btn-default {
  background: var(--c-surface2) !important;
  color: var(--c-text2) !important;
  border: 1px solid var(--c-border2) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--c-surface3) !important;
  color: var(--c-text) !important;
  border-color: var(--c-blue) !important;
}

.btn-success {
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(22,163,74,.3) !important;
}
.btn-success:hover {
  background: #15803d !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-danger {
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(220,38,38,.3) !important;
}
.btn-danger:hover {
  background: #b91c1c !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-warning {
  background: #d97706 !important;
  color: #fff !important;
}
.btn-warning:hover {
  background: #b45309 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-info {
  background: #0891b2 !important;
  color: #fff !important;
}
.btn-info:hover {
  background: #0e7490 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.btn-flat { border-radius: var(--r-sm) !important; }
.btn-xs { font-size: .96rem !important; padding: 3px 8px !important; }
.btn-sm { font-size: .92rem !important; padding: 5px 12px !important; }
.btn-lg { font-size: 1.1rem !important; padding: 10px 20px !important; }

/* ── 9. FORMS ────────────────────────────────────── */
.form-control {
  font-family: 'Inter', sans-serif !important;
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text) !important;
  font-size: 1rem !important;
  height: 38px !important;
  transition: border-color var(--trans), box-shadow var(--trans) !important;
  box-shadow: none !important;
}
.form-control:focus {
  background: var(--c-bg) !important;
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  color: var(--c-text) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--c-text3) !important; }
select.form-control option { background: var(--c-surface); color: var(--c-text2); }
textarea.form-control { height: auto !important; min-height: 90px; }

label {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--c-text2) !important;
  margin-bottom: 5px !important;
  display: block;
}
.form-group { margin-bottom: 16px !important; }

.input-group-addon {
  background: var(--c-surface2) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text3) !important;
  border-radius: var(--r-sm) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color var(--trans) !important;
}
.select2-container--default .select2-selection--single { height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--c-text) !important;
  line-height: 36px !important;
  font-size: 1rem !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  outline: none !important;
}
.select2-dropdown {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border2) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
}
.select2-container--default .select2-results__option {
  color: var(--c-text2) !important;
  font-size: .97rem !important;
  padding: 8px 12px !important;
  transition: background var(--trans) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--c-blue-bg) !important;
  color: var(--c-text) !important;
}
.select2-search--dropdown .select2-search__field {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text) !important;
  outline: none !important;
}

/* Date inputs */
input[type=date].form-control,
input[type=time].form-control,
input[type=datetime-local].form-control,
input[type=month].form-control {
  line-height: 19px;
  color-scheme: dark;
}

/* ── 10. TABLES ──────────────────────────────────── */
.table {
  color: var(--c-text2) !important;
  font-size: .97rem !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table > thead > tr > th {
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-top: none !important;
  color: var(--c-text3) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  padding: 11px 14px !important;
  white-space: nowrap;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--c-border) !important;
  padding: 11px 14px !important;
  color: var(--c-text2) !important;
  vertical-align: middle !important;
}
.table > tbody > tr:first-child > td { border-top-color: var(--c-border) !important; }
.table > tbody > tr:hover > td {
  background: var(--c-surface2) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255,255,255,.015) !important;
}
.table-striped > tbody > tr:nth-of-type(odd):hover > td {
  background: var(--c-surface2) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--c-border) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text3) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 2px !important;
  font-size: .93rem !important;
  padding: 4px 10px !important;
  transition: all var(--trans) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.4) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text) !important;
  padding: 4px 10px !important;
  font-size: .96rem !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  font-size: .93rem !important;
  color: var(--c-text3) !important;
  font-weight: 500 !important;
}

/* ── 11. ALERTS ──────────────────────────────────── */
.alert {
  border-radius: var(--r-sm) !important;
  border: none !important;
  border-left: 3px solid !important;
  font-size: .97rem !important;
  padding: 12px 16px !important;
}
.alert-success {
  background: var(--c-green-bg) !important;
  border-left-color: var(--c-green) !important;
  color: #86efac !important;
}
.alert-danger, .alert-error {
  background: var(--c-red-bg) !important;
  border-left-color: var(--c-red) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: var(--c-yellow-bg) !important;
  border-left-color: var(--c-yellow) !important;
  color: #fcd34d !important;
}
.alert-info {
  background: var(--c-cyan-bg) !important;
  border-left-color: var(--c-cyan) !important;
  color: #67e8f9 !important;
}
.alert .close { color: inherit !important; opacity: .5 !important; }

/* Callout */
.callout {
  background: var(--c-surface) !important;
  border-left: 4px solid var(--c-border2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text2) !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}
.callout h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
}
.callout-success { border-left-color: var(--c-green) !important; }
.callout-danger  { border-left-color: var(--c-red) !important; }
.callout-warning { border-left-color: var(--c-yellow) !important; }
.callout-info    { border-left-color: var(--c-blue) !important; }

/* ── 12. NAV TABS / PILLS ────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--c-border) !important;
}
.nav-tabs > li > a {
  color: var(--c-text3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: .96rem !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  margin-bottom: -1px !important;
  transition: color var(--trans), border-color var(--trans) !important;
  background: transparent !important;
}
.nav-tabs > li > a:hover {
  color: var(--c-text2) !important;
  background: transparent !important;
  border-color: transparent transparent var(--c-border2) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--c-blue) !important;
  background: transparent !important;
  border-color: transparent transparent var(--c-blue) !important;
  font-weight: 700 !important;
}
.tab-content {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
  padding: 18px !important;
  color: var(--c-text2) !important;
}

.nav-pills > li > a {
  color: var(--c-text3) !important;
  border-radius: var(--r-sm) !important;
  font-size: .96rem !important;
  font-weight: 600 !important;
  transition: background var(--trans), color var(--trans) !important;
}
.nav-pills > li > a:hover {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--c-blue) !important;
  color: #fff !important;
}

/* ── 13. BADGES / LABELS ─────────────────────────── */
.badge, .label {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: .2px !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}
.label-primary, .badge-primary { background: var(--c-blue) !important; color: #fff !important; }
.label-success, .badge-success { background: #166534 !important; color: #86efac !important; }
.label-danger,  .badge-danger  { background: #7f1d1d !important; color: #fca5a5 !important; }
.label-warning, .badge-warning { background: #78350f !important; color: #fcd34d !important; }
.label-info,    .badge-info    { background: #164e63 !important; color: #67e8f9 !important; }
.label-default, .badge-default { background: var(--c-surface2) !important; color: var(--c-text2) !important; }

/* ── 14. MODALS ──────────────────────────────────── */
.modal-content {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  padding: 15px 20px !important;
}
.modal-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
}
.modal-header .close { color: var(--c-text3) !important; opacity: 1 !important; text-shadow: none !important; font-size: 1.2rem !important; }
.modal-header .close:hover { color: var(--c-text) !important; }
.modal-body { color: var(--c-text2) !important; padding: 20px !important; }
.modal-footer {
  border-top: 1px solid var(--c-border) !important;
  background: rgba(0,0,0,.08) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  padding: 12px 20px !important;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-backdrop { background: rgba(0,0,0,.65) !important; }

/* ── 15. DROPDOWNS ───────────────────────────────── */
.dropdown-menu {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border2) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 5px !important;
  min-width: 160px;
}
.dropdown-menu > li > a {
  color: var(--c-text2) !important;
  font-size: .97rem !important;
  padding: 8px 12px !important;
  border-radius: 5px !important;
  transition: background var(--trans), color var(--trans) !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
}
.dropdown-menu .divider {
  background: var(--c-border) !important;
  margin: 4px !important;
}

/* ── 16. PANELS ──────────────────────────────────── */
.panel {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
}
.panel-heading {
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.panel-body { color: var(--c-text2) !important; }

/* ── 17. PROGRESS ────────────────────────────────── */
.progress {
  background: rgba(255,255,255,.06) !important;
  border-radius: 99px !important;
  height: 7px !important;
  box-shadow: none !important;
}
.progress-bar { border-radius: 99px !important; transition: width .4s ease !important; }
.progress-bar-primary { background: var(--c-blue) !important; }
.progress-bar-success { background: var(--c-green) !important; }
.progress-bar-warning { background: var(--c-yellow) !important; }
.progress-bar-danger  { background: var(--c-red) !important; }

/* ── 18. TIMELINE ────────────────────────────────── */
.timeline-body { word-wrap: break-word; }
.timeline-footer { display: flex; flex-flow: row wrap; }
.timeline-footer label { padding: .5rem .6rem; }
.timeline > li > .timeline-item {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text2) !important;
  box-shadow: var(--shadow) !important;
}
.timeline > li > .timeline-item > .timeline-header {
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}
.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
  box-shadow: 0 0 0 3px var(--c-bg) !important;
}

/* ── 19. MISC ────────────────────────────────────── */
.well {
  background: var(--c-surface2) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  color: var(--c-text2) !important;
}
pre, code {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: #67e8f9 !important;
  font-size: .93rem !important;
}
.tooltip-inner {
  background: var(--c-surface2) !important;
  color: var(--c-text) !important;
  font-size: 1.1rem !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--c-border2) !important;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--c-border2) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--c-border2) !important; }

.pagination > li > a,
.pagination > li > span {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text3) !important;
  font-size: 1.1rem !important;
  transition: all var(--trans) !important;
}
.pagination > li > a:hover {
  background: var(--c-surface2) !important;
  border-color: var(--c-border2) !important;
  color: var(--c-text) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover {
  background: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
}
.pagination > .disabled > a {
  background: transparent !important;
  color: var(--c-text3) !important;
  cursor: not-allowed;
}

/* Flatpickr */
.flatpickr-calendar {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border2) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
}
.flatpickr-day { color: var(--c-text2) !important; border-radius: 6px !important; }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover { background: var(--c-surface2) !important; border-color: transparent !important; }
.flatpickr-day.selected { background: var(--c-blue) !important; border-color: var(--c-blue) !important; color: #fff !important; }
.flatpickr-months .flatpickr-month { fill: var(--c-text2) !important; color: var(--c-text2) !important; }
.flatpickr-weekday { color: var(--c-text3) !important; background: transparent !important; }
.flatpickr-current-month input { color: var(--c-text) !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--c-text2) !important; }

/* Dropzone */
.dropzone {
  background: rgba(59,130,246,.04) !important;
  border: 2px dashed rgba(59,130,246,.3) !important;
  border-radius: var(--r) !important;
  color: var(--c-text3) !important;
  transition: border-color var(--trans), background var(--trans) !important;
}
.dropzone:hover {
  border-color: var(--c-blue) !important;
  background: var(--c-blue-bg) !important;
}

/* ── 20. LOGIN PAGE ──────────────────────────────── */
body.login-page {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(37,99,235,.4) 0%, transparent 65%),
    var(--c-bg) !important;
  overflow: hidden !important;
}
body.login-page::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, black, transparent 80%);
  pointer-events: none;
}
.login-box { background: transparent !important; position: relative; z-index: 1; }
.login-logo { margin-bottom: 16px !important; }
.login-logo a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
  letter-spacing: -.4px !important;
}
.login-logo a img {
  width: 68px !important; height: 68px !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px var(--c-border2), 0 16px 40px rgba(37,99,235,.35) !important;
}
.login-box-body {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 26px 26px 20px !important;
  backdrop-filter: blur(10px) !important;
}
.login-box-body p.login-box-msg {
  color: var(--c-text3) !important;
  font-size: .97rem !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}
.login-box-body .form-control {
  background: var(--c-bg) !important;
  border-color: var(--c-border) !important;
}
.login-box-body .form-control:focus { border-color: var(--c-blue) !important; }
.login-box-body .form-control-feedback { color: var(--c-text3) !important; line-height: 38px !important; }
.login-box-body a { color: var(--c-blue) !important; font-size: .9rem !important; }
.login-box-body a:hover { color: #93c5fd !important; }
.login-box-body .btn-primary {
  background: var(--c-blue) !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(59,130,246,.4) !important;
  height: 38px !important;
}
.login-box-body .btn-primary:hover { background: var(--c-blue-dk) !important; transform: translateY(-1px) !important; }
.login-box > .box-footer {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--c-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  text-align: center !important;
  padding: 12px !important;
}
.login-box > .box-footer a { color: var(--c-blue) !important; font-weight: 600 !important; }

/* Language select on auth pages */
.language-select-form select,
.lang-wrap select {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text2) !important;
  font-size: .93rem !important;
  padding: 5px 10px !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── 21. RESPONSIVE ──────────────────────────────── */
@media (max-width: 768px) {
  .select-user { width: 220px; }
  .select-contacts-list { width: 125px; }
  .content-header { padding: 14px 14px 8px !important; }
  .content { padding: 0 14px 14px !important; }
}