/* =========================================================
   Radius Panel — design tokens
   Calm graphite surface, one indigo accent, compact spacing.
   ========================================================= */

@font-face {
  font-family: shradius;
  src: url("fonts/shradius.woff2") format("woff2-variations");
  font-style: normal;
  font-display: swap;
}


:root {
  --font: "shradius", system-ui, -apple-system, sans-serif;

  /* spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;

  --header-h: 50px;

  /* semantic (shared both themes) */
  --success: #2fb673;
  --success-weak: rgba(47, 182, 115, 0.12);
  --danger: #e6495f;
  --danger-weak: rgba(230, 73, 95, 0.12);
  --warning: #d69a34;
  --warning-weak: rgba(214, 154, 52, 0.12);
}

[data-bs-theme="dark"] {
  --bg: #0d0f13;
  --surface: #14171d;
  --surface-2: #1b1f27;
  --border: #262b34;
  --text: #e7e9ec;
  --text-2: #8b93a1;
  --text-3: #565d6a;
  --accent: #5978f0;
  --accent-strong: #7089f5;
  --accent-weak: rgba(89, 120, 240, 0.14);
  --accent-ink: #ffffff;
}

[data-bs-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e3e6eb;
  --text: #1c1f26;
  --text-2: #676e7a;
  --text-3: #9aa1ac;
  --accent: #435cd1;
  --accent-strong: #384eb8;
  --accent-weak: rgba(67, 92, 209, 0.08);
  --accent-ink: #ffffff;
}

/* ===== Base ===== */
html {
  font-size: 14px;
}

html,
body {
  font-family: var(--font);
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
}

a {
  color: var(--accent);
}

::selection {
  background: var(--accent-weak);
}

/* ===== Header ===== */
.app-header {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header .container-fluid {
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.brand i {
  color: var(--accent);
  font-size: 1.1rem;
}

.header-actions {
  display: flex;
  gap: 0.35rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition:
    background 0.15s,
    color 0.15s;
}

.btn-icon:hover {
  background: var(--surface-2);
  color: var(--text);
}

[data-bs-theme="dark"] .icon-light {
  display: none;
}
[data-bs-theme="light"] .icon-dark {
  display: none;
}

/* ===== Main ===== */
.app-main {
  flex: 1;
}

.app-main > .container-fluid {
  max-width: 1040px;
  padding-top: var(--sp-5) !important;
  padding-bottom: var(--sp-6) !important;
}

.page-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.page-title i {
  color: var(--accent);
  font-size: 1rem;
}

.page-sub {
  color: var(--text-2);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

/* ===== Cards & Table ===== */
.panel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

.table {
  margin: 0;
  --bs-table-bg: transparent;
  color: var(--text);
}

.table thead th {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding: 0.6rem 0.9rem;
  background: transparent;
}

.table tbody td {
  padding: 0.6rem 0.9rem;
  vertical-align: middle;
  border-color: var(--border);
  font-size: 0.85rem;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--surface-2);
}

.user-name {
  font-weight: 600;
  color: var(--text);
}

.meta {
  color: var(--text-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* status dot, replaces bulky badges */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-2);
}

.status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}

.status.on {
  color: var(--text);
}
.status.on .dot {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-weak);
}
.status.off .dot {
  background: var(--text-3);
}

.usage-value {
  display: inline-block;
}

.device-count {
  color: var(--text-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* ===== Search / filter ===== */
.search-box {
  position: relative;
  max-width: 260px;
}

.search-box i {
  position: absolute;
  top: 50%;
  inset-inline-start: 0.7rem;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.85rem;
  pointer-events: none;
}

.search-box input {
  padding-inline-start: 2rem;
}

/* ===== Buttons ===== */
.btn {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.btn:focus-visible,
.btn-icon:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  /* outline: 2px solid var(--accent);
  outline-offset: 1px; */
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}

.btn-outline-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--border);
  color: var(--accent);
}

.btn-outline-primary:hover {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-warning {
  background: transparent;
  border-color: var(--border);
  color: var(--warning);
}

.btn-outline-warning:hover {
  background: var(--warning-weak);
  border-color: var(--warning);
  color: var(--warning);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--border);
  color: var(--danger);
}

.btn-outline-danger:hover {
  background: var(--danger-weak);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-lg {
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
}
.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
}

/* ===== Forms ===== */
.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 0.3rem;
}

.form-control,
.form-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  padding: 0.45rem 0.7rem;
}

.form-control:focus,
.form-select:focus {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.form-control::placeholder {
  color: var(--text-3);
}
.form-control:disabled {
  background: var(--surface-2);
  color: var(--text-2);
  opacity: 1;
}

.form-text {
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}

.form-check-input {
  background-color: var(--bg);
  border-color: var(--border);
  width: 18px;
  height: 18px;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.form-check-label {
  font-size: 0.85rem;
  color: var(--text);
}

/* ===== Alerts ===== */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.alert-danger {
  background: var(--danger-weak);
  border-color: rgba(230, 73, 95, 0.3);
  color: var(--danger);
}

.alert-success {
  background: var(--success-weak);
  border-color: rgba(47, 182, 115, 0.3);
  color: var(--success);
}

/* ===== Auth ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 320px;
}

.auth-brand {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.auth-logo {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.85rem;
  border-radius: var(--radius);
  background: var(--accent-weak);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.auth-brand h1 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: var(--text);
}

.auth-brand p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.82rem;
}

/* ===== Footer ===== */
.app-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0;
  font-size: 0.74rem;
  color: var(--text-3);
}

/* ===== Empty state ===== */
.empty-state {
  padding: 2.25rem 1rem;
  text-align: center;
  color: var(--text-2);
  font-size: 0.85rem;
}

.empty-state i {
  font-size: 1.4rem;
  color: var(--text-3);
  display: block;
  margin-bottom: 0.5rem;
}

/* ===== Stat rows (edit page usage panel) ===== */
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.stat-row + .stat-row {
  border-top: 1px solid var(--border);
}

.stat-row span:first-child {
  color: var(--text-2);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .table thead th,
  .table tbody td {
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
  }

  .app-main > .container-fluid {
    padding-top: var(--sp-4) !important;
  }
}

/* ===== App shell with sidebar ===== */
:root {
  --sidebar-w: 248px;
}

body.app-shell {
  display: block;
  min-height: 100vh;
}

.app-shell-wrap {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
}

.sidebar-brand {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
}

.sidebar-brand i {
  color: var(--accent);
  font-size: 1.1rem;
}

.sidebar-nav {
  padding: 0.7rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-link-item,
.nav-group-toggle {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.72rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: right;
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
}

.nav-link-item i,
.nav-group-label > i {
  font-size: 0.98rem;
  width: 1.15rem;
  min-width: 1.15rem;
  text-align: center;
}

.nav-link-item:hover,
.nav-group-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link-item.active,
.nav-group.open > .nav-group-toggle {
  background: var(--accent-weak);
  color: var(--accent);
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.nav-group-chevron {
  font-size: 0.72rem !important;
  width: auto !important;
  min-width: 0 !important;
  transition: transform 0.18s ease;
}

.nav-group.open > .nav-group-toggle .nav-group-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height 0.22s ease,
    opacity 0.16s ease,
    visibility 0.22s ease;
}

.nav-group.open .nav-submenu {
  max-height: 240px;
  opacity: 1;
  visibility: visible;
}

.nav-sub-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.12rem 0 0.12rem 0.45rem;
  padding: 0.48rem 0.65rem 0.48rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.8rem;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.nav-sub-link::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-2);
  opacity: 0.55;
}

.nav-sub-link i {
  width: 1rem;
  min-width: 1rem;
  text-align: center;
  font-size: 0.82rem;
}

.nav-sub-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-sub-link.active {
  color: var(--accent);
  font-weight: 600;
}

.nav-sub-link.active::before {
  background: var(--accent);
  opacity: 1;
}

.sidebar-footer {
  padding: 0.7rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.35rem;
}

.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app-content-header {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}

.app-content-body {
  flex: 1;
  padding: 1.25rem 1.25rem 2rem;
  max-width: 1200px;
}

/* Mobile sidebar */
.sidebar-toggle {
  display: none;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    box-shadow: none;
  }
  [dir="rtl"] .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  }
  .sidebar-toggle {
    display: inline-flex;
  }
}

/* ===== Dashboard stats ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 992px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}

.stat-card .label {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 0.35rem;
}

.stat-card .value {
  font-size: 1.35rem;
  font-weight: 700;
  /* letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; */
}

.stat-card .hint {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}

.stat-card .icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

/* ===== Toolbar / pagination ===== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.toolbar .search-box {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}

.toolbar select.form-select {
  width: auto;
  min-width: 120px;
}

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-2);
}

.pagination-bar .pages {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.page-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

th a.sort-link {
  color: inherit;
  text-decoration: none;
}

th a.sort-link:hover {
  color: var(--accent);
}

th .sort-ind {
  opacity: 0.45;
  font-size: 0.7rem;
  margin-inline-start: 0.2rem;
}

/* Login upgrade */
.auth-card {
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
}

.auth-page {
  background:
    radial-gradient(
      1200px 500px at 50% -10%,
      var(--accent-weak),
      transparent 60%
    ),
    var(--bg);
}

.auth-side-note {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-3);
}

/* ===== Users bulk actions ===== */
.bulk-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bs-border-color);
  background: rgba(var(--bs-secondary-rgb), 0.035);
}
.bulk-users-select,
.bulk-users-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bulk-check-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 0.86rem;
}
.bulk-check-all input,
.user-select-checkbox {
  width: 17px;
  height: 17px;
  accent-color: var(--bs-primary);
  cursor: pointer;
}
.bulk-selected-count {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  min-width: 70px;
}
.bulk-users-actions .form-select {
  min-width: 175px;
}
.bulk-check-col,
.bulk-check-cell {
  width: 42px;
  text-align: center !important;
}
.bulk-check-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 768px) {
  .bulk-users-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .bulk-users-select,
  .bulk-users-actions {
    width: 100%;
  }
  .bulk-users-actions .form-select {
    flex: 1;
    min-width: 0;
  }
}

/* ===== Users AJAX state / actions ===== */
.users-panel {
  position: relative;
  transition: opacity 0.15s ease;
}

.users-panel.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.btn-icon-danger {
  color: var(--danger);
}

.btn-icon-danger:hover {
  background: var(--danger-weak);
  color: var(--danger);
}

.actions-cell {
  white-space: nowrap;
}

.delete-user-name {
  display: block;
  margin: 0.6rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

.modal-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.modal-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.modal-body {
  font-size: 0.85rem;
}

/* ===== Mobile drawer ===== */
@media (max-width: 900px) {
  .sidebar {
    right: auto;
    left: 0;
    inset-inline-start: 0;
    transform: translateX(-105%);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  [dir="rtl"] .sidebar {
    right: auto;
    left: 0;
    transform: translateX(-105%);
  }

  .sidebar.open,
  [dir="rtl"] .sidebar.open {
    transform: translateX(0);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.25);
  }

  .sidebar-toggle {
    display: inline-flex;
    cursor: pointer;
  }

  .sidebar-toggle i {
    pointer-events: none;
  }

  .app-content {
    width: 100%;
    min-width: 0;
  }

  .app-content-body {
    width: 100%;
    max-width: none;
    padding: 1rem 0.75rem 1.5rem;
  }

  .app-content-header {
    padding: 0 0.75rem;
  }
}

/* ===== Dashboard refresh ===== */
.dashboard-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard-stats {
  margin-bottom: 0;
}
.stat-card {
  min-height: 145px;
  padding: 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.stat-kicker {
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}
.stat-card .icon {
  margin: 0;
  width: 36px;
  height: 36px;
}
.stat-card .value {
  font-size: 1.55rem;
  line-height: 1.2;
}
.stat-card-primary {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.dashboard-usage {
  font-size: 1.25rem !important;
}
.dashboard-duration {
  font-size: 1.35rem !important;
}
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 1rem;
}
.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.section-sub {
  color: var(--text-3);
  font-size: 0.72rem;
  margin-top: 0.2rem;
}
.server-card,
.quick-card,
.recent-card {
  overflow: hidden;
}
.server-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  padding: 1rem 1.1rem;
}
.server-item {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* background: var(--bg); */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.server-item span {
  color: var(--text-3);
  font-size: 0.72rem;
}
.server-item strong {
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-weak);
}
.server-badge {
  color: var(--success);
  background: var(--success-weak);
  border: 1px solid rgba(47, 182, 115, 0.22);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  white-space: nowrap;
}
.quick-actions {
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.quick-action {
  display: grid;
  grid-template-columns: 30px 1fr 20px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  font-size: 0.82rem;
}
.quick-action > i:first-child {
  color: var(--accent);
  font-size: 1rem;
}
.quick-action > i:last-child {
  color: var(--text-3);
}
.quick-action:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--text);
}
.recent-card .table-responsive {
  overflow-x: auto;
}

/* RTL mobile drawer: fixed, full-height and always opens from the RIGHT */
@media (max-width: 900px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar,
  [dir="rtl"] .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(82vw, 280px) !important;
    max-width: 280px !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    z-index: 1100 !important;
    transform: translate3d(105%, 0, 0) !important;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.24s ease,
      visibility 0s linear 0.24s;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar.open,
  [dir="rtl"] .sidebar.open {
    right: 0 !important;
    left: auto !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.24s ease;
    box-shadow: -18px 0 45px rgba(0, 0, 0, 0.22);
  }

  .sidebar-toggle {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    z-index: 1200;
  }

  .sidebar-toggle i {
    pointer-events: none;
  }

  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }
  .stat-grid.dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-card {
    min-height: 128px;
  }
}

@media (max-width: 900px) {
  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  .stat-grid.dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .stat-card {
    min-height: 116px;
    padding: 0.8rem;
  }
  .stat-card .value {
    font-size: 1.3rem;
  }
  .dashboard-usage {
    font-size: 1rem !important;
  }
  .dashboard-duration {
    font-size: 1.1rem !important;
  }
  .stat-kicker {
    font-size: 0.7rem;
  }
  .server-status-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0.75rem;
  }
  .dashboard-section-head {
    padding: 0.8rem;
  }
}

/* ===== Dashboard stat cards final alignment ===== */
.dashboard-stats .stat-card {
  min-width: 0;
  overflow: hidden;
}
.dashboard-stats .stat-head {
  min-width: 0;
}
.dashboard-stats .stat-kicker {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-stats .stat-card .value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-stats .dashboard-usage {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35rem;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.dashboard-stats .dashboard-usage > span[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.dashboard-stats .dashboard-usage .usage-separator {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--text-3);
  font-weight: 500;
}
.dashboard-stats .stat-card .hint {
  min-height: 1.25em;
}

@media (max-width: 600px) {
  .dashboard-stats .stat-card {
    min-height: 118px;
    padding: 0.8rem 0.75rem;
  }
  .dashboard-stats .stat-head {
    margin-bottom: 0.55rem;
  }
  .dashboard-stats .stat-card .icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  .dashboard-stats .stat-card .value {
    font-size: 1.18rem;
  }
  .dashboard-stats .dashboard-usage {
    font-size: 0.98rem !important;
    gap: 0.25rem;
  }
  .dashboard-stats .stat-card .hint {
    font-size: 0.68rem;
  }
}

/* ===== Settings ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.settings-card {
  padding: 1.15rem;
  overflow: visible;
}
.settings-wide {
  grid-column: 1 / -1;
}
.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-weak);
  flex: none;
}
.section-sub {
  color: var(--text-3);
  font-size: 0.76rem;
  margin-top: 0.15rem;
}
@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-wide {
    grid-column: auto;
  }
}

/* NAS management */
.nas-secret-note {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
  .nas-form .row {
    row-gap: 0.75rem;
  }
  .nas-table td,
  .nas-table th {
    white-space: normal;
  }
}

/* ===== Sessions page ===== */
.sessions-toolbar {
  padding: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.025);
}
.sessions-toolbar .search-box {
  max-width: none;
  flex: 1 1 280px;
}
.sessions-toolbar .form-select {
  min-width: 125px;
}
.sessions-panel {
  overflow: hidden;
}
.sessions-panel.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.sessions-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.summary-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 130px;
}
.summary-item + .summary-item {
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--border);
}
.summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-weak);
  color: var(--accent);
}
.summary-item small {
  display: block;
  color: var(--text-3);
  font-size: 0.7rem;
  margin-bottom: 0.1rem;
}
.summary-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
}
.summary-muted .summary-icon {
  background: var(--surface-2);
  color: var(--text-2);
}
.sessions-table th {
  white-space: nowrap;
}
.sessions-table td {
  vertical-align: middle;
}
.session-id {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connection-main {
  font-weight: 600;
  font-size: 0.82rem;
}
.duration-value,
.sessions-table .usage-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sessions-empty {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.sessions-empty .empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
.sessions-empty strong {
  color: var(--text);
  font-size: 0.85rem;
}
.sessions-empty span:last-child {
  color: var(--text-3);
  font-size: 0.75rem;
}
.page-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
@media (max-width: 700px) {
  .sessions-toolbar {
    align-items: stretch;
  }
  .sessions-toolbar .search-box {
    flex-basis: 100%;
    max-width: none;
  }
  .sessions-toolbar .form-select,
  .sessions-toolbar .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .sessions-summary {
    padding: 0.7rem;
  }
  .summary-item {
    min-width: 0;
    flex: 1;
  }
  .summary-item + .summary-item {
    padding-inline-start: 0.6rem;
  }
}

/* ===== Sessions v15 polished layout ===== */
.sessions-page-head {
  gap: 1rem;
}
.sessions-head-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.head-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
}
.head-stat i {
  color: var(--accent);
  font-size: 0.72rem;
}
.head-stat b {
  color: var(--text);
  font-size: 0.82rem;
}
.head-stat small {
  color: var(--text-3);
  font-size: 0.68rem;
}
.sessions-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 140px auto auto;
  gap: 0.65rem;
  align-items: end;
}
.sessions-search-wrap,
.sessions-filter-control {
  min-width: 0;
}
.sessions-filter-label {
  display: block;
  margin: 0 0 0.32rem;
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 600;
}
.sessions-search-wrap .search-box {
  max-width: none;
  width: 100%;
}
.sessions-toolbar .form-select,
.sessions-toolbar .form-control {
  min-height: 38px;
}
.sessions-apply {
  min-height: 38px;
  white-space: nowrap;
}
.sessions-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.8rem;
  background: var(--surface-2);
}
.sessions-summary .summary-item {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.sessions-summary .summary-item + .summary-item {
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--border);
}
.sessions-summary .muted-icon {
  background: var(--surface-2);
  color: var(--text-2);
}
.sessions-table-wrap {
  border-top: 1px solid var(--border);
}
.sessions-table thead th {
  background: var(--surface-2);
  font-size: 0.7rem;
  color: var(--text-2);
  padding: 0.75rem 0.85rem;
}
.sessions-table tbody td {
  padding: 0.78rem 0.85rem;
}
.sessions-table tbody tr {
  transition: background 0.15s ease;
}
.sessions-table tbody tr:hover td {
  background: var(--surface-2);
}
.sessions-table .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.sessions-table .sort-ind {
  color: var(--accent);
  font-size: 0.7rem;
}
.sessions-table .user-name {
  font-weight: 700;
  color: var(--text);
}
.sessions-table .meta {
  color: var(--text-3);
  font-size: 0.7rem;
}
.sessions-table .connection-main {
  direction: ltr;
  text-align: right;
}
.sessions-table .usage-value,
.sessions-table .duration-value {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.sessions-table .actions-cell .btn {
  border-radius: 8px;
}
.sessions-panel.is-loading {
  position: relative;
}
.sessions-panel.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

@media (max-width: 900px) {
  .sessions-toolbar {
    grid-template-columns: minmax(220px, 1fr) 130px 120px auto;
  }
  .sessions-toolbar .sessions-search-wrap {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .sessions-page-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .sessions-head-stats {
    width: 100%;
  }
  .head-stat {
    flex: 1;
    justify-content: center;
  }
  .sessions-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding: 0.65rem;
  }
  .sessions-toolbar .sessions-search-wrap {
    grid-column: 1 / -1;
  }
  .sessions-toolbar .sessions-filter-control {
    min-width: 0;
  }
  .sessions-toolbar .sessions-apply,
  .sessions-toolbar [data-sessions-link] {
    width: 100%;
    justify-content: center;
  }
  .sessions-summary {
    grid-template-columns: 1fr 1fr;
  }
  .sessions-summary .summary-item:last-child {
    grid-column: 1 / -1;
  }
  .sessions-table tbody tr {
    box-shadow: 0 1px 4px rgba(20, 30, 50, 0.03);
  }
  .sessions-table tbody td[data-label="کاربر"] {
    display: block;
  }
  .sessions-table tbody td[data-label="کاربر"] .user-name {
    display: block;
  }
  .sessions-table tbody td[data-label="کاربر"] .session-id {
    margin-top: 0.2rem;
  }
  .sessions-table tbody td[data-label="اتصال"] .connection-main {
    text-align: left;
  }
  .sessions-table .actions-cell {
    justify-content: flex-end;
  }
}
/* ===== NAS layout refinements ===== */
.nas-page .nas-layout {
  display: block;
}
.nas-page .nas-list-card {
  width: 100%;
  min-width: 0;
}
.nas-page .nas-form-card {
  width: 100%;
  margin-inline: 0;
}
.nas-page .nas-form {
  padding: 1.25rem 1.35rem 1.15rem;
}
.nas-page .nas-form .form-control,
.nas-page .nas-form .form-select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
}
.nas-page .nas-form textarea.form-control {
  min-height: 72px;
  resize: vertical;
}
.nas-page .nas-form .form-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.38rem;
}
.nas-page .nas-main-fields {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.25fr;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.nas-page .nas-port-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 0.8fr)) minmax(160px, 1.15fr);
  gap: 0.8rem;
  align-items: end;
}
.nas-page .nas-enabled-inline {
  min-width: 0;
}
.nas-page .nas-form .form-check {
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.nas-page .nas-form .form-check-input {
  float: none;
  margin: 0;
  flex: none;
}
.nas-page .nas-form .form-check-label {
  color: var(--text-2);
  font-size: 0.75rem;
  margin: 0;
}
.nas-page .nas-description-field {
  margin-top: 0.8rem;
}
.nas-page .nas-form-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.nas-page .nas-form-actions .btn {
  min-width: 125px;
}
.nas-page .nas-toolbar {
  grid-template-columns: minmax(0, 1fr) 150px 120px auto;
  align-items: stretch;
}
.nas-page .nas-toolbar .form-select,
.nas-page .nas-toolbar .form-control {
  width: 100%;
  min-width: 0;
}
@media (max-width: 900px) {
  .nas-page .nas-main-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nas-page .nas-main-fields > div:first-child {
    grid-column: 1 / -1;
  }
  .nas-page .nas-port-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .nas-page .nas-main-fields,
  .nas-page .nas-port-grid {
    grid-template-columns: 1fr;
  }
  .nas-page .nas-main-fields > div:first-child {
    grid-column: auto;
  }
  .nas-page .nas-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nas-page .nas-form-actions .btn {
    width: 100%;
  }
}

/* ===== NAS / Plans v16 ===== */
.page-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.nas-page-head,
.plans-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.nas-stats,
.plans-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.nas-stat-card,
.plan-stat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20, 30, 50, 0.025);
}
.nas-stat-card > span,
.plan-stat > span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
  flex: none;
}
.nas-stat-card > span.ok,
.plan-stat > span.ok {
  background: rgba(25, 190, 115, 0.11);
  color: #19a96b;
}
.nas-stat-card > span.muted,
.plan-stat > span.muted {
  background: var(--surface-2);
  color: var(--text-2);
}
.nas-stat-card small,
.plan-stat small {
  display: block;
  color: var(--text-3);
  font-size: 0.68rem;
}
.nas-stat-card strong,
.plan-stat strong {
  display: block;
  font-size: 1rem;
}
.nas-layout,
.plans-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.nas-form-card,
.nas-list-card,
.plan-form-card {
  border-radius: 16px;
  box-shadow: 0 3px 18px rgba(20, 30, 50, 0.035);
}
.nas-card-head,
.nas-list-head {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.nas-card-head h2,
.nas-list-head h2 {
  font-size: 0.95rem;
  margin: 0.15rem 0 0;
  font-weight: 700;
}
.nas-card-eyebrow {
  font-size: 0.67rem;
  color: var(--text-3);
  font-weight: 600;
}
.nas-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
}
.nas-form {
  padding: 1.1rem;
}
.nas-port-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.nas-list-head {
  border-bottom: 0;
}
.nas-list-head small {
  display: block;
  color: var(--text-3);
  font-size: 0.7rem;
  margin-top: 0.2rem;
}
.nas-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-2);
  font-size: 0.68rem;
}
.nas-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 125px 125px auto;
  gap: 0.55rem;
  padding: 0 1rem 1rem;
}
.nas-list {
  padding: 0 1rem 1rem;
  display: grid;
  gap: 0.65rem;
}
.nas-item {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  padding: 0.85rem;
  transition: 0.15s ease;
}
.nas-item:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 3px 12px rgba(20, 30, 50, 0.035);
}
.nas-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nas-item-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.nas-device-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
  flex: none;
}
.nas-item-title strong {
  display: block;
  font-size: 0.86rem;
}
.nas-item-title small {
  display: block;
  color: var(--text-3);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}
