/* ==========================================================================
   Member Dashboard Shell
   Reuses design tokens (--ink, --accent, --surface, etc.) from theme.css,
   which is loaded first. This file only adds dashboard-specific layout.
   ========================================================================== */

body.member-dashboard {
  min-height: 100vh;
}

.dash-wrapper {
  display: flex;
  min-height: 100vh;
  gap: 16px;
  padding: 16px;
}

/* ---- Sidebar (floating island, detached from the edge) ---- */
.dash-sidebar {
  width: 244px;
  flex-shrink: 0;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dash-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.dash-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  border-bottom: 1px solid var(--line);
}
.dash-sidebar-brand img { height: 26px; width: auto; }

.dash-new-link {
  margin: 16px 18px;
}

.dash-nav { list-style: none; margin: 8px 0; padding: 0 12px; flex: 1; }
.dash-nav li { margin-bottom: 2px; }
.dash-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.dash-nav a svg { flex-shrink: 0; opacity: 0.75; }
.dash-nav a:hover { background: var(--line-soft); color: var(--ink); }
.dash-nav a.is-active { background: var(--accent-tint); color: var(--accent); }
.dash-nav a.is-active svg { opacity: 1; }

.dash-nav .treeview > a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: auto;
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.dash-nav .treeview.is-open > a::after { transform: rotate(45deg); }
.dash-nav .treeview-menu {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 30px;
  display: none;
}
.dash-nav .treeview.is-open .treeview-menu { display: block; }
.dash-nav .treeview-menu a { padding: 7px 10px; font-size: 13px; }

.dash-sidebar-meta {
  border-top: 1px solid var(--line);
  padding: 14px 18px 18px;
  font-size: 12.5px;
}
.dash-sidebar-meta .meta-row { margin-bottom: 10px; }
.dash-sidebar-meta .meta-row:last-child { margin-bottom: 0; }
.dash-sidebar-meta .meta-label { color: var(--muted); display: block; }
.dash-sidebar-meta .meta-value { color: var(--ink); font-weight: 600; }

.sidebar-backdrop { display: none; }

/* ---- Topbar ---- */
.dash-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Dashboard preloader — same look as the front-site #preloader, but scoped
   to the area right of the sidebar instead of the whole viewport, so the
   sidebar stays visible/usable while the main area loads.
   Uses position:fixed (viewport-relative) rather than position:absolute
   inside .dash-main — .dash-main is as tall as the full dashboard content
   (often taller than the screen), so absolute+inset:0 centered the dots
   in the middle of that whole scrollable height instead of the middle of
   what's actually visible on screen. Fixed positioning keeps it centered
   in the visible viewport regardless of how long the page is. */
#dash-preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media (min-width: 961px) {
  /* Right edge of the sidebar: .dash-wrapper's 16px left padding +
     244px sidebar width + 16px gap = 276px. Below 961px the sidebar is
     off-canvas (see the 960px breakpoint above), so .dash-main already
     spans the full width and no offset is needed. */
  #dash-preloader { left: 276px; }
}
#dash-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #dash-preloader { display: none; }
}
.dash-topbar {
  height: 62px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 26px;
  position: sticky;
  top: 16px;
  z-index: 40;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.sidebar-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}
.dash-topbar-title { font-size: 15px; font-weight: 600; }
.dash-topbar-right { display: flex; align-items: center; gap: 10px; }

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
  background: var(--signal-tint);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
}

