/* ==========================================================================
   Panel theme layer
   Colors come from --primary / --primary-hover (set in templates/css/custom_css.tpl
   from Settings > Website). Light/dark comes from html[data-theme].
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary-soft: color-mix(in srgb, var(--primary) 12%, #fff);
  --primary-softer: color-mix(in srgb, var(--primary) 6%, #fff);
  --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  --panel-bg: #f3f6f8;
  --panel-surface: #ffffff;
  --panel-surface-2: #f8fafb;
  --panel-border: #e7edf1;
  --panel-text: #34395e;
  --panel-muted: #8a94a6;
  --panel-heading: #2b3445;
  --panel-shadow: 0 2px 10px rgba(30, 50, 70, 0.06);
  --panel-radius: 14px;
  --panel-radius-sm: 9px;
}

html[data-theme="dark"] {
  --primary-soft: color-mix(in srgb, var(--primary) 22%, #1b2433);
  --primary-softer: color-mix(in srgb, var(--primary) 10%, #1b2433);
  --panel-bg: #0f1621;
  --panel-surface: #18212e;
  --panel-surface-2: #1f2a39;
  --panel-border: #2a3646;
  --panel-text: #d3dae4;
  --panel-muted: #8794a8;
  --panel-heading: #eef2f7;
  --panel-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
body {
  font-family: "Poppins", "Nunito", "Segoe UI", arial, sans-serif;
  background-color: var(--panel-bg);
  color: var(--panel-text);
}
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", "Nunito", sans-serif; color: var(--panel-heading); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary-gradient) !important; }
.text-muted, .text-small { color: var(--panel-muted) !important; }
hr { border-top-color: var(--panel-border); }

/* ---------- Top header bar ---------- */
.navbar-bg {
  height: 70px;
  background: var(--primary-gradient) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 30%, transparent);
}
.main-navbar { height: 70px; }
.main-navbar .nav-link,
.main-navbar .nav-link-user div { color: #fff !important; }
/* Navbar search: input + button read as one frosted pill; solid when focused */
.main-navbar .search-element { display: flex; align-items: center; }
.main-navbar .search-element .form-control {
  min-height: 40px; height: 40px; width: 260px; margin-right: 0; padding: 0 6px 0 18px;
  border-radius: 999px 0 0 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important; border-right: 0 !important;
  color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: none !important;
  transition: background-color .2s, width .25s, color .2s;
}
.main-navbar .search-element .form-control::placeholder { color: rgba(255, 255, 255, 0.78); }
.main-navbar .search-element .btn {
  height: 40px; padding: 0 16px 0 10px; box-shadow: none !important;
  border-radius: 0 999px 999px 0 !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important; border-left: 0 !important;
  color: #fff; transition: background-color .2s, color .2s;
}
.main-navbar .search-element .btn i { font-size: 14px; }
.main-navbar .search-element:hover .form-control,
.main-navbar .search-element:hover .btn { background: rgba(255, 255, 255, 0.24) !important; }
.main-navbar .search-element .form-control:focus { width: 320px; }
.main-navbar .search-element .form-control:focus,
.main-navbar .search-element .form-control:focus + .btn {
  background: var(--panel-surface) !important; border-color: var(--panel-surface) !important; color: var(--panel-text);
}
.main-navbar .search-element .form-control:focus::placeholder { color: var(--panel-muted); }
.main-navbar .search-element .form-control:focus + .btn { color: var(--primary); }

/* Search results dropdown */
.navbar .form-inline .search-result {
  top: 62px !important; width: 380px; border-radius: var(--panel-radius); overflow: hidden;
  background: var(--panel-surface); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 40px rgba(15, 30, 45, 0.18);
}
.navbar .form-inline .search-result:before { display: none; }
.navbar .form-inline .search-result .search-header {
  padding: 12px 16px 8px; font-size: 10.5px; color: var(--panel-muted);
  border-bottom: 1px solid var(--panel-border);
}
.navbar .form-inline .search-result .search-item a { color: var(--panel-text); padding: 10px 16px; font-weight: 500; }
.navbar .form-inline .search-result .search-item a:hover { background: var(--primary-softer); color: var(--primary); }
.navbar .form-inline .search-result .search-item .search-icon { background: var(--primary-soft) !important; color: var(--primary) !important; margin-right: 12px; }
@media (max-width: 575.98px) {
  .main-navbar .search-element .form-control,
  .main-navbar .search-element .form-control:focus { width: 100%; }
  .navbar .form-inline .search-result { width: 100%; }
}
.main-content { padding-top: 95px; }

/* ---------- Sidebar ---------- */
.main-sidebar, .main-sidebar .sidebar-brand { background-color: var(--panel-surface); }
.main-sidebar { box-shadow: 1px 0 0 var(--panel-border); }
.main-sidebar .sidebar-brand a { color: var(--panel-heading); }
.main-sidebar .sidebar-menu li.menu-header { color: var(--panel-muted); letter-spacing: 1.2px; }
.main-sidebar .sidebar-menu li a { color: var(--panel-text); border-radius: var(--panel-radius-sm); margin: 2px 12px; padding-left: 14px; }
.main-sidebar .sidebar-menu li a:hover { background-color: var(--primary-softer); color: var(--primary); }
.main-sidebar .sidebar-menu li.active > a {
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu { background-color: transparent; }
.main-sidebar .sidebar-menu li ul.dropdown-menu li a { color: var(--panel-muted); }
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a,
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover { color: var(--primary); background: transparent; }
.sidebar-mini .main-sidebar .sidebar-menu li a { margin: 2px 0; padding-left: 0; }

/* ---------- Page header (section-header) ---------- */
.section .section-header {
  background: var(--panel-surface);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
  padding: 18px 22px;
}
.section .section-header h1 { color: var(--panel-heading); font-weight: 500; font-size: 20px; }
.section .section-header .section-header-breadcrumb .breadcrumb-item,
.section .section-header .section-header-breadcrumb .breadcrumb-item a { color: var(--panel-muted); font-size: 12px; }
.section .section-header .section-header-breadcrumb .breadcrumb-item.active { color: var(--primary); }
.section .section-title { color: var(--panel-heading); }
.section .section-title:before { background-color: var(--primary); }

/* ---------- Cards ---------- */
.card {
  background-color: var(--panel-surface);
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}
.card.card-primary { border-top: 1px solid var(--panel-border); }
.card .card-header,
.card .card-footer { border-color: var(--panel-border); background-color: transparent; }
.card .card-header h4,
.card .card-header h2.section-title { color: var(--panel-heading); }

/* Gradient header for the primary cards (screenshot style) */
.card.card-primary > .card-header {
  background: var(--primary-gradient);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  border-bottom: 0;
  min-height: 56px;
  padding: 12px 20px;
  margin: -1px -1px 0;
}
.card.card-primary > .card-header h4,
.card.card-primary > .card-header h2.section-title,
.card.card-primary > .card-header .section-title,
.card.card-primary > .card-header a:not(.btn) { color: #fff !important; }
.card.card-primary > .card-header .section-title { margin: 0; font-size: 15px; font-weight: 600; }
.card.card-primary > .card-header .section-title:before { display: none; }
.card.card-primary > .card-header .btn { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; box-shadow: none; }
.card-header .card-header-sub { display: block; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--panel-muted); margin-top: 2px; }
.card.card-primary > .card-header .card-header-sub { color: rgba(255, 255, 255, 0.85) !important; }
.card.card-primary > .card-header h4 { line-height: 1.3; margin: 0; }
.card-header-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2); color: #fff; margin-right: 12px; flex: 0 0 auto;
}

/* Stat cards: white, accent left border, icon chip on the right */
.card.card-statistic-1,
.card.card-statistic-2 {
  border-left: 4px solid var(--primary);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 14px 16px;
  min-height: 92px;
}
.card.card-statistic-1 .card-icon {
  width: 42px; height: 42px; line-height: 42px;
  margin: 0; border-radius: 12px; float: none; flex: 0 0 auto;
  background: var(--primary-soft) !important; box-shadow: none !important;
}
.card.card-statistic-1 .card-icon i { color: var(--primary); font-size: 18px; line-height: 42px; }
.card.card-statistic-1 .card-wrap { flex: 1 1 auto; padding: 0; margin: 0; }
.card.card-statistic-1 .card-header { padding: 0; min-height: 0; border: 0; background: none; }
.card.card-statistic-1 .card-header h4 {
  color: var(--panel-muted) !important; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px; margin: 0;
}
.card.card-statistic-1 .card-body {
  padding: 2px 0 0; font-size: 24px; font-weight: 600; color: var(--panel-heading);
}
.card.card-statistic-1 .card-sub { font-size: 11px; color: var(--panel-muted); margin-top: 2px; }

/* ---------- Hero ---------- */
.hero.bg-primary { border-radius: var(--panel-radius); background: var(--primary-gradient) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--panel-radius-sm); font-weight: 500; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
  background: var(--primary-gradient) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: var(--panel-surface); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}

/* ---------- Badges ---------- */
.badge { border-radius: 999px; font-weight: 600; }
.badge.badge-primary { background: var(--primary-gradient); }

/* ---------- Forms ---------- */
.form-control,
.input-group-text,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--panel-radius-sm) !important;
  background-color: var(--panel-surface-2) !important;
  border-color: var(--panel-border) !important;
  color: var(--panel-text);
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  background-color: var(--panel-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--panel-text); }
.select2-dropdown { background-color: var(--panel-surface); border-color: var(--panel-border); border-radius: var(--panel-radius-sm); overflow: hidden; }
.form-group > label, label { color: var(--panel-heading); font-weight: 600; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }

/* ---------- Tables ---------- */
.table { color: var(--panel-text); }
.table:not(.table-sm):not(.table-md):not(.dataTable) th,
.table th, table.dataTable thead th {
  background-color: var(--panel-surface-2) !important;
  color: var(--panel-muted) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; font-weight: 600;
  border-color: var(--panel-border) !important;
}
.table td, .table th { border-color: var(--panel-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--panel-surface-2); }
.table-hover tbody tr:hover { background-color: var(--primary-softer); color: var(--panel-text); }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; }
.page-link { border-radius: 8px !important; margin: 0 2px; background-color: var(--panel-surface); border-color: var(--panel-border); color: var(--panel-text); }

/* ---------- Dropdowns / modals / alerts ---------- */
.dropdown-menu { background-color: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.dropdown-item, .dropdown-list .dropdown-item { color: var(--panel-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--primary-softer); color: var(--primary); }
.dropdown-list .dropdown-header { color: var(--panel-heading); }
.modal-content { background-color: var(--panel-surface); border-radius: var(--panel-radius); border: 1px solid var(--panel-border); overflow: hidden; }
.modal-header { background: var(--primary-gradient); border-bottom: 0; padding: 16px 22px !important; }
.modal-header .modal-title, .modal-header .close { color: #fff; text-shadow: none; opacity: 1; }
.list-unstyled-border li { border-color: var(--panel-border); }
.main-footer { border-top: 1px solid var(--panel-border); color: var(--panel-muted); }

/* ---------- Floating action buttons (language) ---------- */
.language-button, .faz { background: var(--primary-gradient) !important; }

/* ---------- Dashboard ---------- */
.dash-head { padding: 18px 22px; }
.dash-head .dash-title { display: flex; align-items: center; gap: 14px; }
.dash-head .dash-title-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.dash-head h1 { font-size: 20px; font-weight: 500; margin: 0; }
.dash-head p { margin: 2px 0 0; font-size: 12px; color: var(--panel-muted); }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dash-actions .btn { padding: 7px 16px; font-size: 12.5px; }
.dash-actions .btn i { margin-right: 6px; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--panel-border); min-width: 0; }
.dash-list .dash-list-label { flex: 0 0 auto; }
.dash-list .dash-pill { min-width: 0; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list .dash-list-label { display: flex; align-items: center; gap: 10px; color: var(--panel-muted); font-size: 12.5px; }
.dash-list .dash-list-label i { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.dash-list .dash-pill {
  background: var(--primary-gradient); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-list .dash-pill.dash-pill-soft { background: var(--primary-soft); color: var(--primary); }
.dash-list .imgz-container1 img, .dash-list .imgz-container1 figure { width: 30px !important; height: 30px !important; }

/* ---------- Theme settings (Settings > Website) ---------- */
.theme-studio {
  background: var(--panel-surface-2); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); padding: 18px; margin-bottom: 1rem;
}
.theme-studio h6 { font-weight: 600; margin-bottom: 14px; }
.theme-studio h6 i { color: var(--primary); margin-right: 6px; }
.theme-color-field { display: flex; align-items: center; gap: 10px; }
.theme-color-field input[type="color"] {
  width: 44px; height: 38px; padding: 3px; border-radius: var(--panel-radius-sm);
  border: 1px solid var(--panel-border); background: var(--panel-surface); cursor: pointer; flex: 0 0 auto;
}
.theme-preview { background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm); padding: 14px; }
.theme-preview-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--panel-heading); }
.theme-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 6px;
}
.theme-preview-bar .theme-preview-tag { background: rgba(255, 255, 255, 0.9); color: #2b3445; border-radius: 999px; padding: 3px 10px; font-size: 11px; }
.theme-preview-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--panel-muted); }
.theme-preview-row .btn-swatch { color: #fff; border-radius: 6px; padding: 5px 14px; font-weight: 600; font-size: 12px; margin-left: 6px; display: inline-block; }
.theme-count { white-space: nowrap; background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 10px; font-weight: 600; margin-left: 8px; }
.theme-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; }
.theme-mode-choice { display: flex; gap: 8px; }
.theme-mode-choice label {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; margin: 0; white-space: nowrap;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm);
  padding: 9px 8px; background: var(--panel-surface); font-weight: 500; font-size: 13px;
}
.theme-mode-choice input { margin: 0; }
.theme-mode-choice input { accent-color: var(--primary); }
.theme-mode-choice label:has(input:checked) { border-color: var(--primary); background: var(--primary-softer); color: var(--primary); }

/* ---------- Dark mode surfaces not covered by variables ---------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card .card-body,
html[data-theme="dark"] .list-group-item { background-color: transparent !important; color: var(--panel-text); }
html[data-theme="dark"] .list-group-item { border-color: var(--panel-border); }
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable tbody tr { background-color: transparent; color: var(--panel-text); }
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter { color: var(--panel-muted) !important; }
html[data-theme="dark"] .form-control::placeholder { color: var(--panel-muted); }
html[data-theme="dark"] .close { color: var(--panel-text); }
html[data-theme="dark"] .note-editor .note-toolbar,
html[data-theme="dark"] .note-editor .note-statusbar { background: var(--panel-surface-2); border-color: var(--panel-border); }
html[data-theme="dark"] .note-editor .note-editing-area .note-editable { background: var(--panel-surface); color: var(--panel-text); }
html[data-theme="dark"] .note-editor.note-frame { border-color: var(--panel-border); }
html[data-theme="dark"] .swal2-popup { background: var(--panel-surface); color: var(--panel-text); }
html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--panel-heading); }
html[data-theme="dark"] .alert-light { background: var(--panel-surface-2); color: var(--panel-text); }
html[data-theme="dark"] #loading { background: var(--panel-bg) !important; }
html[data-theme="dark"] .dropdown-container { background: var(--panel-surface); color: var(--panel-text); }
html[data-theme="dark"] code { background: var(--panel-surface-2); }
html[data-theme="dark"] .progress, html[data-theme="dark"] .progress2 { background-color: var(--panel-surface-2); }
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu,
html[data-theme="dark"] .main-sidebar .sidebar-menu li.active ul.dropdown-menu,
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a { background-color: transparent !important; }

/* ==========================================================================
   Accent family derived from the theme color (follows any preset / custom color)
   ========================================================================== */