.nas-item-desc {
  margin: 0.65rem 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  color: var(--text-2);
  font-size: 0.74rem;
}
.nas-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.nas-meta-grid > div {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.nas-meta-grid small {
  display: block;
  color: var(--text-3);
  font-size: 0.62rem;
  margin-bottom: 0.15rem;
}
.nas-meta-grid b {
  font-size: 0.72rem;
}
.nas-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.nas-secret-state {
  color: var(--text-3);
  font-size: 0.67rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nas-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--text-2);
  text-align: center;
  padding: 1rem;
}
.nas-empty > span {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
.nas-empty strong {
  font-size: 0.85rem;
  color: var(--text);
}
.nas-empty small {
  font-size: 0.7rem;
  color: var(--text-3);
  max-width: 330px;
}
.nas-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-3);
}
.page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.72rem;
  color: var(--text);
}
.plans-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.plans-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  padding: 1rem;
  box-shadow: 0 3px 15px rgba(20, 30, 50, 0.03);
}
.plan-card.is-disabled {
  opacity: 0.68;
}
.plan-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  color: var(--accent);
  background: var(--accent-weak);
  border-radius: 999px;
  padding: 0.25rem 0.45rem;
}
.plan-card h3 {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.95rem;
}
.plan-card p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.7rem;
  min-height: 1.2rem;
}
.plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}
.plan-metrics > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: var(--surface-2);
}
.plan-metrics small {
  display: block;
  color: var(--text-3);
  font-size: 0.62rem;
}
.plan-metrics strong {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.15rem;
}
.plan-card-bottom {
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.plan-price {
  font-size: 0.76rem;
}
.plan-card-bottom span {
  display: block;
  color: var(--text-3);
  font-size: 0.65rem;
}
.plan-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 170px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1000px) {
  .nas-layout,
  .plans-layout {
    grid-template-columns: 1fr;
  }
  .plans-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .nas-page-head,
  .plans-page-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .nas-page-head .btn,
  .plans-page-head .btn {
    width: 100%;
  }
  .nas-stats,
  .plans-stats {
    grid-template-columns: 1fr;
  }
  .nas-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .nas-toolbar .search-box {
    grid-column: 1/-1;
  }
  .nas-toolbar .btn {
    width: 100%;
  }
  .nas-meta-grid {
    grid-template-columns: 1fr;
  }
  .nas-item-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .nas-item-foot > div {
    width: 100%;
    justify-content: flex-end;
  }
  .plans-list {
    grid-template-columns: 1fr;
  }
}

/* Confirmation modals */
.action-confirm-modal {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(10, 20, 40, 0.18);
  overflow: hidden;
}
.action-confirm-modal .modal-header {
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1rem;
}
.action-confirm-modal .modal-title {
  font-size: 0.9rem;
  font-weight: 700;
}
.action-confirm-modal .modal-body {
  padding: 1rem;
}
.action-confirm-modal .modal-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
}
.action-confirm-name {
  display: block;
  margin: 0.65rem 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 0.78rem;
}
.btn-icon-warning {
  color: #c88700;
}
.btn-icon-success {
  color: #18a66b;
}

/* ===== Dashboard v2 ===== */
.dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}
.dashboard-stats .stat-card {
  position: relative;
  min-height: 166px;
  padding: 1.05rem 1.1rem;
  overflow: hidden;
  border-radius: 18px;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.045);
  justify-content: flex-start;
}
.dashboard-stats .stat-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.8;
}
.dashboard-stat-online::after {
  background: var(--success) !important;
}
.dashboard-stat-traffic::after {
  background: var(--warning) !important;
}
/* .dashboard-stat-time::after {
  background: var(--info) !important;
} */
.stat-label-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.dashboard-stats .stat-head {
  margin-bottom: 1rem;
}
.dashboard-stats .stat-head .icon {
  border-radius: 12px;
  width: 42px;
  height: 42px;
  background: var(--accent-weak);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.dashboard-stat-online .stat-head .icon {
  background: var(--success-weak);
  color: var(--success);
}
.dashboard-stat-traffic .stat-head .icon {
  background: var(--warning-weak, var(--accent-weak));
  color: var(--warning, var(--accent));
}
.dashboard-stat-time .stat-head .icon {
  background: var(--info-weak, var(--accent-weak));
  color: var(--info, var(--accent));
}
.stat-badge {
  font-size: 0.63rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-3);
  white-space: nowrap;
}
.stat-badge.live {
  color: var(--success);
  background: var(--success-weak);
  border-color: transparent;
}
.dashboard-stats .stat-card .value {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.dashboard-stats .dashboard-usage {
  font-size: 1.7rem !important;
}
.dashboard-stats .dashboard-duration {
  font-size: 1.65rem !important;
}
.stat-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.45rem;
  color: var(--text-3);
  font-size: 0.68rem;
}
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.server-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-recent-table {
  --bs-table-bg: transparent;
}
.dashboard-recent-table thead th {
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dashboard-recent-table tbody td {
  padding: 0.72rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.dashboard-recent-table tbody tr:last-child td {
  border-bottom: 0;
}
.dashboard-recent-table tbody tr:hover {
  background: var(--surface-2);
}
.dashboard-user-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 145px;
}
.dashboard-user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent);
}
.dashboard-user-avatar.connection {
  background: var(--success-weak);
  color: var(--success);
}
.dashboard-user-cell strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
}
.dashboard-user-cell small {
  display: block;
  color: var(--text-3);
  font-size: 0.62rem;
  margin-top: 0.12rem;
}
.connection-ip {
  font-size: 0.68rem;
  color: var(--text-2);
}
.connection-time {
  font-size: 0.68rem;
  color: var(--text-2);
  white-space: nowrap;
}
.recent-table-wrap {
  overflow: auto;
}

@media (max-width: 1100px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
  .server-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .dashboard-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .dashboard-stats .stat-card {
    min-height: 145px;
    padding: 0.8rem;
    border-radius: 15px;
  }
  .dashboard-stats .stat-head {
    margin-bottom: 0.7rem;
  }
  .dashboard-stats .stat-head .icon {
    width: 36px;
    height: 36px;
  }
  .dashboard-stats .stat-card .value {
    font-size: 1.35rem;
  }
  .dashboard-stats .dashboard-usage {
    font-size: 1.1rem !important;
  }
  .dashboard-stats .dashboard-duration {
    font-size: 1.15rem !important;
  }
  .stat-badge {
    display: none;
  }
  .stat-foot {
    font-size: 0.61rem;
  }
  .server-status-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Number inputs: no spinner + non-negative numeric entry */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== Sessions v17: cleaner desktop table + clear local-test disconnect ===== */
.sessions-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}
.sessions-table .col-user {
  width: 20%;
}
.sessions-table .col-connection {
  width: 18%;
}
.sessions-table .col-start {
  width: 17%;
}
.sessions-table .col-time {
  width: 11%;
}
.sessions-table .col-usage {
  width: 12%;
}
.sessions-table .col-status {
  width: 10%;
}
.sessions-table .col-actions {
  width: 12%;
}
.sessions-table th,
.sessions-table td {
  overflow: hidden;
}
.sessions-table td {
  border-bottom: 1px solid var(--border);
}
.sessions-table tbody tr:last-child td {
  border-bottom: 0;
}
.sessions-table .connection-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sessions-table .session-id {
  max-width: 100%;
}
.sessions-table .actions-cell {
  white-space: nowrap;
}
.sessions-table .actions-cell form {
  margin: 0;
}
.sessions-table .actions-cell .btn {
  min-width: 76px;
}
.sessions-table .start-cell > div:first-child {
  font-weight: 600;
}
.sessions-table .last-update {
  margin-top: 0.2rem;
}
.sessions-table-wrap {
  overflow-x: auto;
}
@media (max-width: 1100px) {
  .sessions-table {
    min-width: 900px;
  }
}
@media (max-width: 700px) {
  .sessions-table {
    min-width: 0;
    table-layout: auto;
  }
  .sessions-table colgroup {
    display: none;
  }
  .sessions-table thead {
    display: none;
  }
  .sessions-table tbody,
  .sessions-table tbody tr,
  .sessions-table tbody td {
    display: block;
    width: 100%;
  }
  .sessions-table tbody tr {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .sessions-table tbody td {
    border: 0;
    padding: 0.35rem 0.15rem;
  }
  .sessions-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-3);
    font-size: 0.62rem;
    margin-bottom: 0.12rem;
  }
  .sessions-table .actions-cell {
    text-align: right;
    padding-top: 0.6rem;
  }
  .sessions-table .actions-cell::before {
    display: none;
  }
  .sessions-table .actions-cell .btn {
    width: 100%;
  }
}

/* ===== User edit overview ===== */
.user-overview {
  padding: 1rem 1.15rem 0;
}
.user-overview-main {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1rem;
}
.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: none;
}
.user-overview-title {
  min-width: 0;
  flex: 1;
}
.user-overview-name {
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--text);
}
.user-overview-meta {
  color: var(--text-2);
  font-size: 0.76rem;
  margin-top: 0.12rem;
}
.overview-sep {
  padding: 0 0.35rem;
  color: var(--text-3);
}
.account-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
}
.account-state.on {
  color: var(--success);
  background: var(--success-weak);
}
.account-state.danger {
  color: var(--danger);
  background: var(--danger-weak);
}
.account-state.off {
  color: var(--text-2);
}
.user-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.overview-stat {
  min-width: 0;
  padding: 0.75rem 0.8rem;
  border-left: 1px solid var(--border);
}
.overview-stat:first-child {
  border-left: 0;
}
.overview-stat span {
  display: block;
  color: var(--text-3);
  font-size: 0.7rem;
  margin-bottom: 0.18rem;
}
.overview-stat strong {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-stat small {
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 500;
}
.usage-card {
  padding: 1rem 1.1rem 0.85rem;
}
.usage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.usage-card-head > i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-weak);
  color: var(--accent);
}
.usage-card.traffic .usage-card-head > i {
  background: var(--success-weak);
  color: var(--success);
}
.usage-card.time .usage-card-head > i {
  background: var(--warning-weak);
  color: var(--warning);
}
.usage-kicker {
  display: block;
  color: var(--text-2);
  font-size: 0.72rem;
  margin-bottom: 0.1rem;
}
.usage-card-head strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.usage-progress {
  height: 7px;
  margin-top: 0.85rem;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.usage-progress .progress-bar {
  background: var(--accent);
  border-radius: 99px;
}
.usage-card.traffic .progress-bar {
  background: var(--success);
}
.usage-card.time .progress-bar {
  background: var(--warning);
}
.usage-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  color: var(--text-2);
  font-size: 0.73rem;
}
.usage-card-foot b {
  color: var(--text);
  font-weight: 650;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.info-grid > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
}
.info-grid span {
  display: block;
  color: var(--text-3);
  font-size: 0.7rem;
  margin-bottom: 0.15rem;
}
.info-grid strong {
  display: block;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
}
@media (max-width: 767.98px) {
  .user-overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .overview-stat:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 575.98px) {
  .user-overview-main {
    align-items: flex-start;
  }
  .account-state {
    margin-right: auto;
  }
  .user-overview-meta {
    font-size: 0.7rem;
  }
}

/* ===== User recharge / renewal queue ===== */
.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-kicker {
  color: var(--text-2);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}
.page-sub {
  color: var(--text-2);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.recharge-user-results {
  display: grid;
  gap: 0.55rem;
}
.recharge-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: var(--surface-2);
}
.recharge-user-row:hover,
.recharge-user-row.selected {
  border-color: var(--primary);
  background: var(--primary-weak);
}
.recharge-user-row div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.recharge-user-row small {
  color: var(--text-2);
}
.usage-mini {
  color: var(--text-2);
  font-size: 0.8rem;
  direction: rtl;
}
.recharge-user-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.recharge-user-banner div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.recharge-user-banner span {
  font-size: 0.78rem;
  color: var(--text-2);
}
.recharge-user-banner strong {
  font-size: 1.1rem;
}
.section-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.current-package h2 {
  font-size: 1.2rem;
  margin: 0.55rem 0 1rem;
}
.package-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
}
.package-badge.active {
  background: var(--success-weak);
  color: var(--success);
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.package-grid > div {
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.package-grid small {
  display: block;
  color: var(--text-2);
  margin-bottom: 0.3rem;
}
.package-grid strong {
  font-size: 0.9rem;
}
.empty-soft {
  color: var(--text-2);
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.queue-list {
  display: grid;
  gap: 0.6rem;
}
.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.queue-item > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.queue-item small {
  color: var(--text-2);
  font-size: 0.72rem;
}
@media (max-width: 768px) {
  .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recharge-user-row,
  .recharge-user-banner,
  .queue-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .recharge-user-row .usage-mini {
    width: 100%;
  }
}

/* ===== Recharge v2 ===== */
.recharge-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.recharge-alert {
  border-radius: 14px;
}
.recharge-search-input {
  position: relative;
}
.recharge-search-input > i {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  z-index: 2;
}
.recharge-search-input .form-control {
  padding-right: 2.5rem;
}
.recharge-user-row {
  min-height: 68px;
}
.user-result-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
}
.user-result-main span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.user-result-main small,
.user-result-meta {
  color: var(--text-2);
  font-size: 0.78rem;
}
.user-result-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.user-result-meta b {
  color: var(--primary);
  font-weight: 600;
}
.recharge-selected {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
}
.selected-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 1.15rem;
}
.selected-user-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.selected-user-copy small,
.selected-user-copy span {
  color: var(--text-2);
  font-size: 0.76rem;
}
.selected-user-copy strong {
  font-size: 1.05rem;
}
.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.section-caption {
  color: var(--text-2);
  font-size: 0.78rem;
}
.current-package-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 0 0.8rem;
  border-bottom: 1px solid var(--border);
}
.current-package-title small {
  color: var(--text-2);
}
.current-package-title h2 {
  font-size: 1.2rem;
  margin: 0.2rem 0 0;
}
.current-package-id {
  color: var(--text-2);
  font-size: 0.75rem;
}
.usage-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.9rem;
}
.usage-mini-card {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.usage-mini-head {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 0.76rem;
}
.usage-mini-card > strong {
  display: block;
  font-size: 1rem;
  margin: 0.5rem 0 0.15rem;
}
.usage-mini-card > small {
  color: var(--text-2);
  font-size: 0.7rem;
}
.usage-mini-card > em {
  display: block;
  font-size: 0.68rem;
  color: var(--text-2);
  font-style: normal;
  margin-top: 0.25rem;
}
.mini-progress {
  height: 5px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
  margin-top: 0.55rem;
}
.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.queue-list.v2 {
  display: grid;
  gap: 0.55rem;
}
.queue-item.v2 {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}
.queue-order {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.queue-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.queue-copy strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-copy small {
  color: var(--text-2);
  font-size: 0.68rem;
}
.queue-remove-form {
  margin: 0;
}
.recharge-plan-box {
  margin-bottom: 1rem;
}
.plan-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.plan-choice {
  display: block;
  cursor: pointer;
}
.plan-choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plan-choice-inner {
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  background: var(--surface-2);
  transition: 0.18s;
}
.plan-choice:hover .plan-choice-inner {
  border-color: var(--primary);
}
.plan-choice > input:checked + .plan-choice-inner {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
  background: var(--primary-weak);
}
.plan-choice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.plan-choice-top i {
  opacity: 0;
  color: var(--primary);
}
.plan-choice > input:checked + .plan-choice-inner .plan-choice-top i {
  opacity: 1;
}
.plan-choice-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.plan-choice-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.5rem;
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.7rem;
  color: var(--text-2);
}
.plan-choice-stats i {
  color: var(--primary);
}
.plan-price {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
}
.recharge-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.recharge-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--text-2);
  font-size: 0.75rem;
}
.recharge-note i {
  color: var(--primary);
  margin-top: 0.1rem;
}
@media (max-width: 992px) {
  .usage-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-choice-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .recharge-hero,
  .recharge-submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .recharge-selected {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .recharge-selected .ms-auto {
    margin-right: 0 !important;
  }
  .user-result-meta {
    display: none;
  }
  .usage-panels {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .usage-panels {
    grid-template-columns: 1fr;
  }
  .queue-item.v2 {
    grid-template-columns: 28px 1fr auto;
  }
}

/* Recharge v11 refinements */
.recharge-page {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.recharge-hero {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}
.recharge-search.panel-card {
  border-radius: 18px;
}
.recharge-user-row {
  background: var(--surface);
  padding: 1rem 1.1rem;
}
.recharge-selected {
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
}
.usage-mini-card {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.usage-mini-card strong {
  font-size: 1.15rem;
  line-height: 1.35;
}
.usage-mini-card.validity-card {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: var(--primary-weak);
}
.usage-mini-card.accent-card {
  background: var(--surface);
}
.plan-choice-inner {
  height: 100%;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.plan-choice-stats span {
  background: var(--surface);
}
.recharge-plan-box {
  border-radius: 18px;
}
.recharge-submit-row {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 1rem;
  margin-top: 1.2rem;
  border-top: 0;
}
.recharge-note {
  max-width: 70%;
}
@media (max-width: 768px) {
  .recharge-note {
    max-width: 100%;
  }
  .recharge-hero {
    align-items: flex-start;
  }
  .usage-mini-card {
    min-height: 125px;
  }
}

/* User detail redesign */
.edit-user-page {
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.edit-user-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}
.edit-user-title-wrap {
  min-width: 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 12px;
}
.back-link:hover {
  color: #334155;
}
.edit-title-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
.big-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eef2ff;
  color: #4057d6;
  font-size: 25px;
  flex: 0 0 auto;
}
.edit-subtitle {
  color: #64748b;
  font-size: 13px;
}
.edit-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.account-state.warning {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.user-stat-card {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  padding: 17px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background:var(--surface-2);
  color: #475569;
  font-size: 18px;
  transition: 0.18s;
}
.user-stat-card.is-online .stat-icon {
  background: #ecfdf3;
  color: #16a34a;
}
.user-stat-card.is-online .stat-icon i {
  color: #16a34a;
}
.user-stat-card small {
  display: block;
  color: #64748b;
  font-size: 11px;
  margin-bottom: 3px;
}
.user-stat-card strong {
  display: block;
  font-size: 17px;
  color: #0f172a;
}
.user-stat-card em {
  display: block;
  font-style: normal;
  color: #94a3b8;
  font-size: 11px;
  margin-top: 3px;
}
.active-plan-card {
  padding: 20px;
}
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-title {
  font-size: 16px;
  font-weight: 800;
  color: #172033;
}
.section-caption {
  font-size: 12px;
  color: #8a94a6;
}
.active-plan-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 15px;
  border-bottom: 1px solid #edf0f4;
}
.active-plan-main small {
  color: #8a94a6;
}
.active-plan-main h2 {
  font-size: 22px;
  margin: 4px 0 0;
}
.plan-meta-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.plan-meta-pills span,
.count-badge {
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
}
.quota-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 15px;
}
.quota-card {
  border: 1px solid #edf0f4;
  border-radius: 14px;
  padding: 14px;
  background: #fbfcfe;
}
.quota-head {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
}
.quota-head i {
  font-size: 17px;
}
.quota-card strong {
  display: block;
  font-size: 20px;
  margin: 9px 0 4px;
  color: #111827;
}
.quota-card small {
  display: block;
  color: #8a94a6;
  min-height: 34px;
  line-height: 1.8;
  font-size: 11px;
}
.quota-progress {
  height: 5px;
  background: #e9edf3;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.quota-progress span {
  display: block;
  height: 100%;
  background: #4b5fd5;
  border-radius: 99px;
}
.connection-card {
  padding: 20px;
}
.connection-facts {
  display: grid;
  gap: 0;
}
.connection-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  /* border-bottom: 1px solid #edf0f4; */
}
.connection-facts > div:last-child {
  border-bottom: 0;
}
.connection-facts span {
  font-size: 12px;
  color: #8a94a6;
}
.connection-facts b {
  font-size: 12px;
  color: #253047;
  text-align: left;
}
.reserved-list {
  padding: 12px 16px 16px;
}
.reserved-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e8ecf2;
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
  background: #fcfdff;
}
.reserved-number {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef2ff;
  color: #4057d6;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}
.reserved-info {
  flex: 1;
  min-width: 0;
}
.reserved-info strong {
  display: block;
  font-size: 14px;
}
.reserved-info div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 11px;
  margin-top: 5px;
}
.reserved-info small {
  display: block;
  color: #9aa3b2;
  font-size: 10px;
  margin-top: 5px;
}
.reserved-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reserved-actions form {
  margin: 0;
}
.btn-icon-danger {
  color: #dc2626 !important;
}
.mini-sessions {
  padding: 10px 16px 16px;
}
.mini-session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f4;
}
.mini-session:last-child {
  border-bottom: 0;
}
.mini-session > div {
  flex: 1;
  min-width: 0;
}
.mini-session strong {
  display: block;
  font-size: 12px;
}
.mini-session small {
  display: block;
  color: #8a94a6;
  font-size: 10px;
  margin-top: 3px;
}
.mini-session > b {
  font-size: 10px;
  color: #64748b;
}
.session-status {
  width: 9px;
  height: 9px;
  font-size: 8px;
}
.session-status.online {
  color: #16a34a;
}
.session-status.offline {
  color: #cbd5e1;
}
.small-link {
  font-size: 11px;
  color: #4057d6;
  text-decoration: none;
}
.history-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 999px;
}
.history-status i {
  font-size: 6px;
}
.history-status.active {
  background: #ecfdf3;
  color: #15803d;
}
.history-status.queued {
  background: #eff6ff;
  color: #2563eb;
}
.history-status.completed {
  background: #f1f5f9;
  color: #475569;
}
.history-status.expired {
  background: #fff7ed;
  color: #c2410c;
}
.history-status.cancelled {
  background: #fef2f2;
  color: #dc2626;
}
.table-meta {
  font-size: 9px;
  color: #9aa3b2;
  margin-top: 3px;
}
.user-package-history th {
  font-size: 11px;
  color: #7b8494;
  white-space: nowrap;
}
.user-package-history td {
  font-size: 11px;
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.switch-row input {
  display: none;
}
.switch-ui {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: #cbd5e1;
  position: relative;
}
.switch-ui:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  right: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}
.switch-row input:checked + .switch-ui {
  background: #4b5fd5;
}
.switch-row input:checked + .switch-ui:after {
  right: 2px;
}
.switch-row strong,
.switch-row small {
  display: block;
}
.switch-row strong {
  font-size: 12px;
}
.switch-row small {
  color: #8a94a6;
  font-size: 10px;
  margin-top: 2px;
}
.summary-list > div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f4;
  font-size: 11px;
}
.summary-list > div:last-child {
  border-bottom: 0;
}
.summary-list span {
  color: #8a94a6;
}
.summary-list b {
  color: #263247;
}
@media (max-width: 1100px) {
  .user-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quota-grid {
    grid-template-columns: 1fr;
  }
  .edit-user-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .edit-head-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 650px) {
  .user-stat-grid {
    grid-template-columns: 1fr;
  }
  .active-plan-main {
    align-items: flex-start;
    flex-direction: column;
  }
  .reserved-item {
    align-items: flex-start;
  }
  .reserved-actions {
    margin-right: auto;
    flex-direction: column;
  }
  .edit-title-line {
    align-items: flex-start;
  }
  .big-user-avatar {
    width: 48px;
    height: 48px;
  }
  .user-stat-card {
    padding: 13px;
  }
}