.dropdown { position: relative; }
.dash-topbar-right .dropdown-menu,
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  width: max-content;
  min-width: 200px;
  max-width: 260px;
  margin: 0;
  padding: 6px;
  float: none;
  background: var(--surface-solid);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  font-size: 13.5px;
  text-align: left;
}
.dash-topbar-right .dropdown-menu.is-open,
.dropdown-menu.is-open { display: block; }
.dash-topbar-right .dropdown-menu a,
.dropdown-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--line-soft); color: var(--ink); }
.dropdown-menu .dropdown-header {
  display: block;
  padding: 10px 10px 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.dropdown-menu .dropdown-divider { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.dropdown-menu a.text-danger { color: var(--danger); }
.dropdown-menu a.text-danger:hover { background: var(--danger-tint); }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.user-menu-trigger img { width: 28px; height: 28px; border-radius: 50%; }
.user-menu-trigger .name { font-size: 13.5px; font-weight: 500; }

/* ---- Content ---- */
.dash-content { flex: 1; padding: 4px 0 24px; }
.dash-content-inner { max-width: 1180px; margin: 0 auto; }

.dash-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.dash-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 14.5px;
}
.dash-card-header svg { color: var(--accent); flex-shrink: 0; }
.dash-card-body { padding: 20px; }
.dash-card-body.no-padding { padding: 0; }
.dash-card-body p, .dash-card-body div {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Page header (used on standalone member pages like Traffic Analysis) */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

/* Link cell in dash-table rows */
.link-alias { display: block; font-weight: 600; color: var(--ink); font-size: 14px; }
.link-url-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.empty-hint { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* Wider variant of the analysis chart, for full-month standalone pages */
.analysis-chart-wide { height: 140px; gap: 4px; }
.analysis-chart-wide span { border-radius: 4px 4px 2px 2px; }
.analysis-legend-wide span { font-size: 10px; }
.analysis-legend-wide span.is-faint { opacity: 0; }
@media (max-width: 700px) {
  .analysis-chart-wide { gap: 2px; }
}

/* Traffic Analysis / Traffic Health page */
.ta-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.ta-topbar-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
.ta-topbar-label svg { color: var(--accent); }
.ta-month-form { display: flex; }
.ta-month-select {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.ta-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .ta-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ta-stat-grid { grid-template-columns: 1fr; } }
.ta-stat {
  background: var(--surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.ta-stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.ta-stat-label {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.ta-stat-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-card-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.ta-icon-accent { background: var(--accent); }
.ta-tone-good { color: var(--signal); }
.ta-tone-fair { color: #d97706; }
.ta-tone-poor { color: var(--danger); }
.ta-tone-bg-good { background: linear-gradient(90deg, var(--signal), #34d399); }
.ta-tone-bg-fair { background: linear-gradient(90deg, #d97706, #f59e0b); }
.ta-tone-bg-poor { background: linear-gradient(90deg, var(--danger), #f87171); }
.ta-tone-bg-direct { background: var(--accent); }
.ta-tone-bg-organic { background: var(--signal); }
.ta-tone-bg-referral { background: #06b6d4; }

.ta-health-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ta-health-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.ta-health-pct { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.ta-bar { height: 10px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.ta-bar-lg { height: 12px; }
.ta-bar i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 0.3s ease; }
.ta-health-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin: 10px 0 24px;
}
.ta-health-msg svg { flex-shrink: 0; }

.ta-source-list { display: flex; flex-direction: column; gap: 8px; }
.ta-source-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.ta-source-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.ta-source-pct { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.ta-source-pct-num { color: var(--ink); font-weight: 600; margin-left: 6px; }

.ta-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) { .ta-two-col { grid-template-columns: 1fr; } }

.ta-table th:nth-child(1), .ta-table td.ta-rank { width: 30px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ta-table th:nth-child(3), .ta-table th:nth-child(4) { text-align: right; }
.ta-table td:nth-child(3), .ta-table td:nth-child(4) { text-align: right; }
.ta-strong { font-weight: 700; color: var(--ink); }
.ta-mini-bar {
  display: inline-block;
  width: 60px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.ta-mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.ta-mini-bar i.ta-mini-bar-green { background: var(--signal); }
.ta-mini-pct { font-size: 12px; color: var(--muted); font-family: var(--font-mono); vertical-align: middle; }
@media (max-width: 480px) {
  table.dash-table.ta-table { min-width: 0; width: 100%; }
  table.dash-table.ta-table td, table.dash-table.ta-table th { padding: 10px 12px; }
  .ta-mini-bar { width: 34px; margin-right: 5px; }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stat-card .stat-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.stat-card .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.stat-sublabel { font-size: 11px; color: var(--muted-light); }
.change-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.change-badge.change-up { background: var(--signal-tint); color: var(--signal); }
.change-badge.change-down { background: var(--danger-tint); color: var(--danger); }
.stat-card .stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card.stat-yellow .stat-icon { background: #FEF3C7; color: #B45309; }
.stat-card.stat-aqua .stat-icon { background: var(--accent-tint); color: var(--accent); }
.stat-card.stat-green .stat-icon { background: var(--signal-tint); color: var(--signal); }
.stat-card.stat-red .stat-icon { background: var(--danger-tint); color: var(--danger); }

.dash-table-wrap { max-height: 320px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dash-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13.5px; }
table.dash-table.dash-table-compact { min-width: 0; }
table.dash-table th {
  position: sticky; top: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--line-soft);
  padding: 10px 20px;
}
table.dash-table td { padding: 10px 20px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
table.dash-table tr:hover td { background: var(--paper); }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.status-badge.stat-yellow { background: #FEF3C7; color: #B45309; }
.status-badge.stat-aqua { background: var(--accent-tint); color: var(--accent); }
.status-badge.stat-green { background: var(--signal-tint); color: var(--signal); }
.status-badge.stat-red { background: var(--danger-tint); color: var(--danger); }

.month-select-wrap { text-align: center; margin-bottom: 24px; }
.month-select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--ink);
  min-width: 220px;
}

.announcement-item { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.announcement-item:last-child { border-bottom: none; }
.announcement-item .announcement-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.announcement-item .announcement-date { font-size: 12px; color: var(--muted-light); float: right; }
.announcement-item .announcement-body { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.dash-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted-light);
  text-align: center;
}

/* ---- Dashboard widgets: withdrawal progress, recent/top links ---- */
.progress-track {
  height: 10px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) { .dash-two-col { grid-template-columns: 1fr; } }
.dash-two-col > .dash-card { min-width: 0; }

.mini-list { list-style: none !important; margin: 0; padding: 0; }
.mini-list li {
  list-style: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.mini-list li:first-child { border-top: none; }
.mini-list li a { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.mini-list li a:hover { color: var(--accent); }
.mini-list-meta { font-size: 12px; color: var(--muted-light); flex-shrink: 0; font-family: var(--font-mono); }

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 300px;
  gap: 20px;
  align-items: start;
}
.settings-main { min-width: 0; }
.settings-sidebar { min-width: 0; }
@media (max-width: 1050px) {
  .settings-layout { grid-template-columns: 1fr; }
}
.settings-sidebar .meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
.settings-sidebar .meta-row:last-child { margin-bottom: 0; }
.settings-sidebar .meta-label { color: var(--muted); }
.settings-sidebar .meta-value { color: var(--ink); font-weight: 500; text-align: right; }

.withdrawal-account-info {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.withdrawal-account-info .meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 8px;
}
.withdrawal-account-info .meta-row:last-child { margin-bottom: 0; }
.withdrawal-account-info .meta-label { color: var(--muted); }
.withdrawal-account-info .meta-value { color: var(--ink); font-weight: 500; text-align: right; }

/* ---- Form controls (non-Bootstrap replacement for .form-control) ---- */
.form-control,
.dash-content input[type="text"],
.dash-content input[type="url"],
.dash-content input[type="email"],
.dash-content input[type="number"],
.dash-content input[type="password"],
.dash-content select,
.dash-content textarea {
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  width: 100%;
  /* Selects are back to native rendering now (theme.css no longer sets
     "appearance: none" on them — see the note there). For a NATIVE select,
     "color-scheme" needs to actually match the real background behind it
     (dark surface here) so the browser renders the closed-box text with
     proper contrast; "normal" was a workaround for a different bug that
     only applied when "appearance: none" was in play, and left native
     selects guessing the wrong scheme, which is what washed the text out
     in dark mode. */
  color-scheme: var(--select-scheme, dark);
}
/* backdrop-filter is applied separately (not on select/textarea) because
   pairing "backdrop-filter: blur()" directly with a native <select>'s
   OS-drawn closed-box text causes a GPU compositing glitch in Chromium
   (double/ghosted text on the dropdown's current value) — the widget and
   the blurred layer get painted in slightly offset passes. Text inputs
   don't have this native-widget text layer, so blur on them is safe. */
.dash-content input[type="text"],
.dash-content input[type="url"],
.dash-content input[type="email"],
.dash-content input[type="number"],
.dash-content input[type="password"] {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.dash-content select {
  background: var(--surface-solid);
}
.dash-content select option,
.dash-content select optgroup {
  background: var(--surface-solid) !important;
  color: var(--ink) !important;
}
.dash-content input:focus,
.dash-content select:focus,
.dash-content textarea:focus { outline: none; border-color: var(--accent); }
.dash-content input:disabled,
.dash-content select:disabled,
.dash-content textarea:disabled { background: var(--line-soft); color: var(--muted); -webkit-text-fill-color: var(--muted); }
.dash-content label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}
.dash-content label:first-child { margin-top: 0; }

/* Admin -> Settings and similar "row / col-sm-2 label / col-sm-10 field"
   tab pages: force full-strength text color, a clearly visible border, and
   full opacity on every label/input/select regardless of any legacy
   Bootstrap/AdminLTE assumption that these are still sitting on a plain
   white/light background. This is what was making labels and dropdown
   values look "washed out" / barely readable in both themes. */
.dash-content .tab-pane .row > div,
.dash-content .tab-pane label,
.dash-content .tab-pane > p {
  color: var(--ink) !important;
  opacity: 1 !important;
}
.dash-content .tab-pane .help-block,
.dash-content .tab-pane small,
.dash-content .tab-pane .text-muted {
  color: var(--muted) !important;
  opacity: 1 !important;
}
.dash-content .tab-pane .form-control,
.dash-content .tab-pane select,
.dash-content .tab-pane input,
.dash-content .tab-pane textarea {
  color: var(--ink) !important;
  color-scheme: var(--select-scheme, dark) !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink-soft) !important;
  opacity: 1 !important;
}
/* Same native-select + backdrop-filter ghosting issue as above: keep
   selects on a solid (non-blurred) background even inside tab-pane forms. */
.dash-content .tab-pane select {
  background: var(--surface-solid) !important;
}
.dash-content .tab-pane .form-control:disabled,
.dash-content .tab-pane select:disabled,
.dash-content .tab-pane input:disabled,
.dash-content .tab-pane textarea:disabled {
  color: var(--muted) !important;
  background: var(--line-soft) !important;
  border-color: var(--line) !important;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-bar .input,
.filter-bar select,
.filter-bar input { width: auto; min-width: 160px; }
.filter-bar label { display: none; }

/* ---- Settings/profile forms ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; gap: 16px; } }
.dash-content legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  border: none;
  padding: 0;
  margin: 28px 0 14px;
  /* Without this, Bootstrap's own bare "legend { color: #333333; }" rule is
     the only one setting color (our rule above never touched it), so this
     heading stayed dark grey no matter the theme — invisible on a dark
     background even though everything around it switched correctly. */
  color: var(--ink);
}
.dash-content legend:first-child { margin-top: 0; }
.help-block { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.help-block p { margin: 0 0 4px; font-size: 12.5px; }

/* ---- Callouts, code blocks, well (Tools pages) ---- */
.callout {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.callout h4 { margin: 0 0 8px; font-size: 14.5px; }
/* AdminLTE ships its own ".callout.callout-success/danger/warning/info" rules
   with hardcoded solid backgrounds + "color:#fff !important" — that beats our
   plain rules below regardless of theme, which is why these boxes rendered as
   a solid AdminLTE green/red/etc with low-contrast text in both light and
   dark mode instead of the intended subtle tint. Same specificity + !important
   here restores our theme's colors (and lets them respond to the CSS vars). */
.callout.callout-success { background: var(--signal-tint) !important; border-left: 3px solid var(--signal); }
.callout.callout-success, .callout.callout-success pre { color: var(--ink) !important; }
.callout-success h4, .callout.callout-success h4 { color: var(--signal) !important; }
.callout.callout-info { background: var(--accent-tint) !important; border-left: 3px solid var(--accent); }
.callout.callout-info, .callout.callout-info pre { color: var(--ink) !important; }
.callout-info h4, .callout.callout-info h4 { color: var(--accent) !important; }
.callout.callout-danger { background: var(--danger-tint) !important; border-left: 3px solid var(--danger); }
.callout.callout-danger, .callout.callout-danger pre { color: var(--ink) !important; }
.callout.callout-danger h4 { color: var(--danger) !important; }
.callout.callout-warning { background: rgba(217, 119, 6, 0.14) !important; border-left: 3px solid #D97706; }
.callout.callout-warning, .callout.callout-warning pre { color: var(--ink) !important; }
.callout.callout-warning h4 { color: #D97706 !important; }
.callout pre { background: transparent !important; border: none !important; }

.dash-content pre,
.well {
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 16px;
  position: relative;
}
.dash-content pre b, .well b { color: var(--accent); font-weight: 600; }
/* "Copy" button auto-added by app.js to every <pre> code block */
.dash-content pre {
  padding-right: 76px;
}
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.code-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.text-success { color: var(--signal); }
.text-danger { color: var(--danger); }

.dash-content .checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0;
}
.dash-content .checkbox-field input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  accent-color: var(--accent);
}
.dash-content .checkbox-field label { margin: 0; font-size: 13px; font-weight: 400; }
.dash-content .checkbox-field a { color: var(--accent); }

/* ---- Link list cards (Links index / hidden) ---- */
.link-item { margin-bottom: 14px; }
.link-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.link-item-title a { color: var(--ink); }
.link-item-title a:hover { color: var(--accent); }
.link-item-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.link-item-meta a { color: var(--muted); text-decoration: underline; }
.link-item-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.link-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.link-item-actions .btn { padding: 8px 14px; font-size: 13px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
}

/* Copy-link input group, reused across Links pages (unscoped version of
   the .add-link-result pattern from the public shorten widget) */
.copy-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  max-width: 420px;
  flex: 1;
  min-width: 220px;
}
.copy-group input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.copy-group .copy-it {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: var(--line-soft);
  color: var(--muted);
  cursor: pointer;
  border-left: 1px solid var(--line);
  font-size: 12px;
  white-space: nowrap;
}
.copy-group .copy-it:hover { color: var(--accent); background: var(--accent-tint); }

/* ---- Pagination (unscoped, reused across dashboard list pages) ---- */
ul.pagination {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 20px 0 0;
}
ul.pagination li a,
ul.pagination li.active a,
ul.pagination li.disabled a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-decoration: none;
}
ul.pagination li.active a { background: var(--accent); border-color: var(--accent); color: #fff; }
ul.pagination li a:hover { border-color: var(--accent); color: var(--accent); }
ul.pagination li.disabled a { color: var(--muted-light); cursor: not-allowed; }

/* ---- New Link modal ---- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 22, 28, 0.45);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal-box {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-header h3 { margin: 0; font-size: 16px; text-align: left; flex: 1 1 auto; }
.modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 20px; }
.modal-body input[type="text"],
.modal-body input[type="url"],
.modal-body input[type="password"],
.modal-body select {
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--ink);
  width: 100%;
  margin-bottom: 12px;
}
.modal-body input:focus, .modal-body select:focus { outline: none; border-color: var(--accent); }
.modal-body label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin: 0 0 6px; }
.modal-body .add-link-result:not(:empty) { margin-top: 4px; }

@media (max-width: 960px) {
  .dash-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    height: 100vh;
    border-radius: 0;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }
  .dash-wrapper { padding: 0; gap: 0; }
  .dash-main { gap: 0; }
  .dash-topbar { border-radius: 0; top: 0; }
  .dash-content { padding: 20px 16px 40px; }
  body.sidebar-open .dash-sidebar { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20, 22, 28, 0.35);
    z-index: 60;
  }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .dash-topbar-title { display: none; }
  .user-menu-trigger .name { display: none; }
}

/* ---- Quick actions (dashboard) ---- */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.quick-actions .btn { font-size: 13.5px; padding: 9px 16px; }
.quick-actions .btn svg { margin-right: 6px; vertical-align: -3px; }

/* ---- Account summary header (profile) ---- */
.account-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}
.account-avatar {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.account-summary-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.account-summary-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.account-summary-plan {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .account-summary { flex-wrap: wrap; }
  .account-summary-plan { margin-left: 0; }
}

/* ---- Share buttons (referrals) ---- */
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-decoration: none;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn svg { flex-shrink: 0; }

/* ---- Field tip callout (change password / change email) ---- */
.field-tip {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.field-tip svg { flex-shrink: 0; color: var(--accent); margin-top: 1px; }

/* ---- Related tools strip ---- */
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.tool-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  text-decoration: none;
}
.tool-nav a:hover { border-color: var(--accent); color: var(--accent); }
.tool-nav a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Support: alt contact panel ---- */
.support-alt-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.support-alt-contact .item { display: flex; gap: 12px; align-items: flex-start; }
.support-alt-contact .icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.support-alt-contact .label { font-size: 12.5px; color: var(--muted); }
.support-alt-contact .value { font-size: 13.5px; font-weight: 600; color: var(--ink); word-break: break-word; }

/* ---- Settings quick-links (profile) ---- */
.settings-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.settings-quicklink {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.settings-quicklink:hover { border-color: var(--accent); color: var(--accent); }
.settings-quicklink .icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .settings-quicklinks { grid-template-columns: 1fr; }
}

/* ---- Settings tabs (single-page Billing/Withdrawal/Password/Email) ---- */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.settings-tab-btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
}
.settings-tab-btn:hover { color: var(--ink); border-color: var(--ink); }
.settings-tab-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.settings-tab-btn.is-locked { opacity: 0.6; }
.settings-tab-btn.is-locked.is-active { background: var(--muted); border-color: var(--muted); }
.settings-tab-panel { display: none; }
.settings-tab-panel.is-active { display: block; }
@media (max-width: 640px) {
  .settings-tabs { gap: 6px; }
  .settings-tab-btn { flex: 1 1 calc(50% - 6px); text-align: center; padding: 10px 8px; font-size: 12.5px; }
}

/* ==========================================================================
   Admin panel legacy component compatibility
   Same idea as the .page-body block in theme.css: the admin area's shell
   (sidebar/topbar) is now the new design, but individual admin pages still
   ship the original AdminLTE/Bootstrap markup (.box, .small-box, .label,
   .panel, .nav-tabs, .badge, .callout, modals). Rather than rewrite every
   admin template, we restyle those component classes here so the whole
   panel reads as one consistent design. Scoped to .dash-content so it
   never touches the public site. Remove piece by piece as pages get
   rebuilt to the native dash-card / status-badge / dash-table classes.
   ========================================================================== */
.dash-content .box {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--line);
  box-shadow: none;
  margin-bottom: 20px;
}
.dash-content .box.box-primary,
.dash-content .box.box-info { border-top-color: var(--accent); }
.dash-content .box.box-success { border-top-color: var(--signal); }
.dash-content .box.box-danger { border-top-color: var(--danger); }
.dash-content .box.box-warning { border-top-color: #D97706; }
.dash-content .box.box-solid { border-top-width: 3px; }
.dash-content .box > .box-header {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.dash-content .box > .box-header.with-border { border-bottom: 1px solid var(--line); }
.dash-content .box-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin: 0;
}
.dash-content .box-title .fa,
.dash-content .box-title .fas,
.dash-content .box-title .far { color: var(--accent); margin-right: 6px; }
.dash-content .box-body { padding: 20px; }
.dash-content .box-body.no-padding { padding: 0; }
.dash-content .box-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--line-soft);
}
.dash-content .box .form-inline .form-group { margin-right: 8px; margin-bottom: 8px; }

/* Small stat boxes (dashboard) — normalize AdminLTE's solid color fill
   into a neutral card with a tinted icon, matching .stat-card. */
.dash-content .small-box {
  position: relative;
  background: var(--surface) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--ink) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  border-left: 3px solid var(--line);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 20px;
}
.dash-content .small-box .inner { padding: 18px 20px; }
.dash-content .small-box .inner h3 {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.dash-content .small-box .inner p { font-size: 12.5px; color: var(--muted); margin: 0; }
.dash-content .small-box .icon { color: var(--ink); opacity: 0.12; font-size: 60px; top: 6px; right: 14px; }
.dash-content .small-box > .small-box-footer {
  background: var(--line-soft) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line);
}
.dash-content .small-box.bg-aqua,
.dash-content .small-box.bg-blue { border-left-color: var(--accent); }
.dash-content .small-box.bg-aqua .icon,
.dash-content .small-box.bg-blue .icon { color: var(--accent); }
.dash-content .small-box.bg-green { border-left-color: var(--signal); }
.dash-content .small-box.bg-green .icon { color: var(--signal); }
.dash-content .small-box.bg-yellow { border-left-color: #D97706; }
.dash-content .small-box.bg-yellow .icon { color: #D97706; }
.dash-content .small-box.bg-red { border-left-color: var(--danger); }
.dash-content .small-box.bg-red .icon { color: var(--danger); }

/* Labels / badges */
.dash-content .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.dash-content .label-default { background: var(--line-soft); color: var(--muted); }
.dash-content .label-primary,
.dash-content .label-info { background: var(--accent-tint); color: var(--accent); }
.dash-content .label-success { background: var(--signal-tint); color: var(--signal); }
.dash-content .label-danger { background: var(--danger-tint); color: var(--danger); }
.dash-content .label-warning { background: #FEF3C7; color: #B45309; }
.dash-content .badge {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
}

/* Bootstrap panels (accordions used on a few settings pages) */
.dash-content .panel {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  margin-bottom: 14px;
  overflow: hidden;
}
.dash-content .panel-heading {
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
}
.dash-content .panel-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.dash-content .panel-title a { color: var(--ink); text-decoration: none; display: block; }
.dash-content .panel-body { padding: 18px; }
.dash-content .panel-footer {
  background: var(--line-soft);
  border-top: 1px solid var(--line);
  padding: 16px 18px;
}

/* Plan feature list (Change Your Plan cards) — CPM / ad pages / redirect
   types shown in place of the old raw plan "description" dump. */
.plan-feature-list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-feature-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.plan-feature-list .plan-feature-label { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.plan-feature-list .plan-feature-label svg { width: 15px; height: 15px; flex: 0 0 auto; }
.plan-feature-list .plan-feature-value { font-weight: 600; color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.plan-redirect-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.plan-redirect-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
}
.plan-preview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 18px 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.plan-preview-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.plan-preview-link svg { width: 14px; height: 14px; }

/* Bootstrap tabs used inside .box (nav-tabs-custom) */
.dash-content .box {
  /* Same AdminLTE hardcoded-white-background issue as .nav-tabs-custom
     below, just on the plain ".box" widget used on a couple of admin
     pages (e.g. Users dashboard). */
  background: var(--surface) !important;
  border-top-color: var(--glass-border) !important;
  box-shadow: none !important;
  border: 1px solid var(--glass-border);
}
.dash-content .box-footer {
  background: var(--surface) !important;
  border-top-color: var(--line) !important;
}
.dash-content .nav-tabs-custom {
  /* AdminLTE ships "background: #fff" hardcoded on this exact class — that
     white card was showing through underneath/around our own dark styling
     (which only targeted the tab bar and the individual inputs, not this
     outer wrapper itself), which is what made the whole Settings panel
     look broken/mismatched no matter what we did to the fields inside it. */
  background: var(--surface) !important;
  box-shadow: none !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card-sm);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.dash-content .nav-tabs-custom > .tab-content {
  background: var(--surface) !important;
  border-bottom-right-radius: var(--radius-card-sm);
  border-bottom-left-radius: var(--radius-card-sm);
}
.dash-content ul.nav-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 0 4px;
  background: transparent;
}
.dash-content ul.nav-tabs > li { margin: 0; }
.dash-content ul.nav-tabs > li > a {
  display: inline-block;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}
.dash-content ul.nav-tabs > li.active > a,
.dash-content ul.nav-tabs > li.active > a:focus,
.dash-content ul.nav-tabs > li.active > a:hover,
.dash-content ul.nav-tabs > li > a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}
.dash-content .tab-content { padding-top: 16px; }

/* Callout variants not already covered above */
.dash-content .callout-danger { background: var(--danger-tint); }
.dash-content .callout-danger h4 { color: var(--danger); }
.dash-content .callout-warning { background: #FEF3C7; }
.dash-content .callout-warning h4 { color: #B45309; }

/* Bootstrap alerts used outside the .flash-message wrapper */
.dash-content .alert {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid transparent;
  font-size: 13.5px;
}
.dash-content .alert-success { background: var(--signal-tint); color: var(--signal); }
.dash-content .alert-danger { background: var(--danger-tint); color: var(--danger); }
.dash-content .alert-warning { background: #FEF3C7; color: #B45309; }
.dash-content .alert-info { background: var(--accent-tint); color: var(--accent); }

.dash-content .list-group { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.dash-content .list-group-item {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--line-soft);
  padding: 12px 16px;
  font-size: 13.5px;
}
.dash-content .list-group-item:first-child { border-top: none; }

.dash-content .row { margin-bottom: 14px; }
.dash-content .row > [class*="col-sm-2"] {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding-top: 8px;
}
.dash-content .row > [class*="col-sm-10"] .help-block { margin-top: 6px; }

/* Bootstrap modal dialogs (legacy JS popups) */
.modal-content {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.modal-title { font-size: 16px; font-weight: 600; margin: 0; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--line-soft);
}

/* ==========================================================================
   Small-phone hardening (≤480px) — applies on top of the ≤960px sidebar
   breakpoint above. Targets rows/panels that use inline flex layout and
   could overflow a narrow viewport instead of wrapping.
   ========================================================================== */
@media (max-width: 480px) {
  .dash-topbar { padding: 0 14px; gap: 8px; }
  .dash-topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .balance-pill { font-size: 12px; padding: 6px 10px; }
  .dash-card-body { padding: 18px 16px; }
  .dash-card-header { padding: 14px 16px; }
  .stat-value { font-size: 20px; }
  .quick-actions .btn,
  .tool-nav a,
  .share-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .account-summary { padding: 18px 16px; }
  .account-summary-plan { font-size: 11px; padding: 5px 10px; }
  ul.pagination { flex-wrap: wrap; }
  .month-select-wrap { width: 100%; }
  .month-select-wrap select.month-select { width: 100%; }
}

/* Cookie notice banner (#cookie-pop) — built by app.js, normally styled by
   app.css, but the Member/Admin dashboard layout doesn't load app.css.
   Without this, the banner rendered as plain unstyled text sitting in the
   normal page flow, colliding with whatever content happened to be at the
   bottom of the page (e.g. the footer) instead of floating above it. */
#cookie-pop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  width: 100%;
  background-color: #222222;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
  padding: 15px 0;
}
#cookie-pop .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
/* Neutralize Bootstrap's .col-xs-9 / .col-xs-3 grid styles (width, padding,
   float) inside the cookie bar — their combined width + gutter padding
   added up to more than 100% of the row, which pushed the button onto its
   own line under flex-wrap. Flexbox alone sizes these two children now. */
#cookie-pop .container-fluid > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
  float: none;
}
#cookie-pop .container-fluid > [class*="col-"]:first-child { flex: 1 1 auto; min-width: 0; }
#cookie-pop .container-fluid > [class*="col-"]:last-child { flex: 0 0 auto; }
#cookie-pop .cookie-message { color: #ffffff; font-size: 13.5px; margin: 0; }
#cookie-pop .cookie-message a { color: #ffffff; text-decoration: underline; }
#cookie-pop .cookie-confirm { text-align: right; }
#cookie-pop #got-cookie {
  background: var(--accent, #2E5EEA);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#cookie-pop #got-cookie:hover { background: var(--accent-hover, #4C74F0); }
@media (max-width: 767px) {
  #cookie-pop .container-fluid { flex-direction: column; align-items: stretch; text-align: center; }
  #cookie-pop .cookie-confirm { text-align: center; }
}