:root { --accent-1: var(--primary); --accent-2: var(--primary); --accent-3: var(--primary); --accent-4: var(--primary-hover); }
@supports (color: hsl(from red h s l)) {
  :root {
    --accent-2: hsl(from var(--primary) calc(h + 38) s l);
    --accent-3: hsl(from var(--primary) calc(h - 38) s l);
    --accent-4: hsl(from var(--primary) calc(h + 75) s l);
  }
}
.stat-a1 { --stat-accent: var(--accent-1); }
.stat-a2 { --stat-accent: var(--accent-2); }
.stat-a3 { --stat-accent: var(--accent-3); }
.stat-a4 { --stat-accent: var(--accent-4); }
.stat-a-ok { --stat-accent: var(--t-green-fg); }
.stat-a-warn { --stat-accent: var(--t-amber-fg); }
.stat-a-trial { --stat-accent: var(--t-cyan-fg); }

/* Dashboard: Users overview card */
.user-overview .uo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.user-overview .uo-tile {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px;
  border-radius: var(--panel-radius-sm); border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--tone-bg) 35%, var(--panel-surface));
}
.user-overview .uo-body { min-width: 0; }
.user-overview .uo-label { font-size: 12.5px; color: var(--panel-muted); line-height: 1.3; }
.user-overview .uo-num { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--tone-fg); }
.user-overview .uo-sub { font-size: 11.5px; color: var(--panel-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-overview .uo-split {
  display: flex; height: 6px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: var(--panel-surface-2);
}
.user-overview .uo-split span { height: 100%; width: 0; transition: width .6s ease; }
.user-overview .uo-split-active { background: var(--t-green-fg); }
.user-overview .uo-split-inactive { background: var(--t-amber-fg); }
.user-overview .uo-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--panel-muted); }
.user-overview .uo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--tone-fg); }
@media (max-width: 991.98px) {
  .user-overview .uo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-overview .uo-sub { white-space: normal; }
}
@media (max-width: 575.98px) {
  .user-overview .uo-grid { gap: 10px; }
  .user-overview .uo-tile { padding: 11px 12px; }
  .user-overview .uo-tile .soft-tile { display: none; }
  .user-overview .uo-num { font-size: 20px; }
  .user-overview .uo-sub { font-size: 11px; line-height: 1.35; }
  .user-overview .soft-head { gap: 12px; }
  .user-overview .soft-head .btn { padding: 3px 9px; font-size: 11.5px; }
}