/* User detail final refinements */
.date-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
}
.date-value {
  direction: rtl;
  /* unicode-bidi: isolate; */
  display: inline-block;
  white-space: nowrap;
}
.edit-user-page .user-stat-card strong {
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}
.edit-user-page .quota-card strong {
  font-size: 14px;
  line-height: 1.7;
}
.edit-user-page .quota-card .date-value {
  font-weight: 500;
}
.edit-user-page .quota-progress.calendar-progress {
  margin-top: 10px;
}
.edit-user-page .quota-progress.calendar-progress span {
  background: #16a34a;
}
.edit-user-page .connection-facts b {
  font-size: 11px;
}
.edit-user-page .reserved-list,
.edit-user-page .mini-sessions {
  min-height: 250px;
}
.edit-user-page .reserved-item {
  min-height: 82px;
}
.edit-user-page .mini-session {
  min-height: 56px;
}
.edit-user-page .mini-session strong {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-weight: 700;
}
.edit-user-page .mini-session small {
  white-space: nowrap;
}
.edit-user-page .reserved-actions {
  flex: 0 0 auto;
}
@media (max-width: 650px) {
  .edit-user-page .reserved-list,
  .edit-user-page .mini-sessions {
    min-height: 0;
  }
  .edit-user-page .user-stat-card strong {
    white-space: normal;
  }
}

/* Recharge page - clean dashboard redesign */
.recharge-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2px 32px;
}
.recharge-page .recharge-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 20px 24px;
  border: 1px solid #e7ebf2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
}
.recharge-page .page-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 5px;
}
.recharge-page .page-title {
  font-size: 23px;
  font-weight: 800;
  color: #172033;
  margin: 0 !important;
}
.recharge-page .page-sub {
  font-size: 12px;
  color: #8a94a6;
  margin-top: 5px;
  line-height: 1.8;
}
.recharge-page .recharge-search {
  padding: 18px !important;
  border-radius: 20px !important;
  border: 1px solid #e7ebf2;
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
}
.recharge-page .recharge-search .form-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 7px;
}
.recharge-page .recharge-search-input .form-control {
  height: 44px;
  border-radius: 12px;
  background: #f8fafc;
  border-color: #e5e9f0;
  font-size: 13px;
}
.recharge-page .recharge-search .btn {
  height: 44px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.recharge-page .recharge-user-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px !important;
}
.recharge-page .recharge-user-row {
  min-height: 70px;
  padding: 10px 13px;
  border-radius: 14px;
  background: #fbfcfe;
  border: 1px solid #e7ebf2;
  transition: 0.16s ease;
}
.recharge-page .recharge-user-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
  border-color: #cfd7ff;
  background: #fff;
}
.recharge-page .recharge-user-row.selected {
  border-color: #6373df;
  background: #f4f6ff;
  box-shadow: 0 0 0 2px rgba(75, 95, 213, 0.07);
}
.recharge-page .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.recharge-page .user-result-main {
  gap: 10px;
}
.recharge-page .user-result-main strong {
  font-size: 13px;
  color: #172033;
}
.recharge-page .user-result-main small {
  font-size: 10px;
  color: #8a94a6;
}
.recharge-page .user-result-meta {
  font-size: 10px;
  gap: 10px;
}
.recharge-page .user-result-meta b {
  font-size: 10px;
}
.recharge-page .recharge-selected {
  padding: 13px 16px;
  border-radius: 16px !important;
  background: #fff;
  border: 1px solid #e7ebf2;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.recharge-page .selected-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.recharge-page .selected-user-copy strong {
  font-size: 14px;
}
.recharge-page .selected-user-copy small,
.recharge-page .selected-user-copy span {
  font-size: 10px;
}
.recharge-page .recharge-selected .btn {
  font-size: 11px;
  border-radius: 9px;
}
.recharge-page .panel-card {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.025);
}
.recharge-page .section-title {
  font-size: 14px;
  font-weight: 800;
  color: #172033;
}
.recharge-page .section-caption {
  font-size: 10px;
  line-height: 1.8;
}
.recharge-page .package-badge {
  font-size: 10px;
  padding: 5px 9px;
}
.recharge-page .current-package-title {
  padding: 13px 0 11px;
}
.recharge-page .current-package-title h2 {
  font-size: 19px;
  font-weight: 800;
}
.recharge-page .current-package-title small {
  font-size: 10px;
}
.recharge-page .current-package-id {
  font-size: 10px;
}
.recharge-page .usage-panels {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.recharge-page .usage-mini-card {
  min-height: 118px;
  padding: 12px;
  border-radius: 13px;
}
.recharge-page .usage-mini-head {
  font-size: 10px;
}
.recharge-page .usage-mini-head i {
  font-size: 14px;
}
.recharge-page .usage-mini-card > strong {
  font-size: 14px;
  line-height: 1.65;
  margin: 8px 0 3px;
  font-weight: 800;
  color: #172033;
}
.recharge-page .usage-mini-card > small {
  font-size: 9px;
  line-height: 1.7;
}
.recharge-page .usage-mini-card > em {
  font-size: 9px;
}
.recharge-page .mini-progress {
  height: 4px;
  margin-top: 8px;
}
.recharge-page .usage-mini-card.validity-card {
  background: #f5f7ff;
}
.recharge-page .queue-list.v2 {
  gap: 7px;
}
.recharge-page .queue-item.v2 {
  min-height: 68px;
  padding: 9px;
  border-radius: 12px;
  background: #fbfcfe;
}
.recharge-page .queue-order {
  width: 27px;
  height: 27px;
  font-size: 10px;
}
.recharge-page .queue-copy strong {
  font-size: 11px;
}
.recharge-page .queue-copy small {
  font-size: 9px;
  line-height: 1.7;
}
.recharge-page .btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.recharge-page .recharge-plan-box {
  padding: 18px !important;
  border-radius: 18px;
  margin-bottom: 0;
}
.recharge-page .plan-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.recharge-page .plan-choice-inner {
  min-height: 125px;
  padding: 12px;
  border-radius: 14px;
}
.recharge-page .plan-choice-top strong {
  font-size: 12px;
}
.recharge-page .plan-choice-stats {
  gap: 4px;
  margin-top: 8px;
}
.recharge-page .plan-choice-stats span {
  font-size: 9px;
  padding: 4px 6px;
  border-radius: 8px;
}
.recharge-page .plan-price {
  font-size: 10px;
  margin-top: 7px;
}
.recharge-page .recharge-submit-row {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
}
.recharge-page .recharge-note {
  font-size: 10px;
  line-height: 1.8;
}
.recharge-page .recharge-submit-row .btn {
  font-size: 11px;
  border-radius: 10px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .recharge-page .usage-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recharge-page .plan-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .recharge-page .recharge-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }
  .recharge-page .recharge-user-results {
    grid-template-columns: 1fr;
  }
  .recharge-page .recharge-user-row {
    min-height: 64px;
  }
  .recharge-page .usage-panels {
    grid-template-columns: 1fr 1fr;
  }
  .recharge-page .plan-choice-grid {
    grid-template-columns: 1fr;
  }
  .recharge-page .recharge-submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .recharge-page .recharge-note {
    max-width: none;
  }
}
@media (max-width: 480px) {
  .recharge-page .usage-panels {
    grid-template-columns: 1fr;
  }
  .recharge-page .recharge-search {
    padding: 13px !important;
  }
}

/* Recharge user picker — refined alignment */
.recharge-page .recharge-user-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px !important;
}
.recharge-page .recharge-user-row {
  min-height: 74px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  direction: rtl;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.recharge-page .recharge-user-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--surface-2);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
}
.recharge-page .recharge-user-row.selected {
  border-color: var(--primary);
  background: var(--primary-weak);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent);
}
.recharge-page .user-result-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.recharge-page .user-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}
.recharge-page .user-result-main > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  line-height: 1.25;
}
.recharge-page .user-result-main strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.recharge-page .user-result-main small {
  font-size: 0.69rem;
  color: var(--text-2);
  white-space: nowrap;
}
.recharge-page .user-result-meta {
  min-width: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  color: var(--text-2);
  font-size: 0.68rem;
  line-height: 1.3;
  text-align: left;
  direction: rtl;
}
.recharge-page .user-result-meta span {
  white-space: nowrap;
}
.recharge-page .user-result-meta b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: 0.69rem;
  font-weight: 600;
  white-space: nowrap;
}
.recharge-page .user-result-meta b i {
  font-size: 0.62rem;
}
@media (max-width: 768px) {
  .recharge-page .recharge-user-results {
    grid-template-columns: 1fr;
  }
  .recharge-page .recharge-user-row {
    min-height: 68px;
  }
  .recharge-page .user-result-meta {
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .recharge-page .recharge-user-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .recharge-page .user-result-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: right;
  }
}

/* ===== Recharge user picker - aligned list ===== */
.recharge-page .recharge-user-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px !important;
}
.recharge-page .recharge-user-row {
  min-height: 68px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 20px;
  direction: rtl;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.recharge-page .recharge-user-row:hover {
  transform: none;
  border-color: #cbd4ff;
  background: #fbfcff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.045);
}
.recharge-page .recharge-user-row.selected {
  border-color: #596bdc;
  background: #f6f7ff;
  box-shadow: inset 3px 0 0 #596bdc;
}
.recharge-page .user-result-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}
.recharge-page .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f1f3ff;
  color: #5264d8;
  font-size: 15px;
  border: 1px solid #e1e5ff;
}
.recharge-page .user-result-main > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  line-height: 1.3;
}
.recharge-page .user-result-main strong {
  font-size: 13px;
  font-weight: 800;
  color: #172033;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recharge-page .user-result-main small {
  font-size: 10px;
  color: #8a94a6;
}
.recharge-page .user-result-meta {
  min-width: 180px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  color: #7b8494;
  font-size: 10px;
  line-height: 1.4;
  direction: rtl;
}
.recharge-page .user-result-meta span {
  white-space: nowrap;
  text-align: right;
}
.recharge-page .user-result-meta b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 70px;
  padding: 6px 9px;
  border-radius: 9px;
  background: #f4f6ff;
  color: #5264d8;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.recharge-page .user-result-meta b i {
  font-size: 9px;
}
.recharge-page .recharge-user-row.selected .user-result-meta b {
  background: #596bdc;
  color: #fff;
}
.recharge-page .recharge-user-row.selected .user-avatar {
  background: #e9edff;
  color: #4358d1;
}
@media (max-width: 650px) {
  .recharge-page .recharge-user-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .recharge-page .user-result-meta {
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr auto;
    padding-right: 49px;
  }
}

/* Date/time must remain visually ordered inside RTL pages. */
.date-value {
  direction: ltr !important;
  unicode-bidi: isolate;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  /* font-variant-numeric: tabular-nums; */
}

/* ===== Plans / Recharge final redesign ===== */
.date-value {
  direction: ltr !important;
  /* unicode-bidi: isolate; */
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.plans-page {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.plans-page-head {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 5px 22px rgba(15, 23, 42, 0.035);
  margin-bottom: 1rem;
}
.plans-page-head .page-title {
  font-size: 1.55rem;
  margin: 0.1rem 0;
  font-weight: 800;
}
.plans-page-head .page-sub {
  font-size: 0.76rem;
}
.plans-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.plan-stat {
  min-height: 72px;
  padding: 0.8rem 1rem;
  border-radius: 16px;
}
.plans-layout {
  display: block;
}
.plan-form-card {
  margin-bottom: 1rem;
  border-radius: 18px;
  overflow: hidden;
}
.plan-form-card .nas-card-head {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  padding: 1rem 1.2rem;
}
.plan-form-card form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.8rem 1rem !important;
  padding: 1.1rem 1.2rem !important;
}
.plan-form-card form > .col-12:first-of-type {
  grid-column: span 2;
}
.plan-form-card .form-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
}
.plan-form-card .form-control,
.plan-form-card .form-select {
  min-height: 42px;
  border-radius: 11px;
}
.plan-form-card .form-text {
  font-size: 0.64rem;
}
.plans-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.plan-card {
  padding: 1rem;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
  display: flex;
  flex-direction: column;
  min-height: 235px;
}
.plan-card-top {
  min-height: 72px;
}
.plan-card h3 {
  font-size: 0.95rem;
  margin: 0.45rem 0 0.15rem;
}
.plan-card p {
  font-size: 0.68rem;
}
.plan-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 0;
}
.plan-metrics > div {
  padding: 0.62rem 0.65rem;
  border-radius: 11px;
}
.plan-metrics small {
  font-size: 0.61rem;
}
.plan-metrics strong {
  font-size: 0.75rem;
}
.plan-card-bottom {
  margin-top: auto;
  padding-top: 0.75rem;
}
.plan-card-bottom .plan-price {
  display: none;
}
.plan-card-bottom > div:first-child span {
  font-size: 0.67rem;
}
.plan-card-bottom .btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.recharge-user-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.recharge-user-row {
  min-height: 70px !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) 180px 100px;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
.recharge-user-row:hover,
.recharge-user-row.selected {
  border-color: var(--primary) !important;
  background: var(--primary-weak) !important;
}
.user-result-main {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.user-result-main span:last-child {
  min-width: 0;
}
.user-result-main strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
}
.user-result-main small {
  font-size: 0.66rem;
  line-height: 1.5;
}
.user-result-meta {
  display: contents !important;
}
.user-result-meta > span {
  font-size: 0.68rem;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}
.user-result-meta > b {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 78px;
  padding: 0.42rem 0.55rem;
  border-radius: 9px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.recharge-user-row.selected .user-result-meta > b {
  background: var(--primary);
  color: #fff;
}
@media (max-width: 1050px) {
  .plans-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-form-card form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-form-card form > * {
    grid-column: span 1 !important;
  }
  .plan-form-card form > .col-12 {
    grid-column: 1/-1 !important;
  }
  .recharge-user-row {
    grid-template-columns: minmax(180px, 1fr) 150px 90px;
  }
}
@media (max-width: 700px) {
  .plans-list {
    grid-template-columns: 1fr;
  }
  .plans-stats {
    grid-template-columns: 1fr;
  }
  .plan-form-card form {
    grid-template-columns: 1fr;
  }
  .recharge-user-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .user-result-meta > span {
    text-align: right;
  }
  .user-result-meta > b {
    justify-self: start;
  }
  .user-result-meta {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
  }
}

/* ===== Plans index + separate plan editor ===== */
.plans-index-page {
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 32px;
}
.plans-page-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px !important;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);
  margin-bottom: 16px;
}
.plans-page-head-copy {
  min-width: 0;
}
.plans-page-head .page-kicker {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 3px;
}
.plans-page-head .page-title {
  font-size: 28px !important;
  line-height: 1.3;
  margin: 0 0 6px !important;
}
.plans-page-head .page-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.8;
}
.plans-page-head > .btn {
  flex: 0 0 auto;
  padding: 11px 18px;
  border-radius: 11px;
  font-weight: 700;
}
.plans-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.plan-stat {
  min-height: 84px !important;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
  border-radius: 16px !important;
}
.plan-stat strong {
  font-size: 20px !important;
}
.plans-index-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 0 14px 14px;
  box-shadow: 0 5px 24px rgba(15, 23, 42, 0.035);
}
.plans-index-toolbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.plans-index-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plans-index-toolbar span {
  font-size: 13px;
  color: var(--text-2);
}
.plans-index-toolbar strong {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
}
.plan-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) minmax(390px, 1.7fr) auto;
  align-items: center;
  gap: 20px;
  padding: 17px 14px;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: 0.18s;
  background: #fff;
}
.plan-row + .plan-row {
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.plan-row:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.plan-row.is-disabled {
  opacity: 0.72;
}
.plan-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.plan-row-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 17px;
}
.plan-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plan-row-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-row-main p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-row-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 8px;
}
.plan-row-metrics > div {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  text-align: center;
}
.plan-row-metrics small {
  display: block;
  color: var(--text-2);
  font-size: 10px;
  margin-bottom: 3px;
}
.plan-row-metrics strong {
  display: block;
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  direction: rtl;
}
.plan-row-actions .btn {
  border-radius: 9px;
  white-space: nowrap;
}
.plan-users {
  font-size: 11px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
}
.plans-empty {
  text-align: center;
  padding: 50px !important;
}