/* Dashboard: Top Resellers card (admin) */
.top-resellers .tr-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--panel-border); min-width: 0; }
.top-resellers .tr-row:first-child { border-top: 0; padding-top: 2px; }
.top-resellers .tr-rank {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: var(--panel-surface-2); color: var(--panel-muted); border: 1px solid var(--panel-border);
}
.top-resellers .tr-rank-1 { background: var(--t-gold-bg); color: var(--t-gold-fg); border-color: transparent; }
.top-resellers .tr-rank-2 { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.top-resellers .tr-rank-3 { background: var(--t-amber-bg); color: var(--t-amber-fg); border-color: transparent; }
.top-resellers .tr-main { flex: 1 1 auto; min-width: 0; }
.top-resellers .tr-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.top-resellers .tr-name { flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--panel-heading); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-resellers .tr-meta { display: flex; flex-wrap: nowrap; gap: 10px; font-size: 11.5px; color: var(--panel-muted); white-space: nowrap; overflow: hidden; }
.top-resellers .tr-meta i { font-size: 10.5px; margin-right: 3px; opacity: .8; }
.top-resellers .tr-credit { color: var(--primary-hover); font-weight: 500; }
.top-resellers .tr-bar { height: 4px; margin-top: 9px; border-radius: 999px; overflow: hidden; background: var(--primary-soft); }
.top-resellers .tr-bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.top-resellers .tr-count { flex: 0 0 auto; text-align: right; line-height: 1.2; white-space: nowrap; }
.top-resellers .tr-count b { font-size: 18px; font-weight: 600; color: var(--primary); }
.top-resellers .tr-count span { font-size: 11px; color: var(--panel-muted); }
.top-resellers .tr-empty { text-align: center; padding: 18px 10px 10px; font-size: 13px; color: var(--panel-muted); }
.top-resellers .tr-empty i { font-size: 22px; margin-bottom: 8px; color: var(--primary); opacity: .6; }
@media (max-width: 575.98px) {
  .top-resellers .soft-head .btn { padding: 3px 9px; font-size: 11.5px; }
  .top-resellers .tr-row { gap: 11px; }
}

/* Stat card rows: cards in a row share one height */
.stat-row > [class*="col-"] { display: flex; }
.stat-row .card.card-statistic-1 { flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) {
  .stat-row { margin-left: -6px; margin-right: -6px; }
  .stat-row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  .stat-row .card.card-statistic-1 { padding: 9px 10px 9px 11px; margin-bottom: 12px; border-left-width: 3px; }
  .stat-row .card.card-statistic-1 .card-icon { display: none; }
  .stat-row .card.card-statistic-1 .card-header h4 { font-size: 10px; letter-spacing: .4px; }
  .stat-row .card.card-statistic-1 .card-body { font-size: 18px; }
  .stat-row .card.card-statistic-1 .card-sub { font-size: 10.5px; line-height: 1.35; }
}
.card.card-statistic-1[class*="stat-a"] { border-left-color: var(--stat-accent); }
.card.card-statistic-1[class*="stat-a"] .card-icon { background: color-mix(in srgb, var(--stat-accent) 14%, var(--panel-surface)) !important; }
.card.card-statistic-1[class*="stat-a"] .card-icon i { color: var(--stat-accent); }
.card.card-statistic-1 .card-body { font-size: 22px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.card-statistic-1 .card-wrap { min-width: 0; }

/* Status tones (fixed meaning: green ok, amber attention, red problem) */
.tone-primary { --tone-fg: var(--primary); --tone-bg: var(--primary-soft); }
.tone-green   { --tone-fg: #1e7a3c; --tone-bg: #dcf3e2; }
.tone-amber   { --tone-fg: #a35a06; --tone-bg: #fcebc9; }
.tone-red     { --tone-fg: #b42323; --tone-bg: #fbe1e1; }
.tone-gold    { --tone-fg: #8a6400; --tone-bg: #f8efc9; }
.tone-violet  { --tone-fg: #6230c9; --tone-bg: #ebe3fd; }
.tone-cyan    { --tone-fg: #0b6b85; --tone-bg: #d4f1f7; }
.tone-cloudflare { --tone-fg: #f38020; --tone-bg: #fde8d3; }
.tone-slate   { --tone-fg: #4a5668; --tone-bg: #e7ecf1; }
html[data-theme="dark"] .tone-green  { --tone-fg: #6fd894; --tone-bg: #183626; }
html[data-theme="dark"] .tone-amber  { --tone-fg: #f3b65c; --tone-bg: #3a2a12; }
html[data-theme="dark"] .tone-red    { --tone-fg: #f28b8b; --tone-bg: #3d1b1e; }
html[data-theme="dark"] .tone-gold   { --tone-fg: #e8c55a; --tone-bg: #352d12; }
html[data-theme="dark"] .tone-violet { --tone-fg: #b79cf7; --tone-bg: #2a2045; }
html[data-theme="dark"] .tone-cyan   { --tone-fg: #6fd3ea; --tone-bg: #12313a; }
html[data-theme="dark"] .tone-cloudflare { --tone-fg: #f6a05a; --tone-bg: #3d2512; }
html[data-theme="dark"] .tone-slate  { --tone-fg: #a9b4c4; --tone-bg: #263140; }

/* ==========================================================================
   Soft cards (Account / Panel / Activity): icon tile header, row list
   ========================================================================== */
.card.card-soft { padding: 20px 20px 16px; border-radius: 18px; }
.soft-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.soft-head h4 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--panel-heading); }
.soft-head p { margin: 1px 0 0; font-size: 13px; line-height: 1.4; color: var(--panel-muted); }
.soft-icon, .soft-tile {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--tone-bg, var(--primary-soft)); color: var(--tone-fg, var(--primary));
}
.soft-icon { width: 46px; height: 46px; font-size: 19px; }
.soft-tile { width: 42px; height: 42px; font-size: 16px; }
.soft-rows { display: flex; flex-direction: column; }
.soft-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--panel-border); min-width: 0; }
.soft-row:first-child { border-top: 0; padding-top: 4px; }
.soft-body { flex: 1 1 auto; min-width: 0; }
.soft-label { font-size: 12.5px; color: var(--panel-muted); line-height: 1.4; margin-bottom: 3px; }
.soft-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; line-height: 1.4; color: var(--panel-text); min-width: 0; }
.soft-value b { color: var(--panel-heading); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.soft-sub { font-size: 12px; color: var(--panel-muted); margin-top: 3px; }
.soft-pill {
  display: inline-flex; align-items: center; border-radius: 8px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--tone-bg, var(--primary-soft)); color: var(--tone-fg, var(--primary));
}
.ps-meta:not(:empty)::before, .soft-pill + .ps-meta:not(:empty)::before { content: "•"; margin-right: 8px; color: var(--panel-muted); }
.soft-value b + .soft-pill::before { content: none; }
.ps-meta { font-size: 13px; color: var(--panel-muted); }

/* ==========================================================================
   Activity timeline
   ========================================================================== */
.act-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.act-count {
  border: 1px solid var(--panel-border); border-radius: 9px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 500; color: var(--panel-text); background: var(--panel-surface);
}
.act-day { font-size: 11.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--panel-muted); margin: 15px 0 10px; }
.act-item { position: relative; display: flex; gap: 14px; padding-bottom: 19px; }
.act-item:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: 5px; width: 2px;
  background: var(--panel-border); border-radius: 2px;
}
.act-item:has(+ .act-day)::before { display: none; }
.act-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px;
  background: var(--tone-bg); color: var(--tone-fg);
}
.act-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.act-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.act-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--panel-heading); min-width: 0; overflow-wrap: anywhere; }
.act-title code { font-size: 12px; padding: 1px 5px; border-radius: 5px; }
.act-time { flex: 0 0 auto; font-size: 12px; color: var(--panel-muted); white-space: nowrap; padding-top: 1px; }
.act-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.act-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--panel-surface-2); border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 3px 9px; font-size: 12px; color: var(--panel-text); line-height: 1.4;
}
.act-chip i { color: var(--panel-muted); font-size: 11px; }
.act-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Language picker in Settings */
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.lang-native { color: var(--panel-muted); }

/* ==========================================================================
   Readability pass: sizes and overflow
   ========================================================================== */
.card .card-body { overflow-wrap: anywhere; }
.card.card-primary > .card-header h4 { font-size: 15px; }
.table td { font-size: 13px; }
.badge { font-size: 11.5px; padding: 0.35em 0.75em; }
.section .section-header h1 { font-size: 19px; }
.form-group > label, label { font-size: 13px; }
.form-control { font-size: 14px; }
.dataTables_wrapper .table-responsive, .table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  .card.card-soft { padding: 16px 14px 12px; }
  .act-top { flex-direction: column; gap: 2px; }
  .act-time { padding-top: 0; }
  .soft-icon { width: 40px; height: 40px; font-size: 17px; }
  .dash-head h1 { font-size: 18px; }
}
html[data-theme="dark"] .card.card-statistic-1[class*="stat-a"] .card-icon i { color: color-mix(in srgb, var(--stat-accent) 65%, #fff); }
html[data-theme="dark"] .card.card-statistic-1[class*="stat-a"] .card-icon { background: color-mix(in srgb, var(--stat-accent) 24%, var(--panel-surface)) !important; }
.navbar .form-inline .search-result .search-item .dropdown-item-desc { line-height: 1.3; }
.navbar .form-inline .search-result .search-item .dropdown-item-desc b { color: var(--panel-heading); font-weight: 600; font-size: 13.5px; }
.navbar .form-inline .search-result .search-item .dropdown-item-desc .time { color: var(--panel-muted); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.navbar .form-inline .search-result .search-item + .search-item a { border-top: 1px solid var(--panel-border); }
.navbar .form-inline .search-result .search-item figure.avatar { border: 2px solid var(--primary-soft) !important; }

/* ==========================================================================
   Text color & size harmony: neutrals carry a hint of the theme color
   ========================================================================== */
:root {
  --panel-text: color-mix(in srgb, var(--primary) 8%, #3a4250);
  --panel-heading: color-mix(in srgb, var(--primary) 14%, #1d2533);
  --panel-muted: color-mix(in srgb, var(--primary) 14%, #7d8794);
}
html[data-theme="dark"] {
  --panel-text: color-mix(in srgb, var(--primary) 8%, #d3dae4);
  --panel-heading: color-mix(in srgb, var(--primary) 6%, #f1f4f8);
  --panel-muted: color-mix(in srgb, var(--primary) 14%, #8794a8);
}
body { font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
p, li, td { color: var(--panel-text); }
small, .small { font-size: 12.5px; }
.text-muted, .text-small, .form-text, .help-block { color: var(--panel-muted) !important; }
.form-text { font-size: 12px; }
b, strong { font-weight: 600; }

/* Brand name: theme gradient instead of the fixed purple/pink */
.animate-charcter {
  background-image: linear-gradient(-225deg, var(--primary) 0%, var(--accent-2) 50%, var(--primary-hover) 100%) !important;
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; font-weight: 700; letter-spacing: 1.5px;
}

/* Inline code (usernames in logs etc.) */
code {
  color: var(--primary); background: var(--primary-softer);
  border-radius: 5px; padding: 1px 6px; font-size: 87%; font-weight: 500;
}

/* Sidebar: calmer sizes, submenu without boxes */
.main-sidebar .sidebar-menu li a { font-size: 14px; font-weight: 500; }
.main-sidebar .sidebar-menu li.active > a { font-weight: 600; }
.main-sidebar .sidebar-menu li.menu-header { font-size: 10.5px; font-weight: 600; }
.main-sidebar .sidebar-menu li ul.dropdown-menu { box-shadow: none !important; border: 0 !important; margin-left: 30px; border-left: 2px solid var(--panel-border) !important; padding: 2px 0; }
.main-sidebar .sidebar-menu li ul.dropdown-menu li,
.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li a { font-size: 13px; padding-left: 16px !important; margin: 1px 8px 1px 0; height: 34px; line-height: 34px; }
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a { color: var(--primary) !important; font-weight: 600; }
.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu { margin-left: 0; border-left: 0 !important; }

/* Badges: soft tinted pills that follow the theme */
.badge { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; padding: 0.38em 0.8em; }
.badge.badge-primary   { background: var(--primary-soft); color: var(--primary); }
.badge.badge-info      { background: color-mix(in srgb, var(--accent-2) 16%, var(--panel-surface)); color: color-mix(in srgb, var(--accent-2) 85%, #000); }
.badge.badge-success   { background: #dcf3e2; color: #1e7a3c; }
.badge.badge-danger    { background: #fbe1e1; color: #b42323; }
.badge.badge-warning   { background: #fcebc9; color: #a35a06; }
.badge.badge-secondary, .badge.badge-light, .badge.badge-dark { background: var(--panel-surface-2); color: var(--panel-text); border: 1px solid var(--panel-border); }
html[data-theme="dark"] .badge.badge-info    { color: color-mix(in srgb, var(--accent-2) 60%, #fff); }
html[data-theme="dark"] .badge.badge-success { background: #183626; color: #6fd894; }
html[data-theme="dark"] .badge.badge-danger  { background: #3d1b1e; color: #f28b8b; }
html[data-theme="dark"] .badge.badge-warning { background: #3a2a12; color: #f3b65c; }

/* Secondary buttons use the theme's accent instead of fixed light blue */
.btn-info, .btn-info.disabled, .btn-info:disabled {
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 80%, #000)) !important;
  border-color: var(--accent-2) !important; color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-2) 28%, transparent) !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active { background: color-mix(in srgb, var(--accent-2) 85%, #000) !important; }
.btn { font-size: 13px; }
.btn-lg { font-size: 14.5px; }

/* DataTables controls */
.dataTables_filter input, .dataTables_length select {
  border-radius: var(--panel-radius-sm) !important; border: 1px solid var(--panel-border) !important;
  background: var(--panel-surface-2) !important; color: var(--panel-text); height: 38px; padding: 0 12px;
}
.dataTables_filter input:focus { border-color: var(--primary) !important; outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.dataTables_info { font-size: 12.5px; color: var(--panel-muted) !important; }
.page-item.disabled .page-link { color: var(--panel-muted); opacity: 0.6; }
.table td { color: var(--panel-text); }

/* Card headers without the gradient (e.g. Edit Profile) */
.card:not(.card-primary) > .card-header h4 { font-size: 15px; font-weight: 600; color: var(--panel-heading); }
.section-lead { color: var(--panel-muted); font-size: 13.5px; }
.animate-charcter { background-image: linear-gradient(-225deg, var(--primary) 0%, var(--primary-hover) 45%, var(--accent-2) 100%) !important; }
.btn-info, .btn-info.disabled, .btn-info:disabled {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 75%, var(--primary)), var(--accent-2)) !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active { background: var(--accent-2) !important; filter: brightness(0.95); }
.main-sidebar .sidebar-menu li ul.dropdown-menu,
.main-sidebar .sidebar-menu li.active ul.dropdown-menu { background-color: transparent !important; }

/* ==========================================================================
   Dropdowns: soft tinted states instead of solid fills
   ========================================================================== */
/* Select2 option list */
.select2-dropdown { box-shadow: 0 12px 30px rgba(15, 30, 45, 0.14); padding: 6px; }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-container--default .select2-results__option {
  padding: 9px 12px; border-radius: 8px; margin: 1px 0; font-size: 13.5px; color: var(--panel-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-softer) !important; color: var(--primary) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--primary-soft) !important; color: var(--primary) !important; font-weight: 600; position: relative; padding-right: 32px;
}
.select2-container--default .select2-results__option[aria-selected="true"]::after {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--panel-muted); }
.select2-search--dropdown .select2-search__field {
  border-radius: 8px; border: 1px solid var(--panel-border) !important; background: var(--panel-surface-2); color: var(--panel-text);
}
/* Select2 multi-select tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-soft) !important; color: var(--primary) !important;
  border: 0 !important; border-radius: 999px; box-shadow: none; font-weight: 600; font-size: 12.5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--primary) !important; opacity: 0.7; }

/* Bootstrap dropdown menus (user menu, Filter, notifications, ...) */
.dropdown-menu { padding: 6px; }
.dropdown-menu .dropdown-title { font-size: 10.5px; letter-spacing: 0.8px; color: var(--panel-muted); padding: 8px 12px 6px; }
.dropdown-menu .dropdown-item, a.dropdown-item { border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--panel-text); }
.dropdown-menu .dropdown-item i { color: var(--panel-muted); }
a.dropdown-item:hover, .dropdown-menu .dropdown-item:hover { background-color: var(--primary-softer) !important; color: var(--primary) !important; }
a.dropdown-item:focus, a.dropdown-item:active, a.dropdown-item.active,
.dropdown-menu .dropdown-item.active, .dropdown-flag .dropdown-item.active {
  background-color: var(--primary-soft) !important; color: var(--primary) !important; font-weight: 600;
}
.dropdown-menu .dropdown-item:hover i, .dropdown-menu .dropdown-item.active i { color: var(--primary); }
.dropdown-menu .dropdown-item.active .bullet:after, .dropdown-menu .dropdown-item:hover .bullet:after { background: var(--primary); }
.dropdown-menu .dropdown-item.text-danger:hover { background-color: #fbe1e1 !important; color: #b42323 !important; }
.dropdown-menu .dropdown-item.text-danger i { color: inherit; }
html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover { background-color: #3d1b1e !important; color: #f28b8b !important; }
.dropdown-divider { border-top-color: var(--panel-border); margin: 4px 0; }
.dropdown-list .dropdown-item { border-radius: 10px; }
.dropdown-list .dropdown-item:active .dropdown-item-desc,
.dropdown-list .dropdown-item:active .dropdown-item-desc b { color: inherit !important; }
.dropdown-list .dropdown-item.dropdown-item-unread:active { background-color: var(--primary-soft) !important; }
/* Menus opened from inside gradient card headers keep normal menu colors */
.card.card-primary > .card-header .dropdown-menu a.dropdown-item { color: var(--panel-text) !important; }
.card.card-primary > .card-header .dropdown-menu a.dropdown-item:hover { color: var(--primary) !important; }
.card.card-primary > .card-header .dropdown-menu a.dropdown-item.active { color: var(--primary) !important; }
.dropdown-menu .dropdown-item .bullet { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-border); margin-right: 8px; vertical-align: 1px; }
.dropdown-menu .dropdown-item .bullet:after { display: none; }
.dropdown-menu .dropdown-item.active .bullet, .dropdown-menu .dropdown-item:hover .bullet { background: var(--primary); }
.main-navbar .nav-link:focus, .main-navbar .nav-link:active { outline: none; box-shadow: none; }
.main-navbar .nav-link-user:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; border-radius: 999px; }

/* ==========================================================================
   Alerts & status text: soft tinted panels, color = meaning
   primary/info = note (theme), success = done, warning = caution, danger = destructive
   ========================================================================== */
.alert {
  --al-fg: var(--primary); --al-bg: var(--primary-softer); --al-border: color-mix(in srgb, var(--primary) 25%, transparent);
  background: var(--al-bg) !important; color: var(--panel-text) !important;
  border: 1px solid var(--al-border) !important; border-left: 4px solid var(--al-fg) !important;
  border-radius: var(--panel-radius-sm); padding: 14px 18px; font-size: 13.5px; line-height: 1.55;
}
.alert.alert-info    { --al-fg: color-mix(in srgb, var(--accent-2) 85%, #000); --al-bg: color-mix(in srgb, var(--accent-2) 9%, var(--panel-surface)); --al-border: color-mix(in srgb, var(--accent-2) 25%, transparent); }
.alert.alert-success { --al-fg: #1e7a3c; --al-bg: #eef9f1; --al-border: #c9ebd3; }
.alert.alert-warning { --al-fg: #a35a06; --al-bg: #fff6e6; --al-border: #f6dcae; }
.alert.alert-danger  { --al-fg: #b42323; --al-bg: #fdf0f0; --al-border: #f4cccc; }
.alert.alert-secondary, .alert.alert-light, .alert.alert-dark { --al-fg: var(--panel-muted); --al-bg: var(--panel-surface-2); --al-border: var(--panel-border); }
html[data-theme="dark"] .alert { --al-bg: color-mix(in srgb, var(--primary) 10%, var(--panel-surface)); }
html[data-theme="dark"] .alert.alert-info    { --al-fg: color-mix(in srgb, var(--accent-2) 60%, #fff); --al-bg: color-mix(in srgb, var(--accent-2) 10%, var(--panel-surface)); }
html[data-theme="dark"] .alert.alert-success { --al-fg: #6fd894; --al-bg: #152a20; --al-border: #22462f; }
html[data-theme="dark"] .alert.alert-warning { --al-fg: #f3b65c; --al-bg: #2c2214; --al-border: #4d3a1a; }
html[data-theme="dark"] .alert.alert-danger  { --al-fg: #f28b8b; --al-bg: #2e1719; --al-border: #4f2427; }

.alert .alert-heading, .alert .alert-title, .alert h4, .alert h5, .alert h6, .alert strong, .alert b {
  color: var(--al-fg) !important;
}
.alert .alert-heading, .alert .alert-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.alert i, .alert .alert-icon { color: var(--al-fg) !important; }
.alert.alert-has-icon .alert-icon { width: 28px; margin-top: 1px; }
.alert.alert-has-icon .alert-icon i { font-size: 17px !important; }
.alert p { color: var(--panel-text); margin-bottom: 0; }
.alert:not(.alert-light) a { color: var(--al-fg) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert code {
  color: var(--al-fg) !important; font-weight: 700;
  background: color-mix(in srgb, var(--al-fg) 13%, transparent) !important;
  border-radius: 5px; padding: 1px 6px;
}
.alert .close { color: var(--al-fg); opacity: 0.6; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* Status text helpers in the same palette */
.text-success, .text-success-all * { color: #1e7a3c !important; }
.text-warning, .text-warning-all * { color: #b26500 !important; }
.text-danger, .text-danger-all *   { color: #c62828 !important; }
.text-info, .text-info-all *       { color: color-mix(in srgb, var(--accent-2) 85%, #000) !important; }
html[data-theme="dark"] .text-success { color: #6fd894 !important; }
html[data-theme="dark"] .text-warning { color: #f3b65c !important; }
html[data-theme="dark"] .text-danger  { color: #f28b8b !important; }
html[data-theme="dark"] .text-info    { color: color-mix(in srgb, var(--accent-2) 60%, #fff) !important; }
.invalid-feedback, .form-text.text-danger { color: #c62828 !important; font-size: 12px; }

/* Danger buttons: same red family, soft shadow */
.btn-danger { background: #d93a3a !important; border-color: #d93a3a !important; box-shadow: 0 2px 8px rgba(217, 58, 58, 0.25) !important; }
.btn-danger:hover, .btn-danger:focus { background: #c22f2f !important; border-color: #c22f2f !important; }
.btn-warning { background: #e8930c !important; border-color: #e8930c !important; color: #fff !important; box-shadow: 0 2px 8px rgba(232, 147, 12, 0.25) !important; }
.btn-success { background: #1f9d55 !important; border-color: #1f9d55 !important; box-shadow: 0 2px 8px rgba(31, 157, 85, 0.25) !important; }

/* ==========================================================================
   Details / options popups (user, reseller, search)
   Fields: soft boxes with a small label. Action buttons: color = what they do
   ========================================================================== */
:root {
  --t-red-fg: #c62828;    --t-red-bg: #fbe4e4;
  --t-amber-fg: #b26500;  --t-amber-bg: #fcefd6;
  --t-green-fg: #1e7a3c;  --t-green-bg: #dff3e5;
  --t-cyan-fg: #0b6b85;   --t-cyan-bg: #d9f1f6;
  --t-violet-fg: #6230c9; --t-violet-bg: #ece5fd;
  --t-gold-fg: #8a6400;   --t-gold-bg: #f7eecb;
}
html[data-theme="dark"] {
  --t-red-fg: #f28b8b;    --t-red-bg: #3d1b1e;
  --t-amber-fg: #f3b65c;  --t-amber-bg: #3a2a12;
  --t-green-fg: #6fd894;  --t-green-bg: #183626;
  --t-cyan-fg: #6fd3ea;   --t-cyan-bg: #12313a;
  --t-violet-fg: #b79cf7; --t-violet-bg: #2a2045;
  --t-gold-fg: #e8c55a;   --t-gold-bg: #352d12;
}

.normal-modal-body, .search-modal-body { padding: 18px 22px 22px !important; }
.normal-modal-body hr, .search-modal-body hr { margin: 14px 0; border-top: 1px dashed var(--panel-border); }

/* Field rows */
.modal .input-group-wrapper { max-width: none; margin: 0 0 10px; gap: 10px; align-items: stretch; }
.modal .input-group-wrapper .input-group { min-width: 0; }
.modal .input-group-wrapper .input-group input {
  height: 54px; padding: 20px 14px 6px; border: 1px solid var(--panel-border); border-radius: 12px;
  background: var(--panel-surface-2); color: var(--panel-heading); font-size: 14.5px; font-weight: 600;
  text-overflow: ellipsis; transition: border-color .15s, background-color .15s;
}
.modal .input-group-wrapper:hover .input-group input { border-color: color-mix(in srgb, var(--primary) 35%, var(--panel-border)); }
.modal .input-group-wrapper .input-group label,
.modal .input-group-wrapper .input-group input:focus + label,
.modal .input-group-wrapper .input-group input:not(:placeholder-shown) + label {
  top: 8px; left: 14px; transform: none; padding: 0; background: transparent;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--panel-muted);
}

/* Action buttons (base = theme color, soft) */
.modal .input-group-wrapper .action-btn {
  flex: 0 0 auto; width: 58px; height: 54px; border-radius: 12px; border: 0 !important;
  background: var(--act-bg, var(--primary-soft)) !important; color: var(--act-fg, var(--primary)) !important; box-shadow: none !important;
  transition: background-color .15s, color .15s, transform .1s;
}
.modal .input-group-wrapper .action-btn i { font-size: 15px; margin-bottom: 4px; color: inherit !important; }
.modal .input-group-wrapper .action-btn span { font-size: 8.5px; font-weight: 700; letter-spacing: 0.6px; }
.modal .input-group-wrapper .action-btn:hover,
.modal .input-group-wrapper .action-btn:focus { background: var(--act-fg, var(--primary)) !important; color: #fff !important; }
html[data-theme="dark"] .modal .input-group-wrapper .action-btn:hover { color: var(--panel-bg) !important; }
.modal .input-group-wrapper .action-btn:active { transform: scale(0.96); }

/* Meaning per action (also used by the big option buttons below) */
.btn-modal-deleteuser, .btn-modal-deletereseller,
.btn-modal-search-deleteuser, .btn-modal-research-deletereseller { --act-fg: var(--t-red-fg); --act-bg: var(--t-red-bg); }
.btn-modal-changepassword, .btn-modal-search-changepassword,
.btn-modal-research-changepassword { --act-fg: var(--primary); --act-bg: var(--primary-soft); }
/* block toggle: server sends btn-primary for "Block", btn-danger for "Unblock" */
.btn-modal-blockuser.btn-primary, .btn-modal-blockreseller.btn-primary,
.btn-modal-search-blockuser.btn-primary, .btn-modal-research-blockreseller.btn-primary { --act-fg: var(--t-amber-fg); --act-bg: var(--t-amber-bg); }
.btn-modal-blockuser.btn-danger, .btn-modal-blockreseller.btn-danger,
.btn-modal-search-blockuser.btn-danger, .btn-modal-research-blockreseller.btn-danger { --act-fg: var(--t-green-fg); --act-bg: var(--t-green-bg); }
/* socksip toggle: btn-primary = "Enable", btn-danger = "Disable" */
.btn-modal-socksip.btn-primary, .btn-modal-search-socksip.btn-primary { --act-fg: var(--t-green-fg); --act-bg: var(--t-green-bg); }
.btn-modal-socksip.btn-danger, .btn-modal-search-socksip.btn-danger { --act-fg: var(--t-amber-fg); --act-bg: var(--t-amber-bg); }
.btn-modal-extendduration, .btn-modal-search-extendduration { --act-fg: var(--t-green-fg); --act-bg: var(--t-green-bg); }
.btn-modal-devicereset, .btn-modal-search-devicereset, .btn-modal-search-sessionreset,
.btn-modal-ovpnreset, .btn-modal-xrayreset { --act-fg: var(--t-cyan-fg); --act-bg: var(--t-cyan-bg); }
.btn-modal-editupline { --act-fg: var(--t-violet-fg); --act-bg: var(--t-violet-bg); }
.btn-modal-editcredit { --act-fg: var(--t-green-fg); --act-bg: var(--t-green-bg); }
.btn-modal-research-editcredit { --act-fg: var(--t-gold-fg); --act-bg: var(--t-gold-bg); }

/* Big option buttons in the search / options popups */
.modal .btn-block[class*="btn-modal-"] {
  background: var(--act-bg, var(--primary-soft)) !important; color: var(--act-fg, var(--primary)) !important; border: 0 !important;
  box-shadow: none !important; border-radius: 12px; font-size: 14px; font-weight: 600; padding: 12px 16px;
}
.modal .btn-block[class*="btn-modal-"]:hover { background: var(--act-fg, var(--primary)) !important; color: #fff !important; }
.modal .btn-block[class*="btn-modal-"] + .btn-block { margin-top: 8px; }

/* Modal frame */
.modal-content { box-shadow: 0 24px 60px rgba(10, 25, 40, 0.25); }
.modal-header .modal-title { font-size: 17px; font-weight: 600; }
.modal-header .close { font-size: 22px; opacity: 0.85; }
.modal-header .close:hover { opacity: 1; }

/* ---------- Popup detail fields: theme-tinted ---------- */
.modal .input-group-wrapper .input-group input {
  height: 56px; padding: 22px 14px 6px;
  background: color-mix(in srgb, var(--primary) 4%, var(--panel-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--panel-border)) !important;
  color: var(--panel-heading) !important; font-size: 15px; font-weight: 600; letter-spacing: 0.1px;
}
.modal .input-group-wrapper:hover .input-group input { border-color: color-mix(in srgb, var(--primary) 40%, var(--panel-border)) !important; }
.modal .input-group-wrapper .input-group label,
.modal .input-group-wrapper .input-group input:focus + label,
.modal .input-group-wrapper .input-group input:not(:placeholder-shown) + label {
  top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px; color: var(--primary) !important;
}
.modal .input-group-wrapper .action-btn { height: 56px; }

/* Reseller popup / profile widget: stats row + bio */
.profile-widget { border: 1px solid var(--panel-border); box-shadow: none; margin-top: 46px; }
.modal .profile-widget { margin-bottom: 0; }
.profile-widget .profile-widget-picture { box-shadow: 0 0 0 4px var(--panel-surface), 0 6px 16px rgba(0, 0, 0, 0.12); }
.profile-widget .profile-widget-items:after { display: none; }
.profile-widget .profile-widget-items .profile-widget-item { border-right: 1px solid var(--panel-border); padding: 12px 6px; }
.profile-widget .profile-widget-items .profile-widget-item:last-child { border-right: 0; }
.profile-widget .profile-widget-item-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--panel-muted) !important;
}
.profile-widget .profile-widget-item-value { font-size: 19px; font-weight: 700; color: var(--primary) !important; margin-top: 2px; }
.profile-widget .profile-widget-description { padding: 16px 20px 18px; }
.profile-widget .profile-bio, .profile-widget .profile-widget-description > p {
  display: block; font-size: 13.5px; line-height: 1.6; color: var(--panel-muted);
  background: var(--primary-softer); border-radius: 10px; padding: 10px 14px;
}
.profile-widget .profile-widget-description hr { border-top: 1px dashed var(--panel-border); margin: 14px 0; }

/* ---------- Table row actions: Details / Copy as soft pills ---------- */
table .btn-group .action-btn,
.dataTables_wrapper .btn-group .action-btn {
  flex-direction: row; gap: 6px; width: auto; height: 32px; padding: 0 12px;
  border-radius: 9px !important; border: 1px solid transparent !important; box-shadow: none !important;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; line-height: 1;
  background: var(--primary-soft) !important; color: var(--primary) !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
table .btn-group .action-btn i { font-size: 12px; margin: 0; color: inherit !important; }
table .btn-group .action-btn span { font-size: 11.5px; display: inline-block; text-transform: lowercase; }
table .btn-group .action-btn span::first-letter { text-transform: uppercase; }
table .btn-group .action-btn:hover, table .btn-group .action-btn:focus {
  background: var(--primary) !important; color: #fff !important;
}
/* Copy: neutral outline, turns theme-colored on hover */
table .btn-group .action-btn.btn-copy {
  background: var(--panel-surface) !important; color: var(--panel-text) !important;
  border-color: var(--panel-border) !important; margin-left: 6px;
}
table .btn-group .action-btn.btn-copy:hover, table .btn-group .action-btn.btn-copy:focus {
  background: var(--primary-softer) !important; color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--panel-border)) !important;
}
table .btn-group .action-btn.mr-1 { margin-right: 0 !important; }
html[data-theme="dark"] table .btn-group .action-btn:hover { color: var(--panel-bg) !important; }

/* Upline column in the user list: plain theme-colored text */
.upline-text { color: var(--primary); font-weight: 500; font-size: 13px; white-space: nowrap; }
/* Reseller list upline: theme's companion accent so it reads apart from the theme-colored badges */
.upline-text.upline-accent { color: color-mix(in srgb, var(--accent-2) 85%, #000); }
html[data-theme="dark"] .upline-text.upline-accent { color: color-mix(in srgb, var(--accent-2) 65%, #fff); }
/* Reseller list credits: plain text in the theme's own (darker) color, no background */
.credit-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1;
  padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--t-gold-fg); background: var(--t-gold-bg);
}
.credit-chip i { font-size: 11.5px; }
/* Low-credit warning (credit_chip in includes/functions.php): outlined orange under RESELLER_LOW_CREDIT, red at 0.
   The outline keeps "low" apart from the plain gold chip, which is close in hue */
.credit-chip.is-low {
  color: var(--t-amber-fg); background: color-mix(in srgb, var(--t-amber-fg) 13%, var(--panel-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber-fg) 45%, transparent);
}
.credit-chip.is-empty {
  color: var(--t-red-fg); background: var(--t-red-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-red-fg) 35%, transparent);
}

/* Details popups: hierarchy by size, light weights */
.modal-header .modal-title { font-weight: 500; font-size: 17px; }
.modal .input-group-wrapper .input-group input { font-size: 16px; font-weight: 400; letter-spacing: 0; }
.modal .input-group-wrapper .input-group label,
.modal .input-group-wrapper .input-group input:focus + label,
.modal .input-group-wrapper .input-group input:not(:placeholder-shown) + label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.6px; }
.modal .input-group-wrapper .action-btn span { font-size: 8.5px; font-weight: 500; }
.profile-widget .profile-widget-item-label { font-size: 10.5px; font-weight: 500; }
.profile-widget .profile-widget-item-value { font-size: 20px; font-weight: 500; }
/* Popup type scale: title > values > labels */
.modal-header .modal-title { font-size: 21px; font-weight: 500; letter-spacing: 0.1px; }
.modal .input-group-wrapper .input-group input { font-size: 14px; }
.modal .input-group-wrapper .input-group label,
.modal .input-group-wrapper .input-group input:focus + label,
.modal .input-group-wrapper .input-group input:not(:placeholder-shown) + label { font-size: 10px; }
.modal-header { padding: 18px 22px !important; }

/* Popup fields: label sits on the box's top border line (outlined style) */
.modal .input-group-wrapper { margin: 0 0 18px; padding-top: 2px; align-items: center; }
.modal .input-group-wrapper .input-group input {
  height: 52px; padding: 0 16px; font-size: 14px; font-weight: 400;
  background: color-mix(in srgb, var(--primary) 3%, var(--panel-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--panel-border)) !important;
}
.modal .input-group-wrapper .input-group label,
.modal .input-group-wrapper .input-group input:focus + label,
.modal .input-group-wrapper .input-group input:not(:placeholder-shown) + label {
  top: 0; left: 12px; transform: translateY(-50%);
  padding: 0 6px; background: var(--panel-surface); line-height: 1.2;
  font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: none; color: var(--primary) !important;
}
.modal .input-group-wrapper .action-btn { height: 52px; }

/* ==========================================================================
   Details popup v2 (.dt): profile header, grouped rows, labeled actions, danger zone
   ========================================================================== */
.normal-modal-dialog:has(.dt) { max-width: 560px; }
.normal-modal-body:has(.dt) { padding: 0 !important; }
.dt { font-size: 14px; }

/* Header */
.dt-hero {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: linear-gradient(180deg, var(--primary-softer), transparent);
  border-bottom: 1px solid var(--panel-border);
}
.dt-avatar {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--primary-soft); color: var(--primary); font-size: 24px;
  box-shadow: 0 0 0 3px var(--panel-surface), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dt-avatar-img img, .dt-avatar-img figure { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; border: 0 !important; box-shadow: none !important; }
.dt-hero-main { min-width: 0; flex: 1 1 auto; }
.dt-name { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 500; color: var(--panel-heading); line-height: 1.3; }
.dt-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dt-chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 500; text-transform: capitalize;
  background: var(--tone-bg, var(--primary-soft)); color: var(--tone-fg, var(--primary));
}
.dt-chip .fa-circle { font-size: 6px; }

/* Copy buttons */
.dt-copy {
  border: 0; background: transparent; color: var(--panel-muted); border-radius: 7px;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: background-color .15s, color .15s; flex: 0 0 auto;
}
.dt-copy:hover { background: var(--primary-softer); color: var(--primary); }
.dt-copy.copied { color: var(--t-green-fg); background: var(--t-green-bg); }

/* Reseller stats + bio */
.dt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 22px 0; }
.dt-stat {
  text-align: center; border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 4px;
  font-size: 11px; color: var(--panel-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.dt-stat span { display: block; font-size: 20px; color: var(--primary); text-transform: none; letter-spacing: 0; line-height: 1.3; }
.dt-bio { margin: 12px 22px 0; padding: 10px 14px; border-radius: 10px; background: var(--panel-surface-2); color: var(--panel-muted); font-size: 13px; line-height: 1.55; }

/* Sections and rows */
.dt-section { padding: 14px 22px 4px; }
.dt-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--panel-muted); margin-bottom: 4px; }
.dt-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--panel-border); }
.dt-section .dt-row:last-child { border-bottom: 0; }
.dt-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-softer); color: var(--primary); font-size: 14px;
}
.dt-body { flex: 1 1 auto; min-width: 0; }
.dt-label { font-size: 11.5px; color: var(--panel-muted); line-height: 1.3; }
.dt-value { display: flex; align-items: center; gap: 4px; font-size: 14.5px; color: var(--panel-heading); line-height: 1.35; overflow-wrap: anywhere; }

/* Labeled action buttons, colored by meaning (uses --act-* from .btn-modal-* rules) */
.dt .dt-action {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 9px; border: 0 !important; box-shadow: none !important;
  font-size: 12.5px; font-weight: 500;
  background: var(--act-bg, var(--primary-soft)) !important; color: var(--act-fg, var(--primary)) !important;
  transition: background-color .15s, color .15s, transform .1s;
}
.dt .dt-action i { font-size: 12px; color: inherit !important; }
.dt .dt-action:hover, .dt .dt-action:focus { background: var(--act-fg, var(--primary)) !important; color: #fff !important; }
html[data-theme="dark"] .dt .dt-action:hover { color: var(--panel-bg) !important; }
.dt .dt-action:active { transform: scale(0.97); }
.dt-cap { display: inline-block; text-transform: lowercase; }
.dt-cap::first-letter { text-transform: uppercase; }

/* Danger zone */
.dt-danger {
  display: flex; align-items: center; gap: 12px; margin: 12px 22px 22px; padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--t-red-fg) 45%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--t-red-bg) 45%, transparent);
}
.dt-danger-title { font-size: 13.5px; font-weight: 500; color: var(--t-red-fg); }

@media (max-width: 575.98px) {
  .dt-hero { padding: 16px; }
  .dt-section { padding: 12px 16px 2px; }
  .dt-stats { padding: 14px 16px 0; grid-template-columns: repeat(2, 1fr); }
  .dt-bio { margin: 12px 16px 0; }
  .dt-danger { margin: 12px 16px 16px; }
  .dt .dt-action { padding: 0 10px; }
}

/* Confirm dialogs: Cancel is neutral, destructive confirms are red */
.modal .btn-cancel {
  background: var(--panel-surface) !important; color: var(--panel-text) !important;
  border: 1px solid var(--panel-border) !important; box-shadow: none !important;
}
.modal .btn-cancel:hover { background: var(--panel-surface-2) !important; color: var(--panel-heading) !important; }
.modal .btn-deleteuser, .modal .btn-deletereseller {
  background: #d93a3a !important; border-color: #d93a3a !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(217, 58, 58, 0.25) !important;
}
.modal .btn-deleteuser:hover, .modal .btn-deletereseller:hover { background: #c22f2f !important; }

/* Reseller welcome strip (dashboard) */
.welcome-strip {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  background: linear-gradient(100deg, var(--primary-soft) 0%, var(--panel-surface) 70%);
  border-left: 4px solid var(--primary);
}
.welcome-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-gradient); color: #fff; font-size: 20px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.welcome-text { flex: 1 1 auto; min-width: 0; }
.welcome-text h2 { font-size: 18px; font-weight: 500; margin: 0 0 2px; color: var(--panel-heading); }
.welcome-text p { font-size: 13px; margin: 0; color: var(--panel-muted); line-height: 1.5; }
.welcome-side {
  flex: 0 0 auto; text-align: right; padding-left: 18px; border-left: 1px solid var(--panel-border);
}
.welcome-side-label { display: block; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--panel-muted); }
.welcome-side-value { display: block; font-size: 22px; font-weight: 500; color: var(--primary); line-height: 1.3; }
@media (max-width: 575.98px) {
  .welcome-strip { flex-wrap: wrap; padding: 16px; }
  .welcome-side { text-align: left; padding-left: 0; border-left: 0; width: 100%; padding-top: 10px; border-top: 1px solid var(--panel-border); }
}
.card.welcome-strip { flex-direction: row; text-align: left; }
@media (max-width: 575.98px) { .card.welcome-strip { flex-wrap: nowrap; align-items: flex-start; } .welcome-icon { width: 42px; height: 42px; font-size: 17px; } }

/* ==========================================================================
   "User created" success popup (Create User [Single])
   ========================================================================== */
.swal2-popup.su-popup { width: 440px; max-width: calc(100vw - 32px); padding: 26px 22px 18px; border-radius: 18px; }
.swal2-popup.su-popup .swal2-html-container { margin: 0; text-align: left; overflow: visible; }
.su-check {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-gradient); color: #fff; font-size: 24px;
  box-shadow: 0 0 0 8px var(--primary-softer), 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}
.su-title { text-align: center; font-size: 19px; font-weight: 500; color: var(--panel-heading); }
.su-sub { text-align: center; font-size: 13px; color: var(--panel-muted); margin: 2px 0 16px; }
.su-sub b { color: var(--primary); font-weight: 500; }
.su-card { border: 1px solid var(--panel-border); border-radius: 14px; padding: 4px 14px; background: var(--panel-surface-2); }
.su-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--panel-border); min-height: 46px; }
.su-row:last-child { border-bottom: 0; }
.su-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-size: 12px;
}
.su-label { flex: 0 0 auto; font-size: 12.5px; color: var(--panel-muted); }
.su-value { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--panel-heading); text-align: right; overflow-wrap: anywhere; }
.su-chip { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 500; background: var(--tone-bg); color: var(--tone-fg); }
.su-mini-copy {
  border: 0; background: transparent; color: var(--panel-muted); width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
}
.su-mini-copy:hover { background: var(--primary-softer); color: var(--primary); }
.su-actions { display: flex; gap: 10px; margin-top: 16px; }
.su-btn { flex: 1 1 0; height: 42px; border-radius: 11px; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background-color .15s, color .15s; }
.su-btn-primary { background: var(--primary-gradient) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.su-btn-primary.copied { background: #1f9d55 !important; box-shadow: 0 4px 12px rgba(31, 157, 85, 0.3) !important; }
.su-btn-ghost { background: var(--panel-surface) !important; color: var(--panel-text) !important; border: 1px solid var(--panel-border) !important; box-shadow: none !important; }
.su-btn-ghost:hover { background: var(--primary-softer) !important; color: var(--primary) !important; }
.su-site { text-align: center; margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--panel-muted); }
.su-site b { color: var(--primary); font-weight: 500; }

/* ==========================================================================
   User List / Reseller List: header tabs, table toolbar, cells, phone layout
   ========================================================================== */
.card.card-primary > .card-header.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.card.card-primary > .card-header .list-head-btn { font-weight: 500; padding: 5px 12px; }
.card.card-primary > .card-header .list-head-btn:hover { background: #fff; color: var(--primary); }

/* User type dropdown in the list header: the button shows the selected type, the menu lists all four */
.card.card-primary > .card-header.list-head { flex-wrap: nowrap; }
.list-head .section-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-drop { flex: 0 0 auto; }
.type-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1; transition: background .15s;
}
.type-toggle:hover, .type-drop.show .type-toggle { background: rgba(255, 255, 255, 0.26); }
.type-toggle:focus { outline: 0; }
.type-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.type-toggle .tt-icon {
  width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tone-fg); font-size: 11.5px;
}
.type-toggle .tt-count { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.type-toggle .tt-count:empty { display: none; }
.type-toggle .tt-caret { font-size: 10px; opacity: .85; transition: transform .15s; }
.type-drop.show .type-toggle .tt-caret { transform: rotate(180deg); }

.type-menu { min-width: 220px; padding: 6px !important; margin-top: 8px !important; }
.type-menu .type-menu-title { padding: 4px 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--panel-muted); }
.type-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--panel-text); font-size: 13px; text-align: left; cursor: pointer;
}
.type-item .tt-icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-bg); color: var(--tone-fg); font-size: 12px;
}
.type-item .tt-label { flex: 1 1 auto; font-weight: 500; }
.type-item .lt-count { font-style: normal; font-size: 12px; font-weight: 600; color: var(--panel-muted); }
.type-item:hover { background: var(--panel-surface-2); }
.type-item:focus { outline: 0; }
.type-item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone-fg) 40%, transparent); }
.type-item.active { background: color-mix(in srgb, var(--tone-bg) 60%, var(--panel-surface)); }
.type-item.active .tt-label, .type-item.active .lt-count { color: var(--tone-fg); }

/* Toolbar: page size + search on one row */
.dataTables_wrapper > .row:first-child { align-items: center; margin-bottom: 6px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { margin: 0; font-size: 12.5px; color: var(--panel-muted); }
.dataTables_wrapper .dataTables_length .select2-container { width: 84px !important; }
.dataTables_wrapper .dataTables_length .select2-container .select2-selection--single {
  height: 38px !important; min-height: 38px; border-radius: var(--panel-radius-sm) !important;
  border: 1px solid var(--panel-border) !important; background: var(--panel-surface-2) !important;
}
.dataTables_wrapper .dataTables_length .select2-selection__rendered { line-height: 36px !important; padding-left: 12px !important; font-size: 13px; color: var(--panel-text) !important; }
.dataTables_wrapper .dataTables_length .select2-selection__arrow { height: 36px !important; }
.dataTables_wrapper .dataTables_filter label { position: relative; }
.dataTables_wrapper .dataTables_filter label::before {
  content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px;
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--panel-muted); pointer-events: none;
}
.dataTables_wrapper .dataTables_filter input { width: 260px !important; max-width: 100%; padding-left: 34px !important; margin-left: 0 !important; font-size: 13px; }

/* Header cells never break mid-word */
.dataTables_wrapper table.dataTable thead th { white-space: nowrap; }

/* Usage: one combined total (OVPN + XRAY) */
.usage-total {
  display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1;
  padding: 5px 9px; border-radius: 7px; color: var(--primary); background: var(--primary-softer); border: 1px solid var(--primary-soft);
}
.usage-total.is-zero { color: var(--panel-muted); background: var(--panel-surface-2); border-color: var(--panel-border); }

/* Reseller clients */
.muted-note { font-size: 12.5px; color: var(--panel-muted); }
.client-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--primary); }
.client-count i { font-size: 11px; opacity: .75; }

/* Responsive "+" expand control and the expanded details */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child { padding-left: 38px !important; }
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
  top: 50% !important; left: 8px !important; margin-top: -11px; width: 22px !important; height: 22px !important; line-height: 22px !important;
  border: 0 !important; border-radius: 7px !important; box-shadow: none !important; box-sizing: border-box !important;
  background: var(--primary-soft) !important; color: var(--primary) !important;
  font-family: inherit !important; font-size: 15px; font-weight: 600;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { content: '\2212' !important; background: var(--primary) !important; color: #fff !important; }
table.dataTable > tbody > tr.child { background: var(--primary-softer) !important; }
table.dataTable > tbody > tr.child > td.child { padding: 6px 14px 10px !important; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--panel-border);
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 0; flex: 0 0 auto; font-weight: 600; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--panel-muted);
}
table.dataTable > tbody > tr.child span.dtr-data { text-align: right; min-width: 0; }

@media (max-width: 767.98px) {
  .card.card-primary > .card-header.list-head { padding: 12px 14px; }
  .dataTables_wrapper > .row:first-child { flex-wrap: nowrap; }
  .dataTables_wrapper > .row:first-child > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; }
  .dataTables_wrapper > .row:first-child > [class*="col-"]:last-child { flex: 1 1 auto; min-width: 0; padding-left: 0; }
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { text-align: left; margin: 0; }
  .dataTables_wrapper .dataTables_filter label { display: block; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
  .dataTables_wrapper .dataTables_length .select2-container { width: 72px !important; }
}
@media (max-width: 575.98px) {
  .table-listuser figure.avatar, .table-listreseller figure.avatar { display: none; }
  /* Username, Status and Usage always stay visible (Responsive class "all"): compact cells, no avatar (Status shows online), smaller ring */
  .table-listuser th, .table-listuser td { padding-left: 6px !important; padding-right: 6px !important; }
  .table-listuser td:first-child { padding-left: 34px !important; }
  .table-listuser .uav { display: none; }
  .table-listuser td .badge { padding: 4px 7px; font-size: 11.5px; }
  .table-listuser .username-class { font-size: 13px; }
  .table-listuser .usage-ring { width: 40px; height: 40px; }
  .table-listuser .usage-ring .ur-val { font-size: 10.5px; }
  .card.card-primary > .list-head + .card-body:has(table) { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 359.98px) {
  /* smallest phones: tighter still so the three columns never overflow the card */
  .card.card-primary > .list-head + .card-body:has(table) { padding-left: 8px; padding-right: 8px; }
  .table-listuser th { font-size: 10px; letter-spacing: .3px; }
  .table-listuser td:first-child { padding-left: 30px !important; }
  .table-listuser td .badge { padding: 3px 6px; font-size: 11px; }
  .table-listuser .usage-ring { width: 36px; height: 36px; }
  .table-listuser .usage-ring .ur-val { font-size: 10px; }
}
.dataTables_wrapper .dataTables_length .select2-container .select2-selection--single { display: flex !important; align-items: center; }
.dataTables_wrapper .dataTables_length .select2-selection__rendered { line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.dataTables_wrapper .dataTables_length .select2-selection__arrow { top: 50% !important; right: 6px !important; transform: translateY(-50%); }
.muted-note { white-space: nowrap; }
.dataTables_wrapper .dataTables_length .select2-selection__rendered { min-height: 0 !important; height: auto !important; }

/* Rows: center every cell (the base theme forces baseline !important) and keep usage on one line
   so DataTables moves the column into the expand details instead of growing the row */
.table-listuser > tbody > tr > td, .table-listreseller > tbody > tr > td { vertical-align: middle !important; }

/* Reseller List: expand control in the second accent so it reads differently from the User List */
.table-listreseller { --dtr-fg: var(--accent-2); }
table.dataTable.table-listreseller.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
  background: color-mix(in srgb, var(--dtr-fg) 14%, var(--panel-surface)) !important; color: var(--dtr-fg) !important;
}
table.dataTable.table-listreseller.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before { background: var(--dtr-fg) !important; color: #fff !important; }
table.dataTable.table-listreseller > tbody > tr.child { background: color-mix(in srgb, var(--dtr-fg) 6%, var(--panel-surface)) !important; }
@media (max-width: 575.98px) {
  .card.card-primary > .card-header.list-head { gap: 8px; }
  .card.card-primary > .card-header.list-head .section-title { font-size: 14px; }
  .type-toggle { gap: 6px; padding: 3px 8px 3px 3px; font-size: 12.5px; }
  .type-toggle .tt-icon { width: 24px; height: 24px; }
}

/* User List: expand control in the same soft accent as the Reseller List */
.table-listuser { --dtr-fg: var(--accent-2); }
table.dataTable.table-listuser.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
  background: color-mix(in srgb, var(--dtr-fg) 14%, var(--panel-surface)) !important; color: var(--dtr-fg) !important;
}
table.dataTable.table-listuser.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before { background: var(--dtr-fg) !important; color: #fff !important; }
table.dataTable.table-listuser > tbody > tr.child { background: color-mix(in srgb, var(--dtr-fg) 6%, var(--panel-surface)) !important; }

/* Expanded row details: plain; left edge lines up with the "+" button, equal spacing on every line */
table.dataTable.table-listuser > tbody > tr.child,
table.dataTable.table-listreseller > tbody > tr.child { background: var(--panel-surface) !important; }
table.dataTable.table-listuser > tbody > tr.child > td.child,
table.dataTable.table-listreseller > tbody > tr.child > td.child { padding: 0 12px 10px 8px !important; }
table.dataTable.table-listuser > tbody > tr.child ul.dtr-details,
table.dataTable.table-listreseller > tbody > tr.child ul.dtr-details { margin: 0; padding: 0; border: 0; background: transparent; }
table.dataTable.table-listuser > tbody > tr.child ul.dtr-details > li,
table.dataTable.table-listreseller > tbody > tr.child ul.dtr-details > li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  min-height: 46px; padding: 8px 0 !important; border-bottom: 1px solid var(--panel-border);
}
table.dataTable.table-listuser > tbody > tr.child ul.dtr-details > li:first-child,
table.dataTable.table-listreseller > tbody > tr.child ul.dtr-details > li:first-child { padding-top: 8px !important; border-top: 1px solid var(--panel-border); }
table.dataTable.table-listuser > tbody > tr.child ul.dtr-details > li:last-child,
table.dataTable.table-listreseller > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
table.dataTable.table-listuser > tbody > tr.child span.dtr-title,
table.dataTable.table-listreseller > tbody > tr.child span.dtr-title { line-height: 1.2; padding: 0; }
table.dataTable.table-listuser > tbody > tr.child span.dtr-data,
table.dataTable.table-listreseller > tbody > tr.child span.dtr-data { margin-left: auto; line-height: 1.3; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   Typography & responsive pass (all pages)
   ========================================================================== */
/* Body text: proportional line height instead of the base theme's fixed 28px (text looked double-spaced on phones) */
p, ul:not(.list-unstyled), ol { line-height: 1.6; }
.main-sidebar .sidebar-menu { line-height: normal; }
.dash-head p, .card-header-sub, .soft-head p { line-height: 1.45; }

/* Headings: 600 is the panel's strongest weight; 700 read as too heavy next to everything else */
.card .card-header h4, .card .card-body h6, .section-body h6, .alert .alert-heading,
.card .card-body h5 { font-weight: 600; }
.card .card-body h6 { font-size: 14.5px; color: var(--panel-heading); margin-top: 18px; margin-bottom: 8px; }
.card .card-body h6:first-child { margin-top: 0; }
code { font-weight: 500; }

/* Form labels: medium weight, no letter spacing; checkbox sentences read as normal text */
.form-group > label, .form-group label:not(.custom-control-label):not(.btn) {
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--panel-heading); margin-bottom: 6px;
}
.custom-control-label, .form-check-label { font-weight: 400; color: var(--panel-text); line-height: 1.5; }
.form-text, small.form-text, .form-group small { font-size: 12px; line-height: 1.5; }

/* Buttons that hold a long label wrap inside the button instead of spilling out */
.btn-block, .card-body .btn-block { white-space: normal; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; }

/* Every data table: cells centered vertically (the base theme forces baseline !important) */
table.dataTable > tbody > tr > td { vertical-align: middle !important; }

/* Phone: readable minimums for the small stat labels */
@media (max-width: 575.98px) {
  .stat-row .card.card-statistic-1 .card-header h4 { font-size: 10.5px; }
  .stat-row .card.card-statistic-1 .card-sub { font-size: 11px; }

  /* Dashboard header: "Create User" full width on top, the other two side by side below */
  .dash-head { padding: 16px 14px; }
  .dash-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .dash-actions .btn:first-child { grid-column: 1 / -1; }
  .dash-actions .btn {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 8px; font-size: 13px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-align: center;
  }
  .dash-actions .btn i { margin: 0; font-size: 14px; }

  /* Page title card: a little tighter */
  .section .section-header { padding: 16px 18px; }
  .section .section-header h1 { font-size: 18px; }
}

/* Tablet: two-column dashboard stat cards keep their labels on one line */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .stat-row .card.card-statistic-1 .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.alert code, .alert p code, p > code { font-weight: 500 !important; }
.profile-widget .profile-widget-description { line-height: 1.6; }
.profile-widget .profile-bio-2 { display: block; font-size: 13.5px; line-height: 1.6; color: var(--panel-muted); }

/* User / Reseller Details popup on phones: compact so it fits the screen with little or no scrolling */
@media (max-width: 575.98px) {
  .normal-modalize .modal-dialog { margin: 10px; }
  .normal-modalize .modal-header { padding: 12px 16px !important; }
  .normal-modalize .modal-header .modal-title { font-size: 17px; }
  .dt-hero { padding: 12px 14px; gap: 12px; }
  .dt-avatar { width: 46px; height: 46px; font-size: 18px; }
  .dt-name { font-size: 17px; }
  .dt-chips { gap: 4px; margin-top: 4px; }
  .dt-chip { padding: 2px 8px; font-size: 11px; }
  .dt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 14px 0; }
  .dt-stat { padding: 7px 2px; font-size: 9.5px; letter-spacing: 0.3px; border-radius: 10px; }
  .dt-stat span { font-size: 16px; }
  .dt-bio { margin: 10px 14px 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; }
  .dt-section { padding: 10px 14px 0; }
  .dt-section-title { font-size: 10.5px; margin-bottom: 0; }
  .dt-row { padding: 7px 0; gap: 10px; }
  .dt-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .dt-label { font-size: 11px; }
  .dt-value { font-size: 13.5px; }
  .dt .dt-action { height: 30px; padding: 0 10px; gap: 5px; font-size: 12px; }
  .dt .dt-action i { font-size: 11px; }
  .dt-danger { margin: 10px 14px 14px; padding: 10px 12px; gap: 10px; }
  .dt-danger-title { font-size: 13px; }
  .dt-danger div > div:not(.dt-danger-title) { font-size: 11.5px; line-height: 1.4; }
}

/* Create User / Create Reseller: available-credit chip in the card header */
.card-header .balance-chip {
  flex: 0 0 auto; color: #fff; background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Create Reseller: balance chip turns red when the typed amount is more than the balance */
.card-header .balance-chip.is-short { background: #fff; color: var(--t-red-fg); box-shadow: none; }

/* Transfer Credit: reseller username suggestions */
.user-suggest { position: relative; }
.suggest-menu {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm);
  box-shadow: 0 10px 28px rgba(15, 30, 45, 0.14);
}
.suggest-menu.show { display: block; }
.suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--panel-text); text-align: left; cursor: pointer; font-size: 13.5px;
}
.suggest-item:hover, .suggest-item.active { background: var(--primary-softer); }
.suggest-item:focus { outline: 0; }
.suggest-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-size: 12px;
}
.suggest-name { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--panel-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-credit {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  padding: 3px 8px; border-radius: 7px; color: var(--t-gold-fg); background: var(--t-gold-bg);
}
.suggest-credit i { font-size: 10.5px; }
.suggest-empty, .suggest-more { padding: 10px 8px; font-size: 12.5px; color: var(--panel-muted); }
.suggest-more { padding: 6px 8px 4px; font-size: 11.5px; border-top: 1px solid var(--panel-border); margin-top: 4px; }

/* Edit Credits popup: live result of the change under the amount */
.ec-preview {
  display: none; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45; color: var(--panel-text); background: var(--primary-softer); border: 1px solid var(--primary-soft);
}
.ec-preview.show { display: flex; }
.ec-preview i { margin-top: 2px; color: var(--primary); font-size: 12px; }
.ec-preview b { font-weight: 600; color: var(--panel-heading); }
.ec-preview.is-error { color: var(--t-red-fg); background: var(--t-red-bg); border-color: transparent; }
.ec-preview.is-error i { color: var(--t-red-fg); }
.btn-editcredit:disabled { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Security Log
   ========================================================================== */
.stat-a-danger { --stat-accent: var(--t-red-fg); }

.sec-status {
  display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; border-left: 4px solid var(--sec-fg, var(--primary));
  --sec-fg: var(--primary); --sec-bg: var(--primary-soft);
}
.sec-status.is-clean { --sec-fg: var(--t-green-fg); --sec-bg: var(--t-green-bg); }
.sec-status.is-warning { --sec-fg: var(--t-amber-fg); --sec-bg: var(--t-amber-bg); }
.sec-status.is-critical { --sec-fg: var(--t-red-fg); --sec-bg: var(--t-red-bg); }
.sec-status-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sec-bg); color: var(--sec-fg); font-size: 20px;
}
.sec-status-text { flex: 1 1 auto; min-width: 0; }
.sec-status-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--sec-fg); }
.sec-status.is-loading .sec-status-title { color: var(--panel-heading); }
.sec-status-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--panel-muted); }
.sec-rerun { flex: 0 0 auto; }

.sec-empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  background: var(--t-green-bg); color: var(--t-green-fg); }
.sec-empty i { font-size: 20px; }
.sec-empty b { font-weight: 600; }
.sec-empty.is-muted { background: var(--panel-surface-2); color: var(--panel-muted); }

.sec-finding { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--panel-border); }
.sec-finding:first-child { border-top: 0; padding-top: 2px; }
.sec-finding-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-bg); color: var(--tone-fg); font-size: 15px;
}
.sec-finding-body { flex: 1 1 auto; min-width: 0; }
.sec-finding-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sec-finding-title { font-size: 14px; font-weight: 600; color: var(--panel-heading); }
.sec-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  background: var(--tone-bg); color: var(--tone-fg); }
.sec-finding-detail { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--panel-text); overflow-wrap: anywhere; }
.sec-finding-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--panel-muted); }
.sec-finding-meta i { margin-right: 5px; font-size: 11px; }

.sec-type { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--tone-bg); color: var(--tone-fg); white-space: nowrap; }

.sec-how-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--panel-text); }
.sec-how-list li { margin-bottom: 8px; line-height: 1.6; }
.sec-how-list b { font-weight: 600; color: var(--panel-heading); }

@media (max-width: 575.98px) {
  .sec-status { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .sec-status-icon { width: 42px; height: 42px; font-size: 18px; }
  .sec-status-text { flex-basis: calc(100% - 60px); }
  .sec-rerun { width: 100%; }
  .sec-status-title { font-size: 15.5px; }
}
.sec-event { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--panel-border); }
.sec-event:first-child { border-top: 0; padding-top: 2px; }
.sec-event .sec-type { flex: 0 0 auto; margin-top: 1px; min-width: 128px; justify-content: center; }
.sec-event-body { flex: 1 1 auto; min-width: 0; }
.sec-event-detail { font-size: 13px; line-height: 1.5; color: var(--panel-text); overflow-wrap: anywhere; }
.soft-icon.tone-red { background: var(--t-red-bg); color: var(--t-red-fg); }
@media (max-width: 575.98px) {
  .sec-event { flex-direction: column; gap: 6px; }
  .sec-event .sec-type { min-width: 0; }
}

/* Sidebar: links and sub-menus fill the space left after their margins instead of a full 100% width,
   which pushed them past the sidebar edge and caused a sideways scroll */
.main-sidebar .sidebar-menu li a,
.main-sidebar .sidebar-menu li ul.dropdown-menu { width: auto; }
.main-sidebar .sidebar-menu li ul.dropdown-menu li { width: auto; }

/* "FixBuild Core X" about popup (sidebar button) */
.swal2-popup.about-popup { width: 380px; }
.about-pop { text-align: center; }
.about-icon {
  width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-size: 25px;
  box-shadow: 0 0 0 7px var(--primary-softer);
}
.about-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--panel-muted); }
.about-pop .su-actions { margin-top: 20px; }
.about-pop .su-btn i { font-size: 12px; }
.about-icon i { font-size: 26px !important; }

/* Login result popup (signed in / verification / failed / connection problem) */
.swal2-popup.auth-popup { width: 380px; }
.auth-pop { text-align: center; }
.auth-icon {
  width: 62px; height: 62px; margin: 2px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--tone-bg); color: var(--tone-fg); box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone-bg) 55%, transparent);
}
.auth-icon i { font-size: 24px !important; }
.auth-text { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--panel-muted); }
.auth-lines { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 10px; text-align: left; }
.auth-line { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--panel-text); }
.auth-line i { font-size: 5px; color: var(--tone-fg); transform: translateY(-2px); }
.auth-progress { height: 5px; margin: 18px 10px 2px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--tone-fg) 14%, var(--panel-surface)); }
.auth-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tone-fg); transition: width 1.5s linear; }
.auth-pop .su-actions { margin-top: 20px; }
.auth-pop .su-btn i { font-size: 12px; }