.plan-edit-page {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 36px;
}
.plan-edit-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  margin: 3px 4px 12px;
}
.plan-edit-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}
.plan-edit-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);
  margin-bottom: 16px;
}
.plan-edit-hero-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 23px;
}
.plan-edit-hero-copy {
  min-width: 0;
  flex: 1;
}
.plan-edit-hero-copy .page-kicker {
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
}
.plan-edit-hero-copy h1 {
  font-size: 22px;
  margin: 2px 0 4px;
  font-weight: 850;
}
.plan-edit-hero-copy p {
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.8;
}
.plan-edit-hero-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.plan-users-count {
  font-size: 11px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.plan-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 16px;
}
.plan-edit-main-card,
.plan-preview-card,
.plan-settings-card {
  border-radius: 20px;
  overflow: hidden;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.section-heading > div span {
  display: block;
  font-size: 10px;
  color: var(--text-2);
  margin-bottom: 2px;
}
.section-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.section-heading > i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
}
.section-heading.compact {
  padding: 15px 17px;
}
.plan-edit-fields {
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}
.plan-edit-fields .field.full {
  grid-column: 1/-1;
}
.plan-edit-fields .form-label {
  font-size: 11px;
  font-weight: 750;
  color: var(--text);
  margin-bottom: 7px;
}
.plan-edit-fields .form-control,
.plan-edit-fields .form-select {
  min-height: 44px;
  border-radius: 11px;
}
.plan-edit-fields textarea.form-control {
  resize: vertical;
}
.form-hint {
  font-size: 9px;
  color: var(--text-2);
  margin-top: 5px;
}
.input-group-modern {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}
.input-with-suffix {
  position: relative;
}
.input-with-suffix .form-control {
  padding-left: 58px;
}
.input-with-suffix > span {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-2);
  font-weight: 700;
  pointer-events: none;
}
.plan-edit-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-preview-live {
  padding: 17px;
}
.preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preview-status {
  font-size: 10px;
  color: #15965b;
  background: #eaf9f0;
  padding: 5px 8px;
  border-radius: 8px;
}
.plan-preview-live h3 {
  font-size: 18px;
  margin: 15px 0;
}
.preview-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.preview-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}
.preview-metrics small {
  font-size: 9px;
  color: var(--text-2);
}
.preview-metrics strong {
  font-size: 11px;
}
.preview-price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 800;
}
.plan-settings-card {
  padding-bottom: 8px;
}
.plan-enabled-row {
  margin: 12px 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.plan-enabled-row strong {
  display: block;
  font-size: 11px;
}
.plan-enabled-row small {
  display: block;
  font-size: 9px;
  color: var(--text-2);
  margin-top: 3px;
}
.form-switch-big {
  width: 44px;
  height: 24px;
  position: relative;
  flex: 0 0 44px;
}
.form-switch-big input {
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 20px;
  background: #d6dbe5;
  outline: 0;
  cursor: pointer;
  transition: 0.2s;
}
.form-switch-big input:checked {
  background: var(--primary);
}
.form-switch-big:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  right: 23px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transition: 0.2s;
}
.form-switch-big input:checked:after {
  right: 3px;
}
.plan-edit-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
}
.plan-edit-actions .btn {
  min-height: 42px;
  border-radius: 11px;
  padding: 9px 16px;
  font-weight: 750;
}
@media (max-width: 1050px) {
  .plan-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .plan-row-actions {
    justify-content: flex-start;
  }
  .plans-stats {
    grid-template-columns: 1fr;
  }
  .plan-edit-grid {
    grid-template-columns: 1fr;
  }
  .plan-edit-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .plan-edit-actions {
    grid-column: auto;
  }
  .plan-edit-hero-status {
    margin-right: auto;
  }
}
@media (max-width: 700px) {
  .plans-page-head {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .plans-page-head > .btn {
    width: 100%;
  }
  .plan-row-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-edit-hero {
    align-items: flex-start;
  }
  .plan-edit-hero-status {
    display: none;
  }
  .plan-edit-fields {
    grid-template-columns: 1fr;
    padding: 17px;
  }
  .plan-edit-fields .field.full {
    grid-column: auto;
  }
  .plan-edit-side {
    grid-template-columns: 1fr;
  }
  .plan-edit-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .plan-edit-actions .btn {
    width: 100%;
    text-align: center;
  }
  .input-group-modern {
    grid-template-columns: 1fr 95px;
  }
}

/* ===== Final polish: recharge user picker + plan editor ===== */
.recharge-user-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.recharge-user-row {
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) 92px !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.recharge-user-row:hover {
  border-color: #c9d2e4 !important;
  background: var(--surface-2) !important;
  transform: none !important;
}
.recharge-user-row.selected {
  border-color: var(--primary) !important;
  background: var(--primary-weak) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
.user-result-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.user-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  background: #f1f4fa !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  font-size: 15px !important;
}
.recharge-user-row.selected .user-avatar {
  background: #eef1ff !important;
  color: var(--primary) !important;
  border-color: #d8ddff !important;
}
.user-result-main span:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.user-result-main strong {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
}
.user-result-main small {
  font-size: 10px !important;
  color: var(--text-2) !important;
  line-height: 1.4 !important;
}
.user-result-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.user-result-meta > span {
  font-size: 10px !important;
  color: var(--text-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right !important;
}
.user-result-meta > b {
  justify-self: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 76px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  background: var(--surface-2) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
.recharge-user-row.selected .user-result-meta > b {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

.plan-edit-page {
  max-width: 1160px !important;
}
.plan-edit-hero {
  padding: 20px 24px !important;
  border-radius: 18px !important;
}
.plan-edit-hero-status {
  min-width: 190px !important;
  align-items: flex-end !important;
}
.plan-toggle-form {
  margin: 0 !important;
}
.plan-toggle-form .btn {
  min-width: 135px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
.plan-edit-main-card {
  min-width: 0 !important;
}
.plan-edit-fields {
  gap: 16px 18px !important;
  padding: 20px !important;
}
.plan-edit-fields .form-control,
.plan-edit-fields .form-select {
  background: #fff !important;
}
.plan-preview-card {
  position: sticky;
  top: 16px;
}
.plan-preview-live {
  padding: 18px !important;
}
.preview-metrics {
  grid-template-columns: 1fr !important;
}
.plan-settings-card {
  padding-bottom: 14px !important;
}
.plan-status-panel {
  margin: 12px 14px 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface-2);
}
.plan-status-panel.is-on {
  border-color: #bfe8d0;
  background: #f1fbf5;
}
.plan-status-panel.is-off {
  border-color: #e4d9c7;
  background: #fcf8f1;
}
.plan-status-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #e8f7ee;
  color: #15965b;
}
.plan-status-panel.is-off .plan-status-icon {
  background: #fff0da;
  color: #b7791f;
}
.plan-status-panel strong {
  display: block;
  font-size: 12px;
  color: var(--text);
}
.plan-status-panel small {
  display: block;
  font-size: 9px;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.7;
}
.plan-enabled-row {
  display: none !important;
}
.plan-edit-actions {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.plan-edit-actions .btn {
  min-height: 40px !important;
}
@media (max-width: 900px) {
  .recharge-user-row {
    grid-template-columns: minmax(200px, 1fr) minmax(120px, 180px) 86px !important;
  }
  .plan-edit-hero {
    align-items: flex-start !important;
  }
  .plan-edit-hero-status {
    min-width: 160px !important;
  }
}
@media (max-width: 700px) {
  .recharge-user-row {
    height: auto !important;
    min-height: 64px !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  .user-result-meta {
    justify-content: space-between !important;
  }
  .plan-edit-hero {
    flex-wrap: wrap !important;
  }
  .plan-edit-hero-status {
    width: 100% !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  .plan-toggle-form {
    margin-right: auto !important;
  }
  .plan-preview-card {
    position: static !important;
  }
}

/* ==========================================================
   Unified Radius Panel UI — final pass
   Shared visual language for recharge / user / plan editor
   ========================================================== */
:root {
  --rp-radius: 18px;
  --rp-radius-sm: 12px;
  --rp-shadow: 0 6px 22px rgba(15, 23, 42, 0.045);
}
.date-value {
  direction: ltr !important;
  /* unicode-bidi: isolate !important; */
  display: inline-block !important;
  white-space: nowrap !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  font-weight: 300 !important;
}

/* --- shared page rhythm --- */
.recharge-page,
.edit-user-page,
.plans-page,
.plan-edit-page {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 4px 32px !important;
}
.recharge-page .panel-card,
.edit-user-page .panel-card,
.plans-page .panel-card,
.plan-edit-page .panel-card {
  border-radius: var(--rp-radius) !important;
  box-shadow: var(--rp-shadow) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.recharge-page .page-title,
.edit-user-page .page-title,
.plans-page .page-title,
.plan-edit-page h1 {
  letter-spacing: -0.02em;
}

/* --- recharge header/search --- */
.recharge-page .recharge-hero {
  min-height: 116px !important;
  margin-bottom: 14px !important;
  padding: 22px 26px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow) !important;
  display: flex !important;
  align-items: center !important;
}
.recharge-page .recharge-hero .page-title {
  font-size: 24px !important;
  font-weight: 850 !important;
}
.recharge-page .recharge-hero .page-sub {
  font-size: 12px !important;
  line-height: 1.9 !important;
}
.recharge-search.panel-card {
  padding: 18px !important;
  margin-bottom: 14px !important;
}
.recharge-search .form-label {
  font-size: 11px !important;
  font-weight: 750 !important;
  margin-bottom: 7px !important;
}
.recharge-search .form-control {
  height: 44px !important;
  border-radius: 12px !important;
}
.recharge-search .btn {
  height: 44px !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
}

/* --- user picker: one clean horizontal row --- */
.recharge-user-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}
.recharge-user-row {
  width: 100% !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 9px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px 108px !important;
  align-items: center !important;
  gap: 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.recharge-user-row:hover {
  transform: none !important;
  border-color: #cbd5e1 !important;
  background: var(--surface-2) !important;
}
.recharge-user-row.selected {
  border-color: var(--primary) !important;
  background: var(--primary-weak) !important;
  box-shadow: inset -3px 0 0 var(--primary) !important;
}
.recharge-user-row > * {
  min-width: 0 !important;
  margin: 0 !important;
}
.user-result-main {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}
.user-avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
  display: grid !important;
  place-items: center !important;
}
.user-result-main span:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.user-result-main strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
}
.user-result-main small {
  font-size: 10px !important;
  color: var(--text-2) !important;
}
.user-result-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.user-result-meta > span {
  font-size: 10px !important;
  color: var(--text-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.user-result-meta > b {
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.recharge-user-row.selected .user-result-meta > b {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* selected user */
.recharge-selected {
  min-height: 72px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  background: var(--surface) !important;
}
.selected-user-avatar {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 12px !important;
  background: var(--primary-weak) !important;
  color: var(--primary) !important;
}
.selected-user-copy {
  gap: 1px !important;
}
.selected-user-copy strong {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.selected-user-copy small,
.selected-user-copy span {
  font-size: 10px !important;
}

/* current package */
.recharge-page .row.g-3 {
  --bs-gutter-y: 14px !important;
}
.recharge-page .section-title {
  font-size: 15px !important;
  font-weight: 800 !important;
}
.recharge-page .section-caption {
  font-size: 10px !important;
  line-height: 1.8 !important;
}
.recharge-page .section-heading-row {
  align-items: center !important;
}
.current-package-title {
  padding: 13px 0 12px !important;
}
.current-package-title small {
  font-size: 10px !important;
}
.current-package-title h2 {
  font-size: 19px !important;
  font-weight: 850 !important;
  margin-top: 3px !important;
}
.usage-panels {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.usage-mini-card {
  min-height: 132px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: var(--surface-2) !important;
}
.usage-mini-card > strong {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
}
.usage-mini-head {
  font-size: 10px !important;
}
.usage-mini-card > small {
  font-size: 9px !important;
  line-height: 1.6 !important;
}
.usage-mini-card > em {
  font-size: 8px !important;
}
.usage-mini-card.validity-card {
  background: var(--primary-weak) !important;
  border-color: #dce2ff !important;
}
.mini-progress {
  height: 5px !important;
  margin-top: auto !important;
}
.validity-progress span {
  background: #16a34a !important;
}

/* queue */
.queue-item.v2 {
  min-height: 58px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
}
.queue-copy strong {
  font-size: 11px !important;
  font-weight: 800 !important;
}
.queue-copy small {
  font-size: 8px !important;
}
.queue-order {
  width: 26px !important;
  height: 26px !important;
}

/* plan choices */
.recharge-plan-box {
  padding: 18px !important;
}
.plan-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.plan-choice-inner {
  min-height: 132px !important;
  padding: 13px !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
}
.plan-choice-top strong {
  font-size: 12px !important;
  font-weight: 800 !important;
}
.plan-choice-stats {
  gap: 4px !important;
}
.plan-choice-stats span {
  font-size: 8px !important;
  padding: 4px 6px !important;
}
.plan-price {
  font-size: 11px !important;
}
.recharge-submit-row {
  margin-top: 12px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
}
.recharge-note {
  font-size: 9px !important;
}
.recharge-submit-row .btn {
  height: 38px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

/* --- user edit page: same header/card language --- */
.edit-user-page .edit-user-head {
  border-radius: 20px !important;
  box-shadow: var(--rp-shadow) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 18px 22px !important;
  margin-bottom: 14px !important;
}
.edit-user-page .user-stat-card {
  border-radius: 14px !important;
  box-shadow: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.edit-user-page .user-stat-card strong {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.edit-user-page .quota-card {
  border-radius: 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  padding: 13px !important;
}
.edit-user-page .quota-card strong {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.edit-user-page .quota-card small {
  font-size: 9px !important;
}
.edit-user-page .section-title {
  font-size: 15px !important;
  font-weight: 800 !important;
}
.edit-user-page .connection-facts b {
  font-size: 10px !important;
}
.edit-user-page .mini-session {
  min-height: 50px !important;
  padding: 8px 0 !important;
}
.edit-user-page .mini-session strong {
  font-size: 10px !important;
}
.edit-user-page .mini-session small {
  font-size: 8px !important;
}
.edit-user-page .reserved-item {
  min-height: 68px !important;
  border-radius: 13px !important;
}
.edit-user-page .user-package-history th,
.edit-user-page .user-package-history td {
  font-size: 9px !important;
  white-space: nowrap !important;
}

/* --- plan list --- */
.plans-index-page .plans-page-head {
  padding: 22px 24px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow) !important;
  border: 1px solid var(--border) !important;
}
.plans-index-page .plans-page-head h1 {
  font-size: 24px !important;
}
.plans-index-page .plans-stats {
  gap: 10px !important;
  margin: 12px 0 !important;
}
.plans-index-page .plan-stat {
  min-height: 72px !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.plans-index-page .plans-index-list {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow) !important;
}
.plans-index-page .plans-index-toolbar {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
.plans-index-page .plan-row {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.plans-index-page .plan-row:last-child {
  border-bottom: 0 !important;
}
.plans-index-page .plan-row:hover {
  background: var(--surface-2) !important;
}
.plans-index-page .plan-row-title h3 {
  font-size: 13px !important;
  font-weight: 850 !important;
}
.plans-index-page .plan-row-metrics {
  gap: 8px !important;
}
.plans-index-page .plan-row-metrics > div {
  min-width: 90px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: var(--surface-2) !important;
}
.plans-index-page .plan-row-metrics small {
  font-size: 8px !important;
}
.plans-index-page .plan-row-metrics strong {
  font-size: 10px !important;
}

/* --- plan editor: visually identical shell to other pages --- */
.plan-edit-page .plan-edit-breadcrumb {
  font-size: 10px !important;
  margin-bottom: 9px !important;
  color: var(--text-2) !important;
}
.plan-edit-page .plan-edit-hero {
  min-height: 112px !important;
  padding: 20px 24px !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 14px !important;
}
.plan-edit-page .plan-edit-hero-icon {
  width: 48px !important;
  height: 48px !important;
  flex-basis: 48px !important;
  border-radius: 13px !important;
}
.plan-edit-page .plan-edit-hero-copy h1 {
  font-size: 22px !important;
  font-weight: 850 !important;
}
.plan-edit-page .plan-edit-hero-copy p {
  font-size: 10px !important;
  line-height: 1.8 !important;
}
.plan-edit-page .plan-edit-grid {
  gap: 14px !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr) !important;
}
.plan-edit-page .plan-edit-main-card,
.plan-edit-page .plan-preview-card,
.plan-edit-page .plan-settings-card {
  border-radius: 18px !important;
  box-shadow: var(--rp-shadow) !important;
}
.plan-edit-page .section-heading {
  padding: 16px 18px !important;
}
.plan-edit-page .section-heading h2 {
  font-size: 14px !important;
}
.plan-edit-page .plan-edit-fields {
  padding: 18px !important;
  gap: 15px !important;
}
.plan-edit-page .plan-edit-fields .form-control,
.plan-edit-page .plan-edit-fields .form-select {
  min-height: 42px !important;
  border-radius: 11px !important;
}
.plan-edit-page .plan-edit-fields .form-label {
  font-size: 10px !important;
}
.plan-edit-page .form-hint {
  font-size: 8px !important;
}
.plan-edit-page .plan-preview-card {
  position: sticky !important;
  top: 14px !important;
}
.plan-edit-page .plan-preview-live {
  padding: 15px !important;
}
.plan-edit-page .plan-preview-live h3 {
  font-size: 17px !important;
  font-weight: 850 !important;
}
.plan-edit-page .preview-metrics > div {
  padding: 9px 10px !important;
}
.plan-edit-page .preview-metrics small {
  font-size: 8px !important;
}
.plan-edit-page .preview-metrics strong {
  font-size: 10px !important;
}
.plan-edit-page .plan-settings-card {
  padding-bottom: 8px !important;
}
.plan-edit-page .plan-status-panel {
  margin: 10px 12px 12px !important;
  padding: 12px !important;
  border-radius: 13px !important;
}
.plan-edit-page .plan-edit-actions {
  padding-top: 0 !important;
}
.plan-edit-page .plan-edit-actions .btn {
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

@media (max-width: 1050px) {
  .usage-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .plan-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .plan-edit-page .plan-edit-grid {
    grid-template-columns: 1fr !important;
  }
  .plan-edit-page .plan-preview-card {
    position: static !important;
  }
}
@media (max-width: 760px) {
  .recharge-page,
  .edit-user-page,
  .plans-page,
  .plan-edit-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .recharge-user-row {
    height: auto !important;
    min-height: 68px !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .user-result-meta {
    justify-content: space-between !important;
  }
  .usage-panels,
  .plan-choice-grid {
    grid-template-columns: 1fr !important;
  }
  .recharge-page .recharge-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .recharge-page .recharge-hero .btn {
    width: 100% !important;
  }
  .plan-edit-page .plan-edit-hero {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .plan-edit-page .plan-edit-hero-status {
    width: 100% !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
}
/* Unified plan editor */
.plan-editor-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2px 32px;
}
.plan-editor-page .editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 2px 10px;
  color: var(--text-3);
  font-size: 11px;
}
.plan-editor-page .editor-breadcrumb a {
  color: var(--text-2);
  text-decoration: none;
}
.plan-editor-page .editor-breadcrumb a:hover {
  color: var(--primary);
}
.plan-editor-page .editor-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--rp-shadow);
}
.plan-editor-page .editor-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 20px;
}
.plan-editor-page .editor-hero-copy .page-kicker {
  font-size: 10px;
  margin-bottom: 2px;
}
.plan-editor-page .editor-hero-copy h1 {
  font-size: 21px;
  font-weight: 850;
  margin: 0 0 4px;
  color: var(--text);
}
.plan-editor-page .editor-hero-copy p {
  font-size: 10px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.8;
}
.plan-editor-page .editor-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.editor-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.editor-status-badge.is-on {
  background: var(--success-weak);
  color: var(--success);
}
.editor-status-badge.is-off {
  background: var(--surface-2);
  color: var(--text-2);
}
.plan-editor-page .editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  align-items: start;
}
.plan-editor-page .editor-form-card,
.plan-editor-page .editor-summary,
.plan-editor-page .editor-note-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 17px;
  box-shadow: var(--rp-shadow);
  overflow: hidden;
}
.plan-editor-page .editor-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.plan-editor-page .editor-card-head small {
  display: block;
  color: var(--text-3);
  font-size: 9px;
  margin-bottom: 2px;
}
.plan-editor-page .editor-card-head h2 {
  font-size: 14px;
  font-weight: 850;
  margin: 0;
  color: var(--text);
}
.plan-editor-page .editor-card-head > i {
  font-size: 16px;
  color: var(--primary);
}
.plan-editor-page .editor-form-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}
.plan-editor-page .editor-field.full {
  grid-column: 1/-1;
}
.plan-editor-page .editor-field .form-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}
.plan-editor-page .editor-field .form-control,
.plan-editor-page .editor-field .form-select {
  min-height: 42px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--surface);
  border-color: var(--border);
}
.plan-editor-page .editor-field textarea.form-control {
  min-height: 105px;
}
.plan-editor-page .editor-field > small {
  display: block;
  color: var(--text-3);
  font-size: 8px;
  margin-top: 5px;
}
.plan-editor-page .editor-input-group {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 7px;
}
.plan-editor-page .editor-input-suffix {
  position: relative;
}
.plan-editor-page .editor-input-suffix .form-control {
  padding-left: 58px;
}
.plan-editor-page .editor-input-suffix span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-2);
  pointer-events: none;
}
.plan-editor-page .editor-form-foot {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.plan-editor-page .editor-form-foot .btn {
  min-height: 38px;
  border-radius: 10px;
  font-size: 10px;
}
.plan-editor-page .editor-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 14px;
}
.plan-editor-page .editor-preview {
  padding: 17px;
}
.plan-editor-page .preview-chip {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
}
.plan-editor-page .editor-preview h3 {
  font-size: 18px;
  font-weight: 850;
  margin: 12px 0 14px;
  color: var(--text);
}
.plan-editor-page .editor-preview-grid {
  display: grid;
  gap: 7px;
}
.plan-editor-page .editor-preview-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.plan-editor-page .editor-preview-grid small {
  font-size: 8px;
  color: var(--text-3);
}
.plan-editor-page .editor-preview-grid strong {
  font-size: 10px;
  color: var(--text);
}
.plan-editor-page .editor-preview-price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 850;
}
.plan-editor-page .editor-note-card p {
  font-size: 9px;
  line-height: 2;
  color: var(--text-2);
  padding: 15px 18px;
  margin: 0;
}
.plans-index-page .plans-table {
  display: grid;
}
.plans-index-page .plan-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.2fr) minmax(380px, 1.7fr) auto;
  align-items: center;
  gap: 16px;
}
.plans-index-page .plan-row-copy p {
  font-size: 9px;
}
.plans-index-page .plan-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.plans-index-page .plans-empty {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-2);
}
.plans-index-page .plans-empty i {
  font-size: 24px;
  color: var(--primary);
}
.recharge-page .usage-panels {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.recharge-page .queue-copy small {
  font-size: 9px;
}
@media (max-width: 1050px) {
  .plan-editor-page .editor-layout {
    grid-template-columns: 1fr;
  }
  .plan-editor-page .editor-side {
    position: static;
  }
  .plans-index-page .plan-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .plans-index-page .plan-row-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .plan-editor-page .editor-hero {
    grid-template-columns: auto 1fr;
  }
  .plan-editor-page .editor-hero-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .plan-editor-page .editor-form-body {
    grid-template-columns: 1fr;
  }
  .plan-editor-page .editor-field.full {
    grid-column: auto;
  }
  .plan-editor-page .editor-input-group {
    grid-template-columns: 1fr 95px;
  }
  .recharge-page .usage-panels {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Unified page headers ===== */
.page-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 116px !important;
  margin-bottom: 16px !important;
  padding: 22px 26px !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow, 0 8px 28px rgba(15, 23, 42, 0.045)) !important;
  box-sizing: border-box;
}
.page-hero > div:first-child,
.page-hero-copy {
  min-width: 0;
}
.page-hero .page-kicker {
  margin-bottom: 4px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.page-hero .page-title,
.page-hero h1 {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.page-hero .page-sub {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: var(--text-2) !important;
}
.page-hero > .btn,
.page-hero .btn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 16px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .page-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .page-hero > .btn,
  .page-hero .btn {
    width: 100%;
  }
}

/* ===== Unified Users / Sessions controls ===== */
.sessions-toolbar {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.sessions-toolbar .sessions-search-wrap,
.sessions-toolbar .sessions-filter-control {
  min-width: 0;
}
.sessions-toolbar .sessions-search-wrap {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.sessions-toolbar .sessions-filter-control {
  display: contents;
}
.sessions-toolbar .sessions-filter-label {
  display: none;
}
.sessions-toolbar .search-box {
  max-width: none;
  width: 100%;
}
.sessions-toolbar .form-select,
.sessions-toolbar .form-control,
.sessions-toolbar .btn {
  min-height: 38px;
}
.sessions-toolbar .form-select {
  width: auto;
  min-width: 120px;
}
.sessions-toolbar .sessions-apply {
  min-height: 38px;
}

/* Make the Sessions table follow the same base table language as Users. */
.sessions-table-wrap {
  border-top: 0;
}
.sessions-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}
.sessions-table thead th {
  background: transparent;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.9rem;
}
.sessions-table tbody td {
  padding: 0.6rem 0.9rem;
  vertical-align: middle;
  border-color: var(--border);
  font-size: 0.85rem;
}
.sessions-table tbody tr:hover td {
  background: var(--surface-2);
}
.sessions-table tbody tr:last-child td {
  border-bottom: 0;
}
.sessions-table .user-name {
  font-weight: 600;
  color: var(--text);
}
.sessions-table .meta {
  color: var(--text-2);
  font-size: 0.8rem;
  text-align: right;
}
.sessions-table .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.sessions-table .sort-ind {
  color: var(--accent);
  font-size: 0.7rem;
}
.sessions-table .actions-cell .btn {
  min-width: 76px;
}

@media (max-width: 700px) {
  .sessions-toolbar {
    align-items: stretch;
  }
  .sessions-toolbar .sessions-search-wrap {
    flex-basis: 100%;
    max-width: none;
  }
  .sessions-toolbar .sessions-filter-control {
    display: block;
    flex: 1 1 0;
  }
  .sessions-toolbar .form-select,
  .sessions-toolbar .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Users / Sessions use the same page-hero shell as NAS / Plans / Recharge. */
.users-page-head,
.sessions-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 116px !important;
  margin-bottom: 16px !important;
  padding: 22px 26px !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: var(--rp-shadow, 0 8px 28px rgba(15, 23, 42, 0.045)) !important;
  box-sizing: border-box;
}
.users-page-head > div:first-child,
.sessions-page-head > div:first-child {
  min-width: 0;
}
.users-page-head .page-kicker,
.sessions-page-head .page-kicker {
  margin-bottom: 4px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.users-page-head .page-title,
.sessions-page-head .page-title {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.users-page-head .page-sub,
.sessions-page-head .page-sub {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: var(--text-2) !important;
}
.users-page-head > .btn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 16px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.sessions-page-head .sessions-head-stats {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.sessions-page-head .head-stat {
  min-width: 88px;
  min-height: 58px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, rgba(148, 163, 184, 0.06));
}
.sessions-page-head .head-stat i {
  font-size: 13px;
}
.sessions-page-head .head-stat b {
  font-size: 15px;
  line-height: 1;
}
.sessions-page-head .head-stat small {
  font-size: 10px;
  color: var(--text-2);
  line-height: 1;
}
@media (max-width: 700px) {
  .users-page-head,
  .sessions-page-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .users-page-head > .btn {
    width: 100%;
  }
  .sessions-page-head .sessions-head-stats {
    width: 100%;
  }
  .sessions-page-head .head-stat {
    flex: 1;
  }
}

/* ===== Final recharge search-result normalization =====
   Keep every search result as one clean row. Older recharge rules remain for
   backwards compatibility, but this final block is the single visual source
   of truth for the current recharge page. */
.recharge-page .recharge-user-results {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.recharge-page .recharge-user-row {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  color: inherit !important;
}
.recharge-page .recharge-user-row + .recharge-user-row {
  margin-top: 0 !important;
}
.recharge-page .recharge-user-row:hover {
  transform: none !important;
  border-color: var(--primary) !important;
  background: var(--primary-weak) !important;
  box-shadow: none !important;
}
.recharge-page .recharge-user-row.selected {
  border-color: var(--primary) !important;
  background: var(--primary-weak) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--primary) 14%, transparent) !important;
}
.recharge-page .recharge-user-row .user-result-main {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
}
.recharge-page .recharge-user-row .user-result-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.recharge-page .recharge-user-row .user-result-meta > span {
  white-space: nowrap !important;
  color: var(--text-2) !important;
  font-size: 10px !important;
}
.recharge-page .recharge-user-row .user-result-meta > b {
  min-width: 78px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  text-align: center !important;
  background: var(--primary-weak) !important;
  color: var(--primary) !important;
  font-size: 10px !important;
}
.recharge-page .recharge-user-row.selected .user-result-meta > b {
  background: var(--primary) !important;
  color: #fff !important;
}
@media (max-width: 700px) {
  .recharge-page .recharge-user-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .recharge-page .recharge-user-row .user-result-meta {
    justify-content: flex-start !important;
  }
  .recharge-page .recharge-user-row .user-result-meta > span {
    white-space: normal !important;
  }
}

/* Settings uses the same unified page header shell as the other pages. */
.settings-page-head {
  margin-bottom: 16px !important;
}

/* =========================================================
   User detail — dark theme polish
   Keep edit.php on the same semantic tokens as the rest
   of the panel. The original edit styles used fixed light
   colors, which made text/cards disappear in dark mode.
   ========================================================= */
[data-bs-theme="dark"] .edit-user-page {
  color: var(--text);
}

[data-bs-theme="dark"] .edit-user-page .back-link {
  color: var(--text-2);
}
[data-bs-theme="dark"] .edit-user-page .back-link:hover {
  color: var(--text);
}
[data-bs-theme="dark"] .edit-user-page .edit-subtitle,
[data-bs-theme="dark"] .edit-user-page .section-caption,
[data-bs-theme="dark"] .edit-user-page .user-stat-card small,
[data-bs-theme="dark"] .edit-user-page .user-stat-card em,
[data-bs-theme="dark"] .edit-user-page .active-plan-main small,
[data-bs-theme="dark"] .edit-user-page .quota-head,
[data-bs-theme="dark"] .edit-user-page .quota-card small,
[data-bs-theme="dark"] .edit-user-page .connection-facts span,
[data-bs-theme="dark"] .edit-user-page .reserved-info div,
[data-bs-theme="dark"] .edit-user-page .reserved-info small,
[data-bs-theme="dark"] .edit-user-page .mini-session small,
[data-bs-theme="dark"] .edit-user-page .mini-session > b,
[data-bs-theme="dark"] .edit-user-page .table-meta,
[data-bs-theme="dark"] .edit-user-page .switch-row small,
[data-bs-theme="dark"] .edit-user-page .summary-list span {
  color: var(--text-2);
}

[data-bs-theme="dark"] .edit-user-page .page-title,
[data-bs-theme="dark"] .edit-user-page .section-title,
[data-bs-theme="dark"] .edit-user-page .user-stat-card strong,
[data-bs-theme="dark"] .edit-user-page .active-plan-main h2,
[data-bs-theme="dark"] .edit-user-page .quota-card strong,
[data-bs-theme="dark"] .edit-user-page .connection-facts b,
[data-bs-theme="dark"] .edit-user-page .reserved-info strong,
[data-bs-theme="dark"] .edit-user-page .mini-session strong,
[data-bs-theme="dark"] .edit-user-page .summary-list b {
  color: var(--text);
}

[data-bs-theme="dark"] .edit-user-page .panel-card,
[data-bs-theme="dark"] .edit-user-page .user-stat-card,
[data-bs-theme="dark"] .edit-user-page .quota-card,
[data-bs-theme="dark"] .edit-user-page .reserved-item {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

[data-bs-theme="dark"] .edit-user-page .stat-icon {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-bs-theme="dark"] .edit-user-page .big-user-avatar {
  background: var(--accent-weak);
  color: var(--accent-strong);
}

[data-bs-theme="dark"] .edit-user-page .user-stat-card.is-online .stat-icon {
  background: var(--success-weak);
  color: var(--success);
}

[data-bs-theme="dark"] .edit-user-page .user-stat-card.is-online .stat-icon i {
  color: var(--success);
}

[data-bs-theme="dark"] .edit-user-page .account-state.warning {
  background: var(--warning-weak);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

[data-bs-theme="dark"] .edit-user-page .active-plan-main,
[data-bs-theme="dark"] .edit-user-page .connection-facts > div,
[data-bs-theme="dark"] .edit-user-page .mini-session,
[data-bs-theme="dark"] .edit-user-page .summary-list > div {
  border-color: var(--border);
}

[data-bs-theme="dark"] .edit-user-page .plan-meta-pills span,
[data-bs-theme="dark"] .edit-user-page .count-badge {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-bs-theme="dark"] .edit-user-page .quota-card {
  background: var(--surface-2);
}

[data-bs-theme="dark"] .edit-user-page .quota-progress {
  background: var(--border);
}

[data-bs-theme="dark"] .edit-user-page .quota-progress span {
  background: var(--accent);
}

[data-bs-theme="dark"] .edit-user-page .quota-progress.calendar-progress span {
  background: var(--success);
}

[data-bs-theme="dark"] .edit-user-page .reserved-number {
  background: var(--accent-weak);
  color: var(--accent-strong);
}

[data-bs-theme="dark"] .edit-user-page .session-status.offline {
  color: var(--text-3);
}

[data-bs-theme="dark"] .edit-user-page .history-status.active {
  background: var(--success-weak);
  color: var(--success);
}
[data-bs-theme="dark"] .edit-user-page .history-status.queued {
  background: var(--accent-weak);
  color: var(--accent-strong);
}
[data-bs-theme="dark"] .edit-user-page .history-status.completed {
  background: var(--surface-2);
  color: var(--text-2);
}
[data-bs-theme="dark"] .edit-user-page .history-status.expired {
  background: var(--warning-weak);
  color: var(--warning);
}
[data-bs-theme="dark"] .edit-user-page .history-status.cancelled {
  background: var(--danger-weak);
  color: var(--danger);
}

[data-bs-theme="dark"] .edit-user-page .switch-ui {
  background: var(--text-3);
}
[data-bs-theme="dark"] .edit-user-page .switch-ui:after {
  background: var(--surface);
}
[data-bs-theme="dark"] .edit-user-page .switch-row input:checked + .switch-ui {
  background: var(--accent);
}

[data-bs-theme="dark"] .edit-user-page .form-control,
[data-bs-theme="dark"] .edit-user-page .form-select {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
[data-bs-theme="dark"] .edit-user-page .form-control::placeholder {
  color: var(--text-3);
}
[data-bs-theme="dark"] .edit-user-page .form-control:focus,
[data-bs-theme="dark"] .edit-user-page .form-select:focus {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-weak);
}
[data-bs-theme="dark"] .edit-user-page .form-label {
  color: var(--text-2);
}

[data-bs-theme="dark"] .edit-user-page .table {
  color: var(--text);
}
[data-bs-theme="dark"] .edit-user-page .table thead th {
  color: var(--text-3);
  border-color: var(--border);
}
[data-bs-theme="dark"] .edit-user-page .table tbody td {
  border-color: var(--border);
}
[data-bs-theme="dark"] .edit-user-page .empty-soft {
  color: var(--text-2);
  background: var(--surface-2);
  border-color: var(--border);
}

[data-bs-theme="dark"] .edit-user-page .small-link {
  color: var(--accent-strong);
}
.server-item strong.is-online .status-dot {
  background: #22c55e;
}

/* .server-item strong.is-offline {
  color: #ef4444;
} */

.server-item strong.is-offline .status-dot {
  background: #ef4444;
  border-color: rgba(230, 73, 95, 0.3);
}

/* ===== User detail actions / quick modals ===== */
.edit-user-stat-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.active-plan-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.edit-account-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.edit-account-actions-buttons {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.quick-action-modal .modal-header {
  padding: 1rem 1.15rem;
}
.quick-action-modal .modal-body {
  padding: 1rem 1.15rem 1.15rem;
}
.quick-current-plan,
.quick-no-current {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.quick-current-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 1rem;
}
.quick-current-plan > div:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quick-current-plan small {
  color: var(--text-2);
  font-size: 0.7rem;
}
.quick-current-plan strong {
  font-size: 0.9rem;
}
.quick-current-plan span {
  color: var(--text-2);
  font-size: 0.68rem;
}
.quick-no-current {
  color: var(--text-2);
  font-size: 0.78rem;
}
.quick-no-current i {
  color: var(--accent);
}
.quick-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding: 2px;
}
.quick-plan-option {
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0;
}
.quick-plan-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quick-plan-option > span {
  display: flex;
  flex-direction: column;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  transition: 0.15s ease;
}
.quick-plan-option:hover > span {
  border-color: var(--accent);
  background: var(--surface-2);
}
.quick-plan-option input:checked + span {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: 0 0 0 2px var(--accent-weak);
}
.quick-plan-option strong {
  font-size: 0.8rem;
}
.quick-plan-option small {
  color: var(--text-2);
  font-size: 0.66rem;
  line-height: 1.8;
  margin-top: 7px;
}
.quick-plan-option b {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.76rem;
}
.config-security-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px 11px;
  border: 1px solid var(--warning);
  border-radius: 10px;
  background: var(--warning-weak);
  color: var(--text-2);
  font-size: 0.7rem;
  line-height: 1.8;
}
.config-security-note i {
  color: var(--warning);
  font-size: 0.95rem;
  margin-top: 2px;
}
.config-file-list {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow-y: auto;
}
.config-file-option {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.config-file-option:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.config-file-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.config-file-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.config-file-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-weak);
  color: var(--accent);
}
.config-file-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.config-file-copy strong {
  font-size: 0.78rem;
}
.config-file-copy small {
  color: var(--text-2);
  font-size: 0.64rem;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  overflow: hidden;
  text-overflow: ellipsis;
}
.config-file-check {
  color: var(--accent);
  opacity: 0.35;
}
.config-file-option:has(input:checked) .config-file-check {
  opacity: 1;
}
[data-bs-theme="dark"] .edit-user-page .edit-account-actions {
  background: var(--surface);
  border-color: var(--border);
}
[data-bs-theme="dark"] .edit-user-page .edit-account-actions .section-title {
  color: var(--text);
}
[data-bs-theme="light"] .edit-user-page .edit-account-actions {
  background: #fff;
}
@media (max-width: 900px) {
  .edit-user-stat-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .edit-account-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .edit-account-actions-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 650px) {
  .edit-user-stat-grid-compact {
    grid-template-columns: 1fr;
  }
  .active-plan-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .quick-plan-grid {
    grid-template-columns: 1fr;
  }
  .quick-current-plan {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .quick-select-current {
    width: 100%;
  }
}
.quota-warn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.quota-warn-badge {
  font-size: 0.68rem;
  font-weight: 600;
}

.recharge-v3 {
  --rv3-gap: 16px;
}

.recharge-v3 .page-hero {
  margin-bottom: var(--rv3-gap);
}

.recharge-v3-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.recharge-v3-hero-copy {
  min-width: 0;
}

.recharge-v3-hero .page-title {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.recharge-v3-reset {
  flex: 0 0 auto;
}

.recharge-v3-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--rv3-gap);
  border-radius: var(--radius-lg);
}

.recharge-v3-search,
.recharge-v3-userbar,
.recharge-v3-card,
.recharge-v3-plans {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.recharge-v3-search {
  padding: 20px;
  margin-bottom: var(--rv3-gap);
}

.recharge-v3-section-head {
  margin-bottom: 14px;
}

.recharge-v3-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.recharge-v3-eyebrow i {
  color: var(--accent);
}

.recharge-v3-section-head h2,
.recharge-v3-card-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--text);
}

.recharge-v3-section-head p,
.recharge-v3-card-head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 0.8rem;
}

.recharge-v3-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
}

.recharge-v3-input-wrap {
  position: relative;
}

.recharge-v3-input-wrap > i {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  z-index: 2;
}

.recharge-v3-input-wrap .form-control {
  height: 44px;
  padding-right: 38px;
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
}

.recharge-v3-input-wrap .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.recharge-v3-search-btn {
  height: 44px;
  border-radius: 10px;
  font-weight: 650;
}

.recharge-v3-results-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 2px 8px;
  color: var(--text-2);
  font-size: 0.75rem;
}

.recharge-v3-results {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.recharge-v3-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}

.recharge-v3-user:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  transform: translateY(-1px);
}

.recharge-v3-user.is-selected {
  background: var(--accent-weak);
  border-color: var(--accent);
}

.recharge-v3-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
}