/* Dashboard News & Updates notice */
.swal2-popup.notice-popup { width: 460px; }
.notice-pop { text-align: left; }
.np-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--panel-border); }
.np-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.np-icon i { font-size: 19px !important; }
.np-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--panel-heading); }
.np-sub { margin-top: 2px; font-size: 12px; color: var(--panel-muted); }
.np-body { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.np-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--panel-text); }
.np-callout {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.55; background: var(--tone-bg); color: var(--tone-fg);
}
.np-callout i { margin-top: 3px; font-size: 13px !important; }
.np-callout b, .np-callout u { font-weight: 600; }
.np-callout u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.notice-pop .su-actions { margin-top: 18px; }
.notice-pop .su-btn i { font-size: 12px; }

/* Security Log: does the attempted username exist? */
.sec-finding-meta .sec-exists { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-weight: 500; }
.sec-finding-meta .sec-exists.is-yes { background: var(--t-amber-bg); color: var(--t-amber-fg); }
.sec-finding-meta .sec-exists.is-no { background: var(--panel-surface-2); color: var(--panel-muted); }

/* Security Log: Previous / Next under each list */
.sec-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.sec-pager-info { font-size: 12.5px; color: var(--panel-muted); white-space: nowrap; }
.sec-pager .btn i { font-size: 10px; }