.recharge-v3-avatar-lg {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 13px;
  font-size: 1.05rem;
}

.recharge-v3-user-main,
.recharge-v3-user-meta {
  min-width: 0;
  display: flex;
}

.recharge-v3-user-main {
  flex-direction: column;
  gap: 2px;
}

.recharge-v3-user-main strong {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-v3-user-main small,
.recharge-v3-user-meta small {
  color: var(--text-2);
  font-size: 0.72rem;
}

.recharge-v3-user-main small i,
.recharge-v3-userbar-copy small i {
  font-size: 0.42rem;
  margin-left: 5px;
  vertical-align: middle;
}

.recharge-v3-user-main .is-online,
.recharge-v3-userbar-copy .is-online {
  color: var(--success);
}

.recharge-v3-user-main .is-offline,
.recharge-v3-userbar-copy .is-offline {
  color: var(--text-3);
}

.recharge-v3-user-meta {
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.recharge-v3-user-meta b {
  color: var(--accent);
  font-size: 0.75rem;
  white-space: nowrap;
}

.recharge-v3-user-meta b i {
  margin-right: 5px;
}

.recharge-v3-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.recharge-v3-empty > i {
  font-size: 1.35rem;
  color: var(--text-3);
}

.recharge-v3-empty > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recharge-v3-empty strong {
  color: var(--text);
  font-size: 0.82rem;
}

.recharge-v3-empty span {
  font-size: 0.73rem;
}

.recharge-v3-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: var(--rv3-gap);
  margin-bottom: var(--rv3-gap);
}

.recharge-v3-card {
  padding: 20px;
  min-width: 0;
}

.recharge-v3-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.recharge-v3-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--success);
  background: var(--success-weak);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.recharge-v3-count {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 700;
}

.recharge-v3-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 17px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.recharge-v3-current small {
  color: var(--text-2);
  font-size: 0.72rem;
}

.recharge-v3-current h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 750;
}

.recharge-v3-id {
  color: var(--text-3);
  font-size: 0.72rem;
  direction: ltr;
}

.recharge-v3-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.recharge-v3-stat {
  position: relative;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}

.recharge-v3-stat-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent);
}

.recharge-v3-stat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recharge-v3-stat-copy span {
  color: var(--text-2);
  font-size: 0.7rem;
}

.recharge-v3-stat-copy strong {
  margin-top: 3px;
  font-size: 0.9rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-v3-stat-copy small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-v3-progress {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--border);
}

.recharge-v3-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.recharge-v3-userbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: var(--rv3-gap);
}

.recharge-v3-userbar-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.recharge-v3-userbar-copy > span {
  color: var(--text-2);
  font-size: 0.68rem;
}

.recharge-v3-userbar-copy strong {
  font-size: 0.95rem;
  font-weight: 750;
}

.recharge-v3-userbar-copy small {
  color: var(--text-2);
  font-size: 0.7rem;
}

.recharge-v3-edit {
  margin-right: auto;
}

.recharge-v3-empty-large {
  min-height: 180px;
}

.recharge-v3-queue {
  display: grid;
  gap: 8px;
}

.recharge-v3-queue-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.recharge-v3-queue-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 750;
  font-size: 0.72rem;
}