/* Dashboard: Security Alerts (admin / developer), one dense row per alert */
.sa-row { position: relative; display: flex; align-items: flex-start; gap: 14px; padding-bottom: 19px; min-width: 0; }
.sa-row:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: 5px; width: 2px;
  background: var(--panel-border); border-radius: 2px;
}
.sa-row:has(+ .act-day)::before { display: none; }
.sa-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; background: var(--tone-bg); color: var(--tone-fg); }
.sa-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.sa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sa-title { font-size: 13px; font-weight: 600; color: var(--panel-heading); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sa-time { flex: 0 0 auto; font-size: 11.5px; color: var(--panel-muted); white-space: nowrap; }
.sa-reason { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--panel-text); overflow-wrap: anywhere; }
.sec-alerts .sec-empty { margin-bottom: 4px; }
@media (max-width: 575.98px) {
  .sa-top { flex-direction: column; gap: 0; }
  .sa-title { white-space: normal; }
}

/* Timelines: less space under the last entry of a day and under the final entry */
.sa-row:has(+ .act-day), .act-item:has(+ .act-day) { padding-bottom: 0; }
.sa-row:last-child { padding-bottom: 2px; }
.sec-alerts .act-day { margin: 8px 0 12px; }
.sec-alerts .act-day:first-child { margin-top: 2px; }

/* Log lists (Activity, Bulk, Credits, Deleted): no "+" expand rows, the table slides side to side so every column stays visible */
.dataTables_wrapper .col-sm-12:has(> table.log-table), .dataTables_wrapper .col-md-12:has(> table.log-table) {
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
}
table.log-table { min-width: 640px; }
table.log-table th, table.log-table td { white-space: nowrap; }

/* Top Resellers on phones: name on its own line, upline and credits below it, so nothing is cut off */
@media (max-width: 575.98px) {
  .top-resellers .tr-line { flex-wrap: wrap; gap: 1px 12px; }
  .top-resellers .tr-name { flex: 1 1 100%; }
  .top-resellers .tr-meta { flex-wrap: wrap; overflow: visible; gap: 2px 12px; }
}

/* Settings: tabs instead of one long page */
.settings-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 20px; padding: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel-surface); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}
.settings-tabs .nav-item { flex: 1 1 0; min-width: 0; }
.settings-tabs .nav-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--panel-muted); white-space: nowrap; transition: background .15s, color .15s;
}
.settings-tabs .nav-link i { font-size: 13px; }
.settings-tabs .nav-link:hover { color: var(--primary); background: var(--primary-softer, var(--primary-soft)); }
.settings-tabs .nav-link.active { color: #fff; background: var(--primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.settings-panes .select2-container { width: 100% !important; }
.settings-sub {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--panel-border);
  font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--panel-heading);
}
.settings-sub i { color: var(--primary); }
@media (max-width: 575.98px) {
  .settings-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; overflow: visible; }
  .settings-tabs .nav-link { padding: 10px 8px; font-size: 12.5px; }
}
.settings-block + .settings-block { margin-top: 28px; padding-top: 6px; }
.settings-panes .card + .card { margin-top: 0; }

/* Live theme preview on phones: one tidy line per item instead of wrapped text */
.theme-preview-bar .theme-preview-tag { white-space: nowrap; line-height: 1.4; }
.theme-preview-bar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-preview-row > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; line-height: 1.4; }
@media (max-width: 575.98px) {
  .theme-preview { padding: 12px; }
  .theme-preview-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
  .theme-preview-bar > span:first-child { max-width: 100%; }
  .theme-preview-bar .theme-preview-tag { padding: 3px 10px; font-size: 10.5px; }
  .theme-preview-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .theme-preview-row > span { width: 100%; white-space: nowrap; }
  .theme-preview-row .btn-swatch { flex: 1 1 auto; min-width: 0; margin-left: 0; text-align: center; }
}

/* Dns page: "Sync from Cloudflare" button in the DNS List header */
.card-header.dns-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dns-list-head .btn-dns-sync { font-weight: 600; border-radius: 9px; padding: 6px 12px; color: var(--primary); background: #fff; border: 0; }
.dns-list-head .btn-dns-sync i { margin-right: 5px; }

/* Table row actions (Update / Delete, Edit / Delete ...): a clear gap between the buttons */
table .btn-group, .dataTables_wrapper .btn-group { display: inline-flex; flex-wrap: nowrap; gap: 8px; }
table .btn-group > .action-btn,
table .btn-group > .action-btn:not(:first-child),
table .btn-group > .action-btn.btn-copy { margin-left: 0 !important; margin-right: 0 !important; }

/* Dns page: Domain filter above the list */
.dns-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dns-filter label { margin: 0; font-size: 13px; font-weight: 600; color: var(--panel-heading); white-space: nowrap; }
.dns-filter label i { color: var(--primary); margin-right: 6px; }
.dns-filter .form-control { max-width: 280px; height: 40px; }
.dns-filter .select2-container { flex: 0 1 300px; max-width: 100%; }
.dns-opt { display: inline-flex; align-items: center; gap: 9px; width: 100%; min-width: 0; line-height: 1.4; vertical-align: middle; }
.dns-opt i { color: var(--primary); font-size: 13px; width: 14px; text-align: center; }
.dns-opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dns-opt-count {
  flex: 0 0 auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center; line-height: 1.4;
  font-size: 11.5px; font-weight: 600; background: var(--primary-soft); color: var(--primary);
}
.dns-filter .select2-selection__rendered { padding-right: 34px !important; }
@media (max-width: 575.98px) { .dns-filter .select2-container { flex-basis: 100%; } }

/* Avatars in the User and Reseller lists: initials on a soft tint (see includes/avatar.php) */
.uav {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 10px; vertical-align: middle;
  background: linear-gradient(145deg, var(--tone-bg), color-mix(in srgb, var(--tone-bg) 70%, var(--tone-fg) 30%));
  color: var(--tone-fg); box-shadow: 0 0 0 2px var(--panel-surface), 0 2px 6px color-mix(in srgb, var(--tone-fg) 22%, transparent);
}
.uav-user { border-radius: 50%; }
.uav-reseller { border-radius: 11px; }
.uav-ico { font-size: 14px; line-height: 1; }
.uav img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.uav-dot {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--panel-surface); background: #9aa6b2;
}
.uav-dot.online { background: #22b573; }
.uav-dot.offline { background: #e5535b; }
.uav-badge {
  position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px;
  background: var(--tone-fg); color: var(--panel-surface); border: 2px solid var(--panel-surface); box-sizing: content-box;
  width: 12px; height: 12px;
}
.uav.is-blocked { filter: grayscale(.85); opacity: .65; }
@media (max-width: 575.98px) {
  .uav { width: 30px; height: 30px; margin-right: 8px; }
  .uav-ico { font-size: 13px; }
}

/* ==========================================================================
   Server Management page
   ========================================================================== */
.stat-a-ok { --stat-accent: var(--t-green-fg); }
.srv-head .dash-actions .btn i { margin-right: 6px; }

/* Add Server form */
.srv-add .form-group > label { font-weight: 500; }
.srv-field { position: relative; }
.srv-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--panel-muted); font-size: 13px; pointer-events: none; }
.srv-field .form-control { padding-left: 40px !important; }
.srv-field .srv-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--panel-muted); cursor: pointer; }
.srv-field .srv-eye:hover { color: var(--primary); background: var(--primary-soft); }
.srv-field:has(.srv-eye) .form-control { padding-right: 46px !important; }
.srv-req { list-style: none; margin: 4px 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--panel-surface-2); border: 1px dashed var(--panel-border); }
.srv-req li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--panel-text); padding: 3px 0; }
.srv-req i { width: 16px; text-align: center; color: var(--primary); }
.srv-add .btn-add-server, .srv-add .btn-server-demo { font-weight: 600; border-radius: 12px; }
.srv-add .btn-add-server i, .srv-add .btn-server-demo i { margin-right: 6px; }
.srv-add .add-server-message { margin: -4px 0 14px; }

/* Tools card */
.srv-tools .servercrd { display: flex; flex-direction: column; gap: 8px; }
.srv-tool { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--panel-border);
  background: var(--panel-surface); color: var(--panel-text); text-decoration: none !important; transition: border-color .15s, background .15s; }
.srv-tool:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--panel-border)); background: var(--primary-softer, var(--panel-surface-2)); }
.srv-tool-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-bg); color: var(--tone-fg); font-size: 15px; }
.srv-tool-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.srv-tool-text b { font-weight: 600; font-size: 13.5px; color: var(--panel-heading); }
.srv-tool-text small { font-size: 12px; color: var(--panel-muted); }
.srv-tool > i:last-child { color: var(--panel-muted); font-size: 12px; }