.recharge-v3-queue-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recharge-v3-queue-copy strong {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-v3-queue-copy small {
  color: var(--text-2);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recharge-v3-trash {
  width: 31px;
  height: 31px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recharge-v3-plans {
  padding: 20px;
}

.recharge-v3-plans-head {
  margin-bottom: 16px;
}

.recharge-v3-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.recharge-v3-plan {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.recharge-v3-plan > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.recharge-v3-plan-inner {
  display: flex;
  flex-direction: column;
  min-height: 154px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s,
    transform 0.15s;
}

.recharge-v3-plan:hover .recharge-v3-plan-inner {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}

.recharge-v3-plan > input:checked + .recharge-v3-plan-inner {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.recharge-v3-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recharge-v3-plan-top strong {
  font-size: 0.88rem;
}

.recharge-v3-plan-top i {
  color: var(--accent);
  opacity: 0;
  font-size: 1rem;
}

.recharge-v3-plan
  > input:checked
  + .recharge-v3-plan-inner
  .recharge-v3-plan-top
  i {
  opacity: 1;
}

.recharge-v3-plan-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.recharge-v3-plan-details span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 0.68rem;
}

.recharge-v3-plan-details i {
  color: var(--accent);
}

.recharge-v3-plan-price {
  margin-top: auto;
  padding-top: 13px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
}

.recharge-v3-plan-price small {
  color: var(--text-2);
  font-size: 0.65rem;
  font-weight: 500;
}

.recharge-v3-plan-price.is-free {
  color: var(--success);
}

.recharge-v3-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.recharge-v3-submit > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.72rem;
}

.recharge-v3-submit > div i {
  color: var(--accent);
  margin-top: 2px;
}

.recharge-v3-submit .btn {
  min-width: 170px;
}

@media (max-width: 900px) {
  .recharge-v3-main-grid {
    grid-template-columns: 1fr;
  }

  .recharge-v3-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .recharge-v3-hero,
  .recharge-v3-userbar,
  .recharge-v3-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .recharge-v3-reset,
  .recharge-v3-edit,
  .recharge-v3-submit .btn {
    width: 100%;
    margin-right: 0;
  }

  .recharge-v3-search,
  .recharge-v3-card,
  .recharge-v3-plans {
    padding: 15px;
  }

  .recharge-v3-search-form {
    grid-template-columns: 1fr;
  }

  .recharge-v3-user {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recharge-v3-user-meta {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    text-align: right;
  }

  .recharge-v3-stats,
  .recharge-v3-plan-grid {
    grid-template-columns: 1fr;
  }

  .recharge-v3-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
  }

  .recharge-v3-stat-icon {
    grid-row: span 2;
    margin: 0;
  }

  .recharge-v3-progress {
    grid-column: 2;
  }

  .recharge-v3-current {
    align-items: flex-start;
  }
}

/* Plans index: card layout */
.plans-index-page .plans-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.plans-index-page .plan-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 5px 20px rgba(15, 23, 42, 0.035);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.plans-index-page .plan-row + .plan-row {
  border-top: 1px solid var(--border);
  border-radius: 18px;
}
.plans-index-page .plan-row:hover {
  background: var(--surface);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.plans-index-page .plan-row-main {
  align-items: flex-start;
}
.plans-index-page .plan-row-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 13px;
}
.plans-index-page .plan-row-copy {
  min-width: 0;
  flex: 1;
}
.plans-index-page .plan-row-title h3 {
  font-size: 14px;
}
.plans-index-page .plan-row-copy p {
  font-size: 10px;
  line-height: 1.8;
  white-space: normal;
  min-height: 18px;
}
.plans-index-page .plan-row-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.plans-index-page .plan-row-metrics > div {
  padding: 9px 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.plans-index-page .plan-row-metrics strong {
  font-size: 11px;
}
.plans-index-page .plan-row-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  justify-content: flex-start;
}
.plans-index-page .plan-row-actions .btn-primary {
  flex: 1;
}
.plans-index-page .plan-users {
  margin-inline-end: auto;
}
@media (max-width: 1100px) {
  .plans-index-page .plans-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .plans-index-page .plans-table {
    grid-template-columns: 1fr;
  }
  .plans-index-page .plan-row {
    padding: 14px;
  }
}

/* Unified headers for Reports / Backup / Migration */
.reports-page-head .btn {
  min-width: 72px;
}
.backup-hero {
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .reports-page-head {
    align-items: flex-start !important;
  }
  .reports-page-head .d-flex {
    width: 100%;
  }
  .reports-page-head .btn {
    flex: 1;
  }
  .backup-hero .backup-actions {
    width: 100%;
  }
}

.dashboard-duration {
  direction: ltr;
  text-align: right;
}

/* =========================================================
   Dark mode safety for page-local components
   (index / users / plans / migration)
   ========================================================= */
[data-bs-theme="dark"] .plan-card,
[data-bs-theme="dark"] .plans-card-grid .plan-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="dark"] .plan-card-metrics > div {
  background: var(--surface-2) !important;
}
[data-bs-theme="dark"] .plan-card-title h3,
[data-bs-theme="dark"] .plan-card-metrics strong {
  color: var(--text) !important;
}
[data-bs-theme="dark"] .plan-card-description,
[data-bs-theme="dark"] .plan-card-metrics small,
[data-bs-theme="dark"] .plan-users {
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .plan-card-icon {
  background: var(--accent-weak) !important;
  color: var(--accent) !important;
}
[data-bs-theme="dark"] .plan-card-footer {
  border-top-color: var(--border) !important;
}

[data-bs-theme="dark"] .dashboard-warning-head {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
[data-bs-theme="dark"] .dashboard-warning-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  border-bottom-color: var(--border) !important;
}
[data-bs-theme="dark"] .dashboard-warning-table tbody td {
  border-bottom-color: var(--border) !important;
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .dashboard-warning-table tbody tr:hover {
  background: var(--surface-2) !important;
}
[data-bs-theme="dark"] .dashboard-warning-user strong,
[data-bs-theme="dark"] .dashboard-warning-expire {
  color: var(--text) !important;
}
[data-bs-theme="dark"] .dashboard-warning-user small {
  color: var(--text-3) !important;
}
[data-bs-theme="dark"] .dashboard-warning-avatar {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .dashboard-warning-link,
[data-bs-theme="dark"] .dashboard-warning-action {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .dashboard-warning-link:hover,
[data-bs-theme="dark"] .dashboard-warning-action:hover {
  background: var(--accent-weak) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}
[data-bs-theme="dark"] .dashboard-warning-icon {
  background: var(--warning-weak) !important;
  color: var(--warning) !important;
}

[data-bs-theme="dark"] .users-stat-card,
[data-bs-theme="dark"] .users-table-wrap,
[data-bs-theme="dark"] .users-filter-bar,
[data-bs-theme="dark"] .users-toolbar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-bs-theme="dark"] .users-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .users-table tbody td,
[data-bs-theme="dark"] .users-table tbody tr {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-bs-theme="dark"] .users-table tbody td span.row-number {
  border: 1px solid var(--border);
  background: var(--surface-2);
}
[data-bs-theme="dark"] .users-table tbody tr:hover {
  background: var(--surface-2) !important;
}

[data-bs-theme="dark"] .migration-hero,
[data-bs-theme="dark"] .migration-card,
[data-bs-theme="dark"] .migration-preview,
[data-bs-theme="dark"] .migration-file-card,
[data-bs-theme="dark"] .migration-stat,
[data-bs-theme="dark"] .migration-confirm-dialog {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-bs-theme="dark"] .migration-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
}
[data-bs-theme="dark"] .migration-table tbody td {
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .migration-pagination {
  background: var(--surface) !important;
  border-top-color: var(--border) !important;
}
[data-bs-theme="dark"] .migration-page-buttons button {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .migration-page-buttons button.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
[data-bs-theme="dark"] .migration-confirm-body h5 {
  color: var(--text) !important;
}
[data-bs-theme="dark"] .migration-confirm-body p,
[data-bs-theme="dark"] .migration-page-info {
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .migration-confirm-icon {
  background: var(--success-weak) !important;
  color: var(--success) !important;
}

/* ---- hard dark overrides: toolbar / migration table / backup ---- */
[data-bs-theme="dark"] .toolbar {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .toolbar .form-control,
[data-bs-theme="dark"] .toolbar .form-select {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-bs-theme="dark"] .migration-table,
[data-bs-theme="dark"] .migration-table tbody,
[data-bs-theme="dark"] .migration-table tbody tr {
  background: var(--surface) !important;
  color: var(--text) !important;
}
[data-bs-theme="dark"] .migration-table tbody tr:nth-child(even) {
  background: var(--surface-2) !important;
}
[data-bs-theme="dark"] .migration-table tbody td {
  background: transparent !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .migration-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
}
[data-bs-theme="dark"] .migration-row-warning {
  background: color-mix(
    in srgb,
    var(--warning-weak) 70%,
    var(--surface)
  ) !important;
}
[data-bs-theme="dark"] .dashboard-backup-status {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .dashboard-backup-info strong {
  color: var(--text) !important;
}
[data-bs-theme="dark"] .dashboard-backup-info span {
  color: var(--text-3) !important;
}

[data-bs-theme="dark"] .users-table tbody td .actions-toggle {
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  background: transparent !important;
}

[data-bs-theme="dark"] .summary-avatar {
  background: var(--bg) !important;
}

[data-bs-theme="dark"] .users-stat-card strong {
  color: var(--text-2);
}


/* ===== Theme palette ===== */
[data-theme="ocean"] {
  --bg: #f2f8fc;
  --surface: #ffffff;
  --surface-2: #e9f3f9;
  --border: #cfe2ee;
  --text: #173042;
  --text-2: #5c7485;
  --text-3: #8da4b2;
  --accent: #087ea4;
  --accent-strong: #056b8d;
  --accent-weak: rgba(8, 126, 164, 0.11);
  --accent-ink: #ffffff;
}

[data-theme="emerald"] {
  --bg: #f3f9f6;
  --surface: #ffffff;
  --surface-2: #e9f5ef;
  --border: #cfe5d9;
  --text: #19362a;
  --text-2: #607b6d;
  --text-3: #91a89d;
  --accent: #16865a;
  --accent-strong: #0f704a;
  --accent-weak: rgba(22, 134, 90, 0.11);
  --accent-ink: #ffffff;
}

[data-theme="purple"] {
  --bg: #f7f4fc;
  --surface: #ffffff;
  --surface-2: #eee9f8;
  --border: #ddd2ee;
  --text: #2d2340;
  --text-2: #756686;
  --text-3: #a498b2;
  --accent: #7952c7;
  --accent-strong: #6841b4;
  --accent-weak: rgba(121, 82, 199, 0.11);
  --accent-ink: #ffffff;
}

[data-theme="rose"] {
  --bg: #fcf5f7;
  --surface: #ffffff;
  --surface-2: #f8e9ee;
  --border: #ebd1d9;
  --text: #40252d;
  --text-2: #81616b;
  --text-3: #ae929a;
  --accent: #c64b70;
  --accent-strong: #aa395c;
  --accent-weak: rgba(198, 75, 112, 0.11);
  --accent-ink: #ffffff;
}

[data-theme="dark"] {
  --bg: #0d0f13;
  --surface: #14171d;
  --surface-2: #1b1f27;
  --border: #262b34;
  --text: #e7e9ec;
  --text-2: #8b93a1;
  --text-3: #565d6a;
  --accent: #5978f0;
  --accent-strong: #7089f5;
  --accent-weak: rgba(89, 120, 240, 0.14);
  --accent-ink: #ffffff;
}

/* Theme selector */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.theme-option {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: right;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.theme-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-weak);
}

.theme-option strong,
.theme-option small {
  display: block;
}

.theme-option strong {
  font-size: .9rem;
  margin-bottom: 2px;
}

.theme-option small {
  color: var(--text-2);
  font-size: .72rem;
}

.theme-preview {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.theme-preview-light { background: linear-gradient(135deg, #f6f7f9 0 50%, #435cd1 50%); color: #435cd1; }
.theme-preview-dark { background: linear-gradient(135deg, #0d0f13 0 50%, #5978f0 50%); }
.theme-preview-ocean { background: linear-gradient(135deg, #f2f8fc 0 50%, #087ea4 50%); color: #087ea4; }
.theme-preview-emerald { background: linear-gradient(135deg, #f3f9f6 0 50%, #16865a 50%); color: #16865a; }
.theme-preview-purple { background: linear-gradient(135deg, #f7f4fc 0 50%, #7952c7 50%); color: #7952c7; }
.theme-preview-rose { background: linear-gradient(135deg, #fcf5f7 0 50%, #c64b70 50%); color: #c64b70; }

.theme-current {
  color: var(--text-2);
  font-size: .82rem;
}

@media (max-width: 900px) {
  .theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .theme-picker {
    grid-template-columns: 1fr;
  }
}

/* ===== Dark Theme v2 — unified graphite design ===== */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f14;
  --surface: #111720;
  --surface-2: #18212d;
  --surface-3: #202b38;
  --border: #293544;
  --border-strong: #354457;
  --text: #f1f5f9;
  --text-2: #a8b4c3;
  --text-3: #718096;
  --accent: #6d8cff;
  --accent-strong: #8aa2ff;
  --accent-weak: rgba(109, 140, 255, .14);
  --accent-ink: #ffffff;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-emphasis-color: var(--text);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--accent-strong);
  --bs-link-hover-color: #a5b7ff;
}

[data-bs-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
[data-bs-theme="dark"] .app-header {
  background: rgba(11,15,20,.94);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
[data-bs-theme="dark"] .sidebar {
  background: #0e141c;
  border-color: var(--border);
}
[data-bs-theme="dark"] .sidebar a,
[data-bs-theme="dark"] .sidebar .nav-link {
  color: var(--text-2);
}
[data-bs-theme="dark"] .sidebar a:hover,
[data-bs-theme="dark"] .sidebar .nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}
[data-bs-theme="dark"] .sidebar a.active,
[data-bs-theme="dark"] .sidebar .nav-link.active {
  background: var(--accent-weak);
  color: var(--accent-strong);
}
[data-bs-theme="dark"] .panel-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-bs-theme="dark"] .panel-card-title,
[data-bs-theme="dark"] .page-sub,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] small {
  color: var(--text-2) !important;
}
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
}
[data-bs-theme="dark"] .table thead th {
  color: #8fa0b4;
  background: #0f151d;
  border-color: var(--border);
}
[data-bs-theme="dark"] .table tbody td {
  border-color: var(--border);
}
[data-bs-theme="dark"] .table tbody tr:hover td {
  background: var(--surface-2);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background-color: #0f151d;
  border-color: var(--border-strong);
  color: var(--text);
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
  color: #657386;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea:focus {
  background-color: #101822;
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 .2rem rgba(109,140,255,.16);
}
[data-bs-theme="dark"] .form-check-input {
  background-color: #0f151d;
  border-color: var(--border-strong);
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #b8c3d1;
  border-color: var(--border-strong);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: var(--surface-2);
  border-color: #4a5b70;
  color: var(--text);
}
[data-bs-theme="dark"] .btn-icon {
  color: var(--text-2);
}
[data-bs-theme="dark"] .btn-icon:hover {
  background: var(--surface-2);
  color: var(--text);
}
[data-bs-theme="dark"] .alert {
  border-color: var(--border);
}
[data-bs-theme="dark"] .list-group-item {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--border);
}
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
}
[data-bs-theme="dark"] .dropdown-menu {
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-2);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background: var(--surface-2);
  color: var(--text);
}
[data-bs-theme="dark"] hr {
  border-color: var(--border);
  opacity: 1;
}
[data-bs-theme="dark"] ::selection {
  background: rgba(109,140,255,.28);
  color: #fff;
}


/* Recharge confirmation modals — refined */
.recharge-confirm-dialog {
  max-width: 430px;
  margin-inline: auto;
}
.recharge-confirm-modal {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 22px 70px rgba(10, 20, 40, .22);
}
.recharge-confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.recharge-confirm-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.recharge-confirm-heading > div:last-child { min-width: 0; }
.recharge-confirm-heading .modal-title {
  margin: 0;
  font-size: .96rem;
  font-weight: 800;
  color: var(--text);
}
.recharge-confirm-heading small {
  display: block;
  margin-top: 3px;
  color: var(--text-2);
  font-size: .72rem;
}
.recharge-confirm-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent-strong);
  font-size: 1.05rem;
}
.recharge-confirm-icon.danger {
  background: var(--danger-weak);
  color: var(--danger);
}
.recharge-confirm-body {
  padding: 18px;
}
.recharge-confirm-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.recharge-confirm-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}
.recharge-confirm-summary > div:last-child {
  grid-column: 1 / -1;
}
.recharge-confirm-summary span {
  color: var(--text-2);
  font-size: .69rem;
}
.recharge-confirm-summary strong {
  color: var(--text);
  font-size: .79rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.recharge-confirm-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--text-2);
  font-size: .7rem;
  line-height: 1.7;
}
.recharge-confirm-hint i {
  flex: 0 0 auto;
  color: var(--accent-strong);
  margin-top: 2px;
}
.recharge-confirm-hint.danger-hint {
  background: var(--danger-weak);
}
.recharge-confirm-hint.danger-hint i { color: var(--danger); }
.recharge-confirm-footer {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 18px 15px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.recharge-modal-cancel,
.recharge-modal-confirm {
  min-width: 96px;
  min-height: 38px;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 700;
}
.recharge-modal-cancel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.recharge-modal-cancel:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.recharge-modal-confirm {
  box-shadow: 0 6px 18px rgba(67, 92, 210, .16);
}
.recharge-delete-message {
  color: var(--text);
  font-size: .8rem;
  line-height: 1.9;
}
.recharge-delete-modal .action-confirm-name {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
}
@media (max-width: 575.98px) {
  .recharge-confirm-dialog {
    max-width: calc(100% - 24px);
  }
  .recharge-confirm-header { padding: 14px 15px; }
  .recharge-confirm-body { padding: 15px; }
  .recharge-confirm-footer { padding: 11px 15px 14px; }
  .recharge-confirm-summary { grid-template-columns: 1fr 1fr; }
  .recharge-confirm-icon { width: 38px; height: 38px; flex-basis: 38px; }
}


/* ===== Users page styles (moved to <head> to prevent mobile FOUC) ===== */
/* تمدید سریع — هماهنگ با مودال edit.php */
    #quickRenewModal .modal-dialog {
        max-width: 760px
    }

    #quickRenewModal .modal-header {
        padding: .7rem 1rem
    }

    #quickRenewModal .modal-body {
        padding: .8rem 1rem
    }

    #quickRenewModal .modal-footer {
        padding: .65rem 1rem
    }

    #quickRenewModal .modal-title {
        font-size: 1rem
    }

    #quickRenewModal .quick-current-plan {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 10px;
        background: var(--surface-2);
        border: 1px solid var(--border)
    }

    #quickRenewModal .quick-current-plan strong {
        display: block;
        font-size: .86rem
    }

    #quickRenewModal .quick-current-plan span {
        display: block;
        font-size: .68rem;
        color: var(--text-3);
        margin-top: 2px
    }

    #quickRenewModal .quick-current-icon {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: var(--accent-weak);
        color: var(--accent-strong);
        flex: 0 0 auto
    }

    #quickRenewModal .quick-plan-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        max-height: 360px;
        overflow-y: auto;
        padding: 2px
    }

    #quickRenewModal .quick-plan-option {
        min-height: 92px;
        display: block;
        cursor: pointer;
        position: relative;
        background: var(--surface)
    }

    #quickRenewModal .quick-plan-option:hover {
        border-color: var(--accent)
    }

    #quickRenewModal .quick-plan-option:has(input:checked) {
        border-color: var(--accent);
        background: var(--accent-weak);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent)
    }

    #quickRenewModal .quick-plan-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    #quickRenewModal .quick-plan-option strong {
        display: block;
        font-size: .78rem
    }

    #quickRenewModal .quick-plan-option small {
        display: block;
        font-size: .62rem;
        line-height: 1.5;
        color: var(--text-3);
        margin-top: 4px
    }

    #quickRenewModal .quick-plan-option b {
        display: block;
        font-size: .75rem;
        margin-top: 5px
    }

    .quick-view-expiry-note {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 9px;
        padding: 8px 10px;
        border-radius: 9px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        font-size: .72rem;
        color: var(--text-2)
    }

    .quick-view-expiry-note.is-expired {
        background: rgba(220, 53, 69, .08);
        border-color: rgba(220, 53, 69, .22);
        color: #b42332
    }

    .quick-view-status.is-expired {
        background: rgba(220, 53, 69, .1);
        color: #b42332;
        border-color: rgba(220, 53, 69, .2)
    }

    @media(max-width:800px) {
        #quickRenewModal .quick-plan-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-height: 330px
        }
    }

    @media(max-width:520px) {
        #quickRenewModal .modal-dialog {
            margin: .5rem
        }

        #quickRenewModal .quick-plan-grid {
           
        }
    }

    .users-table-wrap {
        overflow-x: auto;
        border-radius: 0 0 16px 16px
    }

    .users-table {
        width: 100%;
        min-width: 980px;
        table-layout: fixed
    }

    .users-table th,
    .users-table td {
        padding: .72rem .55rem;
        vertical-align: middle
    }

    .users-table thead th {
        height: 48px;
        background: var(--surface-2);
        font-size: .76rem;
        font-weight: 700;
        color: var(--text-2, #6f7785);
        white-space: nowrap
    }

    .users-table tbody tr {
        height: 66px
    }

    .users-table tbody tr:hover {
        background: rgba(67, 87, 190, .025)
    }

    .users-table th:nth-child(1),
    .users-table td:nth-child(1) {
        width: 48px;
        text-align: center
    }

    .users-table th:nth-child(2),
    .users-table td:nth-child(2) {
        width: 42px;
        text-align: center
    }

    .users-table th:nth-child(3),
    .users-table td:nth-child(3) {
        width: 15%
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4) {
        width: 14%
    }

    .users-table th:nth-child(5),
    .users-table td:nth-child(5) {
        width: 8%
    }

    .users-table th:nth-child(6),
    .users-table td:nth-child(6) {
        width: 8%
    }

    .users-table th:nth-child(7),
    .users-table td:nth-child(7) {
        width: 15%
    }

    .users-table th:nth-child(8),
    .users-table td:nth-child(8) {
        width: 19%
    }

    .users-table th:nth-child(9),
    .users-table td:nth-child(9) {
        width: 112px
    }

    .row-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #f2f4f8;
        color: #7a8290;
        font-size: .72rem;
        font-weight: 700
    }

    .user-row-main {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-width: 0
    }

    .user-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 700
    }

    .user-detail-line {
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-wrap: wrap;
        margin-top: .22rem
    }

    .user-detail-line .meta {
        font-size: .7rem
    }

    .user-plan-cell {
        min-width: 0
    }

    .plan-mini {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: .28rem .5rem;
        border-radius: 8px
    }

    .users-table .status {
        white-space: nowrap
    }

    .user-quota-cell {
        display: flex;
        flex-direction: column;
        gap: .16rem;
        line-height: 1.3;
        white-space: nowrap
    }

    .user-quota-cell strong {
        font-size: .8rem
    }

    .user-quota-cell small {
        font-size: .67rem;
        color: var(--text-2, #7b8494);
        white-space: nowrap
    }

    .user-expiry-cell {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        line-height: 1.3;
        white-space: nowrap
    }

    .user-expiry-cell .remaining-time {
        font-weight: 700;
        font-size: .78rem
    }

    .user-expiry-cell .expire-date {
        font-size: .67rem;
        color: var(--text-2, #7b8494);
        white-space: nowrap
    }

    .user-expiry-cell.is-expired .remaining-time,
    .user-expiry-cell.is-expired .expire-date {
        color: var(--bs-danger, #dc3545);
        font-weight: 700
    }

    .users-table .actions-cell {
        white-space: nowrap
    }

    .users-table .actions-cell .btn-icon {
        margin: 0 1px
    }

    .users-table .bulk-check-cell input {
        width: 17px;
        height: 17px
    }

    .users-table .sort-link {
        white-space: nowrap
    }

    @media(max-width:900px) {
        .users-table {
            min-width: 980px
        }

        .users-table th,
        .users-table td {
            padding: .6rem .42rem
        }
    }

    /* جدول کاربران: نمای مدیریتی ساده + عملیات منویی */
    .users-table-wrap {
        overflow: visible !important
    }

    .users-table {
        min-width: 760px !important;
        table-layout: fixed
    }

    .users-table th,
    .users-table td {
        padding: .72rem .65rem !important
    }

    .users-table th:nth-child(1),
    .users-table td:nth-child(1) {
        width: 5% !important;
        text-align: center
    }

    .users-table th:nth-child(2),
    .users-table td:nth-child(2) {
        width: 5% !important;
        text-align: center
    }

    .users-table th:nth-child(3),
    .users-table td:nth-child(3) {
        width: 23% !important
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4) {
        width: 22% !important
    }

    .users-table th:nth-child(5),
    .users-table td:nth-child(5) {
        width: 12% !important
    }

    .users-table th:nth-child(6),
    .users-table td:nth-child(6) {
        width: 12% !important
    }

    .users-table th:nth-child(7),
    .users-table td:nth-child(7) {
        width: 21% !important
    }

    .row-actions {
        position: relative;
        display: inline-block
    }

    .actions-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: .4rem;
        padding: .45rem .8rem !important;
        border: 1px solid #dbe1ea !important;
        background: var(--surface) !important;
        border-radius: 9px !important;
        color: #465166 !important;
        font-size: .76rem !important;
        font-weight: 700 !important
    }

    .actions-toggle:hover {
        background: #f7f8fb !important;
        border-color: #cbd3df !important
    }

    .row-actions .dropdown-menu {
        min-width: 180px;
        padding: .35rem;
        z-index: 2000;
        box-shadow: 0 10px 28px rgba(20, 30, 50, .12);
        border: 1px solid #e3e7ee;
        border-radius: 11px;
        position: fixed !important;
        margin: 0 !important;
        transform: none !important
    }

    .row-actions .dropdown-item {
        display: flex;
        align-items: center;
        gap: .55rem;
        border-radius: 8px;
        padding: .55rem .65rem;
        font-size: .78rem
    }

    .row-actions .dropdown-item i {
        width: 18px;
        text-align: center
    }

    .row-actions .dropdown-item:hover {
        background: #f5f7fa
    }

    /* نمای موبایل جدول: چند ستون اصلی + جزئیات بازشونده */
    .mobile-expand-btn {
        display: none
    }

    .mobile-details-row {
        display: none
    }

    .mobile-details-card {
        padding: .75rem .85rem;
        border: 1px solid #e4e8ef;
        border-radius: 12px;
        background: var(--surface-2)
    }

    .mobile-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem
    }

    .mobile-detail-item {
        display: flex;
        flex-direction: column;
        gap: .18rem;
        padding: .5rem .6rem;
        border-radius: 9px;
        background: var(--surface);
        border: 1px solid #edf0f4
    }

    .mobile-detail-item span {
        font-size: .67rem;
        color: #7b8494
    }

    .mobile-detail-item strong {
        font-size: .76rem;
        color: #303744
    }

    .mobile-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: .65rem
    }

    .mobile-detail-actions .btn {
        font-size: .7rem;
        border-radius: 8px
    }

    @media(max-width:700px) {

        /* موبایل: برگرداندن ساختار واقعی جدول؛ استایل عمومی کارت‌ها نباید روی این جدول اعمال شود. */
        .users-table {
            display: table !important;
            width: 100% !important;
            min-width: 0 !important;
            table-layout: fixed !important;
        }

        .users-table thead {
            display: table-header-group !important;
        }

        .users-table tbody {
            display: table-row-group !important;
        }

        .users-table tbody tr {
            display: table-row !important;
        }

        .users-table tbody tr:not(.mobile-details-row)>td,
        .users-table tbody tr.mobile-details-row>td {
            display: table-cell !important;
        }

        .users-table tbody tr:not(.mobile-details-row)>td::before,
        .users-table tbody tr.mobile-details-row>td::before {
            display: none !important;
            content: none !important;
        }

        .users-table tbody tr:not(.mobile-details-row) {
            height: 58px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
        }

        .users-table tbody tr:not(.mobile-details-row)>td {
            height: 58px !important;
            padding: .4rem .25rem !important;
            border-bottom: 1px solid var(--border, #e3e6eb) !important;
            border-top: 0 !important;
            vertical-align: middle !important;
            overflow: hidden !important;
            text-align: inherit !important;
        }

        .users-table tbody tr:not(.mobile-details-row)>td:first-child {
            border-inline-start: 0 !important;
        }

        /* موبایل: جدول واقعی با فقط ستون‌های اصلی */
        .users-table-wrap {
            overflow: hidden !important;
            width: 100%;
        }

        .users-table {
            min-width: 0 !important;
            width: 100% !important;
            table-layout: fixed !important;
        }

        .users-table thead th {
            height: 38px;
            padding: .45rem .25rem !important;
            font-size: .64rem;
            white-space: nowrap;
            overflow: hidden;
        }

        .users-table tbody tr:not(.mobile-details-row) {
            height: 56px;
        }

        .users-table tbody tr:not(.mobile-details-row)>td {
            padding: .4rem .22rem !important;
            height: 56px;
            overflow: hidden;
            vertical-align: middle;
        }

        /* فقط: انتخاب | کاربر | پلن | وضعیت | + */
        .users-table th:nth-child(1),
        .users-table td:nth-child(1) {
            width: 34px !important;
            text-align: center !important;
        }

        .users-table th:nth-child(2),
        .users-table td:nth-child(2),
        .users-table th:nth-child(6),
        .users-table td:nth-child(6) {
            display: none !important;
        }

        .users-table th:nth-child(3),
        .users-table td:nth-child(3) {
            width: auto !important;
            min-width: 0 !important;
        }

        .users-table th:nth-child(4),
        .users-table td:nth-child(4) {
            width: 23% !important;
            min-width: 0 !important;
        }

        .users-table th:nth-child(5),
        .users-table td:nth-child(5) {
            width: 19% !important;
            min-width: 0 !important;
        }

        .users-table th:nth-child(7),
        .users-table td:nth-child(7) {
            width: 38px !important;
            text-align: center !important;
        }

        .users-table .bulk-check-cell input {
            width: 16px !important;
            height: 16px !important;
            margin: 0;
        }

        .users-table tbody td[data-label="نام کاربری"] {
            overflow: hidden !important;
        }

        .users-table .user-row-main,
        .users-table .user-name {
            min-width: 0;
            max-width: 100%;
        }

        .users-table .user-name {
            display: block;
            font-size: .74rem;
            line-height: 1.35;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .users-table .user-detail-line {
            min-width: 0;
            max-width: 100%;
            margin-top: .1rem;
            flex-wrap: nowrap;
            overflow: hidden;
        }

        .users-table .user-detail-line .meta {
            flex: 0 0 auto;
            font-size: .6rem;
            white-space: nowrap;
        }

        /* هشدارهای حجمی روی ردیف اصلی جا نمی‌گیرند؛ جزئیات داخل + نمایش داده می‌شوند. */
        .users-table .user-detail-line> :not(.meta) {
            display: none !important;
        }

        .users-table .plan-mini {
            display: flex;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            font-size: .63rem;
            padding: .24rem .32rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .users-table .plan-mini i {
            flex: 0 0 auto;
        }

        .users-table .plan-mini:not(:has(i)) {
            display: block;
        }

        .users-table .status {
            display: inline-flex;
            max-width: 100%;
            font-size: .62rem;
            gap: .25rem;
            white-space: nowrap;
            overflow: hidden;
        }

        .users-table .status .dot {
            width: 5px;
            height: 5px;
        }

        .users-table .actions-cell .row-actions {
            display: none !important;
        }

        .mobile-expand-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0 !important;
            border: 1px solid #dbe1ea;
            border-radius: 8px;
            background: var(--surface, var(--surface));
            color: var(--text-2, #596579);
            transition: transform .15s ease, background .15s ease, border-color .15s ease;
        }

        .mobile-expand-btn:hover {
            background: var(--surface-2, #f3f5f8);
        }

        .mobile-expand-btn i {
            font-size: .78rem;
            transition: transform .15s ease;
        }

        .mobile-details-row {
            display: none !important;
            background: transparent !important;
        }

        .mobile-details-row.is-open {
            display: table-row !important;
        }

        .mobile-details-row>td {
            width: 100% !important;
            padding: .2rem .3rem .65rem !important;
            border-top: 0 !important;
            overflow: visible !important;
        }

        .mobile-details-card {
            width: 100%;
            box-sizing: border-box;
            padding: .65rem;
            border: 1px solid var(--border, #e4e8ef);
            border-radius: 10px;
            background: var(--surface-2, #f8f9fc);
        }

        .mobile-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .4rem;
        }

        .mobile-detail-item {
            min-width: 0;
            overflow: hidden;
            padding: .45rem .5rem;
            border-radius: 8px;
            background: var(--surface, var(--surface));
            border: 1px solid var(--border, #edf0f4);
        }

        .mobile-detail-item span {
            font-size: .62rem;
            color: var(--text-3, #7b8494);
        }

        .mobile-detail-item strong {
            display: block;
            min-width: 0;
            margin-top: .08rem;
            font-size: .7rem;
            color: var(--text, #303744);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-detail-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .4rem;
            margin-top: .5rem;
        }

        .mobile-detail-actions .btn {
            width: 100%;
            font-size: .66rem;
            border-radius: 8px;
            white-space: nowrap;
        }

        .users-table tbody tr:not(.mobile-details-row):has(+ .mobile-details-row.is-open) .mobile-expand-btn {
            background: var(--accent-weak, #f3f5ff);
            border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
            color: var(--accent);
        }

        .users-table tbody tr:not(.mobile-details-row):has(+ .mobile-details-row.is-open) .mobile-expand-btn i {
            transform: rotate(45deg);
        }
    }

    /* مشاهده سریع کاربر */
    .quick-view-modal {
        border: 0 !important;
        border-radius: 18px !important;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(20, 30, 50, .18)
    }

    .quick-view-header {
        padding: 1rem 1.1rem !important;
        background: linear-gradient(180deg, var(--surface), #f8f9fc);
        border-bottom: 1px solid #e8ebf0 !important
    }

    .quick-view-user-title {
        display: flex;
        align-items: center;
        gap: .75rem;
        min-width: 0
    }

    .quick-view-avatar {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        background: #eef1ff;
        color: #4f67d7;
        font-size: 1.1rem;
        flex: 0 0 auto
    }

    .quick-view-username {
        margin-top: .2rem;
        color: #252b35;
        font-weight: 800;
        font-size: .9rem;
        direction: ltr;
        text-align: right
    }

    .quick-view-status-row {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
        margin-bottom: 1rem
    }

    .quick-view-status,
    .quick-view-id {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .35rem .6rem;
        border-radius: 9px;
        font-size: .7rem;
        font-weight: 800
    }

    .quick-view-status.is-enabled {
        background: #eaf8f0;
        color: #16834a
    }

    .quick-view-status.is-disabled {
        background: #f1f3f5;
        color: #687181
    }

    .quick-view-status.is-online {
        background: #eaf2ff;
        color: #3f65c9
    }

    .quick-view-status.is-offline {
        background: #f3f4f6;
        color: #727b88
    }

    .quick-view-id {
        margin-inline-start: auto;
        background: #f2f4f7;
        color: #737c8b;
        font-weight: 700
    }

    .quick-view-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .65rem;
        margin-bottom: .8rem
    }

    .quick-view-card {
        padding: .75rem .8rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface-2);
        min-width: 0
    }

    .quick-view-card span,
    .quick-view-metrics span {
        display: block;
        color: #7b8493;
        font-size: .66rem;
        margin-bottom: .25rem
    }

    .quick-view-card strong {
        display: block;
        color: #252b35;
        font-size: .78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .quick-view-card #quickViewExpire {
        direction: ltr;
        unicode-bidi: isolate;
        text-align: right
    }

    .quick-view-section {
        padding: .85rem .9rem;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface);
        margin-top: .65rem
    }

    .quick-view-section-title {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-size: .75rem;
        font-weight: 800;
        color: #3d4654;
        margin-bottom: .7rem
    }

    .quick-view-section-title i {
        color: #566ed5
    }

    .quick-view-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem
    }

    .quick-view-metrics>div {
        min-width: 0
    }

    .quick-view-metrics strong {
        display: block;
        font-size: .76rem;
        color: #252b35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .quick-view-progress {
        height: 6px;
        border-radius: 99px;
        background: #edf0f4;
        overflow: hidden;
        margin-top: .7rem
    }

    .quick-view-progress span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: #526bd7;
        transition: width .2s ease
    }

    @media(max-width:700px) {
        .quick-view-grid {
            grid-template-columns: 1fr 1fr
        }

        .quick-view-grid .quick-view-card:last-child {
            grid-column: 1/-1
        }

        .quick-view-metrics {
            grid-template-columns: 1fr 1fr 1fr
        }

        .quick-view-modal {
            border-radius: 15px !important
        }
    }

    @media(max-width:420px) {
        .quick-view-metrics {
            grid-template-columns: 1fr
        }

        .quick-view-metrics>div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem
        }

        .quick-view-metrics span {
            margin: 0
        }
    }

    /* users table alignment refinement */
    .users-table thead th:nth-child(3),
    .users-table thead th:nth-child(4),
    .users-table thead th:nth-child(5),
    .users-table thead th:nth-child(6) {
        text-align: right !important
    }

    .users-table .actions-cell {
        text-align: center !important
    }

    @media(max-width:700px) {

        .users-table thead th:nth-child(3),
        .users-table thead th:nth-child(4),
        .users-table thead th:nth-child(5) {
            text-align: right !important
        }

        .users-table thead th:nth-child(7) {
            text-align: center !important
        }

        .users-table tbody tr:not(.mobile-details-row)>td {
            border-bottom: 1px solid var(--border, #e3e6eb) !important
        }

        .users-table tbody tr:not(.mobile-details-row)>td:nth-child(3) {
            padding-inline: .45rem !important
        }

        .users-table tbody tr:not(.mobile-details-row)>td:nth-child(4),
        .users-table tbody tr:not(.mobile-details-row)>td:nth-child(5) {
            padding-inline: .3rem !important
        }

        .users-table .user-row-main {
            width: 100%;
        }

        .users-table .user-name {
            text-align: right;
        }

        .mobile-expand-btn {
            width: 32px !important;
            height: 32px !important;
            border-radius: 9px !important;
            background: var(--surface, var(--surface)) !important;
            box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
        }

        .mobile-expand-btn.is-open {
            background: var(--accent-weak, #f3f5ff) !important;
            color: var(--accent) !important;
            border-color: var(--accent) !important;
        }

        .mobile-details-row.is-open {
            display: table-row !important;
        }

        .mobile-details-row[hidden] {
            display: none !important;
        }
    }

    @media(max-width:380px) {

        .users-table th:nth-child(4),
        .users-table td:nth-child(4) {
            width: 21% !important
        }

        .users-table th:nth-child(5),
        .users-table td:nth-child(5) {
            width: 18% !important
        }

        .users-table th:nth-child(7),
        .users-table td:nth-child(7) {
            width: 36px !important
        }

        .users-table .user-name {
            font-size: .7rem
        }

        .users-table .plan-mini {
            font-size: .59rem
        }

        .users-table .status {
            font-size: .58rem
        }

        .mobile-detail-grid {
            grid-template-columns: 1fr 1fr
        }

        .mobile-detail-actions {
            grid-template-columns: 1fr 1fr
        }
    }

    @keyframes mobileDetailsIn {
        from {
            opacity: 0;
            transform: translateY(-3px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .users-overview {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .65rem;
        margin: 0 0 1rem;
        width: 100%;
        min-width: 0;
    }

    .users-stat-card {
        position: relative;
        min-height: 78px;
        padding: .78rem .9rem;
        border: 1px solid #e5e9f0;
        border-radius: 12px;
        background: var(--surface);
        overflow: hidden
    }

    .users-stat-card .users-stat-label {
        display: block;
        color: #737c8b;
        font-size: .72rem;
        font-weight: 700;
        margin-bottom: .3rem
    }

    .users-stat-card strong {
        display: block;
        font-size: 1.2rem;
        line-height: 1.1;
        color: #252b35
    }

    .users-stat-card>i {
        position: absolute;
        left: .75rem;
        bottom: .65rem;
        font-size: 1.15rem;
        color: #c8cfda
    }

    .users-stat-card.is-success strong,
    .users-stat-card.is-success>i {
        color: #198754
    }

    .users-stat-card.is-dark strong,
    .users-stat-card.is-dark>i {
        /* color: #212529 */
    }

    .users-stat-card.is-info strong,
    .users-stat-card.is-info>i {
        color: #5271e6
    }

    .users-stat-card.is-danger strong,
    .users-stat-card.is-danger>i {
        color: #dc3545
    }

    .users-hero-actions {
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap
    }

    .users-hero-actions .users-purge-btn {
        min-height: 44px;
        padding: .55rem .9rem;
        font-size: .82rem
    }

@media(max-width:700px) {
        .users-hero-actions {
            width: 100%;
            justify-content: stretch;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .users-hero-actions .users-purge-btn,
        .users-hero-actions .btn {
            width: 100%;
            min-width: 0;
            min-height: 42px;
        }
    }

    .users-purge-btn {
        min-height: 78px;
        border: 1px solid rgba(220, 53, 69, .25);
        border-radius: 12px;
        background: var(--danger-weak);
        color: #b42332;
        padding: .7rem 1rem;
        font-weight: 700;
        font-size: .76rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        cursor: pointer;
        white-space: nowrap
    }

    .users-purge-btn:hover {
        background: #dc3545;
        color: var(--surface);
        border-color: #dc3545
    }

    .users-purge-btn i {
        font-size: 1rem
    }

    .row-actions .dropdown-item.is-disable-action {
        color: #212529 !important
    }

    .row-actions .dropdown-item.is-disable-action:hover {
        background: #f1f3f5 !important;
        color: #111 !important
    }

    @media(max-width:1100px) {
        .users-overview {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .users-purge-btn {
            min-height: 64px;
        }
    }

    /* Users page: use the compact mobile layout early enough for phones/tablets
       and narrow browser viewports. This prevents horizontal overflow when the
       browser reports a wider CSS viewport than the physical screen. */
    @media(max-width:1024px) {
        .users-overview {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .55rem;
        }

        .users-stat-card {
            min-height: 74px;
            padding: .7rem .75rem;
        }

        .users-stat-card .users-stat-label {
            font-size: .68rem;
        }

        .users-stat-card strong {
            font-size: 1.05rem;
        }

        .users-hero-actions {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .users-hero-actions .users-purge-btn,
        .users-hero-actions .btn {
            width: 100%;
            min-width: 0;
            min-height: 42px;
        }

        .bulk-users-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .bulk-users-select,
        .bulk-users-actions {
            width: 100%;
            min-width: 0;
        }

        .bulk-users-actions .form-select {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
        }

        .bulk-users-actions #bulkApplyBtn {
            flex: 0 0 auto;
            min-width: 64px;
        }

        .users-table-wrap {
            overflow: visible !important;
        }

        .users-table,
        .users-table tbody,
        .users-table tr,
        .users-table td {
            display: block;
            width: 100%;
        }

        .users-table thead {
            display: none;
        }

        .users-table tbody {
            padding: .35rem;
        }

        .users-table tbody tr:not(.mobile-details-row) {
            margin-bottom: .55rem;
            padding: .55rem .7rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
        }

        .users-table tbody td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            min-height: 32px;
            padding: .38rem 0;
            border: 0;
            font-size: .82rem;
            text-align: start !important;
        }

        .users-table tbody td::before {
            content: attr(data-label);
            flex: 0 0 auto;
            color: var(--text-3);
            font-size: .72rem;
            font-weight: 600;
        }

        .users-table tbody td[data-label="نام کاربری"] {
            padding-top: .15rem;
            padding-bottom: .55rem;
            margin-bottom: .15rem;
            border-bottom: 1px solid var(--border);
        }

        .users-table .actions-cell {
            justify-content: flex-start;
            gap: .35rem;
            padding-top: .5rem;
            margin-top: .15rem;
            border-top: 1px solid var(--border);
        }

        .users-table .actions-cell::before {
            margin-inline-end: auto;
        }

        .pagination-bar {
            align-items: stretch;
            flex-direction: column;
            padding: .75rem;
        }

        .pagination-bar > div:first-child {
            text-align: center;
        }

        .pagination-bar .pages {
            justify-content: center;
        }

        .toolbar {
            gap: .45rem;
        }

        .toolbar .search-box {
            flex: 1 1 100%;
            max-width: none;
            min-width: 0;
        }

        .toolbar select.form-select {
            flex: 1 1 100%;
            min-width: 0;
        }

        .toolbar .btn {
            flex: 1 1 0;
            min-width: 0;
        }
    }

    .users-filter-label {
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-bottom: .38rem;
        color: #70798a;
        font-size: .68rem;
        font-weight: 800;
        line-height: 1
    }

    .users-filter-label i {
        font-size: .78rem;
        color: #6478d9
    }

    .users-filter-search,
    .users-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0
    }

    .users-filter-search {
        flex: 1 1 280px;
        min-width: 240px
    }

    .users-filter-field {
        flex: 0 1 175px;
        min-width: 155px
    }

    .users-filter-per {
        flex: 0 1 130px;
        min-width: 120px
    }

    .users-filter-search .search-box {
        height: 40px
    }

    .users-filter-search .search-box .form-control {
        height: 40px;
        border-radius: 10px !important
    }

    .users-filter-field .form-select {
        height: 40px;
        border-radius: 10px
    }

    .toolbar {
        display: flex;
        align-items: flex-end;
        gap: .7rem;
        flex-wrap: wrap;
        padding: .9rem 1rem !important;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 1rem
    }

    .toolbar>.btn {
        height: 40px;
        align-self: flex-end;
        white-space: nowrap;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .users-panel {
        overflow: visible !important
    }

    .users-table-wrap {
        overflow: visible !important
    }

    .row-actions {
        position: relative;
        z-index: 20
    }

    .row-actions .dropdown-menu {
        z-index: 2000 !important;
        position: fixed !important
    }

    .users-condition-filter {
        min-width: 155px
    }

    .users-panel.is-loading {
        opacity: .62;
        pointer-events: none;
        transition: opacity .12s ease
    }

    @media(max-width:900px) {
        .users-condition-filter {
            min-width: 140px
        }

        .users-filter-search {
            flex-basis: 100%;
            min-width: 100%
        }

        .users-filter-field {
            flex: 1 1 0;
            min-width: 140px
        }

        .users-filter-per {
            flex: 0 1 130px
        }
    }

    @media(max-width:700px) {
        .toolbar {
            padding: .8rem !important;
            gap: .55rem
        }

        .users-filter-search,
        .users-filter-field,
        .users-filter-per {
            flex: 1 1 100%;
            min-width: 100%
        }

        .toolbar>.btn {
            flex: 1 1 0
        }
    }

    .user-name-link {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        border-radius: 6px;
        padding: 2px 5px;
        margin: -2px -5px;
    }

    .user-name-link:hover {
        text-decoration: underline;
    }

    .user-name-link:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }

    .users-dropdown-portal {
        min-width: 180px !important;
        padding: .35rem !important;
        background: var(--surface) !important;
        border: 1px solid #e3e7ee !important;
        border-radius: 11px !important;
        box-shadow: 0 10px 28px rgba(20, 30, 50, .12) !important;
        overflow: hidden !important;
    }

    .users-dropdown-portal .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: .55rem !important;
        min-height: 38px !important;
        padding: .55rem .7rem !important;
        border-radius: 8px !important;
        color: var(--text) !important;
        font-size: .76rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        background: transparent !important;
    }

    .users-dropdown-portal .dropdown-item:hover,
    .users-dropdown-portal .dropdown-item:focus {
        background: #f4f6fb !important;
        color: var(--text) !important;
    }

    .users-dropdown-portal .dropdown-item i {
        width: 18px !important;
        text-align: center !important;
        font-size: .9rem !important;
        color: #697386 !important;
        flex: 0 0 18px !important;
    }

    .users-dropdown-portal .dropdown-item.text-danger {
        color: #dc3545 !important;
    }

    .users-dropdown-portal .dropdown-item.text-danger i {
        color: #dc3545 !important;
    }

    .users-dropdown-portal .dropdown-divider {
        margin: .35rem 0 !important;
        border-top: 1px solid #edf0f4 !important;
    }

    .toolbar .form-control,
    .toolbar .form-select {
        background: var(--bg) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    .toolbar .form-control::placeholder {
        color: var(--text-3) !important;
    }

    .toolbar .search-box {
        background: transparent;
    }

    .toolbar .users-filter-label {
        color: var(--text-2) !important;
    }


@media (max-width: 768px) {
  .bulk-users-toolbar {
    padding: 9px 10px;
    gap: 8px;
  }
  .bulk-users-select {
    min-width: 0;
    justify-content: space-between;
  }
  .bulk-check-all {
    min-width: 0;
    font-size: .76rem;
    gap: 6px;
  }
  .bulk-selected-count {
    min-width: auto;
    white-space: nowrap;
    font-size: .68rem;
  }
  .bulk-users-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .bulk-users-actions .form-select {
    width: 100%;
    min-height: 38px;
  }
  .bulk-users-actions #bulkApplyBtn {
    min-width: 62px;
    min-height: 38px;
  }
}

/* ===== Users page: authoritative responsive/mobile layout ===== */
.users-overview {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: .65rem;
    width: 100%;
    min-width: 0;
}
.users-stat-card { min-width: 0; width: 100%; }

@media (max-width: 1100px), (pointer: coarse) {
    .users-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem;
    }
    .users-stat-card {
        min-width: 0 !important;
        min-height: 72px;
        padding: .68rem .72rem;
    }
}

@media (max-width: 700px), (pointer: coarse) {
    .users-hero-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem;
    }
    .users-hero-actions > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Never let Bootstrap's .table-responsive or an old min-width rule turn the
       users table into a clipped desktop table on a phone. */
    .users-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .users-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    .users-table thead {
        display: none !important;
    }
    .users-table tbody {
        display: block !important;
        width: 100% !important;
    }
    .users-table tbody > tr:not(.mobile-details-row) {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 50px 50px 36px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--border, #e3e6eb) !important;
        background: var(--surface, #fff) !important;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 58px !important;
        padding: .35rem .2rem !important;
        border: 0 !important;
        overflow: hidden !important;
        vertical-align: middle !important;
    }

    /* checkbox | username | status | connection | expand */
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(1) {
        grid-column: 5;
        justify-content: center;
        order: 5;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(2),
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(4) {
        display: none !important;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(3) {
        grid-column: 2;
        order: 2;
        justify-content: flex-start;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(5) {
        grid-column: 3;
        order: 3;
        justify-content: center;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(6) {
        grid-column: 4;
        order: 4;
        justify-content: center;
    }
    .users-table tbody > tr:not(.mobile-details-row) > td:nth-child(7) {
        grid-column: 1;
        order: 1;
        justify-content: center;
    }

    .users-table .bulk-check-cell input {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }
    .users-table .user-row-main,
    .users-table .user-name,
    .users-table .user-detail-line {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .users-table .user-name {
        font-size: .75rem !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .users-table .user-detail-line {
        margin-top: .05rem !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
	display:none !important;
    }
    .users-table .user-detail-line .meta {
        font-size: .58rem !important;
        white-space: nowrap !important;
    }
    .users-table .user-detail-line > :not(.meta) {
        display: none !important;
    }
    .users-table .status {
        font-size: .61rem !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .users-table .status .dot {
        width: 5px !important;
        height: 5px !important;
        flex: 0 0 5px;
    }
    .users-table .actions-cell .row-actions {
        display: none !important;
    }
    .users-table .mobile-expand-btn {
        display: inline-flex !important;
        width: 31px !important;
        height: 31px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #dbe1ea !important;
        border-radius: 8px !important;
        background: var(--surface, #fff) !important;
    }

    .users-table tbody > tr.mobile-details-row {
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .users-table tbody > tr.mobile-details-row.is-open {
        display: block !important;
    }
    .users-table tbody > tr.mobile-details-row > td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: .45rem .3rem .7rem !important;
        border: 0 !important;
        overflow: visible !important;
    }
    .mobile-details-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 430px), (pointer: coarse) and (max-width: 430px) {
    .users-stat-card {
        min-height: 68px;
        padding: .62rem .65rem;
    }
    .users-stat-card .users-stat-label { font-size: .65rem; }
    .users-stat-card strong { font-size: 1.5rem; }
    .users-stat-card > i { font-size: 1rem; }
    .users-table tbody > tr:not(.mobile-details-row) {
        grid-template-columns: 28px minmax(0, 1fr) 46px 46px 34px !important;
    }
}

/* ===== Mobile Input Zoom Fix ===== */
@media (max-width: 768px) {
    input,
    textarea{
        font-size: 16px !important;
    }
}

/* ===== Theme settings — auto day/night + manual picker ===== */
.theme-settings-form {
  margin-top: 18px;
}

.theme-head-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 1rem;
  flex: 0 0 38px;
}

.theme-auto-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 15px;
}

.theme-auto-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.theme-auto-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 1.05rem;
}

.theme-auto-main strong,
.theme-auto-main small {
  display: block;
}

.theme-auto-main strong {
  font-size: .92rem;
  margin-bottom: 3px;
}

.theme-auto-main small {
  color: var(--text-2);
  font-size: .76rem;
  line-height: 1.8;
}

/* clean switch */
.theme-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-switch > span {
  width: 48px;
  height: 27px;
  position: relative;
  display: block;
  border-radius: 99px;
  background: var(--border-strong, var(--border));
  transition: background .2s ease, box-shadow .2s ease;
}

.theme-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}

.theme-switch input:checked + span {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.theme-switch input:checked + span::after {
  transform: translateX(-21px);
}

/* fixed default schedule — no user time inputs */
.theme-auto-schedule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--text-2);
  font-size: .76rem;
}

.theme-auto-schedule span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.theme-auto-schedule span:last-of-type {
  border-left: 0;
}

.theme-auto-schedule i {
  color: var(--accent);
}

.theme-auto-schedule b {
  color: var(--text);
  font-weight: 700;
}

.theme-auto-schedule em {
  margin-right: auto;
  font-style: normal;
  color: var(--text-3);
  font-size: .7rem;
}

.theme-manual-title {
  margin: 20px 0 10px;
}

.theme-manual-title strong,
.theme-manual-title small {
  display: block;
}

.theme-manual-title strong {
  font-size: .88rem;
}

.theme-manual-title small {
  margin-top: 3px;
  color: var(--text-2);
  font-size: .73rem;
}

/* only two clean choices: light / dark */
.theme-settings-form .theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-settings-form .theme-option {
  position: relative;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 15px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-align: right;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.theme-settings-form .theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.theme-settings-form .theme-option.active {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: 0 0 0 2px var(--accent-weak);
}

.theme-settings-form .theme-option strong,
.theme-settings-form .theme-option small {
  display: block;
}

.theme-settings-form .theme-option strong {
  font-size: .9rem;
  margin-bottom: 2px;
}

.theme-settings-form .theme-option small {
  color: var(--text-2);
  font-size: .72rem;
}

.theme-option-check {
  margin-right: auto;
  color: var(--accent);
  opacity: 0;
  font-size: 1rem;
  flex: 0 0 auto;
}

.theme-settings-form .theme-option.active .theme-option-check {
  opacity: 1;
}

.theme-settings-form .theme-preview {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.theme-settings-form .theme-preview-light {
  background: linear-gradient(135deg, #f6f7f9 0 50%, #435cd1 50%);
  color: #435cd1;
}

.theme-settings-form .theme-preview-dark {
  background: linear-gradient(135deg, #0d0f13 0 50%, #5978f0 50%);
}

.theme-current {
  margin-top: 12px;
  color: var(--text-2);
  font-size: .76rem;
  min-height: 20px;
}

.theme-current i {
  color: var(--accent);
  margin-left: 5px;
}

.theme-settings-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .theme-auto-card {
    align-items: flex-start;
  }

  .theme-auto-schedule {
    align-items: flex-start;
  }

  .theme-auto-schedule em {
    width: 100%;
    margin-right: 0;
  }

  .theme-settings-form .theme-picker {
    grid-template-columns: 1fr;
  }

  .theme-settings-form .theme-option {
    min-height: 72px;
  }

  .theme-settings-actions .btn {
    width: 100%;
  }
}

[data-bs-theme="dark"] .dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--text);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background: var(--surface-2);
    color: var(--text);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: var(--border);
}

[data-bs-theme="dark"] .dropdown-menu .text-danger {
    color: #ef4444 !important;
}

[data-bs-theme="dark"] .dropdown-menu .text-danger:hover {
    background: rgba(239, 68, 68, .10);
    color: #f87171 !important;
}


/* =========================================================
   USERS - DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .users-dropdown-portal,
[data-bs-theme="dark"] .row-actions .dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-border-color: var(--border);

    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .50) !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item,
[data-bs-theme="dark"] .row-actions .dropdown-item {
    background: transparent !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item:hover,
[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item:focus,
[data-bs-theme="dark"] .row-actions .dropdown-item:hover,
[data-bs-theme="dark"] .row-actions .dropdown-item:focus {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item i,
[data-bs-theme="dark"] .row-actions .dropdown-item i {
    color: var(--text-2);
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-divider,
[data-bs-theme="dark"] .row-actions .dropdown-divider {
    border-color: var(--border) !important;
    opacity: 1;
}

/* حذف / قطع اتصال */
[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item.text-danger,
[data-bs-theme="dark"] .row-actions .dropdown-item.text-danger {
    color: #ef4444 !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .row-actions .dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, .10) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item.text-success,
[data-bs-theme="dark"] .row-actions .dropdown-item.text-success {
    color: #4ade80 !important;
}

[data-bs-theme="dark"] .users-dropdown-portal .dropdown-item.text-success:hover,
[data-bs-theme="dark"] .row-actions .dropdown-item.text-success:hover {
    background: rgba(74, 222, 128, .10) !important;
}

/* =========================================================
   USER QUICK VIEW - DARK MODE
   ========================================================= */

[data-bs-theme="dark"] #userQuickViewModal .quick-view-modal {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .60) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-header {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-body {
    background: var(--surface) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--border) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-title {
    color: var(--text) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-username {
    color: var(--text-2) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-avatar {
    background: var(--accent-weak) !important;
    color: var(--accent) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .75;
}

[data-bs-theme="dark"] #userQuickViewModal .btn-close:hover {
    opacity: 1;
}
[data-bs-theme="dark"] #userQuickViewModal .quick-view-card,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-stat,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-section,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-grid > div {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-card strong,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-stat strong,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-section strong {
    color: var(--text) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-card span,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-stat span,
[data-bs-theme="dark"] #userQuickViewModal .quick-view-section span {
    color: var(--text-2) !important;
}
/* =========================================================
   QUICK VIEW - DARK MODE BUTTONS / STATUS
   ========================================================= */

[data-bs-theme="dark"] #userQuickViewModal .quick-view-status {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* فعال */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-enabled {
    background: rgba(34, 197, 94, .12) !important;
    border-color: rgba(34, 197, 94, .30) !important;
    color: #4ade80 !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-enabled i {
    color: #4ade80 !important;
}

/* آنلاین */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-online {
    background: rgba(59, 130, 246, .12) !important;
    border-color: rgba(59, 130, 246, .30) !important;
    color: #60a5fa !important;
}

[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-online i {
    color: #60a5fa !important;
}

/* آفلاین */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-offline {
    background: rgba(148, 163, 184, .10) !important;
    border-color: rgba(148, 163, 184, .25) !important;
    color: #94a3b8 !important;
}

/* منقضی */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-status.is-expired {
    background: rgba(239, 68, 68, .12) !important;
    border-color: rgba(239, 68, 68, .30) !important;
    color: #f87171 !important;
}

/* اعتبار فعال */
[data-bs-theme="dark"] #userQuickViewModal #quickViewExpiryStatus.is-enabled {
    background: rgba(34, 197, 94, .12) !important;
    border-color: rgba(34, 197, 94, .30) !important;
    color: #4ade80 !important;
}


/* =========================================================
   QUICK VIEW FOOTER BUTTONS
   ========================================================= */

[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-outline-secondary {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-2) !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-outline-secondary:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-hover, var(--border)) !important;
    color: var(--text) !important;
}


/* ویرایش + تمدید */
[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-primary:hover {
    filter: brightness(1.08);
    color: #fff !important;
}


/* قطع اتصال */
[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-outline-danger {
    background: rgba(239, 68, 68, .08) !important;
    border-color: rgba(239, 68, 68, .35) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] #userQuickViewModal .modal-footer .btn-outline-danger:hover {
    background: rgba(239, 68, 68, .15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

/* Quick View ID */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-id {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}

/* Progress track */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-progress {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* Progress fill */
[data-bs-theme="dark"] #userQuickViewModal .quick-view-progress > span {
    background: var(--accent) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #userQuickViewModal #quickViewTrafficProgress,
[data-bs-theme="dark"] #userQuickViewModal #quickViewTimeProgress {
    background: var(--accent) !important;
}















/* =========================================================
   GLOBAL MOBILE MODAL → BOTTOM DRAWER
   ========================================================= */

@media (max-width: 767.98px) {

    /* Modal container */
    .modal {
        padding: 0 !important;
    }

    /* Dialog */
    .modal .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        margin: 0 !important;

        display: flex;
        align-items: flex-end;

        transform: translateY(100%);
        transition: transform .30s ease-out;
    }

    /* Open */
    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    /* Content */
    .modal .modal-content {
        width: 100% !important;
        max-width: none !important;

        max-height: 92vh;

        margin: 0 !important;

        border-radius: 20px 20px 0 0 !important;

        border-left: 1px solid var(--border, #2b3442) !important;
        border-right: 1px solid var(--border, #2b3442) !important;
        border-top: 1px solid var(--border, #2b3442) !important;
        border-bottom: 0 !important;

        overflow: hidden;

        background: var(--surface, #111821);
        color: var(--text, #e5e7eb);

        box-shadow:
            0 -12px 40px rgba(0, 0, 0, .35);
    }

    /* Drawer handle */
    .modal .modal-content::before {
        content: "";

        display: block;

        width: 42px;
        height: 4px;

        margin: 8px auto 2px;

        border-radius: 999px;

        background: var(--text-3, #64748b);

        opacity: .6;

        flex-shrink: 0;
    }

    /* Header */
    .modal .modal-header {
        padding: 12px 16px;

        border-bottom-color: var(--border, #2b3442) !important;

        background: var(--surface, #111821);
        color: var(--text, #e5e7eb);
    }

    /* Body */
    .modal .modal-body {
        max-height: calc(92vh - 140px);

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        background: var(--surface, #111821);
        color: var(--text, #e5e7eb);
    }

    /* Footer */
    .modal .modal-footer {
        padding: 12px 16px;

        padding-bottom:
            calc(12px + env(safe-area-inset-bottom));

        border-top-color: var(--border, #2b3442) !important;

        background: var(--surface-2, #18212d);
    }

    /* Close button */
    .modal .btn-close {
        width: 34px;
        height: 34px;

        border-radius: 10px;

        opacity: .8;
    }

    /* Bootstrap sizes → full width on mobile */
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 100% !important;
        max-width: none !important;
    }

    /* Buttons easier to tap */
    .modal .modal-footer .btn {
        min-height: 42px;
display: flex;
    align-items: center;
    }

    /* Backdrop */
    .modal-backdrop.show {
        opacity: .65;
    }

}


/* =========================================================
   LIGHT MODE
   ========================================================= */

@media (max-width: 767.98px) {

    [data-bs-theme="light"] .modal .modal-content {
        background: var(--surface, #fff);
        color: var(--text, #182033);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
    }

    [data-bs-theme="light"] .modal .modal-header {
        background: var(--surface, #fff);
        color: var(--text, #182033);
    }

    [data-bs-theme="light"] .modal .modal-body {
        background: var(--surface, #fff);
        color: var(--text, #182033);
    }

    [data-bs-theme="light"] .modal .modal-footer {
        background: var(--surface-2, #f8f9fb);

    }

    [data-bs-theme="light"] .modal .modal-content::before {
        background: #9ca3af;
    }

	.modal-content form{
height:100%;
display:flex;
flex-direction:column;

}
.modal .modal-footer {

margin-top:auto
    }

}

/* =========================================================
   MOBILE BOTTOM DRAWER — CLEAN ANIMATION
   ========================================================= */

@media (max-width: 767.98px) {

    /* Bootstrap fade را برای خود dialog خنثی می‌کنیم */
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog {
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    /* بسته */
    .modal.fade .modal-dialog {
        transform: translate3d(0, 100%, 0) !important;
    }

    /* باز */
    .modal.show .modal-dialog {
        transform: translate3d(0, 0, 0) !important;
    }

}










/* =========================================================
   Mobile Modal Drawer - Swipe Expand
   ========================================================= */
@media (max-width: 767.98px) {

    .modal.modal-drawer {
        padding: 0 !important;
    }

    .modal.modal-drawer .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        display: flex !important;
        align-items: flex-end !important;

        pointer-events: none;
    }

    .modal.modal-drawer .modal-content {
        width: 100% !important;
        height: var(--drawer-height, auto) !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        border-radius: 16px 16px 0 0 !important;
        border-bottom: 0 !important;

        overflow: hidden !important;

        pointer-events: auto;

        transition:
            height 280ms cubic-bezier(.16, 1, .3, 1),
            border-radius 220ms ease;
    }

    .modal.modal-drawer.drawer-expanded .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .modal.modal-drawer .modal-body {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal.modal-drawer .modal-content::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--text-3);
        opacity: .45;
        z-index: 20;
        pointer-events: none;
    }
}