/* Server list */
.srv-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.srv-legend .srv-status { font-size: 11px; padding: 3px 9px; }
.srv-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srv-ico { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--primary-soft); color: var(--primary); }
.srv-ico .srv-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel-surface); background: #9aa6b2; }
.srv-ico.is-ok .srv-dot { background: #22b573; }
.srv-ico.is-bad .srv-dot { background: #e5535b; }
.srv-ico.is-warn .srv-dot { background: #f0a020; }
.srv-ico.is-info .srv-dot { background: #1aa6c9; }
.srv-name-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.srv-name-text b { font-weight: 600; font-size: 13.5px; color: var(--panel-heading); }
.srv-name-text small { font-size: 11.5px; color: var(--panel-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.srv-proto { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--fam-bg); line-height: 1.2; }
.srv-proto .srv-os { width: 22px; height: 22px; border-radius: 50%; background: #fff; padding: 2px; }
.srv-proto span { display: flex; flex-direction: column; }
.srv-proto b { font-weight: 600; font-size: 12.5px; color: var(--fam-fg); }
.srv-proto small { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--fam-fg); opacity: .8; }
.fam-xray        { --fam-bg: var(--t-violet-bg); --fam-fg: var(--t-violet-fg); }
.fam-openvpn     { --fam-bg: var(--t-amber-bg);  --fam-fg: var(--t-amber-fg); }
.fam-openconnect { --fam-bg: var(--t-gold-bg);   --fam-fg: var(--t-gold-fg); }
.fam-ssh         { --fam-bg: var(--t-cyan-bg);   --fam-fg: var(--t-cyan-fg); }
.fam-hysteria    { --fam-bg: var(--t-red-bg);    --fam-fg: var(--t-red-fg); }
.fam-psiphon     { --fam-bg: var(--t-green-bg);  --fam-fg: var(--t-green-fg); }
.fam-socksip, .fam-unknown { --fam-bg: var(--primary-soft); --fam-fg: var(--primary); }

.srv-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.srv-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--st-bg); color: var(--st-fg); }
.srv-status i { font-size: 11px; }
.srv-status.is-ok    { --st-bg: var(--t-green-bg); --st-fg: var(--t-green-fg); }
.srv-status.is-bad   { --st-bg: var(--t-red-bg);   --st-fg: var(--t-red-fg); }
.srv-status.is-warn  { --st-bg: var(--t-amber-bg); --st-fg: var(--t-amber-fg); }
.srv-status.is-info  { --st-bg: var(--t-cyan-bg);  --st-fg: var(--t-cyan-fg); }
.srv-status.is-muted { --st-bg: var(--panel-surface-2); --st-fg: var(--panel-muted); }
.srv-online { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--panel-muted); }
.srv-online.has-users { color: var(--primary); font-weight: 600; }

.srv-loc { display: flex; align-items: center; gap: 9px; }
.srv-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--panel-surface), 0 1px 4px rgba(0,0,0,.15); }
.srv-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--panel-text); }

table .btn-group.srv-actions .action-btn.act-view   { --act: var(--primary); --act-soft: var(--primary-soft); }
table .btn-group.srv-actions .action-btn.act-warn   { --act: var(--t-amber-fg); --act-soft: var(--t-amber-bg); }
table .btn-group.srv-actions .action-btn.act-danger { --act: var(--t-red-fg); --act-soft: var(--t-red-bg); }
table .btn-group.srv-actions .action-btn { background: var(--act-soft) !important; color: var(--act) !important; }
table .btn-group.srv-actions .action-btn:hover:not(:disabled) { background: var(--act) !important; color: #fff !important; }
table .btn-group.srv-actions .action-btn:disabled { opacity: .45; cursor: not-allowed; }
.table-listserver td { vertical-align: middle !important; }
.table-listserver tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* Server Details popup */
.srvd-loading, .srvd-empty { padding: 18px; text-align: center; color: var(--panel-muted); }
.srvd-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel-surface-2); margin-bottom: 4px; }
.srvd-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.srvd-title b { font-size: 16px; font-weight: 600; color: var(--panel-heading); }
.srvd-title small { font-size: 12px; color: var(--panel-muted); }
.srvd-sec { margin: 16px 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--panel-muted); }
.srvd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.srvd-tile { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--panel-surface); min-width: 0; }
.srvd-tile.is-wide { grid-column: 1 / -1; }
.srvd-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-size: 13px; }
.srvd-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.srvd-label { font-size: 11px; color: var(--panel-muted); }
.srvd-val { font-size: 13px; font-weight: 500; color: var(--panel-heading); overflow-wrap: anywhere; }
.srvd-bar { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--panel-surface-2); overflow: hidden; }
.srvd-bar span { display: block; height: 100%; border-radius: inherit; background: var(--t-green-fg); }
.srvd-bar.is-mid span { background: var(--t-amber-fg); }
.srvd-bar.is-high span { background: var(--t-red-fg); }
.srvd-pct { margin-top: 3px; font-size: 11px; color: var(--panel-muted); }
.srvd-svcs { display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.srvd-svc { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.srvd-svc + .srvd-svc { border-top: 1px solid var(--panel-border); }
.srvd-svc-name { flex: 1 1 auto; font-size: 13px; font-weight: 500; color: var(--panel-heading); }
.srvd-port { font-size: 12px; color: var(--panel-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.srvd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.srvd-links .btn { border-radius: 10px; }

@media (max-width: 575.98px) {
  .srv-legend { display: none; }
  .srvd-grid { grid-template-columns: 1fr; }
  .srv-head .dash-actions { grid-template-columns: 1fr 1fr; }
  .srv-head .dash-actions .btn:first-child { grid-column: 1 / -1; }
}

/* Server list: compact icon actions (tooltips on hover) and a shortened host name, so the table fits its card */
table .btn-group.srv-actions { gap: 6px; }
table .btn-group.srv-actions .action-btn { width: 34px; height: 34px; padding: 0 !important; justify-content: center; border-radius: 10px !important; }
table .btn-group.srv-actions .action-btn span { display: none; }
table .btn-group.srv-actions .action-btn i { font-size: 13px; margin: 0; }
.srv-name-text small { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.table-listserver.log-table { min-width: 600px; }
.srv-where { display: flex !important; align-items: center; gap: 6px; margin-top: 2px; max-width: none !important; font-family: inherit !important; }
.srv-where .srv-flag { width: 16px; height: 16px; box-shadow: 0 0 0 1px var(--panel-border); }
.srv-where .srv-ip { font-size: 12px; color: var(--panel-muted); }
table.table-listserver.log-table { min-width: 560px; }

/* Servers page: live installation log card */
table .btn-group.srv-actions .action-btn.act-log { --act: var(--t-violet-fg); --act-soft: var(--t-violet-bg); }
.srv-log .soft-head { flex-wrap: wrap; }
.srv-log-title { min-width: 0; }
.srv-log-name { font-weight: 500; color: var(--panel-muted); font-size: 14px; }
.srv-log-tools { display: flex; align-items: center; gap: 6px; }
.srv-log-btn { width: 32px; height: 32px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel-surface);
  color: var(--panel-muted); cursor: pointer; font-size: 12.5px; }
.srv-log-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--panel-border)); }
.srv-log-btn.is-on { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.srv-log-progress { margin: 2px 0 12px; }
.srv-log-bar { height: 8px; border-radius: 999px; background: var(--panel-surface-2); overflow: hidden; }
.srv-log-bar span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .5s ease;
  background: linear-gradient(90deg, var(--primary-hover, var(--primary)), var(--primary)); }
.srv-log-bar span.is-done { background: var(--t-green-fg); }
.srv-log-bar span.is-bad { background: var(--t-red-fg); }
.srv-log-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--panel-text); }
.srv-log-meta b { color: var(--panel-heading); font-weight: 600; }
.srv-flow { margin-top: 4px; }
.srv-flow-item { --tone-bg: var(--panel-surface-2); --tone-fg: var(--panel-muted);
  position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.srv-flow-item:last-child { padding-bottom: 0; }
.srv-flow-item:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px;
  background: var(--panel-border); border-radius: 2px;
}
.srv-flow-item.is-done:not(:last-child)::before { background: color-mix(in srgb, var(--t-green-fg) 35%, var(--panel-border)); }
.srv-flow-item.is-done { --tone-bg: var(--t-green-bg); --tone-fg: var(--t-green-fg); }
.srv-flow-item.is-running { --tone-bg: var(--primary-soft); --tone-fg: var(--primary); }
.srv-flow-item.is-error { --tone-bg: var(--t-red-bg); --tone-fg: var(--t-red-fg); }
.srv-flow-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px;
  background: var(--tone-bg); color: var(--tone-fg); }
.srv-flow-item.is-running .srv-flow-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.srv-flow-body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.srv-flow-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.srv-flow-title { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--panel-heading); min-width: 0; }
.srv-flow-item.is-pending .srv-flow-title { font-weight: 500; color: var(--panel-muted); }
.srv-flow-item.is-running .srv-flow-title { color: var(--primary); }
.srv-flow-time { flex: 0 0 auto; font-size: 12px; color: var(--panel-muted); white-space: nowrap; padding-top: 1px; }
.srv-flow-item.is-error .srv-flow-time { color: var(--t-red-fg); }
.srv-flow-err { display: flex; gap: 7px; align-items: baseline; margin-top: 6px; padding: 7px 10px; border-radius: 9px;
  background: var(--t-red-bg); color: var(--panel-heading); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.srv-flow-err i { color: var(--t-red-fg); font-size: 11px; }
@media (max-width: 575.98px) {
  .srv-log-tools { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   Tables: loading state (DataTables "processing"). Replaces the old black
   half-ring in a white box: the table dims softly, a thin bar runs along its
   top and a small pill says what is loading. Covers only the table, so the
   search box and paging stay usable while results load.
   ========================================================================== */
div.dataTables_wrapper div.dataTables_processing,
div.dataTables_wrapper div.dataTables_processing.card {
  position: absolute !important;
  top: 0 !important; left: 15px !important; right: 15px; bottom: 0;
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  transform: none !important;
  font-size: 13px !important;
  background: color-mix(in srgb, var(--panel-surface) 45%, transparent) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(0.8px); backdrop-filter: blur(0.8px);
  border: 0 !important; border-radius: 12px; box-shadow: none !important;
  z-index: 6; overflow: hidden; text-align: center;
}
div.dataTables_wrapper div.dataTables_processing::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: dt-loading-bar 1.1s ease-in-out infinite;
}
/* first load: give the empty table room for the loader */
div.dataTables_wrapper .col-sm-12:has(> .dataTables_processing[style*="block"]) { min-height: 190px; }
.dt-loading {
  position: absolute; left: 50%; top: min(50%, 150px); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--panel-surface); border: 1px solid var(--panel-border);
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .22);
  color: var(--panel-heading); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.dt-loading-ring {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary); border-right-color: var(--primary);
  animation: dt-loading-spin .75s linear infinite;
}
.dt-loading-text::after { content: "…"; }
@keyframes dt-loading-spin { to { transform: rotate(360deg); } }
@keyframes dt-loading-bar { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .dt-loading-ring { animation-duration: 1.8s; }
  div.dataTables_wrapper div.dataTables_processing::before { animation: none; left: 0; width: 100%; opacity: .45; }
}

/* Add Server > Server type list: icon, name and the selected tick sit together (the tick used to float at the far right,
   a long way from the server icon). Only this list; other dropdowns keep the tick at the right edge. */
#select2-servertype-results .select2-results__option { display: flex; align-items: center; gap: 8px; }
#select2-servertype-results .select2-results__option > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#select2-servertype-results .select2-results__option img { flex: 0 0 auto; margin: 0; }
#select2-servertype-results .select2-results__option[aria-selected="true"] { padding-right: 12px; }
#select2-servertype-results .select2-results__option[aria-selected="true"]::after {
  position: static; transform: none; flex: 0 0 auto; margin-left: 2px; font-size: 11px;
}
.select2-container--open #select2-servertype-container,
#select2-servertype-container > span { display: inline-flex; align-items: center; gap: 8px; }

/* Server List: the select checkbox column is compact, so the checkbox sits close to the server icon.
   It used to be 70px wide: the header reserved room for sort arrows this column does not have. */
.table-listserver thead th:first-child,
.table-listserver tbody td:first-child {
  box-sizing: border-box !important;
  width: 40px !important; min-width: 40px !important; max-width: 40px !important;
  padding-left: 14px !important; padding-right: 2px !important;
}
.table-listserver thead th:first-child::before,
.table-listserver thead th:first-child::after { display: none !important; }
.table-listserver thead th:first-child .custom-control,
.table-listserver tbody td:first-child .custom-control { padding-left: 16px; min-height: 16px; }
.table-listserver thead th:first-child .custom-control-label::before,
.table-listserver thead th:first-child .custom-control-label::after,
.table-listserver tbody td:first-child .custom-control-label::before,
.table-listserver tbody td:first-child .custom-control-label::after { left: -16px; }

/* Add Server > Domain dropdown: a small globe before each domain */
.srv-dom-opt { display: inline-flex; align-items: center; gap: 8px; }
.srv-dom-opt i { color: var(--primary); font-size: 13px; width: 16px; text-align: center; }

/* Add Server: the new password the panel set on a server that demanded one */
.srv-newpass-note { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 164, 38, .12); border: 1px solid rgba(255, 164, 38, .45); text-align: left; font-size: 13px; line-height: 1.55; }
.srv-newpass-note code { display: inline-block; margin-top: 4px; font-size: 15px; user-select: all; }

/* Add Server: the Install button while the panel works (shows the current step) */
.btn-add-server.is-busy, .btn-add-server.is-busy:disabled { opacity: .85; cursor: wait; }

/* Sortable headers (Username, Usage; Username, Credits, Clients, Status): thin sort arrows right after the label (not the theme's
   arrows at the cell edge). Neutral = regular list, down arrow = highest first */
.dataTables_wrapper table.dataTable thead th.th-sort { padding-right: 12px !important; cursor: pointer; }
table.dataTable thead th.th-sort::before, table.dataTable thead th.th-sort::after { display: none !important; }
/* the theme's edge arrows never show in these two lists: every sortable header carries its own thin arrows */
.table-listuser thead th::before, .table-listuser thead th::after,
.table-listreseller thead th::before, .table-listreseller thead th::after { display: none !important; }
.th-sort .sort-ico { display: inline-flex; margin-left: 3px; font-size: 12px; font-weight: 400; letter-spacing: -2px; line-height: 1; vertical-align: 0; }
.th-sort .sort-ico i { font-style: normal; color: var(--panel-muted); opacity: .55; transition: color .15s, opacity .15s; }
.th-sort:hover .sort-ico i { opacity: .9; }
.th-sort.sorting_desc .sort-ico i:last-child { color: var(--primary); opacity: 1; font-weight: 700; }
.th-sort.sorting_desc .sort-ico i:first-child { opacity: .3; }
.th-sort.sorting_asc .sort-ico i:first-child { color: var(--primary); opacity: 1; font-weight: 700; }
.th-sort.sorting_asc .sort-ico i:last-child { opacity: .3; }

/* Usage with the Xray limit on: a soft ring filled to --p percent, the amount in the middle (see usage_cell).
   Theme primary while there is room, amber and red only near the limit; arc, track and centre are tints of that tone */
.usage-ring {
  --um: var(--primary); --p: 0;
  --um-arc: color-mix(in srgb, var(--um) 62%, var(--panel-surface));
  --um-track: color-mix(in srgb, var(--um) 13%, var(--panel-surface));
  --um-fill: color-mix(in srgb, var(--um) 6%, var(--panel-surface));
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 46px; height: 46px; border-radius: 50%; background: var(--um-fill);
}
.usage-ring.is-amber { --um: var(--t-amber-fg); }
.usage-ring.is-red { --um: var(--t-red-fg); }
.usage-ring.is-zero { --um-track: var(--panel-border); --um-fill: var(--panel-surface-2); }
.usage-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--um-arc) calc(var(--p) * 1%), var(--um-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.usage-ring .ur-val { display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 11.5px; font-weight: 600; color: var(--um); }
.usage-ring .ur-val small { font-size: 8.5px; font-weight: 500; margin-top: 2px; color: var(--panel-muted); }
.usage-ring.is-zero .ur-val { color: var(--panel-muted); font-weight: 500; }

/* ==========================================================================
   DNS Records
   ========================================================================== */
.dns-seg { display: flex; gap: 6px; }
.dns-seg label { flex: 1 1 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--panel-border); background: var(--panel-surface-2); font-weight: 600; font-size: 13px; color: var(--panel-heading); transition: all .15s; }
.dns-seg label small { font-size: 11px; font-weight: 400; color: var(--panel-muted); }
.dns-seg label input { position: absolute; opacity: 0; pointer-events: none; }
.dns-seg label.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dns-preview { color: var(--primary); font-size: 12.5px; overflow-wrap: anywhere; }
.dns-preview i { font-size: 10px; margin-right: 3px; }
.dns-fill { font-size: 13px; color: var(--panel-muted); }
.dns-proxy-hint { display: block; font-size: 12px; line-height: 1.5; margin-top: -6px; }

.dns-switch { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; cursor: pointer; font-weight: 500; }
.dns-switch input { position: absolute; opacity: 0; pointer-events: none; }
.dns-switch-ui { position: relative; width: 40px; height: 22px; border-radius: 22px; background: var(--panel-border); transition: background .15s; flex: 0 0 auto; }
.dns-switch-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.dns-switch input:checked + .dns-switch-ui { background: #f38020; }
.dns-switch input:checked + .dns-switch-ui::after { transform: translateX(18px); }
.dns-switch-text { font-size: 13px; color: var(--panel-text); }

.dns-filters { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; margin-bottom: 12px; }
.dns-bulk { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--t-red-bg); color: var(--t-red-fg); font-size: 13px; }
.dns-bulk > span { margin-right: auto; }

.dns-rec { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dns-type { flex: 0 0 auto; min-width: 52px; text-align: center; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: var(--primary-soft); color: var(--primary); }
.dns-type.t-aaaa { background: var(--t-violet-bg); color: var(--t-violet-fg); }
.dns-type.t-cname { background: var(--t-cyan-bg); color: var(--t-cyan-fg); }
.dns-rec-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dns-rec-text b { font-weight: 600; color: var(--panel-heading); overflow-wrap: anywhere; }
.dns-copy { border: 0; background: transparent; color: var(--panel-muted); padding: 2px 4px; border-radius: 6px; cursor: pointer; opacity: .6; }
.dns-copy:hover { opacity: 1; color: var(--primary); background: var(--primary-soft); }
.dns-target { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dns-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--panel-text); overflow-wrap: anywhere; }
.dns-srv { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t-green-fg); font-weight: 500; }
.dns-srv .srv-flag { width: 16px; height: 16px; }
.dns-srv em { font-style: normal; color: var(--panel-muted); font-weight: 400; }
.dns-srv.is-unused { color: var(--t-amber-fg); }
.dns-srv.is-none { color: var(--panel-muted); }
.dns-proxy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--panel-border);
  background: var(--panel-surface-2); color: var(--panel-muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; }
.dns-proxy:hover { border-color: #f38020; color: #f38020; }
.dns-proxy.is-on { background: rgba(243, 128, 32, .12); border-color: rgba(243, 128, 32, .45); color: #e0701a; }
.dns-proxy.is-busy { opacity: .5; }
.dns-ttl { display: block; margin-top: 4px; padding-left: 4px; font-size: 11.5px; color: var(--panel-muted); white-space: nowrap; }
.table-listdns td { vertical-align: middle !important; }
.table-listdns tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }

.dns-lookup-out { margin-top: 12px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere;
  background: var(--panel-surface-2); border: 1px solid var(--panel-border); }
.dns-lookup-out.is-ok { border-color: color-mix(in srgb, var(--t-green-fg) 35%, transparent); }
.dns-lookup-out.is-warn { border-color: color-mix(in srgb, var(--t-amber-fg) 40%, transparent); }
.dns-lookup-out.is-bad { border-color: color-mix(in srgb, var(--t-red-fg) 40%, transparent); color: var(--t-red-fg); }
.dns-lookup-out b { color: var(--panel-heading); font-weight: 600; }

.dns-warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--t-amber-bg); color: var(--t-amber-fg); font-size: 13px; text-align: left; }
.dns-edit-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-surface-2); margin-bottom: 14px; overflow-wrap: anywhere; }
.dns-edit label { font-size: 13px; font-weight: 600; }

@media (max-width: 767.98px) {
  .dns-filters { grid-template-columns: 1fr 1fr; }
  .btn-dns-sync span { display: none; }
}
/* DNS list: the same compact checkbox column as the Server List */
.table-listdns thead th:first-child,
.table-listdns tbody td:first-child {
  box-sizing: border-box !important;
  width: 40px !important; min-width: 40px !important; max-width: 40px !important;
  padding-left: 14px !important; padding-right: 2px !important;
}
.table-listdns thead th:first-child::before,
.table-listdns thead th:first-child::after { display: none !important; }
.table-listdns thead th:first-child .custom-control,
.table-listdns tbody td:first-child .custom-control { padding-left: 16px; min-height: 16px; }
.table-listdns thead th:first-child .custom-control-label::before,
.table-listdns thead th:first-child .custom-control-label::after,
.table-listdns tbody td:first-child .custom-control-label::before,
.table-listdns tbody td:first-child .custom-control-label::after { left: -16px; }
.table-listdns .dns-rec-text b { word-break: break-word; }
/* long record names wrap instead of widening the table */
.table-listdns .dns-rec-text { min-width: 0; flex-wrap: nowrap; }
.table-listdns .dns-rec-text b { overflow-wrap: anywhere; }

/* ==========================================================================
   Domain Setup
   ========================================================================== */
.dom-primary-row { display: flex; gap: 8px; }
.dom-primary-row .select2-container { flex: 1 1 auto; min-width: 0; }
.dom-primary-row .btn { flex: 0 0 auto; border-radius: 12px; }
.dom-stat-text { font-size: 16px !important; overflow-wrap: anywhere; line-height: 1.3 !important; }
.dom-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dom-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(243, 128, 32, .12); color: #e0701a; font-size: 16px; }
.dom-ico.is-off { background: var(--panel-surface-2); color: var(--panel-muted); }
.dom-name-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dom-name-text b { font-weight: 600; color: var(--panel-heading); overflow-wrap: anywhere; }
.dom-name-text small { font-size: 11.5px; color: var(--panel-muted); overflow-wrap: anywhere; }
.dom-name-text small i { font-size: 10px; margin-right: 2px; }
.dom-primary { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--t-gold-bg); color: var(--t-gold-fg); vertical-align: 1px; white-space: nowrap; }
.dom-plan { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--panel-surface-2); color: var(--panel-muted); border: 1px solid var(--panel-border); }
.dom-plan i { font-size: 11px; }
.dom-plan.is-gold { background: var(--t-gold-bg); color: var(--t-gold-fg); border-color: transparent; }
.dom-plan.is-info { background: var(--t-cyan-bg); color: var(--t-cyan-fg); border-color: transparent; }
.dom-plan.is-violet { background: var(--t-violet-bg); color: var(--t-violet-fg); border-color: transparent; }
.dom-use { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--panel-muted); white-space: nowrap; }
.dom-use b { color: var(--panel-heading); font-weight: 600; }
.table-listdomain td { vertical-align: middle !important; }
.table-listdomain tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.dom-edit label { font-size: 13px; font-weight: 600; }
@media (max-width: 767.98px) { .btn-dom-refresh-all span { display: none; } }
.table-listdomain thead th:last-child, .table-listdomain tbody td:last-child { width: 1%; white-space: nowrap; }
.dom-ps { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }

/* DNS list: address under the name, and the + details row (proxy, TLS, server) */
.dns-rec-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dns-rec-main .dns-ip { font-size: 12px; color: var(--panel-muted); }
.dns-ip-cloud { color: #f38020; font-size: 11px; margin-left: 3px; }
.table-listdns thead th:last-child, .table-listdns tbody td:last-child { width: 1%; white-space: nowrap; }
.table-listdns tr.dns-open td { background: color-mix(in srgb, var(--primary) 5%, transparent); border-bottom: 0; }
.table-listdns tr.dns-open + tr > td { padding: 0 12px 14px !important; background: color-mix(in srgb, var(--primary) 5%, transparent); }


.table-listdns thead th:nth-child(2), .table-listdns tbody td:nth-child(2) { text-align: left !important; }

/* DNS list, compact: tight rows, name/IP cut with "…" so the actions always fit, small icon buttons */
.table-listdns tbody td { padding-top: 9px !important; padding-bottom: 9px !important; }
.table-listdns .dns-rec { gap: 9px; }
.table-listdns .dns-type { min-width: 0; width: 46px; padding: 3px 0; font-size: 10.5px; border-radius: 7px; }
.table-listdns .dns-rec-main { flex: 1 1 auto; gap: 1px; }
.table-listdns .dns-rec-text { display: flex; min-width: 0; gap: 2px; }
.table-listdns .dns-copy { flex: 0 0 auto; }
.table-listdns .srv-actions { gap: 4px; display: inline-flex; }
.table-listdns .srv-actions .action-btn { width: 32px; height: 32px; padding: 0 !important; margin: 0 !important; border-radius: 9px !important; display: inline-flex; align-items: center; justify-content: center; }
.table-listdns .srv-actions .action-btn span { display: none; }
.table-listdns .srv-actions .action-btn i { font-size: 12px; }

/* + details: one compact panel, a short line per check */
.table-listdns tr.dns-open + tr > td { max-width: 0; white-space: normal !important; text-align: left !important; }
.dns-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 4px 14px; border-radius: 12px; background: var(--panel-surface); border: 1px solid var(--panel-border); }
.dns-ml { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; border-bottom: 1px dashed var(--panel-border); }
.dns-more .dns-ml:nth-last-child(-n+2) { border-bottom: 0; }
.dns-ml-label { flex: 0 0 84px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--panel-muted); }
.dns-ml-label i { width: 12px; text-align: center; font-size: 11px; }
.dns-ml-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.dns-ml-body .srv-status { font-size: 11px; padding: 3px 9px; }
.dns-ml-body .dns-proxy { padding: 3px 10px; font-size: 11px; }
.dns-ml-note { font-size: 12px; line-height: 1.4; color: var(--panel-muted); min-width: 0; overflow-wrap: anywhere; }
.dns-ml-note b { color: var(--panel-heading); font-weight: 600; }
.dns-ml-note .srv-flag { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.dns-ml-note code { font-size: 11px; }

@media (max-width: 767.98px) {
  .dns-more { grid-template-columns: 1fr; padding: 2px 12px; }
  .dns-more .dns-ml:nth-last-child(2) { border-bottom: 1px dashed var(--panel-border); }
  .dns-ml-label { flex-basis: 78px; }
  .table-listdns tbody td:first-child, .table-listdns thead th:first-child { width: 30px !important; min-width: 30px !important; max-width: 30px !important; padding-left: 8px !important; }
  .table-listdns .srv-actions .action-btn { width: 30px; height: 30px; }
  .table-listdns tr.dns-open + tr > td { padding: 0 6px 10px !important; }
}
table.table-listdns.log-table { min-width: 0 !important; }
.table-listdns tbody td:last-child { padding-left: 4px !important; }
.dns-ml-label { white-space: nowrap; }
@media (max-width: 767.98px) {
  .dns-ml-label { flex-basis: 92px; }
}

/* DNS list: the name and IP always show in full; the actions follow right after the name (no wide gap),
   and on a narrow screen the list slides sideways to reach them */
.table-listdns thead th:nth-child(2), .table-listdns tbody td:nth-child(2) { width: 1%; white-space: nowrap; padding-right: 14px !important; }
.table-listdns thead th:last-child, .table-listdns tbody td:last-child { width: auto !important; text-align: left !important; }
.table-listdns .dns-rec-text b { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.table-listdns .dns-rec-main .dns-ip { white-space: nowrap; }
.dns-list .dataTables_wrapper .row > div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  /* the details stay inside the visible part while the list itself slides */
  .dns-more { position: sticky; left: 0; max-width: calc(100vw - 84px); }
}

/* Create Record > "Fill in a server's IP" */
.dns-fill-ph { display: inline-flex; align-items: center; gap: 8px; color: var(--panel-muted); }
.dns-fill-ph i { font-size: 12px; }
.dns-fill-opt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dns-fill-opt .srv-flag { width: 18px; height: 18px; flex: 0 0 auto; }
.dns-fill-opt > i { width: 18px; text-align: center; color: var(--primary); font-size: 12px; }
.dns-fill-name { font-weight: 600; color: var(--panel-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dns-fill-ip { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--panel-muted); white-space: nowrap; }
.dns-fill-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-border); }
.dns-fill-dot.is-on { background: var(--t-green-fg); }
.dns-fill-drop .select2-results__option--highlighted .dns-fill-name,
.dns-fill-drop .select2-results__option--highlighted .dns-fill-ip { color: inherit; }

/* DNS list: record (name, IP under it) on the left, actions at the right end */
.table-listdns thead th:nth-child(2), .table-listdns tbody td:nth-child(2) { width: auto !important; }
.table-listdns thead th:last-child, .table-listdns tbody td:last-child { width: 1% !important; text-align: right !important; }
.table-listdns tr.dns-open + tr > td { text-align: left !important; }
@media (max-width: 767.98px) {
  .dns-more { position: sticky; left: 0; max-width: calc(100vw - 84px); }
}

/* Add Server > Server type: (i) guide and the description under the select */
.srv-type-label { display: flex; align-items: center; gap: 6px; }
.srv-type-help { border: 0; background: transparent; padding: 0 2px; color: var(--primary); cursor: pointer; font-size: 13px; line-height: 1; }
.srv-type-help:hover { opacity: .75; }
.srv-type-info { margin-top: 8px; padding: 9px 11px; border-radius: 11px; background: var(--panel-surface-2); border: 1px solid var(--panel-border); }
.srv-type-info:empty { display: none; }
.srv-type-info p, .srv-type-row p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--panel-text); }
.srv-type-ports { display: flex; flex-wrap: wrap; gap: 4px; }
.srv-type-ports span { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--primary-soft); color: var(--primary); }
.srv-type-guide { text-align: left; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.srv-type-row { padding: 10px 0; border-bottom: 1px solid var(--panel-border); }
.srv-type-row:last-child { border-bottom: 0; }
.srv-type-row b { display: block; font-size: 13px; color: var(--panel-heading); margin-bottom: 3px; }

/* ==========================================================================
   Reseller List / User List summary strip: one slim card of figures, deliberately not the Dashboard / User List
   stat cards (no accent edge, no bars). Active / Blocked filter the list; the figure in use is tinted and underlined
   ========================================================================== */
.card.rs-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; margin-bottom: 22px;
  border-radius: 14px; background: var(--panel-surface); border: 1px solid var(--panel-border);
}
.rs-cell {
  position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--panel-text); text-align: left;
  transition: background-color .15s;
}
.rs-cell + .rs-cell::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--panel-border);
}
button.rs-cell { cursor: pointer; }
button.rs-cell:hover { background: var(--panel-surface-2); }
button.rs-cell:focus { outline: 0; }
button.rs-cell:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone-fg) 45%, transparent); }
.rs-cell.active { background: color-mix(in srgb, var(--tone-bg) 55%, var(--panel-surface)); box-shadow: inset 0 -2px 0 var(--tone-fg); }
.rs-cell.active::before, .rs-cell.active + .rs-cell::before { opacity: 0; }
.rs-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-bg); color: var(--tone-fg); font-size: 14px;
}
.rs-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.1; }
.rs-txt b { font-size: 19px; font-weight: 600; color: var(--panel-text); white-space: nowrap; }
.rs-cell.active .rs-txt b { color: var(--tone-fg); }
/* labels wrap to a second line rather than being cut off */
.rs-txt em { font-style: normal; font-size: 11.5px; line-height: 1.25; color: var(--panel-muted); }
.rs-txt b .fa-spinner { font-size: 13px; color: var(--panel-muted); }
.rs-credits .rs-txt b { color: var(--t-gold-fg); }

@media (max-width: 767.98px) {
  .card.rs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; }
  .rs-cell:nth-child(odd)::before { display: none; }
}
@media (max-width: 575.98px) {
  .card.rs-strip { padding: 4px; margin-bottom: 16px; }
  .rs-cell { gap: 9px; padding: 9px 8px; }
  .rs-cell:nth-child(odd)::before { display: none; }
  .rs-ico { width: 32px; height: 32px; font-size: 13px; }
  .rs-txt b { font-size: 17px; }
}
@media (max-width: 359.98px) {
  .rs-cell { gap: 7px; padding: 8px 6px; }
  .rs-ico { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
  .rs-txt b { font-size: 16px; }
  .rs-txt em { font-size: 11px; }
}