/* Campaign Execution Console Styles */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.console-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  border-radius: 24px;
}

.console-header-left {
  max-width: 65%;
}

.console-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
}

.console-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.console-header-right {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.console-metric-pill {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}

.console-metric-pill span {
  font-family: var(--font-mono);
}

.metric-active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

.metric-review {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}

.metric-draft {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
}

.console-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 24px;
  overflow: visible !important; /* Allow calendar popup to show */
  z-index: 10; /* Create a higher stacking context than the table below it */
}

.console-tabs {
  display: flex;
  gap: 0.25rem;
}

.console-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.console-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
}

.console-tab.active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.tab-badge {
  background: rgba(255,255,255,0.1);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

.console-tab.active .tab-badge {
  background: rgba(255,255,255,0.15);
  color: var(--text-primary);
}

.console-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--panel-border);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  width: 250px;
}

.console-search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  width: 100%;
  outline: none;
}

.console-search input::placeholder {
  color: var(--text-muted);
}

.console-table-container {
  padding: 0;
  border-radius: 24px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.execution-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.execution-table th {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}

.execution-table th:first-child {
  border-top-left-radius: 0 !important;
}
.execution-table th:last-child {
  border-top-right-radius: 0 !important;
}

.execution-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
}

.execution-table tr:hover td {
  background: rgba(255,255,255,0.015);
}

.execution-table tr:last-child td {
  border-bottom: none;
}

/* Campaign Name & Platforms */
.camp-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
  display: block;
}

.camp-platforms {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.plat-badge {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.plat-fb { background: rgba(24, 119, 242, 0.15); color: #60a5fa; }
.plat-ig { background: rgba(225, 48, 108, 0.15); color: #f472b6; }
.plat-tt { background: rgba(0, 242, 254, 0.15); color: #2dd4bf; }

.camp-account {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Status Pills */
.status-pill {
  padding: 0.35rem 0.65rem;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.status-active { color: #34d399; border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.16); }
.status-paused { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.16); }
.status-pending-pause { color: #fbbf24; border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.16); }
.status-pending-activation { color: #22d3ee; border-color: rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.18); }
.status-completed { color: #c084fc; border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.18); }
.status-rejected { color: #f87171; border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.18); }
.status-draft { color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.12); }
.status-pending { color: #60a5fa; border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.18); }

/* Data Cells */
.data-main {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.data-main.font-mono {
  font-family: var(--font-mono);
}

.data-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.2rem;
}

.data-sub.font-mono {
  font-family: var(--font-mono);
}

.text-gold { color: #fbbf24; }
.text-purple { color: #c084fc; }
.text-pink { color: #f472b6; }

/* Actions */
.action-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
  white-space: nowrap;
  width: 100%;
}

.btn-action-scale {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-action-scale:hover {
  background: rgba(245, 158, 11, 0.2);
  transform: none !important;
}

.btn-action-icon {
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-action-icon:hover {
  background: rgba(245, 158, 11, 0.1);
}

.btn-action-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--panel-border);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-action-secondary:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

/* Light Mode Overrides */
[data-theme="light"] .execution-table th { color: #64748b; }
[data-theme="light"] .console-search { background: #f8fafc; }
[data-theme="light"] .console-search input { color: #0f172a; }
[data-theme="light"] .data-main { color: #0f172a; }
[data-theme="light"] .camp-title { color: #0f172a; }
[data-theme="light"] .execution-table tr:hover td { background: rgba(0,0,0,0.02); }

/* Zebra Striping */
.execution-table tbody tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.035); }
[data-theme="light"] .execution-table tbody tr:nth-child(even) td { background-color: rgba(0, 0, 0, 0.035); }

/* --- Calendar Date Picker --- */
.calendar-picker-wrapper {
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}

.calendar-picker-btn {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  min-width: 130px;
}

[data-theme="light"] .calendar-picker-btn {
  background: #f8fafc;
  color: #0f172a;
}

.calendar-picker-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
}



.calendar-picker-wrapper {
  position: relative;
  z-index: 100 !important;
}

.widget-header {
  position: relative;
  z-index: 20 !important;
}

.calendar-popup {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 270px;
  background: #141414 !important;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  z-index: 100001 !important;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Smart Directional Placement (Left vs Right) */
.calendar-popup.align-left {
  left: 0 !important;
  right: auto !important;
}

.calendar-popup.align-right {
  right: 0 !important;
  left: auto !important;
}

[data-theme="light"] .calendar-popup {
  background: #ffffff !important;
}

.calendar-popup.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Global Calendar Modal Backdrop for Mobile Viewports */
.calendar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.calendar-backdrop.show {
  display: block;
  opacity: 1;
}

.cal-nav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-btn svg {
  pointer-events: none;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cal-month-year {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
}

[data-theme="light"] .cal-month-year { color: #0f172a; }

.cal-nav-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .cal-nav-btn {
  border-color: rgba(0,0,0,0.1);
  color: #64748b;
}

.cal-nav-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

[data-theme="light"] .cal-nav-btn:hover {
  background: rgba(0,0,0,0.05);
  color: #0f172a;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.05s ease;
}

[data-theme="light"] .cal-day { color: #334155; }

.cal-day:hover:not(.empty):not(.range-start):not(.range-end):not(.in-range):not(.preview-range) {
  background: rgba(255,255,255,0.1);
}

[data-theme="light"] .cal-day:hover:not(.empty):not(.range-start):not(.range-end):not(.in-range):not(.preview-range) {
  background: rgba(0,0,0,0.05);
}

.cal-day.empty {
  cursor: default;
  color: transparent;
}

.cal-day.range-start,
.cal-day.range-end {
  background: var(--primary-gradient);
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(255, 94, 0, 0.3);
}

.cal-day.in-range {
  background: rgba(255, 94, 0, 0.15);
  border-radius: 0;
}

[data-theme="light"] .cal-day.in-range {
  background: rgba(255, 94, 0, 0.1);
}

.cal-day.preview-range {
  background: rgba(255, 94, 0, 0.08);
  border-radius: 0;
}

.cal-presets {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cal-preset-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-grow: 1;
  text-align: center;
}

[data-theme="light"] .cal-preset-btn {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.05);
  color: #64748b;
}

.cal-preset-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

[data-theme="light"] .cal-preset-btn:hover {
  background: rgba(0,0,0,0.05);
  color: #0f172a;
}

.cal-header-select {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}

[data-theme="light"] .cal-header-select {
  color: #0f172a;
  border-color: rgba(0,0,0,0.1);
}

.cal-header-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* --- Table Sorting --- */
th.sortable {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  user-select: none;
}

th.sortable:hover {
  background-color: #1a1a1d;
}

[data-theme="light"] th.sortable:hover {
  background-color: #e2e8f0;
}

.sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.3;
  font-size: 0.8em;
}

th.sortable.sort-asc,
th.sortable.sort-desc {
  color: #3b82f6 !important;
}

[data-theme="light"] th.sortable.sort-asc,
[data-theme="light"] th.sortable.sort-desc {
  color: #2563eb !important;
}

th.sortable.sort-asc .sort-icon::after {
  content: '↑';
  opacity: 1;
  color: #3b82f6;
}

[data-theme="light"] th.sortable.sort-asc .sort-icon::after {
  color: #2563eb;
}

th.sortable.sort-desc .sort-icon::after {
  content: '↓';
  opacity: 1;
  color: #3b82f6;
}

[data-theme="light"] th.sortable.sort-desc .sort-icon::after {
  color: #2563eb;
}

th.sortable:not(.sort-asc):not(.sort-desc) .sort-icon::after {
  content: '⇅';
}

/* === OBJECTIVE FILTER BAR === */
.objective-filter-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 1.5rem;
  background: rgba(15, 15, 18, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
}
.objective-filter-bar::-webkit-scrollbar { display: none; }

.objective-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
}
.objective-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.objective-pill.active {
  background: rgba(255, 94, 0, 0.1);
  border-color: rgba(255, 94, 0, 0.4);
  color: #ff5e00;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.15), inset 0 0 12px rgba(255, 94, 0, 0.05);
}
.objective-pill .pill-icon {
  font-size: 1rem;
  line-height: 1;
}
.objective-pill .pill-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  margin-left: 0.25rem;
}
.objective-pill.active .pill-count {
  background: rgba(255, 94, 0, 0.2);
  color: #ff5e00;
}

/* === COLOR-CODED METRIC GROUPS === */
.metric-groups-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-group {
  margin-bottom: 0.5rem;
}

.metric-group.group-primary .stat-box {
  background: rgba(168, 85, 247, 0.05); /* Purple tint */
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.04);
}
.metric-group.group-primary .stat-box .stat-icon-wrapper {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.metric-group.group-secondary .stat-box {
  background: rgba(59, 130, 246, 0.05); /* Blue tint */
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.04);
}
.metric-group.group-secondary .stat-box .stat-icon-wrapper {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.metric-group.group-tertiary .stat-box {
  background: rgba(34, 197, 94, 0.05); /* Green tint */
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.04);
}
.metric-group.group-tertiary .stat-box .stat-icon-wrapper {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.stat-box-simple {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(20, 20, 24, 0.65);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
}
.stat-box-simple .simple-icon {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.stat-box-simple .simple-metrics {
  display: flex;
  gap: 2rem;
}
.stat-box-simple .simple-metric {
  display: flex;
  flex-direction: column;
}
.stat-box-simple .simple-metric .simple-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-box-simple .simple-metric .simple-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

@keyframes metricFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.stat-box-animated {
  opacity: 0;
  animation: metricFadeIn 0.6s ease-in-out forwards;
}
.stat-box-simple-animated {
  opacity: 0;
  animation: metricFadeIn 0.6s ease-in-out forwards;
}

/* === WIZARD OBJECTIVES GRID (7 cards) === */
.objectives-grid-expanded {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.objectives-grid-expanded .option-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}
.objectives-grid-expanded .option-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.objectives-grid-expanded .option-card.selected {
  border-color: rgba(255, 94, 0, 0.5);
  background: rgba(255, 94, 0, 0.06);
  box-shadow: 0 0 20px rgba(255, 94, 0, 0.1);
}
.objectives-grid-expanded .option-card .obj-icon {
  font-size: 1.4rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.objectives-grid-expanded .option-card.selected .obj-icon {
  background: rgba(255, 94, 0, 0.15);
  border-color: rgba(255, 94, 0, 0.3);
}
.objectives-grid-expanded .obj-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.15rem;
}
.objectives-grid-expanded .obj-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
  display: block;
}
.objectives-grid-expanded .option-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* === LIGHT MODE CONTRAST FIXES === */
[data-theme="light"] .metric-group.group-primary .stat-box {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.4);
}
[data-theme="light"] .metric-group.group-primary .stat-box .stat-icon-wrapper {
  background: rgba(168, 85, 247, 0.2);
  color: #9333ea;
}

[data-theme="light"] .metric-group.group-secondary .stat-box {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
}
[data-theme="light"] .metric-group.group-secondary .stat-box .stat-icon-wrapper {
  background: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

[data-theme="light"] .metric-group.group-tertiary .stat-box {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
}
[data-theme="light"] .metric-group.group-tertiary .stat-box .stat-icon-wrapper {
  background: rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

[data-theme="light"] .objective-filter-bar {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .stat-box-simple {
  background: rgba(255, 255, 255, 0.75);
}

/* === DATA TABLES (Transaction History) === */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  padding: 0.65rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
}

.data-table td {
  padding: 0.58rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
  font-size: 0.82rem;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* === DASHBOARD LAYOUT GRID === */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: start;
}

.grid-col-8 {
  grid-column: span 8;
}

.grid-col-4 {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .grid-col-8, .grid-col-4 {
    grid-column: span 1;
  }
}

/* Custom Scrollbar for Table Container - Clean, Non-Bleeding */
.console-table-container,
.table-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(249, 115, 22, 0.55) transparent !important;
}
.console-table-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.console-table-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 0 !important;
}
.console-table-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.55) !important;
  border-radius: 999px !important;
  border: none !important;
}
.console-table-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.9) !important;
}
.console-table-container::-webkit-scrollbar-corner,
.table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

[data-theme="light"] .console-table-container,
[data-theme="light"] .table-container {
  scrollbar-color: rgba(234, 88, 12, 0.5) transparent !important;
}
[data-theme="light"] .console-table-container::-webkit-scrollbar-track,
[data-theme="light"] .table-container::-webkit-scrollbar-track {
  background: transparent !important;
}
[data-theme="light"] .console-table-container::-webkit-scrollbar-thumb,
[data-theme="light"] .table-container::-webkit-scrollbar-thumb {
  background: rgba(234, 88, 12, 0.5) !important;
  border-radius: 999px !important;
  border: none !important;
}
[data-theme="light"] .console-table-container::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 88, 12, 0.85) !important;
}

.execution-table {
  min-width: 1200px;
}

/* ==========================================================================
   ADS TABLE VIEWPORT & FULL-PAGE SCROLLING SYSTEM (DESKTOP & UNIVERSAL)
   Allows natural vertical page scrolling past KPI cards down to table,
   with the table sticking when reached to fill 100vh with sticky headers
   and bottom-following horizontal scrollbar.
   ========================================================================== */
.main-viewport,
body.ads-table-view .main-viewport,
.app-container:has(#page-client-campaigns.active) .main-viewport,
.app-container:has(#page-ads.active) .main-viewport,
.app-container:has(#page-admin-ads.active) .main-viewport {
  height: 100% !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Page Header Row - Full Width Wall-to-Wall, No Space Above, Solid Background */
.page-header-row {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.95rem 2rem !important;
  z-index: 850 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #060a18 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .page-header-row {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Page Content Viewport */
#pages-viewport,
.app-container:has(#page-campaign-details.active) #pages-viewport {
  height: auto !important;
  min-height: calc(100vh - 65px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  padding: 1.5rem 2rem 2.5rem 2rem !important;
  box-sizing: border-box !important;
}

/* On Ads Table Views: Zero bottom padding so the page scroll stops precisely at Image 1 */
body.ads-table-view #pages-viewport,
.app-container:has(#page-client-campaigns.active) #pages-viewport,
.app-container:has(#page-ads.active) #pages-viewport,
.app-container:has(#page-admin-ads.active) #pages-viewport {
  height: auto !important;
  min-height: calc(100vh - 65px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  padding: 1.25rem 2rem 0 2rem !important;
  box-sizing: border-box !important;
}

#page-client-campaigns.active,
#page-ads.active, 
#page-admin-ads.active,
body.ads-table-view #page-admin-client-details.active {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Campaign Details Page (Always Fully Scrollable) */
.app-container:has(#page-campaign-details.active) .main-viewport,
.main-viewport:has(#page-campaign-details.active) {
  height: 100% !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
}

.app-container:has(#page-campaign-details.active) #pages-viewport,
#pages-viewport:has(#page-campaign-details.active) {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

#page-campaign-details.active {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: block !important;
  padding-bottom: 4rem !important;
}

/* Table Container (Sticks to top when reached, taking ~100vh with pinned headers & bottom scrollbar) */
.console-table-container,
.table-container,
#page-client-campaigns.active .console-table-container,
#page-ads.active .console-table-container,
#page-admin-ads.active .console-table-container,
body.ads-table-view .console-table-container,
#tab-details-campaigns .console-table-container,
#tab-details-transactions .console-table-container {
  width: 100% !important;
  max-width: 100% !important;
  position: sticky !important;
  top: 62px !important;
  height: calc(100vh - 78px) !important;
  max-height: calc(100vh - 78px) !important;
  min-height: 480px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  background: #020617 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .console-table-container,
[data-theme="light"] .table-container,
[data-theme="light"] #page-client-campaigns.active .console-table-container,
[data-theme="light"] #page-ads.active .console-table-container,
[data-theme="light"] #page-admin-ads.active .console-table-container,
[data-theme="light"] body.ads-table-view .console-table-container,
[data-theme="light"] #tab-details-campaigns .console-table-container,
[data-theme="light"] #tab-details-transactions .console-table-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

/* Neutralize any remaining glass-panel wrappers in admin client details tabs */
#tab-details-campaigns > .glass-panel,
#tab-details-transactions > .glass-panel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   ADMIN KPIS GRID (DESKTOP DEFAULT: 3 COLUMNS)
   ========================================================================== */
.admin-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.admin-kpis-grid .admin-kpi-card {
  padding: 1.5rem;
  box-sizing: border-box;
}

.admin-kpis-grid .admin-kpi-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-kpis-grid .admin-kpi-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0.5rem;
}

.console-filter-bar,
.objective-filter-bar {
  flex-shrink: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* Sticky Header */
.execution-table th,
.data-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background-color: #020617 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}

/* Sticky First Column */
.execution-table th:first-child,
.data-table th:first-child {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 40 !important;
  background-color: #020617 !important;
}

.execution-table td:first-child,
.data-table td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 20 !important;
}

/* Corner Intersection */
.execution-table th:first-child {
  z-index: 30;
}

/* Maintain Zebra Striping on Sticky Column */
.execution-table tbody tr:nth-child(even) td:first-child {
  background-color: #161619;
}

/* Maintain Opaque Background on Hover for Sticky Column */
.execution-table tbody tr:hover td:first-child {
  background-color: #1a1a1d;
}

/* Light Mode Overrides for Sticky */
[data-theme="light"] .execution-table th,
[data-theme="light"] .execution-table th:first-child,
[data-theme="light"] .execution-table td:first-child {
  background-color: #f8fafc;
}
[data-theme="light"] .execution-table th {
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
[data-theme="light"] .execution-table th:first-child,
[data-theme="light"] .execution-table td:first-child {
  box-shadow: 1px 0 0 rgba(0,0,0,0.05);
}
[data-theme="light"] .execution-table tbody tr:nth-child(even) td:first-child {
  background-color: #f1f5f9;
}
[data-theme="light"] .execution-table tbody tr:hover td:first-child {
  background-color: #e2e8f0;
}

/* --- Redesigned Admin Order Review Modal --- */
.review-modal-content {
  background: #070b14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  max-width: 960px !important;
  width: 95% !important;
  height: 850px !important;
  max-height: 94vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem 2rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.5) !important;
  color: #f8fafc;
  font-family: var(--font-sans);
}

.review-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 94, 0, 0.4) transparent;
}
.review-tab-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.review-tab-content::-webkit-scrollbar-track {
  background: transparent;
}
.review-tab-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 94, 0, 0.4);
  border-radius: 20px;
}
.review-tab-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 94, 0, 0.8);
}

.review-modal-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.review-modal-console-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 138, 0, 0.12);
  border: 1px solid rgba(255, 138, 0, 0.3);
  color: #ff8a00;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.review-modal-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-modal-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.review-modal-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

.review-modal-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.review-modal-status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.review-modal-status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.review-modal-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.review-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Tabs Bar */
.review-modal-tabs-bar {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}

.review-modal-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  color: #94a3b8 !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.75rem 0.35rem !important;
  margin-bottom: -1px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.review-modal-tab-btn:hover {
  color: #e2e8f0 !important;
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.review-modal-tab-btn.active {
  color: #ff8a00 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid #ff8a00 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.review-modal-tab-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-family: var(--font-mono);
}

.review-modal-tab-btn.active .review-modal-tab-badge {
  background: rgba(255, 138, 0, 0.2);
  color: #ff8a00;
}

/* Grid Layout for Tab 1 */
.review-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.review-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Objective Card Special Style */
.review-card-objective {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(255, 94, 0, 0.3);
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.review-card-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.review-card-objective .review-card-label {
  color: #ff8a00;
}

.review-card-platforms-header {
  color: #00f2fe;
}

.review-card-value-large {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.review-card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.review-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.review-card-tag-goal {
  border: 1px solid rgba(255, 138, 0, 0.4);
  color: #ff8a00;
  background: rgba(255, 138, 0, 0.1);
}

.review-card-tag-conversations {
  border: 1px solid rgba(255, 138, 0, 0.4);
  color: #ffab00;
  background: rgba(255, 138, 0, 0.15);
}

/* Platform Chips */
.review-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.review-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(0, 242, 254, 0.06);
  border: 1px solid rgba(0, 242, 254, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
}

.review-platform-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 242, 254, 0.15);
  color: #00f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

/* Client Quick Info Row */
.review-card-full {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.review-client-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #7c2d12;
  color: #ffedd5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.review-client-name {
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 2px;
}

.review-client-subtext {
  font-size: 0.8rem;
  color: #94a3b8;
}

.btn-call-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-call-direct:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* Footer Action Bar */
.review-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
}

.review-modal-actions-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.review-modal-actions-btns {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.btn-pill-publish {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #00f2fe;
  color: #050b14;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.btn-pill-publish:hover {
  background: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);
}

.btn-pill-refuse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(225, 29, 72, 0.15);
  color: #fda4af;
  border: 1px solid rgba(225, 29, 72, 0.4);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pill-refuse:hover {
  background: rgba(225, 29, 72, 0.25);
  color: #fff;
}

.btn-pill-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pill-call:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* --- Tab 2: Creative Assets & Post Styles --- */
.review-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.15rem;
  margin-top: 1rem;
}

.review-asset-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.review-asset-card:hover {
  border-color: rgba(255, 138, 0, 0.3);
  transform: translateY(-2px);
}

.review-asset-img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
}

.review-asset-footer {
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: #cbd5e1;
}

.review-asset-filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.review-btn-download-bundle,
.review-btn-copy-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid rgba(255, 138, 0, 0.5);
  color: #ff8a00;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.review-btn-download-bundle:hover,
.review-btn-copy-text:hover {
  background: rgba(255, 138, 0, 0.15);
  color: #ffab00;
}

.review-copy-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* Case B: Social Page Post Preview */
.review-social-post-card {
  background: rgba(10, 15, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  max-width: 620px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.review-social-header {
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.review-social-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-social-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f97316;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.review-social-author-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.review-social-author-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.review-social-platform-badge {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.review-social-body-text {
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.88rem;
  color: #f1f5f9;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.review-social-media-container {
  position: relative;
  width: 100%;
  max-height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.review-social-media-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}

.review-social-badge-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 242, 254, 0.2);
  color: #00f2fe;
  border: 1px solid #00f2fe;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.25rem 0.65rem;
  backdrop-filter: blur(4px);
}

.review-social-footer {
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: #94a3b8;
}

.review-social-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.review-btn-view-original {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.review-btn-view-original:hover {
  background: rgba(0, 242, 254, 0.15);
  color: #38bdf8;
}

/* --- Tab 3: Client Details Styles --- */
.review-client-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: 0.5rem;
}

.review-social-channel-card {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.review-social-channel-card.card-fb {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.review-social-channel-card.card-ig {
  border-color: rgba(236, 72, 153, 0.3);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.review-social-channel-card.card-tt {
  border-color: rgba(6, 182, 212, 0.3);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.review-channel-handle {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  word-break: break-all;
}

.btn-channel-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-channel-fb {
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}
.btn-channel-fb:hover {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.btn-channel-ig {
  border: 1px solid rgba(236, 72, 153, 0.4);
  color: #ec4899;
  background: rgba(236, 72, 153, 0.1);
}
.btn-channel-ig:hover {
  background: rgba(236, 72, 153, 0.25);
  color: #f472b6;
}

.btn-channel-tt {
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
}
.btn-channel-tt:hover {
  background: rgba(6, 182, 212, 0.25);
  color: #22d3ee;
}

.review-card-website {
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  background: rgba(8, 14, 28, 0.9) !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.5rem !important;
}

#btn-copy-client-website {
  border: 1px solid rgba(255, 138, 0, 0.6) !important;
  color: #ff8a00 !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.45rem 1.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#btn-copy-client-website:hover {
  background: rgba(255, 138, 0, 0.15) !important;
  color: #ffab00 !important;
}

.review-btn-visit-website {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #00f2fe;
  color: #050b14 !important;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.45rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

.review-btn-visit-website:hover {
  background: #38bdf8;
  color: #050b14 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.5);
}

.review-icon-box-crown {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-icon-box-meta {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-icon-box-meta.disconnected {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* === DIRECTION TAB STYLES === */
.review-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1.5rem;
}

.review-direction-card {
  position: relative;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 120px;
}

.review-direction-card:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 138, 0, 0.35);
}

.review-direction-card.active {
  border: 2px solid #ff5e00 !important;
  background: rgba(255, 94, 0, 0.08) !important;
  box-shadow: 0 0 20px rgba(255, 94, 0, 0.18), inset 0 0 15px rgba(255, 94, 0, 0.05) !important;
}

.review-direction-active-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #ff5e00;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.review-direction-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.review-direction-icon-box.icon-box-cbo {
  background: rgba(255, 138, 0, 0.15);
  color: #ff8a00;
  border-color: rgba(255, 138, 0, 0.3);
}

.review-direction-icon-box.icon-box-prospecting {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.3);
}

.review-direction-icon-box.icon-box-retargeting {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
}

.review-direction-icon-box.icon-box-retention {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.review-direction-icon-box.icon-box-lookalike {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.review-direction-icon-box.icon-box-abo {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.3);
}

.review-direction-icon-box.icon-box-asc {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.review-direction-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffffff;
  margin-bottom: 0.15rem;
}

/* === ADD NEW CLIENT WIZARD MODAL STYLES (Tailwind max-w-3xl = 768px Exact Copy) === */
#modal-admin-add-client .modal-content {
  background: #020617 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  padding: 0 !important;
  max-width: 768px !important;
  width: 92% !important;
  height: 800px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(249, 115, 22, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.add-client-orb-top {
  position: absolute;
  top: 0;
  left: 25%;
  width: 24rem;
  height: 24rem;
  background: rgba(249, 115, 22, 0.12);
  border-radius: 9999px;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

.add-client-orb-bottom {
  position: absolute;
  bottom: 0;
  right: 25%;
  width: 24rem;
  height: 24rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 9999px;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

.add-client-header-container {
  position: relative;
  z-index: 1;
  padding: 1.75rem 2rem;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, #020617 50%, rgba(15, 23, 42, 0.9) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

#modal-admin-add-client form,
#modal-admin-add-client .add-client-modal-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.add-client-body-container {
  position: relative;
  z-index: 1;
  padding: 1.5rem 2rem 2rem 2rem;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(249, 115, 22, 0.4) rgba(15, 23, 42, 0.4);
}

.add-client-body-container::-webkit-scrollbar {
  width: 5px;
}

.add-client-body-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 10px;
}

.add-client-body-container::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.4);
  border-radius: 10px;
}

.add-client-body-container::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.8);
}

.add-client-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.add-client-tag {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.add-client-icon-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.add-client-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
  color: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
  flex-shrink: 0;
}

.add-client-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.add-client-subtitle {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  line-height: 1.5;
  max-width: 36rem;
}

.add-client-tabs-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding-top: 1.25rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-client-tab-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #94a3b8;
  text-align: left;
}

.add-client-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.add-client-tab-btn.active {
  background: rgba(249, 115, 22, 0.15) !important;
  border: 1px solid rgba(249, 115, 22, 0.6) !important;
  outline: 1px solid rgba(249, 115, 22, 0.4) !important;
  color: #ffffff !important;
}

.add-client-tab-icon {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
}

.add-client-tab-btn.active .add-client-tab-icon {
  background: #f97316 !important;
  color: #020617 !important;
  border-color: #fb923c !important;
}

.add-client-wizard-tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.add-client-step-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.add-client-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.75rem;
}

.add-client-step-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.input-icon-wrapper {
  position: relative;
  width: 100%;
}

.input-icon-left {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.input-icon-right {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
}

.input-icon-right:hover {
  color: #cbd5e1;
}

.input-icon-wrapper input {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  height: 44px !important;
  transition: all 0.2s ease !important;
}

.input-icon-wrapper input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3) !important;
  outline: none !important;
}

.input-icon-wrapper input.error {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.3) !important;
}

.input-error-msg {
  color: #fb7185;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.add-client-security-box {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.6;
}

.add-client-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 1rem 2rem 1.25rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #020617;
  position: relative;
  z-index: 10;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

.btn-add-client-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #ff5e00 0%, #ff8c00 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(255, 94, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-add-client-next:hover {
  background: linear-gradient(135deg, #ff701a 0%, #ffa01a 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 94, 0, 0.45) !important;
}

.btn-add-client-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #ff5e00 0%, #ff8c00 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 15px rgba(255, 94, 0, 0.35) !important;
}

.btn-add-client-submit:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   GLOBAL SOLID DARK SLATE SYSTEM (Removing Glassmorphism Across Entire App)
   Matching Review Order Popup & Add Client Wizard design system
   ========================================================================== */

/* 1. Hide liquid glass background refraction elements & blurred radial orbs */
.glass-bg-orbs,
.orb,
.add-client-orb-top,
.add-client-orb-bottom {
  display: none !important;
}

/* 2. Global Solid Dark Slate Containers */
.glass-panel,
.stat-box,
.console-header,
.console-filter-bar,
.stat-box-simple,
.objective-filter-bar,
.table-container,
.console-table-container,
.review-direction-card,
.modal-content,
.add-client-step-card {
  background: #020617 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(249, 115, 22, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3. Strip all pseudo-element blur reflections */
.glass-panel::before,
.glass-panel::after,
.stat-box::before,
.stat-box::after,
.console-header::before,
.console-header::after,
.console-filter-bar::before,
.console-filter-bar::after {
  display: none !important;
  content: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 4. Solid Hover States */
.glass-panel:hover,
.stat-box:hover,
.review-direction-card:hover {
  border-color: rgba(255, 94, 0, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(249, 115, 22, 0.1) !important;
}

/* 5. Solid Sidebar & Top Bar */
.sidebar {
  background: #020617 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 6. Form Control Inputs & Selectors */
.filter-search-box,
.filter-select-pill,
.console-search,
.form-input,
.input-icon-wrapper input,
.input-icon-wrapper select {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   LIGHT MODE DESIGN SYSTEM & HIGH-CONTRAST BORDER-RADIUS TABLES
   ========================================================================== */

/* 1. Universal Table Container & Sticky Top Headers (Meta Ads Manager Style) */
.table-container,
.console-table-container {
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #020617 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  margin-bottom: 1.5rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(249, 115, 22, 0.55) transparent !important;
}

.table-container::-webkit-scrollbar,
.console-table-container::-webkit-scrollbar {
  height: 6px !important;
  width: 6px !important;
}

.table-container::-webkit-scrollbar-track,
.console-table-container::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 0 !important;
}

.table-container::-webkit-scrollbar-thumb,
.console-table-container::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.55) !important;
  border-radius: 999px !important;
  border: none !important;
}

.table-container::-webkit-scrollbar-thumb:hover,
.console-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.9) !important;
}

.table-container::-webkit-scrollbar-corner,
.console-table-container::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Ensure table cells clip cleanly within rounded corners & enforce minimum width for horizontal scroll */
.data-table,
.execution-table {
  width: 100% !important;
  min-width: 850px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Table Headers (Title Line) - z-index: 50 so body cells ALWAYS slide UNDER title line */
.data-table th,
.execution-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 0.65rem 0.95rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: #0b132b !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Campaign Details Ad Variants Table Specific Styling */
.cd-variants-table .cd-col-creative {
  min-width: 260px;
  max-width: 320px;
}
.cd-variants-table .cd-ad-title-cell {
  max-width: 260px;
}
.cd-variants-table .cd-ad-caption-cell {
  max-width: 260px;
}

/* Top-Left Corner Header Cell - z-index: 60 (highest) */
.data-table th:first-child,
.execution-table th:first-child {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 60 !important;
  background: #0b132b !important;
}

/* First Column Body Cells - z-index: 10 (strictly UNDER header title line) */
.data-table tbody td:first-child,
.execution-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 10 !important;
  background: #020617 !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* Distinct Obvious Row Borders & Zebra Striping (Dark Mode) */
.data-table tbody tr,
.execution-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.15s ease !important;
}

.data-table tbody td,
.execution-table tbody td {
  padding: 0.58rem 0.95rem !important;
  color: #f8fafc !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 0.82rem !important;
  vertical-align: middle !important;
}

.data-table tbody tr:nth-child(odd) td:first-child,
.execution-table tbody tr:nth-child(odd) td:first-child {
  background: #020617 !important;
}

.data-table tbody tr:nth-child(even),
.execution-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) td:first-child,
.execution-table tbody tr:nth-child(even) td:first-child {
  background: #0a1128 !important;
}

.data-table tbody tr:hover,
.execution-table tbody tr:hover,
.data-table tbody tr:hover td,
.execution-table tbody tr:hover td,
.data-table tbody tr:hover td:first-child,
.execution-table tbody tr:hover td:first-child {
  background-color: #28140c !important;
  background: #28140c !important;
}

/* 2. Light Mode Complete App-Wide Overrides */
[data-theme="light"] body {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

[data-theme="light"] .sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .sidebar-brand-name,
[data-theme="light"] .console-title,
[data-theme="light"] .page-header-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-menu-btn {
  color: #475569 !important;
}

[data-theme="light"] .sidebar-menu-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] .sidebar-menu-btn.active {
  color: #ff5e00 !important;
}

/* Light Mode Solid White Cards & Modals */
[data-theme="light"] .glass-panel,
[data-theme="light"] .stat-box,
[data-theme="light"] .console-header,
[data-theme="light"] .console-filter-bar,
[data-theme="light"] .stat-box-simple,
[data-theme="light"] .objective-filter-bar,
[data-theme="light"] .modal-content,
[data-theme="light"] .add-client-step-card,
[data-theme="light"] .review-direction-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  color: #0f172a !important;
}

[data-theme="light"] .glass-panel:hover,
[data-theme="light"] .stat-box:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   WALLET & BILLING PAGE (Desktop Base)
   ========================================================================== */
.wallet-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.wallet-title {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

.wallet-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 4px;
}

.wallet-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wallet-header-actions #btn-wallet-transfer {
  gap: 8px;
  font-weight: 700;
  background: rgba(255, 94, 0, 0.12);
  border: 1.5px solid rgba(255, 94, 0, 0.35);
  color: #ff5e00;
  padding: 0.65rem 1.15rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.wallet-header-actions #btn-wallet-recharge {
  gap: 8px;
  display: inline-flex;
  align-items: center;
}

.wallet-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
}

.wallet-card {
  padding: 1.75rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

.wallet-card-available {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.12) 0%, rgba(255, 140, 0, 0.04) 100%);
  border: 1px solid rgba(255, 94, 0, 0.25);
}

.wallet-card-reserved {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.wallet-card-total {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
}

/* Light Mode Wallet Cards */
[data-theme="light"] .wallet-card-available {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.08) 0%, rgba(255, 140, 0, 0.02) 100%) !important;
  border: 1px solid rgba(255, 94, 0, 0.25) !important;
  box-shadow: 0 4px 20px rgba(255, 94, 0, 0.05) !important;
}

[data-theme="light"] .wallet-card-reserved {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.02) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.05) !important;
}

[data-theme="light"] .wallet-card-total {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #wallet-total-capital {
  color: #0f172a !important;
}

[data-theme="light"] .wallet-title {
  color: #0f172a !important;
}

/* Light Mode Table Containers & High-Contrast Rows */
[data-theme="light"] .table-container,
[data-theme="light"] .console-table-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .data-table th,
[data-theme="light"] .execution-table th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 50 !important;
  padding: 0.65rem 0.95rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

[data-theme="light"] .data-table th:first-child,
[data-theme="light"] .execution-table th:first-child {
  background: #f1f5f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

[data-theme="light"] .data-table tbody td:first-child,
[data-theme="light"] .execution-table tbody td:first-child {
  color: #0f172a !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03) !important;
  z-index: 10 !important;
}

[data-theme="light"] .data-table tbody td,
[data-theme="light"] .execution-table tbody td {
  padding: 0.58rem 0.95rem !important;
  color: #0f172a !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  font-size: 0.82rem !important;
}

/* Zebra Striping - 100% Uniform Across ALL Columns */
[data-theme="light"] .data-table tbody tr:nth-child(odd) td,
[data-theme="light"] .execution-table tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

[data-theme="light"] .data-table tbody tr:nth-child(even) td,
[data-theme="light"] .execution-table tbody tr:nth-child(even) td {
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] .data-table tbody tr:hover td,
[data-theme="light"] .execution-table tbody tr:hover td {
  background-color: #fff7ed !important;
  background: #fff7ed !important;
}

/* Light Mode Form Controls */
[data-theme="light"] .filter-search-box,
[data-theme="light"] .filter-select-pill,
[data-theme="light"] .console-search,
[data-theme="light"] .form-input,
[data-theme="light"] .input-icon-wrapper input,
[data-theme="light"] .input-icon-wrapper select {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .console-search input {
  color: #0f172a !important;
}

[data-theme="light"] select.form-input option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================================================================
   ADD NEW CLIENT WIZARD - LIGHT MODE COMPREHENSIVE OVERRIDES
   ========================================================================== */
[data-theme="light"] #modal-admin-add-client .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .add-client-header-container {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .add-client-title {
  color: #0f172a !important;
}

[data-theme="light"] .add-client-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .add-client-tabs-bar {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .add-client-tab-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

[data-theme="light"] .add-client-tab-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-tab-btn.active {
  background: rgba(249, 115, 22, 0.08) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #ff5e00 !important;
}

[data-theme="light"] .add-client-tab-btn .tab-num {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .add-client-tab-btn.active .tab-num {
  background: #ff5e00 !important;
  color: #ffffff !important;
}

[data-theme="light"] .add-client-tab-btn .tab-label-text {
  color: #475569 !important;
}

[data-theme="light"] .add-client-tab-btn.active .tab-label-text {
  color: #0f172a !important;
}

[data-theme="light"] .add-client-body-container {
  background: #ffffff !important;
}

[data-theme="light"] .add-client-step-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .add-client-step-title {
  color: #0f172a !important;
}

[data-theme="light"] .add-client-step-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .add-client-step-card label {
  color: #334155 !important;
}

[data-theme="light"] .add-client-step-card input,
[data-theme="light"] .add-client-step-card select,
[data-theme="light"] .add-client-step-card textarea {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-step-card input:focus,
[data-theme="light"] .add-client-step-card select:focus {
  border-color: rgba(249, 115, 22, 0.5) !important;
  background: #ffffff !important;
}

[data-theme="light"] .add-client-step-card select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .add-client-footer .btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}

[data-theme="light"] .add-client-footer .btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-orb-top,
[data-theme="light"] .add-client-orb-bottom {
  display: none !important;
}

/* Tab Title & Subtitle Light Mode Text Overrides */
[data-theme="light"] .add-client-tab-btn .tab-title-text {
  color: #1e293b !important;
}

[data-theme="light"] .add-client-tab-btn.active .tab-title-text {
  color: #0f172a !important;
}

[data-theme="light"] .add-client-tab-btn .tab-sub-text {
  color: #64748b !important;
}

[data-theme="light"] .add-client-tab-btn.active .tab-sub-text {
  color: #ea580c !important;
}

/* Social Media Cards in Light & Dark Mode */
.add-client-social-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

[data-theme="light"] .add-client-social-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .social-card-title {
  color: #0f172a !important;
}

/* Footer Buttons Light Mode Overrides */
[data-theme="light"] #btn-wizard-prev-step {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1e293b !important;
}

[data-theme="light"] #btn-wizard-prev-step:hover {
  background: #e2e8f0 !important;
}

[data-theme="light"] #btn-cancel-add-client {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
}

[data-theme="light"] #btn-cancel-add-client:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-step-card span,
[data-theme="light"] .add-client-step-card label,
[data-theme="light"] .add-client-step-card h3 {
  color: #0f172a !important;
}

/* Security Shield Box Light Mode Fix */
[data-theme="light"] .add-client-security-box {
  background: rgba(249, 115, 22, 0.08) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: #0f172a !important;
}

[data-theme="light"] .add-client-security-box p {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* All Helper Texts, Headers & Labels in Step Cards */
[data-theme="light"] .add-client-step-header h3 {
  color: #0f172a !important;
}

[data-theme="light"] .add-client-step-header p {
  color: #475569 !important;
}

[data-theme="light"] .add-client-step-header > span {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .add-client-step-card label {
  color: #1e293b !important;
}

[data-theme="light"] .add-client-step-card label span {
  color: #475569 !important;
}

[data-theme="light"] .add-client-step-card span {
  color: #334155 !important;
}

/* Plan Cards in Tab 4 */
[data-theme="light"] .app-plan-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .app-plan-btn div {
  color: #0f172a !important;
}

[data-theme="light"] .app-plan-btn.selected {
  background: rgba(249, 115, 22, 0.08) !important;
  border-color: #ff5e00 !important;
}

/* Admin Client Details View Light Mode Overrides */
[data-theme="light"] #client-details-top-bar {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] #page-admin-client-details .add-client-step-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] #page-admin-client-details .add-client-step-card h3 {
  color: #0f172a !important;
}

[data-theme="light"] #page-admin-client-details .add-client-step-card label {
  color: #1e293b !important;
}

[data-theme="light"] #page-admin-client-details .add-client-step-card input,
[data-theme="light"] #page-admin-client-details .add-client-step-card select {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="light"] #admin-detail-plan-card {
  background: rgba(249, 115, 22, 0.06) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

[data-theme="light"] #admin-detail-plan-name {
  color: #0f172a !important;
}

[data-theme="light"] #admin-detail-renewal-date {
  color: #0f172a !important;
}

/* Admin Client Details Tabs - Prevent Text Truncation & Text Cutting */
#admin-details-tabs {
  flex-wrap: wrap !important;
}

#admin-details-tabs .add-client-tab-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0.65rem 1.25rem !important;
  white-space: nowrap !important;
}

#admin-details-tabs .tab-title-text {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13px !important;
}

/* Theme Scoped Inputs for Admin Client Details */
#page-admin-client-details input.form-input,
#page-admin-client-details select.form-input {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 0.85rem !important;
  line-height: 44px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  border-radius: 12px !important;
}

/* Light Mode Specific Overrides */
[data-theme="light"] #page-admin-client-details input.form-input,
[data-theme="light"] #page-admin-client-details select.form-input {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: none !important;
}

[data-theme="light"] #page-admin-client-details input.form-input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

[data-theme="light"] #page-admin-client-details input.form-input:disabled {
  background: #f8fafc !important;
  color: #0f172a !important;
  opacity: 1 !important;
}

[data-theme="light"] #page-admin-client-details select.form-input option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

[data-theme="light"] #page-admin-client-details label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Dark Mode Scoped Rules (Default Dark & Explicit data-theme="dark") */
:root:not([data-theme="light"]) #page-admin-client-details input.form-input,
:root:not([data-theme="light"]) #page-admin-client-details select.form-input,
[data-theme="dark"] #page-admin-client-details input.form-input,
[data-theme="dark"] #page-admin-client-details select.form-input {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

:root:not([data-theme="light"]) #page-admin-client-details input.form-input::placeholder,
[data-theme="dark"] #page-admin-client-details input.form-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

:root:not([data-theme="light"]) #page-admin-client-details input.form-input:disabled,
[data-theme="dark"] #page-admin-client-details input.form-input:disabled {
  background: rgba(15, 23, 42, 0.35) !important;
  color: #cbd5e1 !important;
  opacity: 0.85 !important;
}

:root:not([data-theme="light"]) #page-admin-client-details select.form-input option,
[data-theme="dark"] #page-admin-client-details select.form-input option {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* Custom Searchable App-Styled Country Select Component */
.custom-select-trigger {
  width: 100%;
  height: 44px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.custom-select-trigger span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-trigger * {
  pointer-events: none !important;
}

[data-theme="dark"] .custom-select-trigger {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
  outline: none;
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 240px;
  max-height: 280px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .custom-select-menu {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.custom-select-search-box {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #f8fafc;
}

[data-theme="dark"] .custom-select-search-box {
  background: rgba(30, 41, 59, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.custom-select-search-input {
  width: 100%;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #0f172a;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
}

[data-theme="dark"] .custom-select-search-input {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.1);
}

.custom-select-options-list {
  overflow-y: auto;
  max-height: 220px;
  padding: 0.35rem;
}

.custom-select-option {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
}

[data-theme="dark"] .custom-select-option {
  color: #f8fafc;
}

.custom-select-option:hover,
.custom-select-option.selected {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
  font-weight: 600;
}

/* Subscription Duration Box Theme Styles */
.admin-duration-box {
  border-radius: 16px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.admin-duration-info {
  font-size: 11px;
  line-height: 1.4;
}

/* Light Mode Duration Box */
[data-theme="light"] .admin-duration-box {
  background: rgba(249, 115, 22, 0.04) !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

[data-theme="light"] .admin-duration-info {
  color: #475569 !important;
}

[data-theme="light"] .admin-duration-info strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .admin-duration-info span {
  color: #ea580c !important;
  font-weight: 600 !important;
}

/* Dark Mode Duration Box */
:root:not([data-theme="light"]) .admin-duration-box,
[data-theme="dark"] .admin-duration-box {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:root:not([data-theme="light"]) .admin-duration-info,
[data-theme="dark"] .admin-duration-info {
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .admin-duration-info strong,
[data-theme="dark"] .admin-duration-info strong {
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) .admin-duration-info span,
[data-theme="dark"] .admin-duration-info span {
  color: #cbd5e1 !important;
}

/* =========================================================
   UNIVERSAL POPUP & MODAL LIGHT/DARK MODE STYLING
   ========================================================= */

/* Default / Dark Mode Modals */
:root:not([data-theme="light"]) .modal-content,
:root:not([data-theme="light"]) .modal-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-card {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

:root:not([data-theme="light"]) .status-request-title,
[data-theme="dark"] .status-request-title {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .status-request-desc,
[data-theme="dark"] .status-request-desc {
  color: #cbd5e1 !important;
}

:root:not([data-theme="light"]) .status-request-desc strong,
[data-theme="dark"] .status-request-desc strong {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .status-request-notice-box,
[data-theme="dark"] .status-request-notice-box {
  background: rgba(245, 158, 11, 0.06) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

:root:not([data-theme="light"]) .modal-close-btn,
[data-theme="dark"] .modal-close-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .btn-cancel-modal-action,
[data-theme="dark"] .btn-cancel-modal-action {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

/* Light Mode Modals */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .status-request-title {
  color: #0f172a !important;
}

[data-theme="light"] .status-request-desc {
  color: #334155 !important;
}

[data-theme="light"] .status-request-desc strong {
  color: #0f172a !important;
}

[data-theme="light"] .status-request-notice-box {
  background: rgba(249, 115, 22, 0.05) !important;
  border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

[data-theme="light"] .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #64748b !important;
}

[data-theme="light"] .modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-cancel-modal-action {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-cancel-modal-action:hover {
  background: #e2e8f0 !important;
}

[data-theme="light"] .modal-content h2,
[data-theme="light"] .modal-content h3,
[data-theme="light"] .modal-content label {
  color: #0f172a !important;
}

[data-theme="light"] .modal-content p {
  color: #475569 !important;
}

/* ==========================================================================
   ADMIN ORDER REVIEW MODAL - LIGHT MODE COMPREHENSIVE OVERRIDES
   ========================================================================== */

/* 1. Modal Dialog Outer Container */
[data-theme="light"] #modal-admin-order-review .modal-content {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

/* 2. Top Header & Title */
[data-theme="light"] #modal-admin-order-review .review-modal-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-id {
  color: #64748b !important;
}

/* 3. Navigation Tabs Bar */
[data-theme="light"] #modal-admin-order-review .review-modal-tabs-bar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-tab-btn:hover {
  background: transparent !important;
  color: #0f172a !important;
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-tab-btn.active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid #ff5e00 !important;
  border-radius: 0 !important;
  color: #ff5e00 !important;
  box-shadow: none !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-tab-badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-tab-btn.active .review-modal-tab-badge {
  background: rgba(255, 94, 0, 0.15) !important;
  color: #ff5e00 !important;
}

/* 4. Stat & Overview Cards (.review-card) */
[data-theme="light"] #modal-admin-order-review .review-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-objective {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-full {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.06) 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

/* Card Labels, Values & Text */
[data-theme="light"] #modal-admin-order-review .review-card-label {
  color: #64748b !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-objective .review-card-label {
  color: #ea580c !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-value-large {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-footer-row {
  color: #64748b !important;
}

[data-theme="light"] #modal-admin-order-review .review-client-name {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-client-subtext {
  color: #475569 !important;
}

/* 5. Platform Chips */
[data-theme="light"] #modal-admin-order-review .review-platform-chip {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-platform-icon-box {
  background: rgba(249, 115, 22, 0.12) !important;
  color: #ea580c !important;
}

/* 6. Direction Cards Grid (Tab 2 - Strategy) */
[data-theme="light"] #modal-admin-order-review .review-direction-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] #modal-admin-order-review .review-direction-card:hover {
  background: #f8fafc !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="light"] #modal-admin-order-review .review-direction-card.active {
  background: rgba(249, 115, 22, 0.08) !important;
  border-color: #ea580c !important;
}

[data-theme="light"] #modal-admin-order-review .review-direction-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-direction-sub {
  color: #64748b !important;
}

/* 7. Client Contact & Social Media Grid (Tab 3 - Client Details) */
[data-theme="light"] #modal-admin-order-review .review-social-channel-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review #client-tab-phone,
[data-theme="light"] #modal-admin-order-review #client-tab-email {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-btn-copy-text {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}

[data-theme="light"] #modal-admin-order-review .review-btn-copy-text:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 8. Footer Action Bar */
[data-theme="light"] #modal-admin-order-review .review-modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #modal-admin-order-review .review-modal-actions-label {
  color: #64748b !important;
}

[data-theme="light"] #modal-admin-order-review .btn-pill-publish {
  background: linear-gradient(135deg, #06b6d4 0%, #00f2fe 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25) !important;
}

[data-theme="light"] #modal-admin-order-review .btn-pill-refuse {
  background: #fef2f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

[data-theme="light"] #modal-admin-order-review .btn-pill-refuse:hover {
  background: #fee2e2 !important;
}

[data-theme="light"] #modal-admin-order-review .btn-pill-call {
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: #ea580c !important;
}

[data-theme="light"] #modal-admin-order-review .btn-pill-call:hover {
  background: #ffedd5 !important;
}

/* Universal Round Vector Close Buttons (Dark Mode & Light Mode) */
.modal-close,
.review-modal-close-btn,
.btn-close,
.modal-close-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.modal-close svg,
.review-modal-close-btn svg,
.btn-close svg,
.modal-close-btn svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  margin: 0 !important;
  pointer-events: none !important;
  stroke-width: 2.5 !important;
}

.modal-close:hover,
.review-modal-close-btn:hover,
.btn-close:hover,
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #ef4444 !important;
  transform: scale(1.08) !important;
}

.modal-close-plain {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.modal-close-plain:hover {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  transform: scale(1.18) !important;
}

/* Light Mode Overrides for Universal Close Buttons */
[data-theme="light"] .modal-close,
[data-theme="light"] .review-modal-close-btn,
[data-theme="light"] .btn-close,
[data-theme="light"] .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  opacity: 1 !important;
}

[data-theme="light"] .modal-close:hover,
[data-theme="light"] .review-modal-close-btn:hover,
[data-theme="light"] .btn-close:hover,
[data-theme="light"] .modal-close-btn:hover {
  background: #fee2e2 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #dc2626 !important;
  transform: scale(1.08) !important;
}

/* Creative Assets & Ad Copy Box Light Mode Overrides */
.review-asset-img {
  border-bottom: none !important;
}

.review-asset-card:hover {
  transform: none !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-label {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-card-label span {
  color: #0f172a !important;
}

[data-theme="light"] #modal-admin-order-review .review-asset-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  transform: none !important;
}

[data-theme="light"] #modal-admin-order-review .review-asset-card:hover {
  transform: none !important;
}

[data-theme="light"] #modal-admin-order-review .review-asset-img {
  border-bottom: none !important;
}

[data-theme="light"] #modal-admin-order-review .review-asset-footer {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] #modal-admin-order-review .review-asset-filename {
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="light"] #modal-admin-order-review .review-copy-box {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] #modal-admin-order-review .review-btn-download-bundle,
[data-theme="light"] #modal-admin-order-review .review-btn-copy-text {
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: #ea580c !important;
}

[data-theme="light"] #modal-admin-order-review .review-btn-download-bundle:hover,
[data-theme="light"] #modal-admin-order-review .review-btn-copy-text:hover {
  background: #ffedd5 !important;
  color: #c2410c !important;
}

/* Pending Pause & Pending Activation Status Badges */
.badge-pending-pause,
.status-pending-pause {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-weight: 700 !important;
}

.badge-pending-activation,
.status-pending-activation {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  font-weight: 700 !important;
}

/* Light Mode vs Dark Mode App & Table Scrollbars */
::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb,
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(234, 88, 12, 0.65) !important;
  border-radius: 10px !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 88, 12, 0.95) !important;
}

/* === Custom Floating Select Dropdown Menu (Dark Mode & Light Mode) === */
.custom-select-menu {
  background: #090f26 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-radius: 16px !important;
  padding: 0.6rem !important;
  color: #f8fafc !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.custom-select-search-box {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
}

.custom-select-search-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.75rem !important;
  outline: none !important;
  width: 100% !important;
}

.custom-select-search-input::placeholder {
  color: #94a3b8 !important;
}

.custom-select-option {
  color: #f8fafc !important;
  background: transparent !important;
}

.custom-select-option:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.custom-select-option.selected {
  background: rgba(255, 94, 0, 0.18) !important;
  border: 1px solid rgba(255, 94, 0, 0.3) !important;
}

.custom-select-option-title {
  color: #f8fafc !important;
}

.custom-select-option-sub {
  color: #94a3b8 !important;
}

.custom-select-option-avatar {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ff8a00 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.custom-select-option-avatar.all-icon {
  background: linear-gradient(135deg, #ff5e00, #ff8c00) !important;
  color: #ffffff !important;
  border: none !important;
}

.custom-select-option-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

/* Light Mode Floating Select Dropdown Overrides */
[data-theme="light"] .custom-select-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-search-input {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-search-input::placeholder {
  color: #64748b !important;
}

[data-theme="light"] .custom-select-option {
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-option:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] .custom-select-option.selected {
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

[data-theme="light"] .custom-select-option-title {
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-option-sub {
  color: #64748b !important;
}

[data-theme="light"] .custom-select-option-avatar {
  background: #f1f5f9 !important;
  color: #ea580c !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .custom-select-option-avatar.all-icon {
  background: linear-gradient(135deg, #ff5e00, #ff8c00) !important;
  color: #ffffff !important;
  border: none !important;
}

/* === SCROLLABLE STATUS & OBJECTIVE TAB PILL CARDS BAR === */
.console-filter-bar,
.objective-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.6rem 0.85rem !important;
  border-radius: 20px !important;
  margin-bottom: 1.5rem !important;
  background: #020617 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.console-filter-bar {
  justify-content: space-between !important;
}

[data-theme="light"] .console-filter-bar,
[data-theme="light"] .objective-filter-bar {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.console-tabs-scrollable {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0.25rem 0.5rem 0.25rem 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
  scroll-behavior: smooth !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.objective-filter-bar {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
  scroll-behavior: smooth !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.console-tabs-scrollable.dragging,
.objective-filter-bar.dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.console-tabs-scrollable::-webkit-scrollbar,
.objective-filter-bar::-webkit-scrollbar {
  display: none !important;
}

.objective-pill,
.console-tab-pill {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.objective-pill:hover,
.console-tab-pill:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.objective-pill.active,
.console-tab-pill.active {
  background: rgba(255, 94, 0, 0.15) !important;
  border-color: rgba(255, 94, 0, 0.45) !important;
  color: #ff5e00 !important;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.15) !important;
}

.objective-pill .pill-icon,
.console-tab-pill .pill-icon {
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.objective-pill .pill-count,
.console-tab-pill .pill-count {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 6px !important;
  margin-left: 0.25rem !important;
}

.objective-pill.active .pill-count,
.console-tab-pill.active .pill-count {
  background: rgba(255, 94, 0, 0.25) !important;
  color: #ff5e00 !important;
}

/* Light Mode Pill Cards Overrides */
[data-theme="light"] .objective-pill,
[data-theme="light"] .console-tab-pill {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

[data-theme="light"] .objective-pill:hover,
[data-theme="light"] .console-tab-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .objective-pill.active,
[data-theme="light"] .console-tab-pill.active {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #ea580c !important;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.12) !important;
}

[data-theme="light"] .objective-pill .pill-count,
[data-theme="light"] .console-tab-pill .pill-count {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

[data-theme="light"] .objective-pill.active .pill-count,
[data-theme="light"] .console-tab-pill.active .pill-count {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #ea580c !important;
}

[data-theme="light"] .custom-select-option-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

/* ==========================================================================
   DESKTOP FILTER CONTROLS (Calendar & Search Side-by-Side with Equal Height)
   ========================================================================== */
.console-filter-controls {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex-shrink: 0 !important;
}

.console-filter-controls .calendar-picker-wrapper {
  flex-shrink: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.calendar-picker-btn {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  padding: 0 0.85rem !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.console-filter-controls .console-search,
.console-search {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box !important;
  padding: 0 0.75rem !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: 210px !important;
  flex-shrink: 0 !important;
}

.console-search input,
.console-filter-controls .console-search input {
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.8rem !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .console-search input {
  color: #0f172a !important;
}

/* ==========================================================================
   COLOR-CODED METRIC CATEGORIES / ROW GROUPS (Dark Mode & Light Mode)
   ========================================================================== */

/* LINE 1 / CATEGORY 1: Financial & Primary Conversion Metrics (Orange/Amber) */
.metric-group.group-primary .stat-box {
  background: rgba(255, 94, 0, 0.05) !important;
  border: 1px solid rgba(255, 94, 0, 0.35) !important;
  box-shadow: 0 4px 20px rgba(255, 94, 0, 0.06) !important;
}
.metric-group.group-primary .stat-box:hover {
  border-color: rgba(255, 94, 0, 0.65) !important;
  box-shadow: 0 6px 24px rgba(255, 94, 0, 0.14) !important;
}
.metric-group.group-primary .stat-box .stat-icon-wrapper {
  background: rgba(255, 94, 0, 0.16) !important;
  border: 1px solid rgba(255, 94, 0, 0.35) !important;
  color: #ff5e00 !important;
}
.metric-group.group-primary .stat-box .stat-subtext {
  color: #ff8c00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* LINE 2 / CATEGORY 2: Efficiency & Cost Metrics (Indigo / Blue Purple) */
.metric-group.group-secondary .stat-box {
  background: rgba(99, 102, 241, 0.05) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.06) !important;
}
.metric-group.group-secondary .stat-box:hover {
  border-color: rgba(99, 102, 241, 0.65) !important;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.14) !important;
}
.metric-group.group-secondary .stat-box .stat-icon-wrapper {
  background: rgba(99, 102, 241, 0.16) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #818cf8 !important;
}
.metric-group.group-secondary .stat-box .stat-subtext {
  color: #818cf8 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* LINE 3 / CATEGORY 3: Creative & Engagement Ratios (Emerald / Mint Green) */
.metric-group.group-tertiary .stat-box {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.06) !important;
}
.metric-group.group-tertiary .stat-box:hover {
  border-color: rgba(16, 185, 129, 0.65) !important;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.14) !important;
}
.metric-group.group-tertiary .stat-box .stat-icon-wrapper {
  background: rgba(16, 185, 129, 0.16) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}
.metric-group.group-tertiary .stat-box .stat-subtext {
  color: #34d399 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* --- LIGHT MODE OVERRIDES FOR CATEGORY METRIC GROUPS --- */
[data-theme="light"] .metric-group.group-primary .stat-box {
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.4) !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.08) !important;
}
[data-theme="light"] .metric-group.group-primary .stat-box .stat-subtext {
  color: #ea580c !important;
}
[data-theme="light"] .metric-group.group-primary .stat-box .stat-icon-wrapper {
  background: rgba(249, 115, 22, 0.15) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: #ea580c !important;
}

[data-theme="light"] .metric-group.group-secondary .stat-box {
  background: #f0f3ff !important;
  border: 1px solid rgba(79, 70, 229, 0.4) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08) !important;
}
[data-theme="light"] .metric-group.group-secondary .stat-box .stat-subtext {
  color: #4f46e5 !important;
}
[data-theme="light"] .metric-group.group-secondary .stat-box .stat-icon-wrapper {
  background: rgba(79, 70, 229, 0.15) !important;
  border: 1px solid rgba(79, 70, 229, 0.3) !important;
  color: #4f46e5 !important;
}

[data-theme="light"] .metric-group.group-tertiary .stat-box {
  background: #ecfdf5 !important;
  border: 1px solid rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08) !important;
}
[data-theme="light"] .metric-group.group-tertiary .stat-box .stat-subtext {
  color: #059669 !important;
}
[data-theme="light"] .metric-group.group-tertiary .stat-box .stat-icon-wrapper {
  background: rgba(5, 150, 105, 0.15) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  color: #059669 !important;
}

/* Prevent Flash of Unauthenticated Content (FOUC) on Page Refresh */
html.is-authenticated #page-compty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html.is-unauthenticated .sidebar,
html.is-unauthenticated aside,
html.is-unauthenticated .page-header-row,
html.is-unauthenticated header,
html.is-unauthenticated .mobile-bottom-nav,
html.is-unauthenticated .mobile-nav-items,
html.is-unauthenticated .app-page:not(#page-compty):not(#page-login),
html.is-unauthenticated #page-client-profile,
.app-container.logged-out .sidebar,
.app-container.logged-out aside,
.app-container.logged-out .page-header-row,
.app-container.logged-out header,
.app-container.logged-out .mobile-bottom-nav,
.app-container.logged-out .mobile-nav-items,
.app-container.logged-out .app-page:not(#page-compty):not(#page-login),
.app-container.logged-out #page-client-profile,
body.logged-out .mobile-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fail-safe role-based sidebar menus */
html.is-admin #nav-group-admin,
body.is-admin #nav-group-admin,
.app-container.is-admin #nav-group-admin {
  display: flex !important;
}

html.is-admin #nav-group-client,
body.is-admin #nav-group-client,
.app-container.is-admin #nav-group-client {
  display: none !important;
}

html.is-client:not(.is-admin) #nav-group-client,
body.is-client:not(.is-admin) #nav-group-client,
.app-container.is-client:not(.is-admin) #nav-group-client {
  display: flex !important;
}

html.is-client:not(.is-admin) #nav-group-admin,
body.is-client:not(.is-admin) #nav-group-admin,
.app-container.is-client:not(.is-admin) #nav-group-admin {
  display: none !important;
}

/* Fail-safe role-based mobile bottom nav items */
html.is-admin #mobile-nav-admin-items,
body.is-admin #mobile-nav-admin-items,
.app-container.is-admin #mobile-nav-admin-items {
  display: flex !important;
}
html.is-admin #mobile-nav-client-items,
body.is-admin #mobile-nav-client-items,
.app-container.is-admin #mobile-nav-client-items {
  display: none !important;
}

/* Hide redundant Profile tabs pill bar completely in Admin Profile */
html.is-admin #page-client-profile .add-client-tabs-bar,
html.is-admin #page-client-profile #cp-tabs-bar,
body.is-admin #page-client-profile .add-client-tabs-bar,
body.is-admin #page-client-profile #cp-tabs-bar,
.app-container.is-admin #page-client-profile .add-client-tabs-bar,
.app-container.is-admin #page-client-profile #cp-tabs-bar {
  display: none !important;
}

/* Ensure Save Changes CTA button stays cleanly right-aligned when tabs bar is hidden */
html.is-admin #page-client-profile .cp-tabs-header-wrap,
body.is-admin #page-client-profile .cp-tabs-header-wrap,
.app-container.is-admin #page-client-profile .cp-tabs-header-wrap {
  justify-content: flex-end !important;
}

html.is-client:not(.is-admin) #mobile-nav-client-items,
body.is-client:not(.is-admin) #mobile-nav-client-items,
.app-container.is-client:not(.is-admin) #mobile-nav-client-items {
  display: flex !important;
}
html.is-client:not(.is-admin) #mobile-nav-admin-items,
body.is-client:not(.is-admin) #mobile-nav-admin-items,
.app-container.is-client:not(.is-admin) #mobile-nav-admin-items {
  display: none !important;
}

/* ==========================================================================
   CALENDAR POPUP Z-INDEX & ELEVATION OVERRIDES (APP-WIDE FIX)
   ========================================================================== */
.console-filter-bar,
.objective-filter-bar {
  position: relative !important;
  z-index: 99999 !important;
}

.calendar-picker-wrapper {
  position: relative !important;
  z-index: 999999 !important;
}

.calendar-popup {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  z-index: 9999999 !important;
  background: #090f26 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 6px 24px rgba(0, 0, 0, 0.7) !important;
}

.calendar-popup:not(.align-left) {
  right: 0 !important;
}

.calendar-popup.align-left {
  left: 0 !important;
  right: auto !important;
}

.calendar-popup.align-right {
  right: 0 !important;
  left: auto !important;
}

[data-theme="light"] .calendar-popup {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}

.table-container,
.execution-table-wrapper,
.data-table-wrapper,
.table-responsive {
  position: relative !important;
  z-index: 1 !important;
}

.execution-table th,
.data-table th,
.table-container th {
  position: sticky !important;
  z-index: 5 !important;
}

/* ==========================================================================
   COMPACT VIEW DETAILS BUTTON & ACTION BUTTON OVERRIDES
   ========================================================================== */
.btn-sm,
.btn-secondary.btn-sm,
.btn-action-sm {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-secondary.btn-sm {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #334155 !important;
}

[data-theme="light"] .btn-secondary.btn-sm:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   NOTIFICATION DRAWER SOLID OPAQUE BACKGROUND FIX (LIGHT & DARK MODE)
   ========================================================================== */
.off-canvas-drawer,
#notifications-drawer {
  background: #090f26 !important;
  background-color: #090f26 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.9) !important;
  z-index: 999999 !important;
  opacity: 1 !important;
}

.off-canvas-drawer .drawer-header,
.off-canvas-drawer .drawer-footer {
  background: #060b1c !important;
}

.off-canvas-drawer .drawer-header h3 {
  color: #ffffff !important;
}

.off-canvas-drawer .drawer-section-title {
  color: #94a3b8 !important;
}

.off-canvas-drawer .notif-item {
  background: #0f1738 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.off-canvas-drawer .notif-item.unread {
  background: #191638 !important;
  border-color: rgba(255, 94, 0, 0.5) !important;
}

.off-canvas-drawer .notif-text,
.off-canvas-drawer .notif-text strong {
  color: #ffffff !important;
}

.off-canvas-drawer .notif-time {
  color: #cbd5e1 !important;
}

[data-theme="light"] .off-canvas-drawer,
[data-theme="light"] #notifications-drawer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
  opacity: 1 !important;
}

[data-theme="light"] .off-canvas-drawer .drawer-header,
[data-theme="light"] .off-canvas-drawer .drawer-footer {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .off-canvas-drawer .drawer-header h3 {
  color: #0f172a !important;
}

[data-theme="light"] .off-canvas-drawer .drawer-section-title {
  color: #64748b !important;
}

[data-theme="light"] .off-canvas-drawer .notif-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
}

[data-theme="light"] .off-canvas-drawer .notif-item.unread {
  background: #fff8f5 !important;
  border-color: rgba(255, 94, 0, 0.35) !important;
}

[data-theme="light"] .off-canvas-drawer .notif-text {
  color: #1e293b !important;
}

[data-theme="light"] .off-canvas-drawer .notif-text strong {
  color: #0f172a !important;
}

[data-theme="light"] .off-canvas-drawer .notif-time {
  color: #64748b !important;
}

/* Fix for Table Row Height Discrepancy & Dark Line Leak */
.data-table tbody tr,
.execution-table tbody tr {
  border-bottom: none !important;
}

/* LIGHT MODE COMPREHENSIVE VIEWPORT & TABLE BACKGROUND OVERRIDES */
[data-theme="light"] body,
html[data-theme="light"] body {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

[data-theme="light"] .main-viewport,
[data-theme="light"] #pages-viewport,
[data-theme="light"] .app-page,
[data-theme="light"] #page-client-campaigns,
[data-theme="light"] #page-ads,
[data-theme="light"] #page-admin-ads,
[data-theme="light"] .app-container {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="light"] #page-client-campaigns.active .console-table-container,
[data-theme="light"] #page-ads.active .console-table-container,
[data-theme="light"] #page-admin-ads.active .console-table-container,
[data-theme="light"] body.ads-table-view .console-table-container,
[data-theme="light"] body.ads-table-view .main-viewport,
[data-theme="light"] body.ads-table-view #pages-viewport,
[data-theme="light"] .console-table-container,
[data-theme="light"] .table-container,
[data-theme="light"] .execution-table-wrapper,
[data-theme="light"] .data-table-wrapper,
[data-theme="light"] .execution-table,
[data-theme="light"] .data-table {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .execution-table tbody,
[data-theme="light"] .data-table tbody {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

[data-theme="light"] .data-table tbody td,
[data-theme="light"] .execution-table tbody td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .glass-bg-orbs {
  display: none !important;
}

/* ==========================================================================
   AVAILABLE & RESERVED FUNDS UNIFIED WALLET CAPSULE STYLING
   ========================================================================== */
.top-nav-wallet-capsule {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 3px 3px 3px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.top-nav-wallet-capsule:hover {
  border-color: rgba(255, 94, 0, 0.35);
  box-shadow: 0 6px 20px rgba(255, 94, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.capsule-segment {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 3px;
  cursor: pointer;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.capsule-segment:hover {
  background: rgba(255, 255, 255, 0.06);
}

.capsule-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.balance-icon-wrap {
  background: rgba(255, 94, 0, 0.12);
  color: #ff5e00;
  border: 1px solid rgba(255, 94, 0, 0.25);
}

.reserved-icon-wrap {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.capsule-data {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.capsule-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.capsule-label.reserved-label {
  color: #f59e0b;
}

.capsule-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.capsule-value.reserved-val {
  color: #f59e0b;
}

.capsule-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 3px;
}

.capsule-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #ff7a1a 0%, #ff5500 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-left: 5px;
  box-shadow: 0 2px 10px rgba(255, 94, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.capsule-add-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(255, 94, 0, 0.5);
  filter: brightness(1.08);
}

.capsule-add-btn:active {
  transform: scale(0.97);
}

/* Light Theme Enhancements */
[data-theme="light"] .top-nav-wallet-capsule {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .top-nav-wallet-capsule:hover {
  border-color: rgba(255, 94, 0, 0.4) !important;
  box-shadow: 0 4px 16px rgba(255, 94, 0, 0.12) !important;
}

[data-theme="light"] .capsule-segment:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .capsule-divider {
  background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .capsule-label {
  color: #64748b !important;
}

[data-theme="light"] .capsule-label.reserved-label,
[data-theme="light"] .capsule-value.reserved-val {
  color: #d97706 !important;
}

[data-theme="light"] .reserved-icon-wrap {
  background: rgba(217, 119, 6, 0.1) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

[data-theme="light"] .capsule-value {
  color: #0f172a !important;
}

/* Ensure Login Portal Card & Input Fields Always Display Centered On Logout */
.app-container.logged-out #pages-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 80vh !important;
}

#page-compty.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 80vh !important;
}

#page-compty .auth-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* ==========================================================================
   ENHANCED NOTIFICATIONS SYSTEM (BELL STATES & DIRECT ACTION CARDS)
   ========================================================================== */

/* 1. Header Action Bell Button States */
.notif-bell-btn {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #71717a !important;
  box-shadow: none !important;
}

.notif-bell-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text-primary) !important;
}

/* Active Glowing Amber State when notifications exist */
.notif-bell-btn.has-notifs {
  border: 1.5px solid rgba(255, 140, 0, 0.75) !important;
  background: rgba(255, 140, 0, 0.12) !important;
  box-shadow: 0 0 14px rgba(255, 140, 0, 0.35) !important;
  color: #ff9d00 !important;
}

.notif-bell-btn.has-notifs:hover {
  background: rgba(255, 140, 0, 0.22) !important;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.55) !important;
}

.notif-bell-btn.has-notifs .notif-bell-icon {
  stroke: #ff9d00 !important;
  animation: bellJingle 3.5s ease infinite;
}

@keyframes bellJingle {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(14deg); }
  88% { transform: rotate(-14deg); }
  92% { transform: rotate(10deg); }
  96% { transform: rotate(-6deg); }
}

/* 2. Hot Pink / Magenta Pill Badge */
.notif-badge-bubble {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff2b66;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 43, 102, 0.7);
  border: 2px solid #141210;
  line-height: 1;
  font-family: var(--font-mono, monospace);
  z-index: 2;
  pointer-events: none;
  animation: pulseBadge 2s infinite ease-in-out;
}

@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 3. Desktop Notification Center & Rich Notification Cards */
#notif-selector-wrapper {
  position: relative !important;
}

#notif-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 340px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1px solid var(--panel-border) !important;
  background: #0e1424 !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-height: 520px !important;
}

#notif-dropdown.active {
  display: flex !important;
}

[data-theme="light"] #notif-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

#notifications-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.notif-item-card {
  padding: 0.85rem 1rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  box-shadow: none !important;
  margin: 0 0 2px 0 !important;
  box-sizing: border-box !important;
}

.notif-item-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}

.notif-item-card.unread {
  background: rgba(255, 140, 0, 0.07) !important;
  border: 1px solid rgba(255, 140, 0, 0.35) !important;
  border-left: 4px solid #ff8a00 !important;
}

[data-theme="light"] .notif-item-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

[data-theme="light"] .notif-item-card:hover {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .notif-item-card.unread {
  background: #fff8f0 !important;
  border: 1px solid rgba(255, 140, 0, 0.25) !important;
  border-left: 4px solid #ff8a00 !important;
}

[data-theme="light"] .notif-card-title {
  color: #0f172a !important;
}

[data-theme="light"] .notif-card-message {
  color: #475569 !important;
}

.notif-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.notif-title-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.notif-icon-bubble {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.notif-icon-pause { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.notif-icon-play { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.notif-icon-scale { background: rgba(139, 92, 246, 0.18); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.3); }
.notif-icon-order { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.notif-icon-default { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

.notif-card-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.notif-card-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.notif-card-message {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.38;
}

.notif-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.btn-notif-action {
  padding: 0.32rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-notif-pause {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.btn-notif-pause:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.55);
  transform: translateY(-1px);
}

.btn-notif-play {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.btn-notif-play:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.55);
  transform: translateY(-1px);
}

.btn-notif-success {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45) !important;
  pointer-events: none !important;
  cursor: default !important;
  transform: scale(1.02);
  transition: all 0.3s ease !important;
}

.btn-notif-scale {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}
.btn-notif-scale:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.55);
  transform: translateY(-1px);
}

.btn-notif-review {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-notif-review:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ff5e00;
}

/* === ROW NOTIFICATION BELL BUTTON IN ADMIN TABLE === */
.btn-row-notif {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #71717a !important;
  flex-shrink: 0;
  box-shadow: none !important;
}

.btn-row-notif:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

/* Glowing Amber Active State when row has notifications */
.btn-row-notif.has-notifs {
  border: 1.5px solid rgba(255, 140, 0, 0.8) !important;
  background: rgba(255, 140, 0, 0.15) !important;
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.45) !important;
  color: #ff9d00 !important;
}

.btn-row-notif.has-notifs:hover {
  background: rgba(255, 140, 0, 0.28) !important;
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.65) !important;
}

.btn-row-notif.has-notifs svg {
  stroke: #ff9d00 !important;
  animation: bellJingle 3.5s ease infinite;
}

/* Hot Pink Notification Badge on the Row Bell */
.row-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff2b66;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 3.5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 43, 102, 0.7);
  border: 1.5px solid #141210;
  line-height: 1;
  font-family: var(--font-mono, monospace);
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   ENHANCED USER PROFILE DROPDOWN (PREMIUM GLASS DESIGN & RELIABILITY)
   ========================================================================== */
.user-avatar-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-avatar-btn:hover {
  border-color: #ff5e00 !important;
  box-shadow: 0 0 14px rgba(255, 94, 0, 0.45) !important;
  transform: scale(1.05);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.user-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10b981;
  border: 2px solid #141210;
  border-radius: 50%;
  pointer-events: none;
}

.user-dropdown-enhanced {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: 275px !important;
  padding: 0.85rem !important;
  background: rgba(18, 16, 14, 0.96) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 140, 0, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 94, 0, 0.1) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) scale(0.96) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

[data-theme="light"] .user-dropdown-enhanced {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.14) !important;
}

.user-dropdown-enhanced.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.profile-dropdown-card {
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
[data-theme="light"] .profile-dropdown-card {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}

.profile-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 94, 0, 0.55);
  flex-shrink: 0;
}
.profile-card-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-card-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-name-text {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-handle-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.profile-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.user-role-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ff5e00;
  background: rgba(255, 94, 0, 0.12);
  border: 1px solid rgba(255, 94, 0, 0.35);
  padding: 0.22rem 0.6rem;
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.session-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* Wallet Balance Capsule in Profile Dropdown */
.profile-balance-capsule {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 140, 0, 0.07);
  border: 1px solid rgba(255, 140, 0, 0.25);
  border-radius: 14px;
}
.p-bal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-bal-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.p-bal-val {
  font-size: 0.82rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  margin-top: 1px;
}
.p-bal-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
}

/* Navigation Links */
.profile-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.profile-dropdown-link:hover {
  background: rgba(255, 94, 0, 0.09);
  transform: translateX(3px);
}
.p-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.p-link-content {
  display: flex;
  flex-direction: column;
}
.p-link-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.p-link-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.profile-dropdown-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.45rem;
}
.link-logout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
}
.icon-logout {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* === CLIENT MY PROFILE PAGE STYLES === */
.client-profile-tab-pane {
  animation: fadeInPane 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.upgrade-plan-option {
  transition: all 0.2s ease;
}
.upgrade-plan-option:hover {
  border-color: rgba(255, 94, 0, 0.4) !important;
  background: rgba(255, 94, 0, 0.05) !important;
  transform: translateY(-1px);
}
.upgrade-plan-option.selected {
  border-color: rgba(255, 94, 0, 0.7) !important;
  background: rgba(255, 94, 0, 0.12) !important;
  box-shadow: 0 0 20px rgba(255, 94, 0, 0.15);
}

.avatar-interactive-wrap {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.avatar-interactive-wrap:hover {
  transform: scale(1.04);
  box-shadow: 0 0 22px rgba(255, 94, 0, 0.5) !important;
}
.avatar-interactive-wrap:hover .avatar-hover-overlay {
  opacity: 1 !important;
}

/* === AI RECOMMENDATIONS MODAL TABS & DIRECTION CARDS === */
#modal-client-ai-recom .client-ai-modal-content {
  background: rgba(13, 17, 34, 0.96);
  border: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
}

.client-ai-icon-bubble {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(59, 130, 246, 0.2) 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #a78bfa;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.client-ai-smart-tag {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.ai-modal-tab-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 1.15rem;
}

.ai-modal-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  transform: none !important;
}

.ai-modal-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transform: none !important;
}

.ai-modal-tab-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ffffff;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.25);
  transform: none !important;
}

.ai-modal-tab-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  transform: none !important;
}

.ai-modal-tab-btn.active .ai-modal-tab-badge {
  background: #8b5cf6;
  color: #ffffff;
  font-weight: 700 !important;
}

.ai-recom-card-primary {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 1.15rem;
  transition: all 0.2s ease;
}

.ai-recom-card-secondary {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.15rem;
  transition: all 0.2s ease;
}

.ai-card-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: #ffffff;
}

.ai-card-desc {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0 0 0.85rem 0;
}

.ai-strategy-highlight {
  color: #a78bfa;
  font-weight: 700;
}

.ai-card-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-card-impact {
  font-size: 0.7rem;
  color: #94a3b8;
}

.ai-card-pacing {
  font-size: 0.68rem;
  color: #a78bfa;
}

.ai-card-telemetry {
  font-size: 0.7rem;
  color: #64748b;
}

.ai-status-active {
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 600;
}

.ai-badge-success {
  font-size: 10px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.ai-badge-info {
  font-size: 10px;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.ai-badge-warning {
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.ai-direction-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.15rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: none !important;
}

.ai-direction-card:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.4);
  transform: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ai-dir-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.ai-dir-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #ffffff;
}

.ai-dir-subtitle {
  font-size: 0.7rem;
  color: #94a3b8;
}

.ai-dir-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* === SCALE MODAL TABS & DIRECTION CARDS (ORANGE BRAND THEMED) === */
.scale-modal-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.scale-modal-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.scale-modal-tab-btn.active {
  background: rgba(255, 94, 0, 0.15) !important;
  border-color: rgba(255, 94, 0, 0.5) !important;
  color: #ff5e00 !important;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.2) !important;
}

.scale-tab-badge {
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 94, 0, 0.25);
  color: #ff8a00;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
}

.scale-modal-tab-btn.active .scale-tab-badge {
  background: #ff5e00 !important;
  color: #ffffff !important;
}

.scale-direction-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.15rem;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scale-direction-card:hover {
  background: rgba(255, 94, 0, 0.05);
  border-color: rgba(255, 94, 0, 0.4);
  transform: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* === CLIENT DETAIL ACTION BUTTONS === */
.btn-detail-action {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none;
}
.btn-detail-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.btn-detail-action:active {
  transform: scale(0.96) !important;
  filter: brightness(0.9);
}
#btn-admin-pause-account:disabled {
  opacity: 0.6 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

/* === CAMPAIGNS TABLE ACTION BUTTONS (NO HOVER UP EFFECT) === */
.action-cell button,
.action-cell .btn,
.action-cell .btn-action-scale,
.action-cell .btn-row-notif,
.action-cell .btn-action-icon,
.btn-action-scale,
.btn-row-notif,
.btn-action-icon {
  transform: none !important;
}
.action-cell button:hover,
.action-cell .btn:hover,
.action-cell .btn-action-scale:hover,
.action-cell .btn-row-notif:hover,
.action-cell .btn-action-icon:hover,
.btn-action-scale:hover,
.btn-row-notif:hover,
.btn-action-icon:hover {
  transform: none !important;
}

/* ==========================================================================
   ENHANCED LIGHT MODE & UNIVERSAL TOAST / LOCKOUT SYSTEM
   ========================================================================== */

/* === 1. TOAST SYSTEM (HIGH CONTRAST & CRISP LEGIBILITY IN BOTH MODES) === */
.toast {
  position: fixed !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(24px) scale(0.95) !important;
  padding: 8px 18px 8px 10px !important;
  border-radius: 9999px !important;
  z-index: 99999999 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-left-width: 1px !important;
  border-bottom-width: 1px !important;
  color: #f8fafc !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  max-width: calc(100vw - 32px) !important;
  white-space: nowrap !important;
}

.toast.show {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 1024px) {
  .toast {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 14px) !important;
  }
}

.toast.success {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.15) !important;
}

.toast.error {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15) !important;
}

.toast.info {
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-left-width: 1px !important;
  border-bottom-width: 1px !important;
  color: #0f172a !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .toast.success {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1), 0 0 16px rgba(16, 185, 129, 0.12) !important;
}

[data-theme="light"] .toast.error {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1), 0 0 16px rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .toast.info {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1), 0 0 16px rgba(99, 102, 241, 0.12) !important;
}

.toast-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.toast.success .toast-icon-badge {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10b981 !important;
}

.toast.error .toast-icon-badge {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #ef4444 !important;
}

.toast.info .toast-icon-badge {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #6366f1 !important;
}

/* === 2. ACCOUNT PAUSED LOCKOUT MODAL (DARK & LIGHT MODE) === */
.modal-lockout-backdrop {
  z-index: 9999999 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(5, 7, 15, 0.88) !important;
}

[data-theme="light"] .modal-lockout-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}

.modal-paused-card {
  max-width: 480px !important;
  text-align: center !important;
  padding: 2.75rem 2rem !important;
  border-radius: 24px !important;
  position: relative !important;
  background: #0f172a !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(245, 158, 11, 0.15) !important;
  color: #f8fafc !important;
}

[data-theme="light"] .modal-paused-card {
  background: #ffffff !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 35px rgba(245, 158, 11, 0.12) !important;
  color: #0f172a !important;
}

.modal-paused-icon-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  border: 2px solid rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.2rem;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .modal-paused-icon-badge {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.2) !important;
}

.modal-paused-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  margin: 0 0 0.75rem 0 !important;
}

[data-theme="light"] .modal-paused-title {
  color: #d97706 !important;
}

.modal-paused-desc {
  color: #94a3b8 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 0 1.75rem 0 !important;
}

[data-theme="light"] .modal-paused-desc {
  color: #475569 !important;
}

.modal-paused-help-box {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 16px !important;
  padding: 1.1rem !important;
  margin-bottom: 2rem !important;
  text-align: left !important;
  font-size: 0.84rem !important;
  color: #cbd5e1 !important;
}

[data-theme="light"] .modal-paused-help-box {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

.modal-paused-help-title {
  font-weight: 700 !important;
  color: #fbbf24 !important;
  margin-bottom: 0.35rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

[data-theme="light"] .modal-paused-help-title {
  color: #b45309 !important;
}

.modal-paused-help-body {
  line-height: 1.45 !important;
}

[data-theme="light"] .modal-paused-help-body {
  color: #78350f !important;
}

.btn-modal-paused-action {
  width: 100% !important;
  justify-content: center !important;
  height: 48px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ff5e00 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(255, 94, 0, 0.4) !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.btn-modal-paused-action:hover {
  box-shadow: 0 6px 25px rgba(255, 94, 0, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* === 3. LOGIN PORTAL LIGHT MODE ENHANCEMENTS === */
[data-theme="light"] #page-compty {
  background: #f8fafc !important;
}

[data-theme="light"] .auth-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .auth-card p {
  color: #64748b !important;
}

[data-theme="light"] .auth-card .form-group label {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .auth-card .form-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .auth-card .form-input:focus {
  background: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}

[data-theme="light"] .auth-card code {
  background: #f1f5f9 !important;
  color: #ea580c !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* === 4. MY PROFILE PAGE STYLES (DARK & LIGHT MODE) === */
.client-profile-status-banner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: 16px !important;
  padding: 0.75rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.client-profile-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #10b981 !important;
}
.client-profile-account-id-label {
  font-size: 0.75rem !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}
.cp-profile-card {
  padding: 1.5rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
}
.cp-profile-card h3,
.cp-profile-card h4 {
  color: #ffffff !important;
}
.cp-profile-card p {
  color: #94a3b8 !important;
}
.cp-plan-tier-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
.cp-rate-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(234, 88, 12, 0.04) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #ffffff !important;
}
.cp-duration-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
}

/* === LIGHT MODE OVERRIDES FOR MY PROFILE === */
[data-theme="light"] .client-profile-status-banner {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .client-profile-status-pill {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
}
[data-theme="light"] .client-profile-account-id-label {
  color: #475569 !important;
  font-weight: 700 !important;
}
[data-theme="light"] .cp-profile-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
}
[data-theme="light"] .cp-profile-card h3,
[data-theme="light"] .cp-profile-card h4 {
  color: #0f172a !important;
}
[data-theme="light"] .cp-profile-card p {
  color: #64748b !important;
}
[data-theme="light"] .cp-profile-card label {
  color: #334155 !important;
  font-weight: 700 !important;
}
[data-theme="light"] .cp-profile-card .form-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .cp-profile-card .form-input:focus {
  background: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}
[data-theme="light"] .cp-profile-card .form-input:disabled {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
  opacity: 1 !important;
}
[data-theme="light"] .cp-plan-tier-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}
[data-theme="light"] .cp-rate-card {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #0f172a !important;
}
[data-theme="light"] .cp-rate-card #cp-tier-rate-title {
  color: #0f172a !important;
}
[data-theme="light"] .cp-rate-card #cp-renewal-date-text {
  color: #0f172a !important;
}
[data-theme="light"] .cp-duration-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
}
[data-theme="light"] .cp-duration-card strong {
  color: #ea580c !important;
}

/* === CAMPAIGN CANCELLATION REQUEST MODAL === */
.cancel-reason-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.cancel-reason-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.cancel-reason-pill.selected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}
[data-theme="light"] .cancel-reason-pill {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .cancel-reason-pill:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .cancel-reason-pill.selected {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  box-shadow: 0 0 0 1px #ef4444, 0 4px 12px rgba(239, 68, 68, 0.12) !important;
}

/* Light mode overrides for modal-cancel-campaign-request */
[data-theme="light"] #modal-cancel-campaign-request .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="light"] #modal-cancel-campaign-request h3 {
  color: #0f172a !important;
}
[data-theme="light"] #modal-cancel-campaign-request #cancel-modal-campaign-subtitle {
  color: #64748b !important;
}
[data-theme="light"] #modal-cancel-campaign-request .cancel-amber-box {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}
[data-theme="light"] #modal-cancel-campaign-request .cancel-amber-box-title {
  color: #b45309 !important;
}
[data-theme="light"] #modal-cancel-campaign-request .cancel-amber-box-desc {
  color: #334155 !important;
}
[data-theme="light"] #modal-cancel-campaign-request .cancel-amber-box-sub {
  color: #64748b !important;
}
[data-theme="light"] #modal-cancel-campaign-request .cancel-reason-label,
[data-theme="light"] #modal-cancel-campaign-request .cancel-message-label {
  color: #0f172a !important;
}
[data-theme="light"] #modal-cancel-campaign-request #cancel-campaign-message {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] #modal-cancel-campaign-request #cancel-campaign-message::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] #modal-cancel-campaign-request #cancel-campaign-message:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
  outline: none !important;
}
[data-theme="light"] #modal-cancel-campaign-request #btn-cancel-close-request {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
[data-theme="light"] #modal-cancel-campaign-request #btn-cancel-close-request:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
[data-theme="light"] #modal-cancel-campaign-request #btn-close-cancel-campaign-modal {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}
[data-theme="light"] #modal-cancel-campaign-request #btn-close-cancel-campaign-modal:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* =========================================================
   LIGHT MODE OVERRIDES FOR CLIENT AI RECOMMENDATIONS MODAL (#modal-client-ai-recom)
   ========================================================= */
[data-theme="light"] #modal-client-ai-recom .client-ai-modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #modal-client-ai-recom .client-ai-modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] #modal-client-ai-recom .client-ai-icon-bubble {
  background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%) !important;
  border: 1px solid #c4b5fd !important;
  color: #7c3aed !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15) !important;
}

[data-theme="light"] #modal-client-ai-recom .client-ai-modal-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-client-ai-recom .client-ai-smart-tag {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe !important;
}

[data-theme="light"] #modal-client-ai-recom .client-ai-modal-subtitle {
  color: #64748b !important;
}

[data-theme="light"] #modal-client-ai-recom .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] #modal-client-ai-recom .modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Light Mode: AI Tab Bar & Buttons */
[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-bar {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-btn {
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-btn.active {
  background: #ffffff !important;
  border-color: #c4b5fd !important;
  color: #7c3aed !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.12) !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-badge {
  background: #e2e8f0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-modal-tab-btn.active .ai-modal-tab-badge {
  background: #ede9fe !important;
  color: #7c3aed !important;
  font-weight: 700 !important;
}

/* Light Mode: Primary & Secondary AI Recommendation Cards */
[data-theme="light"] #modal-client-ai-recom .ai-recom-card-primary {
  background: #fdfcff !important;
  border: 1.5px solid #ddd6fe !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.06) !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-recom-card-primary:hover {
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-recom-card-secondary {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-recom-card-secondary:hover {
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-desc {
  color: #334155 !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-strategy-highlight {
  color: #7c3aed !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-divider {
  border-top: 1px solid #f1f5f9 !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-impact {
  color: #64748b !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-pacing {
  color: #64748b !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-card-telemetry {
  color: #64748b !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-status-active {
  color: #059669 !important;
  font-weight: 700 !important;
}

/* Light Mode: Badges */
[data-theme="light"] #modal-client-ai-recom .ai-badge-success {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-badge-info {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-badge-warning {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

/* Light Mode: Direction Scaling Cards */
[data-theme="light"] #modal-client-ai-recom .ai-direction-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-direction-card:hover {
  background: #fdfcff !important;
  border-color: #c4b5fd !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08) !important;
  transform: none !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-dir-icon-bubble {
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #7c3aed !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-dir-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-client-ai-recom .ai-dir-subtitle {
  color: #64748b !important;
}

/* Light Mode: Body Scrollbar */
[data-theme="light"] #client-ai-recom-modal-body::-webkit-scrollbar {
  width: 5px;
}

[data-theme="light"] #client-ai-recom-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="light"] #client-ai-recom-modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 999px;
}

[data-theme="light"] #client-ai-recom-modal-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Light Mode: Footer & Buttons */
[data-theme="light"] #modal-client-ai-recom .ai-modal-footer {
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #modal-client-ai-recom .btn-secondary {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] #modal-client-ai-recom .btn-secondary:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}


/* ==========================================================================
   CAMPAIGN DETAILS PAGE & VISUAL ADS BREAKDOWN
   ========================================================================== */

/* Top Navigation Bar */
.cd-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.cd-top-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cd-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ff5e00;
  transform: translateX(-2px);
}

.cd-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.cd-bc-root {
  color: var(--text-secondary);
  font-weight: 600;
}

.cd-bc-sep {
  color: var(--text-muted);
}

.cd-bc-current {
  color: var(--text-primary);
  font-weight: 800;
}

.cd-top-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cd-btn-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cd-btn-pause:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.55);
}

.cd-btn-pause.is-paused {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.cd-btn-pause.is-paused:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.55);
}

.cd-btn-pause.is-pending-verify {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
  color: #f59e0b;
}

.cd-btn-pause.is-pending-verify:hover {
  background: rgba(245, 158, 11, 0.28);
}

.cd-btn-pause.is-cancelled {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  cursor: not-allowed !important;
}

.badge-cancelled {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  font-weight: 700 !important;
}

/* Campaign Details Calendar Picker Buttons */
.cd-toolbar-cal-btn,
.cd-chart-cal-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cd-toolbar-cal-btn:hover,
.cd-chart-cal-btn:hover {
  background: rgba(255, 94, 0, 0.08);
  border-color: rgba(255, 94, 0, 0.35);
  color: #ff5e00;
}

[data-theme="light"] .cd-toolbar-cal-btn,
[data-theme="light"] .cd-chart-cal-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .cd-toolbar-cal-btn:hover,
[data-theme="light"] .cd-chart-cal-btn:hover {
  background: rgba(255, 94, 0, 0.06);
  border-color: rgba(255, 94, 0, 0.4);
  color: #ea580c;
}

/* Hero Campaign Overview Banner */
.cd-hero-banner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
  padding: 1.75rem 2rem;
  border-radius: 24px;
  margin-bottom: 1.5rem;
  background: radial-gradient(circle at 10% 20%, rgba(255, 94, 0, 0.04) 0%, rgba(10, 15, 30, 0.7) 100%), rgba(255, 255, 255, 0.015);
  border: 1px solid var(--panel-border);
  position: relative;
  overflow: hidden;
}

.cd-hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cd-hero-badges {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.cd-platform-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
}

.cd-platform-badge.fb {
  background: rgba(24, 119, 242, 0.15);
  border: 1px solid rgba(24, 119, 242, 0.35);
  color: #60a5fa;
}

.cd-platform-badge.ig {
  background: rgba(228, 64, 95, 0.15);
  border: 1px solid rgba(228, 64, 95, 0.35);
  color: #f472b6;
}

.cd-direction-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.cd-title {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 0.85rem 0;
  line-height: 1.2;
}

.cd-meta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.cd-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cd-hero-right {
  display: flex;
  align-items: center;
}

.cd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cd-kpi-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 0.85rem 1.15rem;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.cd-kpi-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.cd-kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.15;
}

.cd-kpi-val.text-green { color: #34d399; }
.cd-kpi-val.text-cyan { color: #38bdf8; }
.cd-kpi-val.text-yellow { color: #f59e0b; }

.cd-kpi-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  font-weight: 600;
}

/* Sub-Navigation Tabs */
.cd-tabs-nav-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding-right: 1.5rem;
}

.cd-tabs-nav-bar::-webkit-scrollbar {
  display: none;
}

.cd-tabs-nav-bar.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.cd-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.cd-tab-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.cd-tab-item.active {
  background: #ff5e00;
  border-color: #ff5e00;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 94, 0, 0.35);
}

.cd-tab-panel {
  display: none;
}

.cd-tab-panel.active {
  display: block;
}

/* Filter Toolbar */
.cd-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.cd-filter-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.cd-filter-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.cd-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cd-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cd-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.cd-pill.active {
  background: #ff5e00;
  color: #ffffff;
}

.cd-btn-add-variant {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  background: rgba(255, 94, 0, 0.12);
  border: 1px solid rgba(255, 94, 0, 0.4);
  color: #ff8a00;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-btn-add-variant:hover {
  background: #ff5e00;
  border-color: #ff5e00;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 94, 0, 0.4);
  transform: translateY(-1px);
}

[data-theme="light"] .cd-btn-add-variant {
  background: #fff7ed !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
  color: #ea580c !important;
}

[data-theme="light"] .cd-btn-add-variant:hover {
  background: #ff5e00 !important;
  border-color: #ff5e00 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 94, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* View Switcher Capsule (matching cards vs table toggle) */
.cd-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3px;
}

[data-theme="light"] .cd-view-switcher {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.cd-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.38rem 0.8rem;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

.cd-view-btn svg {
  display: block;
  flex-shrink: 0;
}

.cd-view-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .cd-view-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.cd-view-btn.active {
  background: #ff5e00 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(255, 94, 0, 0.4);
}

/* Toolbar Flex Layout */
.cd-filters-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cd-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Ad Variants Table Styles */
.cd-ads-table-container {
  border-radius: 18px !important;
  overflow: hidden !important;
  overflow-x: auto !important;
  background: #080d19 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem;
}

[data-theme="light"] .cd-ads-table-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.cd-variants-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cd-variants-table th {
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #0b132b !important;
  white-space: nowrap;
}

[data-theme="light"] .cd-variants-table th {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

.cd-variants-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Maintain solid opaque background on hover so scrolled headers behind sticky column never bleed through */
.cd-variants-table th.sortable:hover {
  background: #162040 !important;
  color: #ffffff !important;
}

[data-theme="light"] .cd-variants-table th.sortable:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.cd-variant-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}

.cd-variant-table-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .cd-variant-table-row:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Format Pill in Table */
.cd-table-format-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="light"] .cd-table-format-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

/* Color Separation on Table Rows (Winning, Medium, Less Efficient) */
.cd-variant-table-row.cd-row-winning {
  background: rgba(16, 185, 129, 0.08) !important;
}

.cd-variant-table-row.cd-row-medium {
  background: rgba(245, 158, 11, 0.08) !important;
}

.cd-variant-table-row.cd-row-low {
  background: rgba(239, 68, 68, 0.08) !important;
}

.cd-variant-table-row.cd-row-winning > td:first-child {
  border-left: 6px solid #10b981 !important;
}

.cd-variant-table-row.cd-row-medium > td:first-child {
  border-left: 6px solid #f59e0b !important;
}

.cd-variant-table-row.cd-row-low > td:first-child {
  border-left: 6px solid #ef4444 !important;
}

.cd-variant-table-row.cd-row-winning:hover {
  background: rgba(16, 185, 129, 0.14) !important;
}

.cd-variant-table-row.cd-row-medium:hover {
  background: rgba(245, 158, 11, 0.14) !important;
}

.cd-variant-table-row.cd-row-low:hover {
  background: rgba(239, 68, 68, 0.14) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-winning {
  background: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-medium {
  background: rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-low {
  background: rgba(239, 68, 68, 0.08) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-winning:hover {
  background: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-medium:hover {
  background: rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] .cd-variant-table-row.cd-row-low:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

.cd-ad-id-pill:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 94, 0, 0.5) !important;
}

/* ==========================================
   ADS CREATIVE CARDS GRID & SOCIAL POST MOCKUP
   ========================================== */
.cd-ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cd-ad-card {
  border-radius: 22px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  background: #080d19;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

/* Color Separation by Efficiency with Section Top Gradient Glow */
.cd-ad-card.winning {
  background: radial-gradient(circle at 50% -15%, rgba(16, 185, 129, 0.32) 0%, rgba(16, 185, 129, 0.08) 32%, rgba(8, 13, 25, 0.98) 60%), #080d19;
  border-color: #10b981;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.16), inset 0 1px 0 rgba(16, 185, 129, 0.35);
}

.cd-ad-card.medium {
  background: radial-gradient(circle at 50% -15%, rgba(245, 158, 11, 0.32) 0%, rgba(245, 158, 11, 0.08) 32%, rgba(8, 13, 25, 0.98) 60%), #080d19;
  border-color: #f59e0b;
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.16), inset 0 1px 0 rgba(245, 158, 11, 0.35);
}

.cd-ad-card.low {
  background: radial-gradient(circle at 50% -15%, rgba(239, 68, 68, 0.32) 0%, rgba(239, 68, 68, 0.08) 32%, rgba(8, 13, 25, 0.98) 60%), #080d19;
  border-color: #ef4444;
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.16), inset 0 1px 0 rgba(239, 68, 68, 0.35);
}

/* Card Header */
.cd-ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cd-ad-tags {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cd-ad-variant-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cd-ad-card.winning .cd-ad-variant-pill {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.cd-ad-card.medium .cd-ad-variant-pill {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.cd-ad-card.low .cd-ad-variant-pill {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.cd-ad-format-pill {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
}

.cd-ad-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.cd-ad-status-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cd-ad-status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.cd-ad-status-badge.paused {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.cd-ad-toggle-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.cd-ad-toggle-btn svg {
  display: block;
  margin: auto;
  pointer-events: none;
}

.cd-ad-card.winning .cd-ad-toggle-btn {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.cd-ad-card.medium .cd-ad-toggle-btn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}

.cd-ad-card.low .cd-ad-toggle-btn {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
}

.cd-ad-toggle-btn.is-paused {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  color: #34d399 !important;
}

.cd-ad-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.cd-ad-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

/* Feed Post Mockup */
.cd-post-mockup {
  background: #040813;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
}

.cd-post-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cd-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #ffffff;
}

.cd-post-avatar.brand-orange {
  background: linear-gradient(135deg, #ff5e00, #ff8c00);
}

.cd-post-avatar.brand-green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.cd-post-author-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cd-post-verified {
  color: #3b82f6;
  font-size: 11px;
}

.cd-post-subline {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.cd-post-dots {
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}

.cd-post-caption {
  padding: 0 0.85rem 0.75rem 0.85rem;
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.cd-post-media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-post-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-post-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-post-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

.cd-post-duration-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.cd-post-carousel-dots {
  position: absolute;
  bottom: 8px;
  display: flex;
  gap: 4px;
}

.cd-post-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.cd-post-dot.active {
  background: #ffffff;
}

.cd-post-cta-strip {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cd-post-cta-domain {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cd-post-cta-headline {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-post-cta-desc {
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-post-cta-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  background: #ff5e00;
  color: #ffffff;
}

.cd-post-cta-btn.green {
  background: #10b981;
}

.cd-post-cta-btn.pink {
  background: #ec4899;
}

.cd-post-engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Efficiency Analysis Box */
.cd-efficiency-box {
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 600;
}

.cd-ad-card.winning .cd-efficiency-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.cd-ad-card.medium .cd-efficiency-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.cd-ad-card.low .cd-efficiency-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}

/* Creative Metrics Grid */
.cd-metrics-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cd-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.cd-metric-tile {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
}

.cd-mt-label {
  font-size: 8.5px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}

[data-theme="light"] .cd-mt-label {
  color: #64748b;
}

.cd-mt-val {
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.cd-mt-val.green { color: #34d399; }
.cd-mt-val.yellow { color: #fbbf24; }
.cd-mt-val.red { color: #f87171; }

/* ==========================================
   HISTORIC CHANGELOG TIMELINE
   ========================================== */
.cd-changelog-container {
  padding: 2rem;
  border-radius: 24px;
}

.cd-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-left: 2.5rem;
}

.cd-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.cd-timeline-item {
  position: relative;
}

.cd-timeline-node {
  position: absolute;
  left: -2.5rem;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  font-size: 14px;
  background: #0b1120;
  border: 2px solid #ff5e00;
  color: #ff5e00;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.cd-timeline-node svg {
  display: block !important;
  margin: auto !important;
  pointer-events: none !important;
}

.cd-timeline-node.green { border-color: #10b981; color: #10b981; }
.cd-timeline-node.blue { border-color: #3b82f6; color: #3b82f6; }
.cd-timeline-node.amber { border-color: #f59e0b; color: #f59e0b; }
.cd-timeline-node.purple { border-color: #8b5cf6; color: #8b5cf6; }

.cd-timeline-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  transition: all 0.2s ease;
}

.cd-timeline-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}

.cd-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.cd-timeline-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin: 0;
}

.cd-timeline-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cd-timeline-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 0.85rem 0;
}

.cd-timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cd-timeline-diff {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.cd-diff-old {
  text-decoration: line-through;
  color: var(--text-muted);
}

.cd-diff-new {
  color: #ff5e00;
}

.cd-timeline-author {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.cd-author-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR CAMPAIGN DETAILS
   ========================================================================== */
[data-theme="light"] #page-campaign-details {
  color: #0f172a;
}

[data-theme="light"] .cd-hero-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cd-title {
  color: #0f172a !important;
}

[data-theme="light"] .cd-meta-row {
  color: #64748b !important;
}

[data-theme="light"] .cd-kpi-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-kpi-val {
  color: #0f172a !important;
}

[data-theme="light"] .cd-kpi-val.text-green { color: #059669 !important; }
[data-theme="light"] .cd-kpi-val.text-cyan { color: #0284c7 !important; }
[data-theme="light"] .cd-kpi-val.text-yellow { color: #d97706 !important; }

[data-theme="light"] .cd-tab-item {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .cd-tab-item.active {
  background: #ff5e00 !important;
  border-color: #ff5e00 !important;
  color: #ffffff !important;
}

[data-theme="light"] .cd-filter-toolbar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-pill {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

[data-theme="light"] .cd-pill.active {
  background: #ff5e00 !important;
  color: #ffffff !important;
}

[data-theme="light"] .cd-ad-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cd-ad-card.winning {
  background: radial-gradient(circle at 50% -15%, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 35%, #ffffff 65%), #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] .cd-ad-card.medium {
  background: radial-gradient(circle at 50% -15%, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 35%, #ffffff 65%), #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] .cd-ad-card.low {
  background: radial-gradient(circle at 50% -15%, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.04) 35%, #ffffff 65%), #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .cd-ad-status-badge.active {
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  color: #059669 !important;
}

[data-theme="light"] .cd-ad-status-badge.paused {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #d97706 !important;
}

[data-theme="light"] .cd-ad-card.winning .cd-ad-toggle-btn {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  color: #059669 !important;
}

[data-theme="light"] .cd-ad-card.medium .cd-ad-toggle-btn {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #d97706 !important;
}

[data-theme="light"] .cd-btn-pause {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #d97706 !important;
}

[data-theme="light"] .cd-btn-pause:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] .cd-btn-pause.is-paused {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  color: #059669 !important;
}

[data-theme="light"] .cd-btn-pause.is-paused:hover {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
}

[data-theme="light"] .cd-btn-pause.is-pending-verify {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #d97706 !important;
}

[data-theme="light"] .cd-btn-pause.is-cancelled {
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  color: #dc2626 !important;
  cursor: not-allowed !important;
}

[data-theme="light"] .badge-cancelled {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

[data-theme="light"] .cd-ad-card.low .cd-ad-toggle-btn {
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  color: #dc2626 !important;
}

[data-theme="light"] .cd-ad-toggle-btn.is-paused {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  color: #059669 !important;
}

[data-theme="light"] .cd-ad-toggle-btn {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .cd-ad-toggle-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .cd-ad-format-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .cd-ad-card.winning .cd-ad-variant-pill {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
}

[data-theme="light"] .cd-ad-card.medium .cd-ad-variant-pill {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #d97706 !important;
}

[data-theme="light"] .cd-ad-card.low .cd-ad-variant-pill {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

[data-theme="light"] .cd-ad-title {
  color: #0f172a !important;
}

[data-theme="light"] .cd-post-mockup {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-post-author-name {
  color: #0f172a !important;
}

[data-theme="light"] .cd-post-caption {
  color: #334155 !important;
}

[data-theme="light"] .cd-post-cta-strip {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-post-cta-headline {
  color: #0f172a !important;
}

[data-theme="light"] .cd-post-engagement {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .cd-metric-tile {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-mt-val {
  color: #0f172a !important;
}

[data-theme="light"] .cd-changelog-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-timeline::before {
  background: #e2e8f0 !important;
}

[data-theme="light"] .cd-timeline-node {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cd-timeline-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cd-timeline-title {
  color: #0f172a !important;
}

[data-theme="light"] .cd-timeline-desc {
  color: #475569 !important;
}

[data-theme="light"] #modal-add-ad-variant .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #modal-add-ad-variant input,
[data-theme="light"] #modal-add-ad-variant select,
[data-theme="light"] #modal-add-ad-variant textarea {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* === P2P PAYCOINS TRANSFER MODAL STYLES === */
.btn-preset-amount {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}

.btn-preset-amount:hover {
  background: rgba(255, 94, 0, 0.12);
  border-color: rgba(255, 94, 0, 0.4);
  color: #ff5e00;
}

[data-theme="light"] .btn-preset-amount {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .btn-preset-amount:hover {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #ea580c !important;
}

[data-theme="light"] #modal-transfer-paycoins .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #modal-transfer-paycoins input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #btn-wallet-transfer {
  background: #fff7ed !important;
  border: 1.5px solid #fdba74 !important;
  color: #ea580c !important;
}

[data-theme="light"] #btn-wallet-transfer:hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
}

/* === DISABLE HOVER UPWARD TRANSLATE ON METRIC BOXES === */
.stat-box,
.stat-box:hover,
.metric-group .stat-box,
.metric-group .stat-box:hover,
.stat-box-simple,
.stat-box-simple:hover,
.stat-box-animated,
.stat-box-animated:hover,
.scale-direction-card,
.scale-direction-card:hover,
.ai-direction-card,
.ai-direction-card:hover,
[data-theme="light"] .stat-box:hover,
[data-theme="light"] .metric-group .stat-box:hover,
[data-theme="light"] .scale-direction-card:hover {
  transform: none !important;
}

/* === 2-STEP VARIANT MODAL ENHANCEMENTS === */
.var-post-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.var-post-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 94, 0, 0.4) !important;
}
.var-post-card.selected {
  background: rgba(255, 94, 0, 0.08) !important;
  border-color: #ff5e00 !important;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.2) !important;
}

.creative-tabs-segmented button {
  transition: all 0.2s ease !important;
}
.creative-tabs-segmented button:hover:not(.active) {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

#variant-dropzone {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#variant-dropzone:hover {
  border-color: #ff5e00 !important;
  background: rgba(255, 94, 0, 0.04) !important;
  box-shadow: 0 0 20px rgba(255, 94, 0, 0.1) !important;
}

.btn-preset-amount {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}
.btn-preset-amount:hover {
  background: rgba(255, 94, 0, 0.15);
  border-color: rgba(255, 94, 0, 0.4);
  color: #ff5e00;
  transform: translateY(-1px);
}

[data-theme="light"] .var-post-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .var-post-card:hover {
  background: #f1f5f9 !important;
  border-color: #ff5e00 !important;
}
[data-theme="light"] .var-post-card.selected {
  background: #fff7ed !important;
  border-color: #ff5e00 !important;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.15) !important;
}

#modal-add-ad-variant .glass-panel {
  max-width: 720px !important;
  width: 92vw !important;
  height: 640px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

[data-theme="light"] #modal-add-ad-variant .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
  max-width: 720px !important;
  width: 92vw !important;
  height: 640px !important;
  max-height: 90vh !important;
}

#variant-step-1-content,
#variant-step-2-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 94, 0, 0.4) transparent !important;
}

#variant-step-1-content::-webkit-scrollbar,
#variant-step-2-content::-webkit-scrollbar {
  width: 5px !important;
}
#variant-step-1-content::-webkit-scrollbar-thumb,
#variant-step-2-content::-webkit-scrollbar-thumb {
  background: rgba(255, 94, 0, 0.4) !important;
  border-radius: 6px !important;
}
[data-theme="light"] #modal-add-ad-variant .modal-close-btn {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
[data-theme="light"] #modal-add-ad-variant .modal-close-btn:hover {
  color: #0f172a !important;
  background: #e2e8f0 !important;
}
[data-theme="light"] #modal-add-ad-variant .btn-preset-amount {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] #modal-add-ad-variant .btn-preset-amount:hover {
  background: #fff7ed;
  border-color: #ff5e00;
  color: #ff5e00;
}
[data-theme="light"] #variant-dropzone {
  background: #fafafa !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] #variant-dropzone:hover {
  background: #fff7ed !important;
  border-color: #ff5e00 !important;
}

/* Page Selector Full Visibility & Custom Radio Indicator */
#var-page-select {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 1.5 !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.88rem !important;
  color: #f8fafc !important;
  background: #0b132b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="light"] #var-page-select {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Post list scrollbar */
#var-existing-posts-list {
  max-height: 220px !important;
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 94, 0, 0.5) rgba(255, 255, 255, 0.05) !important;
}
#var-existing-posts-list::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}
#var-existing-posts-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 8px !important;
}
#var-existing-posts-list::-webkit-scrollbar-thumb {
  background: #ff5e00 !important;
  border-radius: 8px !important;
}
[data-theme="light"] #var-existing-posts-list {
  scrollbar-color: #ff5e00 #f1f5f9 !important;
}
[data-theme="light"] #var-existing-posts-list::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}
[data-theme="light"] #var-existing-posts-list::-webkit-scrollbar-thumb {
  background: #ff5e00 !important;
}
[data-theme="light"] .var-radio-indicator {
  border-color: rgba(0, 0, 0, 0.3) !important;
}
[data-theme="light"] .var-post-card.selected .var-radio-indicator {
  border-color: #ff5e00 !important;
}

/* Multi-Media Gallery Item Styling */
.var-media-item-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  transform: none !important;
}
.var-media-item-card:hover {
  transform: none !important;
  border-color: #ff5e00 !important;
  box-shadow: 0 4px 12px rgba(255, 94, 0, 0.15) !important;
}
.var-media-remove-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.var-media-remove-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: none !important;
}
.var-media-remove-btn svg {
  display: block !important;
  margin: auto !important;
}

[data-theme="light"] .var-media-item-card {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   RESPONSIVE MOBILE & TABLET SUITE (STRICT ZERO-REGRESSION FOR DESKTOP)
   ========================================================================== */

/* 1. Base Hidden Elements for Desktop (> 1024px) */
.sidebar-mobile-close-btn,
.sidebar-backdrop,
.mobile-bottom-nav {
  display: none !important;
}

/* Universal 3-Bars Hamburger Button (Both Mobile & Desktop) */
.btn-mobile-menu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.btn-mobile-menu:hover {
  background: rgba(255, 94, 0, 0.12);
  border-color: rgba(255, 94, 0, 0.4);
  color: #ff5e00;
  transform: scale(1.04);
}
[data-theme="light"] .btn-mobile-menu {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

/* ==========================================================================
   2. TABLET BREAKPOINT (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Show Hamburger Menu Toggle in Top Header */
  .btn-mobile-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .btn-mobile-menu:hover {
    background: rgba(255, 94, 0, 0.12);
    border-color: rgba(255, 94, 0, 0.4);
    color: #ff5e00;
  }

  /* Sidebar Drawer Setup */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
    background: #090e1c !important;
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow-y: auto !important;
  }
  
  .sidebar.mobile-open {
    display: flex !important;
    transform: translateX(0) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7) !important;
  }

  .sidebar-toggle-btn {
    display: none !important;
  }

  .sidebar-mobile-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .sidebar-mobile-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
  }

  /* Backdrop Overlay */
  .sidebar-backdrop {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Main Viewport Spacing & Sticky Header */
  .main-viewport {
    padding: 1.25rem 1.5rem 2.5rem 1.5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .page-header-row {
    padding: 0.85rem 1.5rem !important;
    margin: -1.25rem -1.5rem 1.25rem -1.5rem !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Dashboard Grids */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .stats-grid-row-four {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .stats-grid-row-three {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .admin-kpis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  /* Profile page grid */
  #tab-client-profile-identity > div,
  #tab-client-profile-social > div {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Table Filter & Search Bar Tablet Adaptation */
  .console-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    border-radius: 18px !important;
  }

  .console-tabs-scrollable {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    padding-bottom: 2px !important;
    padding-right: 1.25rem !important;
  }

  .console-filter-controls {
    display: flex !important;
    width: 100% !important;
    gap: 0.65rem !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .console-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .calendar-picker-wrapper {
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .calendar-popup {
    left: 0 !important;
    right: auto !important;
    width: 290px !important;
    max-width: calc(100vw - 2.5rem) !important;
    box-sizing: border-box !important;
  }

  .cd-top-right .calendar-popup {
    right: 0 !important;
    left: auto !important;
  }

  .cal-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
  }

  .cal-preset-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.72rem !important;
  }

  /* Wallet Page Tablet Enhancements */
  .wallet-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .wallet-card.wallet-card-total {
    grid-column: 1 / -1 !important;
  }

  .wallet-card {
    padding: 1.35rem !important;
    border-radius: 16px !important;
  }

  /* Tablet Generous Fixed Height for Modals */
  .modal-content,
  .glass-panel.modal-content,
  #modal-order-wizard .glass-panel,
  #modal-add-ad-variant .glass-panel,
  #modal-recharge .glass-panel,
  #modal-transfer-paycoins .glass-panel,
  #modal-scale-cbo .glass-panel,
  #modal-admin-order-review .glass-panel,
  #modal-admin-add-client .glass-panel,
  #modal-client-ai-recom .modal-content,
  #modal-upgrade-plan .glass-panel,
  #modal-avatar-camera .glass-panel,
  #modal-view-receipt .glass-panel,
  #modal-admin-add-user .glass-panel,
  #modal-subscription-expired .glass-panel {
    max-width: 90vw !important;
    width: 90vw !important;
    height: 82vh !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Campaign Details Hero Banner Tablet Adaptation */
  .cd-hero-banner {
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }

  .cd-hero-left,
  .cd-hero-right {
    width: 100% !important;
  }

  .cd-kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .cd-kpi-box {
    min-width: 0 !important;
    padding: 0.85rem 1rem !important;
  }
}

/* Hide mobile elements on desktop */
@media (min-width: 769px) {
  .bottom-sheet-drag-handle {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #client-campaigns-mobile-list,
  #admin-campaigns-mobile-list {
    display: none !important;
  }
}

/* ==========================================================================
   3. MOBILE BREAKPOINT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Viewport Safe-Area and Bottom Padding for Fixed Bottom Navigation & Smooth Scrolling */
  .main-viewport,
  body.ads-table-view .main-viewport,
  .app-container:has(#page-client-campaigns.active) .main-viewport,
  .app-container:has(#page-ads.active) .main-viewport,
  .app-container:has(#page-admin-ads.active) .main-viewport {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Content Viewport 5px Left & Right Padding on Mobile across ALL pages */
  #pages-viewport,
  .app-container #pages-viewport,
  .app-container:has(#page-client-campaigns.active) #pages-viewport,
  .app-container:has(#page-ads.active) #pages-viewport,
  .app-container:has(#page-admin-ads.active) #pages-viewport,
  .app-container:has(#page-campaign-details.active) #pages-viewport,
  #pages-viewport:has(#page-campaign-details.active),
  body.ads-table-view #pages-viewport {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  #page-client-campaigns.active,
  #page-ads.active, 
  #page-admin-ads.active {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    flex: none !important;
    margin-bottom: 2rem !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Profile Page Mobile Layout & Generous Bottom Clearance (Active Only) */
  #page-client-profile.active {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    flex: none !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 3.5rem) !important;
    margin-bottom: 2.5rem !important;
    box-sizing: border-box !important;
  }

  #page-client-profile:not(.active) {
    display: none !important;
  }

  .cp-tabs-header-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }

  .add-client-tabs-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    display: flex !important;
    gap: 0.5rem !important;
  }

  .add-client-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }

  #btn-cp-save-top {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  .cp-identity-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .cp-profile-card {
    padding: 1.15rem 1rem !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .cp-bottom-actions-bar {
    display: flex !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
    margin-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 1.5rem !important;
  }

  .btn-cp-save-bottom {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
  }

  .app-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Admin Header Row on Mobile */
  .admin-ads-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }
  .admin-ads-header-row #admin-client-filter-wrapper {
    min-width: 0 !important;
    width: 100% !important;
  }
  .admin-ads-header-row #admin-client-filter-trigger {
    width: 100% !important;
  }

  /* Admin KPIs Grid on Mobile: exactly 2 items on each line without horizontal scroll */
  .admin-kpis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .admin-kpis-grid .admin-kpi-card,
  .admin-kpis-grid .glass-panel {
    padding: 0.85rem 0.85rem !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-kpis-grid .admin-kpi-label,
  .admin-kpis-grid .glass-panel > div:first-child {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .admin-kpis-grid .admin-kpi-val,
  .admin-kpis-grid .glass-panel > div:last-child {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    margin-top: 0.35rem !important;
    word-break: break-word !important;
  }

  .admin-kpis-grid .admin-kpi-val span:last-child,
  .admin-kpis-grid .glass-panel > div:last-child span:last-child {
    font-size: 0.8rem !important;
  }

  /* Top Page Header Row (Sticky + Ultra-Clean Single Row on Mobile) */
  .page-header-row {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 950 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 6px 0.45rem 6px !important;
    margin: 0 0 0.65rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    background: rgba(6, 10, 24, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="light"] .page-header-row {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .page-header-row > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .btn-mobile-menu {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .btn-mobile-menu:active {
    transform: scale(0.92) !important;
    background: rgba(255, 94, 0, 0.12) !important;
    color: #ff5e00 !important;
  }

  .page-header-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--text-primary) !important;
  }

  .page-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Remove wallet funds & allocated capsule from mobile top header for breathability */
  #top-nav-wallet-widget,
  .top-nav-wallet-capsule {
    display: none !important;
  }

  /* Header action buttons & dropdown icons on mobile header */
  .header-action-btn,
  #btn-theme-toggle,
  #btn-notifications {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--panel-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .header-action-btn:hover,
  .header-action-btn:active,
  #btn-theme-toggle:active,
  #btn-notifications:active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    transform: scale(0.92) !important;
  }

  [data-theme="light"] .header-action-btn,
  [data-theme="light"] #btn-theme-toggle,
  [data-theme="light"] #btn-notifications {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-secondary) !important;
  }

  #btn-lang-selector #current-lang-text {
    display: none !important;
  }

  #current-lang-flag {
    width: 17px !important;
    height: auto !important;
    border-radius: 2px !important;
  }

  .header-user-avatar,
  .profile-avatar-thumb,
  #header-user-avatar-img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 94, 0, 0.4) !important;
    object-fit: cover !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
  }
  .header-user-avatar:active,
  #header-user-avatar-img:active {
    transform: scale(0.92) !important;
    border-color: #ff5e00 !important;
  }

  /* Stat Cards */
  .stats-grid-row-four,
  .stats-grid-row-three {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .stat-card-clean,
  .stat-box {
    padding: 0.9rem !important;
  }

  .stat-value-clean,
  .stat-card-value {
    font-size: 1.35rem !important;
  }

  /* Objective Filter Bar & Pill Tabs - Horizontal Scroll with momentum */
  .objective-filter-bar,
  .add-client-tabs-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    gap: 0.5rem !important;
    padding-bottom: 4px !important;
    padding-right: 1.25rem !important;
  }
  .objective-filter-bar::-webkit-scrollbar,
  .add-client-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }

  .objective-pill,
  .add-client-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Console Table Filter & Search Bar Mobile Enhancement */
  .console-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    padding: 0.65rem 0.75rem !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
  }

  .console-tabs-scrollable {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    gap: 0.4rem !important;
    padding: 2px 1.25rem 4px 0 !important;
  }

  .console-tab-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.45rem 0.8rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  .console-tab-pill .pill-icon {
    font-size: 0.85rem !important;
  }

  .console-tab-pill .pill-count {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.4rem !important;
  }

  .console-filter-controls {
    display: flex !important;
    width: 100% !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  .calendar-picker-wrapper {
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .calendar-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
    width: 320px !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 280px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    padding: 1.15rem 1rem !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    z-index: 9999999 !important;
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin: 0 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  }

  .calendar-popup:not(.show) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .calendar-popup.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .cd-top-right .calendar-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 9999999 !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
  }

  .cd-top-right .calendar-popup.show {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .calendar-backdrop {
    z-index: 9999998 !important;
  }

  [data-theme="light"] .calendar-popup {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  }

  .cal-header-select {
    font-size: 0.78rem !important;
    padding: 0.2rem 0.35rem !important;
    border-radius: 6px !important;
  }

  .cal-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
  }

  .cal-preset-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 0.35rem 0.45rem !important;
    font-size: 0.72rem !important;
  }

  .calendar-picker-btn {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  .console-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .console-search input {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 0.8rem !important;
    padding-left: 2.1rem !important;
    border-radius: 10px !important;
  }

  /* Dashboard Metric Groups - Horizontal Carousel per Line */
  .metric-groups-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
  }

  .metric-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.75rem !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
    padding-right: 2.25rem !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%) !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
  }

  .metric-group::-webkit-scrollbar {
    display: none !important;
  }

  .metric-group .stat-box {
    flex: 0 0 205px !important;
    min-width: 195px !important;
    max-width: 230px !important;
    width: 205px !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    padding: 1.15rem 1.25rem !important;
    border-radius: 16px !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  /* WhatsApp / Simple Metrics on Dashboard */
  .stat-box-simple {
    padding: 1rem 1.15rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stat-box-simple .simple-metrics {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 1.25rem !important;
    padding-right: 1.5rem !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
  }

  .stat-box-simple .simple-metrics::-webkit-scrollbar {
    display: none !important;
  }

  .stat-box-simple .simple-metric {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Dashboard Quick Action Banner */
  .glass-panel.tinted-orange {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.95rem 1.15rem !important;
    margin-bottom: 1.15rem !important;
  }
  .glass-panel.tinted-orange button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Wallet Page Mobile Enhancements */
  .wallet-page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    margin-bottom: 1.25rem !important;
  }

  .wallet-title {
    font-size: 1.35rem !important;
  }

  .wallet-subtitle {
    font-size: 0.8rem !important;
  }

  .wallet-header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .wallet-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  .wallet-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  .wallet-card {
    padding: 1.25rem 1.25rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
    gap: 0.75rem !important;
  }

  .wallet-card h3 {
    font-size: 0.72rem !important;
  }

  .wallet-card .badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.45rem !important;
  }

  #wallet-main-balance,
  #wallet-reserved-balance,
  #wallet-total-capital {
    font-size: 2.1rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ==========================================================================
   CAMPAIGN ACCORDION SYSTEM FOR MOBILE & TABLET (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Hide Desktop Table and Display Mobile Accordion Cards */
  #page-client-campaigns .console-table-container,
  #page-admin-ads .console-table-container {
    display: none !important;
  }

  #client-campaigns-mobile-list,
  #admin-campaigns-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin-bottom: 2.5rem !important;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* 1. Mobile Campaign Card (Matching Reference Screenshot 2) */
  .mobile-camp-card {
    background: #080d1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 0.9rem 1rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    box-sizing: border-box !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  .mobile-camp-card.expanded {
    border-color: rgba(255, 159, 10, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 94, 0, 0.1) !important;
  }

  [data-theme="light"] .mobile-camp-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  }

  [data-theme="light"] .mobile-camp-card.expanded {
    border-color: rgba(255, 94, 0, 0.4) !important;
    box-shadow: 0 8px 25px rgba(255, 94, 0, 0.12) !important;
  }

  /* 2. Card Header Row (Compact Two-Tier Responsive Layout) */
  .mobile-camp-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    position: relative !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .mobile-camp-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-camp-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    cursor: default !important;
  }

  /* Circular / Rounded Square Expand Chevron Button */
  .mobile-camp-expand-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-camp-expand-btn:focus,
  .mobile-camp-expand-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 159, 10, 0.3) !important;
  }

  .mobile-camp-expand-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 159, 10, 0.15) !important;
  }

  .mobile-camp-expand-btn svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.25s ease !important;
    stroke: currentColor !important;
  }

  .mobile-camp-card.expanded .mobile-camp-expand-btn svg {
    transform: rotate(180deg) !important;
    stroke: #ff9f0a !important;
  }

  [data-theme="light"] .mobile-camp-expand-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .mobile-camp-title-wrap {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .mobile-camp-title {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    transition: color 0.15s ease !important;
  }

  .mobile-camp-title:hover {
    color: #ff5e00 !important;
  }

  /* Sub Row: Badges Left, Status Right */
  .mobile-camp-header-sub {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: calc(34px + 0.6rem) !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 375px) {
    .mobile-camp-header-sub {
      padding-left: 0 !important;
    }
  }

  .mobile-camp-badges-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  .mobile-camp-status-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .mobile-camp-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 0.16rem 0.48rem !important;
    border-radius: 7px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .mobile-camp-pill.pill-ads {
    background: rgba(255, 159, 10, 0.12) !important;
    color: #ff9f0a !important;
    border: 1px solid rgba(255, 159, 10, 0.3) !important;
  }

  .mobile-camp-pill.pill-alerts {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
  }

  [data-theme="light"] .mobile-camp-pill.pill-ads {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
  }

  [data-theme="light"] .mobile-camp-pill.pill-alerts {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
  }

  .mobile-camp-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-shrink: 0 !important;
  }

  /* Status Badge in mobile header */
  .mobile-camp-status-wrap .status-pill,
  .mobile-camp-header .status-pill {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex-shrink: 0 !important;
  }

  /* 3-Dots Menu Button */
  .mobile-camp-menu-wrapper {
    position: relative !important;
  }

  .mobile-camp-dots-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-camp-dots-btn.active,
  .mobile-camp-dots-btn:active {
    background: #ff5e00 !important;
    border-color: #ff5e00 !important;
    color: #ffffff !important;
    transform: scale(0.94) !important;
    box-shadow: 0 0 16px rgba(255, 94, 0, 0.5) !important;
  }

  [data-theme="light"] .mobile-camp-dots-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* 3-Dots Floating Action Menu Popup (Matching Screenshot 3) */
  .mobile-camp-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 1050 !important;
    min-width: 220px !important;
    background: rgba(12, 17, 32, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 0.45rem !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 94, 0, 0.15) !important;
    display: none;
    flex-direction: column !important;
    gap: 0.2rem !important;
    transform-origin: top right !important;
  }

  .mobile-camp-dropdown-menu.open {
    display: flex !important;
    animation: menuPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes menuPopIn {
    from {
      opacity: 0;
      transform: scale(0.92) translateY(-6px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  [data-theme="light"] .mobile-camp-dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  }

  .mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-menu-item:hover,
  .mobile-menu-item:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(2px) !important;
  }

  [data-theme="light"] .mobile-menu-item:hover,
  [data-theme="light"] .mobile-menu-item:active {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .mobile-menu-item .menu-item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    width: 20px !important;
  }

  .mobile-menu-item .menu-item-text {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
  }

  .mobile-menu-item .menu-item-badge {
    background: #ff2b66 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(255, 43, 102, 0.5) !important;
  }

  /* 3. Card Middle Row (Platforms & Account) */
  .mobile-camp-middle {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex-wrap: wrap !important;
  }

  .mobile-camp-platforms {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .mobile-camp-account {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
  }

  .mobile-camp-account .account-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ff8a00 !important;
    box-shadow: 0 0 6px rgba(255, 138, 0, 0.6) !important;
    flex-shrink: 0 !important;
  }

  /* 4. Card Bottom Row (Period & Quick Metrics) */
  .mobile-camp-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    padding-top: 0.15rem !important;
  }

  .mobile-camp-period {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
  }

  .mobile-camp-period svg {
    color: var(--text-muted) !important;
    flex-shrink: 0 !important;
  }

  .mobile-camp-quick-metrics {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .quick-pill {
    padding: 0.22rem 0.55rem !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .quick-pill.pill-budget {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
  }

  .quick-pill.pill-budget strong {
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
  }

  .quick-pill.pill-roas {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
  }

  .quick-pill.pill-roas strong {
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
  }

  [data-theme="light"] .quick-pill.pill-budget {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* 5. Smooth Expandable Accordion Body */
  .mobile-camp-accordion-body {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    opacity: 0 !important;
  }

  .mobile-camp-card.expanded .mobile-camp-accordion-body {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }

  .mobile-camp-accordion-inner {
    overflow: hidden !important;
  }

  .mobile-camp-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 0.6rem 0 0.8rem 0 !important;
  }

  [data-theme="light"] .mobile-camp-divider {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  /* Metrics Grid (2 Columns) */
  .mobile-camp-metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
    margin-bottom: 0.85rem !important;
  }

  .mobile-metric-tile {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0.65rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  [data-theme="light"] .mobile-metric-tile {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  .metric-tile-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important; /* High contrast crisp silver-slate in Dark Mode */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  [data-theme="light"] .metric-tile-label {
    color: #64748b !important;
  }

  .metric-tile-val {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    line-height: 1.25 !important;
  }

  [data-theme="light"] .metric-tile-val {
    color: #0f172a !important;
  }

  .metric-tile-sub {
    font-size: 0.72rem !important;
    color: #cbd5e1 !important; /* Clear, readable secondary description */
    font-weight: 500 !important;
  }

  [data-theme="light"] .metric-tile-sub {
    color: #64748b !important;
  }

  .mobile-metric-tile span {
    color: #cbd5e1 !important;
  }

  [data-theme="light"] .mobile-metric-tile span {
    color: #475569 !important;
  }

  /* Quick Actions Bar inside Accordion */
  .mobile-camp-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
    padding-top: 0.2rem !important;
  }

  .btn-mobile-camp-action {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .btn-mobile-camp-action:active {
    transform: scale(0.95) !important;
  }

  .btn-mobile-camp-action.btn-scale {
    background: linear-gradient(135deg, #ff9f0a 0%, #ff5e00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 94, 0, 0.3) !important;
  }

  .btn-mobile-camp-action.btn-manage {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
  }

  .btn-mobile-camp-action.btn-pause {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #f59e0b !important;
  }

  .btn-mobile-camp-action.btn-play {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #10b981 !important;
  }

  [data-theme="light"] .btn-mobile-camp-action.btn-manage {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
}

/* ==========================================================================
   CAMPAIGN DETAILS PAGE MOBILE ENHANCEMENTS (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .cd-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
  }

  .cd-back-btn,
  .cd-btn-pause {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  .cd-hero-banner {
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.25rem 1rem !important;
    border-radius: 20px !important;
    margin-bottom: 1.25rem !important;
  }

  .cd-hero-left,
  .cd-hero-right {
    width: 100% !important;
  }

  /* Badges Row - Clean Inline Layout without Awkward Line Breaks */
  .cd-hero-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin-bottom: 0.65rem !important;
  }

  .cd-hero-badges .badge,
  .cd-hero-badges .cd-platform-badge,
  .cd-hero-badges .cd-direction-tag {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.55rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* Campaign Title */
  .cd-title {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    margin: 0 0 0.75rem 0 !important;
    word-break: break-word !important;
  }

  /* Meta Row (Dates, Objective, Client, Phone) */
  .cd-meta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    font-size: 0.78rem !important;
  }

  .cd-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
    word-break: break-word !important;
  }

  /* KPI Grid - Balanced 2x2 Grid on Mobile (No scrolling, metrics as they were) */
  .cd-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    width: 100% !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding: 0 !important;
  }

  .cd-kpi-box {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .cd-kpi-label {
    font-size: 0.6rem !important;
    margin-bottom: 0.25rem !important;
    letter-spacing: 0.05em !important;
  }

  .cd-kpi-val {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }

  .cd-kpi-sub {
    font-size: 0.68rem !important;
    margin-top: 2px !important;
  }

  /* Sub-Navigation Tabs Bar */
  .cd-tabs-nav-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .cd-tabs-nav-bar::-webkit-scrollbar {
    display: none !important;
  }

  .cd-tab-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }

  /* Campaign Details Ads Filter Toolbar Mobile */
  .cd-filter-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 0.85rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.25rem !important;
  }

  .cd-filter-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .cd-filter-group::-webkit-scrollbar {
    display: none !important;
  }

  .cd-filter-pills {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }

  .cd-toolbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .cd-view-switcher {
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .cd-filter-actions,
  #cd-filter-actions-add-variant {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  .cd-btn-add-variant {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
  }

  .cd-ads-table-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    overflow-x: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #080d19 !important;
    margin-bottom: 1.5rem !important;
    -webkit-overflow-scrolling: touch !important;
  }

  [data-theme="light"] .cd-ads-table-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }

  /* Ads Variants Table Responsive Adjustments on Mobile */
  .cd-variants-table {
    min-width: 680px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .cd-variants-table th {
    background: #0b132b !important;
  }

  [data-theme="light"] .cd-variants-table th {
    background: #f1f5f9 !important;
  }

  .cd-variants-table th:first-child,
  .cd-variants-table td:first-child,
  .cd-variants-table tbody td:first-child,
  .cd-variants-table th.cd-col-creative,
  .cd-variants-table td.cd-cell-creative {
    position: sticky !important;
    left: 0 !important;
    min-width: 145px !important;
    max-width: 155px !important;
    width: 150px !important;
    padding: 0.6rem 0.5rem !important;
    box-shadow: 4px 0 14px rgba(0, 0, 0, 0.55) !important;
  }

  .cd-variants-table th:first-child,
  .cd-variants-table th.cd-col-creative {
    z-index: 60 !important;
    background: #0b132b !important;
    border-top-left-radius: 15px !important;
  }

  [data-theme="light"] .cd-variants-table th:first-child,
  [data-theme="light"] .cd-variants-table th.cd-col-creative {
    background: #f1f5f9 !important;
  }

  /* When hovering on the sticky first column header, keep solid background and never let scrolled text show through */
  .cd-variants-table th:first-child:hover,
  .cd-variants-table th.cd-col-creative:hover,
  .cd-variants-table th.sortable:first-child:hover {
    background: #162040 !important;
    color: #ffffff !important;
  }

  [data-theme="light"] .cd-variants-table th:first-child:hover,
  [data-theme="light"] .cd-variants-table th.cd-col-creative:hover,
  [data-theme="light"] .cd-variants-table th.sortable:first-child:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }

  .cd-variants-table td.cd-cell-creative {
    z-index: 20 !important;
    background: #080d19 !important;
  }

  [data-theme="light"] .cd-variants-table td.cd-cell-creative {
    background: #ffffff !important;
  }

  .cd-variants-table th.cd-col-creative {
    font-size: 0.65rem !important;
    letter-spacing: 0.02em !important;
  }

  .cd-variants-table .cd-thumb-wrap {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .cd-variants-table .cd-variant-badge {
    font-size: 0.6rem !important;
    margin-bottom: 1px !important;
  }

  .cd-variants-table .cd-ad-title-cell {
    font-size: 0.74rem !important;
    max-width: 88px !important;
    line-height: 1.2 !important;
  }

  .cd-variants-table .cd-ad-caption-cell {
    display: none !important; /* Hide long captions in mobile table to prevent tall rows */
  }

  /* Ads Creative Cards Grid - Full Width Stack on Mobile */
  .cd-ads-grid,
  .cd-variants-grid {
    display: flex;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
  }

  .cd-ads-grid[style*="display: none"],
  .cd-ads-grid[style*="display:none"],
  .cd-ads-grid.d-none,
  .cd-ads-table-container[style*="display: none"],
  .cd-ads-table-container[style*="display:none"],
  .cd-ads-table-container.d-none {
    display: none !important;
  }

  .cd-ad-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.15rem 1rem !important;
    border-radius: 18px !important;
  }

  .cd-ad-title {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .cd-post-mockup {
    width: 100% !important;
    border-radius: 14px !important;
  }

  .cd-post-media-box {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
  }

  .cd-post-caption {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  /* Ad Creative Performance Metrics - Balanced 3-column Grid on Mobile (No scrolling, metrics as they were) */
  .cd-metrics-grid,
  .cd-ad-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding: 0 !important;
  }

  .cd-metric-tile {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Historic Changelog Timeline Mobile Optimizations */
  .cd-changelog-container {
    padding: 0.85rem 0.5rem 1.15rem 0.5rem !important;
    border-radius: 16px !important;
  }

  .cd-timeline {
    padding-left: 36px !important;
    gap: 1.15rem !important;
  }

  .cd-timeline::before {
    left: 14px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 2px !important;
  }

  .cd-timeline-node {
    left: -36px !important;
    top: 3px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  .cd-timeline-node svg {
    width: 13px !important;
    height: 13px !important;
  }

  .cd-timeline-card {
    padding: 0.85rem 0.85rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cd-timeline-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    margin-bottom: 0.45rem !important;
  }

  .cd-timeline-title {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .cd-timeline-time {
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
  }

  .cd-timeline-desc {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
    margin: 0 0 0.65rem 0 !important;
  }

  .cd-timeline-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  .cd-timeline-diff {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  .cd-timeline-author {
    font-size: 0.7rem !important;
    gap: 0.35rem !important;
  }

  .cd-author-badge {
    font-size: 8.5px !important;
    padding: 0.1rem 0.35rem !important;
  }

  /* ==========================================================================
     4. FIXED MOBILE BOTTOM NAVIGATION BAR STYLING
     ========================================================================== */
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(6, 10, 24, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 900 !important;
  }

  html.is-authenticated .mobile-bottom-nav,
  .app-container.logged-in .mobile-bottom-nav,
  .app-container:not(.logged-out) .mobile-bottom-nav {
    display: block !important;
  }

  html.is-unauthenticated .mobile-bottom-nav,
  .app-container.logged-out .mobile-bottom-nav,
  body.logged-out .mobile-bottom-nav,
  .mobile-bottom-nav[style*="display: none"],
  .mobile-bottom-nav[style*="display:none"],
  .mobile-bottom-nav.hidden {
    display: none !important;
    visibility: hidden !important;
  }

  [data-theme="light"] .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
  }

  .mobile-nav-items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 48px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 0 0.25rem !important;
  }

  .mobile-nav-items[style*="display: none"],
  .mobile-nav-items[style*="display:none"],
  .mobile-nav-items.hidden,
  .mobile-nav-items.d-none {
    display: none !important;
  }

  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: var(--text-muted) !important;
    gap: 1px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-nav-item .mob-nav-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
  }

  .mobile-nav-item .mob-nav-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-nav-item .mob-nav-label {
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    margin-top: 1px !important;
    transition: all 0.2s ease !important;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item:active {
    color: var(--text-primary) !important;
  }

  .mobile-nav-item.active {
    color: #ff9f0a !important;
  }

  .mobile-nav-item.active .mob-nav-icon-wrap {
    color: #ff9f0a !important;
    transform: translateY(-0.5px) !important;
  }

  .mobile-nav-item.active .mob-nav-label {
    font-weight: 800 !important;
    color: #ff9f0a !important;
  }

  /* Active indicator dot under active tab (Matching Screenshot) */
  .mob-active-dot {
    display: none !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #ff9f0a !important;
    margin-top: 1px !important;
    box-shadow: 0 0 6px rgba(255, 159, 10, 0.9) !important;
  }

  .mobile-nav-item.active .mob-active-dot {
    display: block !important;
  }

  /* Red circular notification badge for Alerts tab */
  .mob-nav-badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    background: #ff2b66 !important;
    color: #ffffff !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(255, 43, 102, 0.6) !important;
    border: 1.5px solid #060a18 !important;
    line-height: 1 !important;
  }

  [data-theme="light"] .mob-nav-badge {
    border-color: #ffffff !important;
  }

  /* 5. Central Elevated Squircle Pop-Out "+" Action Button (Matching Screenshot) */
  .mobile-nav-fab-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    position: relative !important;
  }

  .mobile-nav-fab-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #ff9f0a !important;
    background: linear-gradient(180deg, #ffab00 0%, #ff9100 100%) !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(255, 159, 10, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transform: translateY(-13px) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 920 !important;
  }

  .mobile-nav-fab-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #000000 !important;
    stroke-width: 3.4px !important;
  }

  [data-theme="light"] .mobile-nav-fab-btn {
    box-shadow: 0 10px 24px rgba(255, 159, 10, 0.4), 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .mobile-nav-fab-btn:active {
    transform: translateY(-11px) scale(0.94) !important;
    box-shadow: 0 4px 12px rgba(255, 159, 10, 0.6) !important;
  }

  /* ==========================================================================
     6. MOBILE & TABLET MODAL / POPUP ENHANCEMENTS
     ========================================================================== */
  .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(2, 6, 23, 0) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    z-index: 99999 !important;
    transition: opacity 0.30s cubic-bezier(0.16, 1, 0.3, 1), background 0.30s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.30s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.30s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .modal.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  [data-theme="light"] .modal.active {
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Lock background page scrolling when bottom sheet is active */
  body.sheet-open {
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .modal.is-dragging {
    transition: none !important;
  }
  .modal.is-dragging .modal-content,
  .modal.is-dragging > div:not(.modal-backdrop):not(.modal-overlay) {
    animation: none !important;
    transition: none !important;
    will-change: transform !important;
  }

  .modal.sheet-closing {
    pointer-events: none !important;
  }
  .modal.sheet-closing .modal-content,
  .modal.sheet-closing > div:not(.modal-backdrop):not(.modal-overlay) {
    pointer-events: none !important;
  }

  /* Universal Bottom-Sheet "Rideau" Panel for ALL Mobile Modals */
  .modal-content,
  .glass-panel.modal-content,
  .modal-dialog,
  .modal .modal-content,
  .modal > div:not(.modal-backdrop):not(.modal-overlay),
  #modal-order-wizard .glass-panel,
  #modal-add-ad-variant .glass-panel,
  #modal-recharge .glass-panel,
  #modal-transfer-paycoins .glass-panel,
  #modal-scale-cbo .glass-panel,
  #modal-admin-order-review .glass-panel,
  #modal-admin-add-client .glass-panel,
  #modal-admin-add-client .modal-content,
  #modal-client-ai-recom .client-ai-modal-content,
  #modal-client-ai-recom .modal-content,
  #modal-upgrade-plan .glass-panel,
  #modal-avatar-camera .glass-panel,
  #modal-view-receipt .glass-panel,
  #modal-admin-add-user .glass-panel,
  #modal-subscription-expired .glass-panel,
  #modal-account-paused .modal-content,
  #modal-cancel-campaign-request .modal-content,
  #modal-campaign-status-request .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    max-height: 92vh !important;
    min-height: 48vh !important;
    height: auto !important;
    border-radius: 28px 28px 0 0 !important;
    margin: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0.25rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1.15rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55) !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    position: relative !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
  }

  [data-theme="light"] .modal-content,
  [data-theme="light"] .glass-panel.modal-content,
  [data-theme="light"] .modal-dialog,
  [data-theme="light"] .modal .modal-content,
  [data-theme="light"] .modal > div:not(.modal-backdrop):not(.modal-overlay),
  [data-theme="light"] #modal-order-wizard .glass-panel,
  [data-theme="light"] #modal-add-ad-variant .glass-panel,
  [data-theme="light"] #modal-recharge .glass-panel,
  [data-theme="light"] #modal-transfer-paycoins .glass-panel,
  [data-theme="light"] #modal-scale-cbo .glass-panel,
  [data-theme="light"] #modal-admin-order-review .glass-panel,
  [data-theme="light"] #modal-admin-add-client .glass-panel,
  [data-theme="light"] #modal-admin-add-client .modal-content,
  [data-theme="light"] #modal-client-ai-recom .client-ai-modal-content,
  [data-theme="light"] #modal-client-ai-recom .modal-content,
  [data-theme="light"] #modal-upgrade-plan .glass-panel,
  [data-theme="light"] #modal-avatar-camera .glass-panel,
  [data-theme="light"] #modal-view-receipt .glass-panel,
  [data-theme="light"] #modal-admin-add-user .glass-panel,
  [data-theme="light"] #modal-subscription-expired .glass-panel,
  [data-theme="light"] #modal-account-paused .modal-content,
  [data-theme="light"] #modal-cancel-campaign-request .modal-content,
  [data-theme="light"] #modal-campaign-status-request .modal-content {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  /* Top Grab Handle Line ("Google Maps Tactile Drag Handle") */
  .bottom-sheet-drag-handle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 12px 0 10px 0 !important;
    margin: 0 auto 0.25rem auto !important;
    flex-shrink: 0 !important;
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .bottom-sheet-drag-handle::before {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 999px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  [data-theme="light"] .bottom-sheet-drag-handle::before {
    background: rgba(0, 0, 0, 0.22) !important;
  }

  .bottom-sheet-drag-handle:active::before,
  .modal.is-dragging .bottom-sheet-drag-handle::before {
    background: rgba(255, 255, 255, 0.65) !important;
    transform: scaleX(1.1) !important;
  }

  [data-theme="light"] .bottom-sheet-drag-handle:active::before,
  [data-theme="light"] .modal.is-dragging .bottom-sheet-drag-handle::before {
    background: rgba(0, 0, 0, 0.5) !important;
    transform: scaleX(1.1) !important;
  }

  /* Universal Modal Close Button on Mobile */
  .modal-close,
  .modal-close-btn,
  .btn-close,
  .review-modal-close-btn {
    top: 1rem !important;
    right: 1rem !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
    z-index: 50 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Universal Modal Header on Mobile */
  .modal-header,
  .wizard-header,
  .review-modal-header {
    flex-shrink: 0 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 2.5rem !important;
  }

  .modal-header h2,
  .modal-header h3,
  .wizard-header h3,
  .modal-content h2,
  .modal-content h3 {
    font-size: 1.2rem !important;
    letter-spacing: -0.01em !important;
  }

  /* Universal Scrollable Modal Content / Body on Mobile */
  .modal-body,
  .wizard-body,
  .wizard-step,
  .add-client-modal-body,
  .review-modal-body,
  #variant-step-1-content,
  #variant-step-2-content,
  #wizard-step-1,
  #wizard-step-2,
  #wizard-step-3,
  #wizard-step-4,
  #wizard-step-5 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.25rem 0.15rem 0.75rem 0.15rem !important;
    scrollbar-width: thin !important;
  }

  /* Universal Fixed Modal Footer / Actions on Mobile */
  .modal-footer,
  .wizard-actions,
  .wizard-footer,
  .add-client-modal-footer,
  .review-modal-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .modal-footer button,
  .modal-footer .btn,
  .wizard-actions button,
  .wizard-actions .btn,
  .wizard-actions a,
  .add-client-modal-footer button,
  .review-modal-footer button {
    flex: 1 !important;
    min-height: 46px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Campaign Builder 5-Step Indicators on Mobile */
  .step-indicators {
    gap: 0.2rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .step-indicators::-webkit-scrollbar {
    display: none !important;
  }
  .step-indicator-node span:not(.step-indicator-num) {
    display: none !important;
  }
  .step-indicator-node {
    padding: 2px !important;
  }
  .step-indicator-num {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.8rem !important;
  }

  /* Campaign Builder Objective Cards on Mobile */
  .objectives-grid-expanded,
  .wizard-objectives-grid,
  .objectives-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .option-card {
    padding: 0.85rem 1rem !important;
    gap: 0.75rem !important;
    border-radius: 14px !important;
  }

  .option-card .obj-icon,
  .option-icon-wrapper-unified {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1.2rem !important;
  }

  .obj-name {
    font-size: 0.9rem !important;
  }

  .obj-desc {
    font-size: 0.72rem !important;
  }

  /* Preset Amount Buttons on Mobile */
  .preset-buttons,
  .btn-preset-group,
  div:has(> .btn-preset-amount) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .btn-preset-amount {
    min-height: 38px !important;
    min-width: 48px !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }

  /* Add Client / Admin Form Grids on Mobile */
  .add-client-step-grid,
  .admin-client-form-grid,
  .review-direction-grid,
  .review-details-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Payment & Recharge Modal Options on Mobile */
  .payment-method-selector,
  .payment-options-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  /* Touch input sizing */
  .form-input,
  .form-select,
  .btn {
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  /* Single-column Wizard Steps on Mobile */
  .wizard-split {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ==========================================================================
   UNIVERSAL MODAL GENEROUS FIXED HEIGHT & INTERNAL SCROLLBAR SUITE
   ========================================================================== */

/* Sleek custom scrollbars for all modal bodies & scrollable modal containers */
.modal-body::-webkit-scrollbar,
.wizard-step::-webkit-scrollbar,
.wizard-body::-webkit-scrollbar,
.add-client-modal-body::-webkit-scrollbar,
.review-modal-body::-webkit-scrollbar,
#variant-step-1-content::-webkit-scrollbar,
#variant-step-2-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.glass-panel.modal-content::-webkit-scrollbar,
.client-ai-modal-content::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}

.modal-body::-webkit-scrollbar-track,
.wizard-step::-webkit-scrollbar-track,
.wizard-body::-webkit-scrollbar-track,
.add-client-modal-body::-webkit-scrollbar-track,
.review-modal-body::-webkit-scrollbar-track,
#variant-step-1-content::-webkit-scrollbar-track,
#variant-step-2-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.glass-panel.modal-content::-webkit-scrollbar-track,
.client-ai-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 4px !important;
}

.modal-body::-webkit-scrollbar-thumb,
.wizard-step::-webkit-scrollbar-thumb,
.wizard-body::-webkit-scrollbar-thumb,
.add-client-modal-body::-webkit-scrollbar-thumb,
.review-modal-body::-webkit-scrollbar-thumb,
#variant-step-1-content::-webkit-scrollbar-thumb,
#variant-step-2-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.glass-panel.modal-content::-webkit-scrollbar-thumb,
.client-ai-modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 94, 0, 0.5) !important;
  border-radius: 4px !important;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.wizard-step::-webkit-scrollbar-thumb:hover,
.wizard-body::-webkit-scrollbar-thumb:hover,
.add-client-modal-body::-webkit-scrollbar-thumb:hover,
.review-modal-body::-webkit-scrollbar-thumb:hover,
#variant-step-1-content::-webkit-scrollbar-thumb:hover,
#variant-step-2-content::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.glass-panel.modal-content::-webkit-scrollbar-thumb:hover,
.client-ai-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 94, 0, 0.85) !important;
}

/* Firefox scrollbar support */
.modal-body,
.wizard-step,
.wizard-body,
.add-client-modal-body,
.review-modal-body,
#variant-step-1-content,
#variant-step-2-content,
.modal-content,
.glass-panel.modal-content,
.client-ai-modal-content {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 94, 0, 0.5) rgba(255, 255, 255, 0.03) !important;
}

[data-theme="light"] .modal-body,
[data-theme="light"] .wizard-step,
[data-theme="light"] .wizard-body,
[data-theme="light"] .add-client-modal-body,
[data-theme="light"] .review-modal-body,
[data-theme="light"] #variant-step-1-content,
[data-theme="light"] #variant-step-2-content,
[data-theme="light"] .modal-content,
[data-theme="light"] .glass-panel.modal-content,
[data-theme="light"] .client-ai-modal-content {
  scrollbar-color: rgba(255, 94, 0, 0.5) rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   ENHANCED RESPONSIVE STYLES: ADMIN NAV, WALLET, CLIENTS, USERS & ADD CLIENT MODAL
   ========================================================================== */

/* 1. Base Header & Table Toggle Layouts */
.admin-page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.admin-header-actions-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.admin-desktop-table-container,
.wallet-desktop-table-container {
  display: block;
}

.admin-mobile-cards-list,
.mobile-wallet-tx-list {
  display: none;
}

/* 2. Admin Mobile Bottom Nav (5 items, no plus FAB) */
#mobile-nav-admin-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 48px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

#mobile-nav-admin-items .mobile-nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 2px 4px !important;
}

#mobile-nav-admin-items .mobile-nav-item .mob-nav-label {
  font-size: 0.58rem !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* /* Clean flush layout for admin desktop tables inside glass panels */
#page-admin-clients > .glass-panel,
#page-admin-users > .glass-panel {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

#page-admin-clients .admin-desktop-table-container,
#page-admin-users .admin-desktop-table-container {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 18px !important;
}

/* 3. Mobile & Tablet Breakpoint (max-width: 1024px) */
@media (max-width: 1024px) {
  /* Hide Desktop Tables, Show Mobile Card Lists */
  .admin-desktop-table-container,
  .wallet-desktop-table-container {
    display: none !important;
  }

  /* Remove bulky double card frame on mobile */
  #page-admin-clients > .glass-panel,
  #page-admin-users > .glass-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .admin-mobile-cards-list,
  .mobile-wallet-tx-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Natural vertical scrolling & safe area clearance above bottom nav */
  #page-client-wallet,
  #page-admin-clients,
  #page-admin-users {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Responsive Admin Page Header */
  .admin-page-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  .admin-header-actions-group {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .admin-header-actions-group .calendar-picker-wrapper {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 45% !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .admin-header-actions-group .calendar-picker-btn {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
  }

  .admin-header-actions-group .calendar-picker-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }

  [data-theme="light"] .admin-header-actions-group .calendar-picker-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  [data-theme="light"] .admin-header-actions-group .calendar-picker-btn:hover {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
  }

  .admin-header-actions-group #btn-admin-add-client {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #ff5e00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 94, 0, 0.35) !important;
    transition: all 0.2s ease !important;
  }

  .admin-header-actions-group #btn-admin-add-client:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(255, 94, 0, 0.45) !important;
  }

  .admin-header-actions-group .calendar-picker-btn span,
  .admin-header-actions-group #btn-admin-add-client span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #btn-admin-add-user {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
  }

  /* Responsive Wallet Header */
  .wallet-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .wallet-header-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }

  .wallet-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Polished Mobile Client Card */
  .mobile-client-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: #090e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
  }

  [data-theme="light"] .mobile-client-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .mobile-client-card .client-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .mobile-client-card .client-card-name {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
  }

  [data-theme="light"] .mobile-client-card .client-card-name {
    color: #0f172a !important;
  }

  .mobile-client-card .client-card-sub {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 0 !important;
  }

  [data-theme="light"] .mobile-client-card .client-card-sub {
    color: #64748b !important;
  }

  .mobile-client-card .client-card-badges {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
  }

  .admin-card-metric-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0.85rem !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  [data-theme="light"] .admin-card-metric-grid {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .admin-card-metric-grid .metric-label {
    font-size: 0.65rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
  }

  [data-theme="light"] .admin-card-metric-grid .metric-label {
    color: #64748b !important;
  }

  .admin-card-metric-grid .metric-value-primary {
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    color: #ff5e00 !important;
    margin-top: 2px !important;
  }

  .admin-card-metric-grid .metric-value-secondary {
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    margin-top: 2px !important;
  }

  [data-theme="light"] .admin-card-metric-grid .metric-value-secondary {
    color: #0f172a !important;
  }

  .admin-card-metric-grid .metric-subtext {
    font-size: 0.68rem !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  [data-theme="light"] .admin-card-metric-grid .metric-subtext {
    color: #94a3b8 !important;
  }

  .mobile-client-card .client-card-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.65rem !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
  }

  [data-theme="light"] .mobile-client-card .client-card-btn {
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
  }

  [data-theme="light"] .mobile-client-card .client-card-btn:hover {
    background: #e2e8f0 !important;
  }

  /* Polished Mobile User Card */
  .mobile-user-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: #090e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    margin-bottom: 0 !important;
  }

  [data-theme="light"] .mobile-user-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  .mobile-user-card .user-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .mobile-user-card .user-card-username {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  [data-theme="light"] .mobile-user-card .user-card-username {
    color: #0f172a !important;
  }

  .mobile-user-card .user-card-name {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 0 !important;
  }

  [data-theme="light"] .mobile-user-card .user-card-name {
    color: #475569 !important;
  }

  .mobile-user-card .user-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-top: 0.65rem !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
  }

  [data-theme="light"] .mobile-user-card .user-card-footer {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
    color: #64748b !important;
  }

  .mobile-user-card .user-card-date {
    color: #e2e8f0 !important;
  }

  [data-theme="light"] .mobile-user-card .user-card-date {
    color: #1e293b !important;
  }
}

/* 4. Add New Client Modal Mobile Responsiveness (max-width: 768px) */
@media (max-width: 768px) {
  #modal-admin-add-client .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #020617 !important;
  }

  [data-theme="light"] #modal-admin-add-client .modal-content {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  #modal-admin-add-client .add-client-header-container {
    padding: 0.75rem 1rem 0.65rem 1rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    background: #0b132b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
    z-index: 10 !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-header-container {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  #modal-admin-add-client .add-client-subtitle {
    display: none !important;
  }

  #modal-admin-add-client .add-client-avatar-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  #modal-admin-add-client .add-client-avatar-box svg {
    width: 18px !important;
    height: 18px !important;
  }

  #modal-admin-add-client .add-client-title {
    font-size: 1.2rem !important;
  }

  #modal-admin-add-client #btn-close-add-client-modal {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 1.3rem !important;
  }

  /* 4-Tab Navigation Carousel - Smooth horizontal touch scrolling & dragging */
  #modal-admin-add-client #add-client-wizard-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 0.6rem !important;
    padding: 0.55rem 1rem 0.65rem 1rem !important;
    margin: 0.5rem -1rem 0 -1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
    cursor: grab !important;
    box-sizing: border-box !important;
  }

  #modal-admin-add-client #add-client-wizard-tabs:active {
    cursor: grabbing !important;
  }

  #modal-admin-add-client #add-client-wizard-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  [data-theme="light"] #modal-admin-add-client #add-client-wizard-tabs {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  #modal-admin-add-client .tab-sub-text {
    display: none !important;
  }

  #modal-admin-add-client .add-client-tab-btn {
    flex: 0 0 auto !important;
    min-width: 98px !important;
    max-width: 115px !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 0.75rem !important;
    gap: 0.35rem !important;
    border-radius: 14px !important;
    text-align: center !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease !important;
  }

  #modal-admin-add-client .add-client-tab-btn:active {
    transform: scale(0.96) !important;
  }

  #modal-admin-add-client .add-client-tab-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #modal-admin-add-client .add-client-tab-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  #modal-admin-add-client .tab-title-text {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Body container with clean scroll ergonomics */
  #modal-admin-add-client .add-client-body-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.85rem 1rem 1.25rem 1rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent !important;
  }

  #modal-admin-add-client .add-client-body-container::-webkit-scrollbar {
    width: 4px !important;
  }

  #modal-admin-add-client .add-client-body-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25) !important;
    border-radius: 4px !important;
  }

  #modal-admin-add-client .add-client-body-container::-webkit-scrollbar-track {
    background: transparent !important;
  }

  #modal-admin-add-client .add-client-wizard-tab-content {
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
  }

  #modal-admin-add-client form,
  #modal-admin-add-client .add-client-modal-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #modal-admin-add-client .add-client-step-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-step-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  }

  /* Force 1-column layouts for cramped forms */
  #modal-admin-add-client [style*="grid-template-columns: repeat(2, 1fr)"],
  #modal-admin-add-client [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  #modal-admin-add-client [style*="grid-column: span 2"] {
    grid-column: auto !important;
  }

  #modal-admin-add-client [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Light mode high-contrast inputs and text in modal */
  [data-theme="light"] #modal-admin-add-client .add-client-step-header h3 {
    color: #0f172a !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-step-header p {
    color: #64748b !important;
  }

  [data-theme="light"] #modal-admin-add-client label {
    color: #1e293b !important;
  }

  [data-theme="light"] #modal-admin-add-client .form-input,
  [data-theme="light"] #modal-admin-add-client input.form-input,
  [data-theme="light"] #modal-admin-add-client select.form-input {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
  }

  [data-theme="light"] #modal-admin-add-client .form-input:focus {
    border-color: #f97316 !important;
    background: #ffffff !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-security-box {
    background: rgba(249, 115, 22, 0.06) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    color: #475569 !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-social-card {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] #modal-admin-add-client .social-card-title {
    color: #1e293b !important;
  }

  [data-theme="light"] #modal-admin-add-client .app-plan-btn {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] #modal-admin-add-client .app-plan-btn.active {
    background: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
  }

  [data-theme="light"] #modal-admin-add-client .duration-pill-btn {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
  }

  [data-theme="light"] #modal-admin-add-client .duration-pill-btn.active {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: #f97316 !important;
    color: #ea580c !important;
  }

  [data-theme="light"] #modal-admin-add-client #add-client-calc-expiry {
    color: #0f172a !important;
  }

  /* Fixed footer action bar docked at modal bottom */
  #modal-admin-add-client .add-client-footer {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) 1rem !important;
    margin: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #020617 !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  [data-theme="light"] #modal-admin-add-client .add-client-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  #modal-admin-add-client .add-client-footer .footer-spacer {
    display: none !important;
  }

  #modal-admin-add-client #btn-wizard-prev-step {
    flex: 0 0 75px !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    font-size: 0.8rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  #modal-admin-add-client #btn-cancel-add-client {
    flex: 0 0 75px !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    font-size: 0.8rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  #modal-admin-add-client #btn-wizard-next-step {
    flex: 1 1 auto !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 0.75rem !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  #modal-admin-add-client #btn-submit-add-client {
    flex: 1 1 auto !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 0.75rem !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  /* 5. Mobile Full-Width General Notifications & Demands Menu */
  .page-header-actions,
  #notif-selector-wrapper {
    position: static !important;
  }

  #notif-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    box-sizing: border-box !important;
    border-radius: 0 0 20px 20px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    max-height: 75vh !important;
    z-index: 1000 !important;
    background: #090e1e !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }

  #notif-dropdown.active {
    display: flex !important;
  }

  [data-theme="light"] #notif-dropdown {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
  }

  #notif-dropdown #notifications-list-container {
    max-height: calc(75vh - 55px) !important;
  }
}

/* ==========================================================================
   CAMPAIGN DETAILS: DIRECTION CONTROL PANEL STYLES & MOBILE OPTIMIZATION
   ========================================================================== */
.cd-direction-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
}

/* Active Strategy Card */
.cd-active-dir-card {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1.5px solid rgba(255, 94, 0, 0.35);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25), inset 0 0 24px rgba(255, 94, 0, 0.04);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.cd-active-dir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cd-active-dir-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cd-pill-active-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 94, 0, 0.15);
  color: #ff5e00;
  border: 1px solid rgba(255, 94, 0, 0.35);
}

.cd-pulse-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

.cd-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: cdPulseAnim 1.8s infinite;
}

@keyframes cdPulseAnim {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.cd-objective-tag {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cd-active-dir-main {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 1rem;
}

.cd-active-dir-icon-box {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  border: 1.5px solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cd-active-dir-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cd-active-dir-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.cd-dir-code-pill {
  font-size: 0.68rem;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}

.cd-active-dir-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.cd-active-dir-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1.25rem 0;
}

.cd-active-dir-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cd-highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
}

.cd-highlight-chip svg {
  color: #34d399;
}

.cd-active-dir-footer-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--panel-border);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Switch Section Header */
.cd-switch-section-header {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cd-switch-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cd-switch-section-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

/* Pixel Notice */
.cd-dir-pixel-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #93c5fd;
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

/* Switch Cards Grid */
.cd-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.cd-switch-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-sizing: border-box;
}

.cd-switch-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 94, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 94, 0, 0.08);
}

.cd-switch-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cd-switch-icon-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cd-switch-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
}

.cd-switch-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}

.cd-switch-subtitle {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.cd-switch-badge {
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}

.cd-switch-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.cd-switch-impact-box {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.73rem;
}

.cd-switch-impact-label {
  color: var(--text-muted);
}

.cd-switch-impact-val {
  color: #34d399;
  font-weight: 700;
}

.cd-switch-compat-val {
  color: #60a5fa;
  font-weight: 600;
}

.cd-btn-switch-action {
  width: 100%;
  padding: 0.65rem 1.25rem;
  border-radius: 11px;
  background: linear-gradient(135deg, #ff5e00 0%, #ea580c 100%);
  border: none;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 18px rgba(255, 94, 0, 0.35);
  transition: all 0.2s ease;
  min-height: 42px;
}

.cd-btn-switch-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 94, 0, 0.5);
}

/* Dedicated Locked State */
.cd-direction-locked-card {
  text-align: center;
  padding: 2.75rem 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.cd-locked-icon-bubble {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.15rem auto;
  border-radius: 20px;
  background: rgba(139, 92, 246, 0.12);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.2);
}

.cd-locked-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.cd-locked-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 1.5rem auto;
}

.cd-locked-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cd-locked-point-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.cd-locked-point-item strong {
  color: var(--text-primary);
}

/* Light Theme Adaptations */
[data-theme="light"] .cd-active-dir-card {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(255, 94, 0, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cd-switch-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .cd-switch-card:hover {
  background: #ffffff;
  border-color: rgba(255, 94, 0, 0.4);
  box-shadow: 0 12px 30px rgba(255, 94, 0, 0.12);
}

[data-theme="light"] .cd-highlight-chip {
  background: rgba(0, 0, 0, 0.04);
  color: #1e293b;
}

[data-theme="light"] .cd-direction-locked-card {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .cd-locked-points {
  background: #f8fafc;
}

/* Mobile Media Queries */
@media (max-width: 768px) {
  .cd-direction-container {
    padding: 0;
    gap: 1.15rem;
  }

  .cd-active-dir-card {
    padding: 1.15rem;
    border-radius: 16px;
  }

  .cd-active-dir-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .cd-active-dir-main {
    gap: 0.85rem;
  }

  .cd-active-dir-icon-box {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 1.4rem;
  }

  .cd-active-dir-title {
    font-size: 1.1rem;
  }

  .cd-switch-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .cd-switch-card {
    padding: 1.15rem;
    border-radius: 16px;
  }

  .cd-btn-switch-action {
    width: 100% !important;
    height: 44px !important;
  }

  .cd-direction-locked-card {
    padding: 2rem 1.15rem;
    border-radius: 16px;
  }
}

.tab-label-short {
  display: none;
}
.tab-label-full {
  display: inline;
}
.admin-detail-mobile-list {
  display: none;
}

/* ==========================================================================
   RESPONSIVE ENHANCEMENTS: CLIENT DETAILS, ADMIN FINANCE & CLIENT WALLET
   (Applies strictly on mobile & tablet <= 1024px, Desktop is 100% untouched)
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- 1. ADMIN CLIENT DETAILS VIEW (#page-admin-client-details) --- */
  #page-admin-client-details {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 3.5rem) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Back Link & Title Header */
  #page-admin-client-details .admin-detail-header-row,
  #page-admin-client-details > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  #page-admin-client-details .admin-detail-header-row > div:first-child,
  #page-admin-client-details > div:first-child > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #admin-detail-title {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    word-break: break-word !important;
    letter-spacing: -0.02em !important;
  }

  /* Status Bar & Action Buttons */
  #client-details-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  [data-theme="light"] #client-details-top-bar {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  }

  #client-details-top-bar .status-pill-container {
    width: 100% !important;
    justify-content: center !important;
  }

  #admin-detail-status-pill {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }

  #client-details-top-bar > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }

  .btn-detail-action {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 3 Main Tabs & Save Changes CTA Button */
  #admin-details-tabs-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
  }

  #admin-details-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #admin-details-tabs .add-client-tab-btn {
    padding: 0.65rem 0.35rem !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .tab-label-short {
    display: inline !important;
  }
  .tab-label-full {
    display: none !important;
  }

  #admin-details-tabs .add-client-tab-icon {
    font-size: 14px !important;
    margin: 0 auto !important;
  }

  #admin-details-tabs .add-client-tab-btn > div:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #admin-details-tabs .tab-title-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    margin: 0 !important;
  }

  #admin-details-tabs .tab-badge-count {
    font-size: 9px !important;
    padding: 0.1rem 0.35rem !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
  }

  #page-admin-client-details .btn-add-client-submit {
    width: 100% !important;
    height: 46px !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    margin-top: 0.25rem !important;
  }

  .btn-add-client-submit.hide-on-non-profile-tab {
    display: none !important;
  }

  /* Mobile Save CTA Bar at bottom of Tab 1 */
  .admin-detail-mobile-save-bar {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 1.25rem !important;
  }

  /* Tab 1: Form & Cards Single Column Full-Width Layout */
  #page-admin-client-details #tab-details-account {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-admin-client-details #tab-details-account form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-admin-client-details #tab-details-account form > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-admin-client-details #tab-details-account form > div > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-admin-client-details .add-client-step-card {
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Compact Phone Code Trigger to give Phone Input more space */
  #page-admin-client-details div[style*="width: 145px"] {
    width: 115px !important;
    flex-shrink: 0 !important;
  }

  #admin-detail-plan-card {
    padding: 1rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #admin-detail-plan-card > div:first-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  #admin-detail-renewal-calc {
    display: block !important;
    margin-top: 2px !important;
  }

  /* Duration Box Spacing */
  #admin-detail-duration-box {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.85rem !important;
  }

  /* Tabs 2 & 3: Switch from wide desktop table to responsive mobile card lists */
  #tab-details-campaigns .admin-detail-desktop-table,
  #tab-details-transactions .admin-detail-desktop-table {
    display: none !important;
  }

  #tab-details-campaigns .admin-detail-mobile-list,
  #tab-details-transactions .admin-detail-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #tab-details-campaigns .glass-panel,
  #tab-details-transactions .glass-panel {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Light mode cards in mobile list for Tab 2 and Tab 3 */
  [data-theme="light"] .admin-detail-mobile-list > div {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  [data-theme="light"] .admin-detail-mobile-list > div > div[style*="grid-template-columns"] {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  [data-theme="light"] .admin-detail-mobile-list h4 {
    color: #0f172a !important;
  }

  /* Subscription Duration Header Row on mobile */
  .admin-duration-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* --- 2. ADMIN FINANCE & TRANSACTIONS VIEW (#page-admin-finance) --- */
  .admin-finance-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .admin-finance-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .admin-finance-tools-bar {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .admin-finance-tools-bar .calendar-picker-wrapper {
    flex-shrink: 0 !important;
  }

  .admin-finance-tools-bar .calendar-picker-btn {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
  }

  .admin-finance-search-box {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 0 0.85rem !important;
    border-radius: 12px !important;
  }

  .admin-finance-search-box input {
    font-size: 0.85rem !important;
  }

  .admin-finance-revenue-card {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 14px !important;
  }

  /* --- 3. CLIENT WALLET RECHARGE & TRANSACTION HISTORY (#page-client-wallet) --- */
  .client-wallet-history-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .client-wallet-history-header .calendar-picker-wrapper {
    width: 100% !important;
  }

  .client-wallet-history-header .calendar-picker-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
  }
}

/* === SCALE MODAL REDESIGN === */
.scale-modal-container {
  max-width: 500px !important;
  width: 95% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #090e17 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 94, 0, 0.12) !important;
}

.scale-modal-header {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.16) 0%, rgba(255, 94, 0, 0.03) 100%), #0c1424;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 1.5rem 1rem 1.5rem;
  position: relative;
  text-align: left;
}

.scale-modal-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 94, 0, 0.15);
  border: 1px solid rgba(255, 94, 0, 0.35);
  color: #ff8a00;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.scale-modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.scale-modal-header p {
  color: #94a3b8;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  margin-bottom: 0;
  line-height: 1.4;
}

.scale-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.scale-modal-close:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

.scale-modal-body {
  padding: 1.15rem 1.5rem 1.5rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 94, 0, 0.3) transparent;
}
.scale-modal-body::-webkit-scrollbar {
  width: 5px;
}
.scale-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 94, 0, 0.3);
  border-radius: 10px;
}

.scale-modal-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 1.15rem;
}

.scale-modal-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  width: 100%;
}

.scale-campaign-info-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.85rem;
}

.scale-campaign-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.scale-label-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scale-direction-tag {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 94, 0, 0.15);
  color: #ff8a00;
  border: 1px solid rgba(255, 94, 0, 0.35);
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.scale-campaign-name-box {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.9rem;
  word-break: break-word;
}

.scale-control-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.scale-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.scale-control-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.scale-input-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 94, 0, 0.12);
  border: 1px solid rgba(255, 94, 0, 0.4);
  border-radius: 8px;
  padding: 0.2rem 0.55rem;
  box-shadow: 0 0 12px rgba(255, 94, 0, 0.1);
}

.scale-pill-input {
  background: transparent;
  border: none;
  color: #ff8a00;
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--font-mono);
  width: 48px;
  text-align: right;
  outline: none;
  padding: 0;
}
.scale-pill-input::-webkit-inner-spin-button,
.scale-pill-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.scale-pill-input[type=number] {
  -moz-appearance: textfield;
}

.scale-pill-unit {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ff8a00;
}

.scale-range-slider {
  width: 100%;
  accent-color: #ff5e00;
  cursor: pointer;
  margin: 0.2rem 0;
}

.scale-range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748b;
  font-family: var(--font-mono);
  margin-top: 0.25rem;
}

.scale-invoice-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 0.9rem 1rem !important;
  margin-bottom: 0.85rem !important;
}

.scale-invoice-title {
  font-weight: 800;
  font-size: 0.8rem;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.scale-invoice-secure {
  color: #34d399;
  font-weight: 700;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.scale-invoice-total {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ff5e00 !important;
  font-family: var(--font-mono);
}

.scale-balance-box {
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.scale-btn-submit {
  width: 100% !important;
  padding: 0.8rem 1.25rem !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff5e00 0%, #ea580c 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(255, 94, 0, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.scale-btn-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.scale-btn-submit:active {
  transform: scale(0.98);
}

/* === MOBILE BOTTOM SHEET ADAPTATIONS (max-width: 768px) === */
@media (max-width: 768px) {
  #modal-scale-cbo .glass-panel,
  #modal-scale-cbo .scale-modal-container {
    padding: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    max-height: 92vh !important;
    height: auto !important;
    min-height: auto !important;
  }

  .scale-modal-header {
    padding: 0.35rem 1.15rem 0.75rem 1.15rem;
  }

  .scale-modal-header h3 {
    font-size: 1.18rem;
  }

  .scale-modal-header p {
    font-size: 0.75rem;
  }

  .scale-modal-body {
    padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1rem;
    max-height: calc(92vh - 110px);
  }

  .scale-modal-tab-bar {
    margin-bottom: 0.65rem;
    gap: 0.3rem;
  }

  .scale-modal-tab-btn {
    padding: 0.45rem 0.3rem;
    font-size: 0.72rem;
  }

  .scale-campaign-info-card {
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.55rem;
  }

  .scale-control-card {
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.55rem;
  }

  .scale-control-header {
    margin-bottom: 0.35rem;
  }

  .scale-invoice-card {
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.65rem !important;
  }

  .scale-balance-box {
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.75rem;
  }

  .scale-btn-submit {
    padding: 0.75rem 1rem !important;
    font-size: 0.88rem !important;
  }
}

/* === LIGHT MODE OVERRIDES === */
[data-theme="light"] .scale-modal-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .scale-modal-header {
  background: linear-gradient(135deg, rgba(255, 94, 0, 0.08) 0%, rgba(255, 94, 0, 0.02) 100%), #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .scale-modal-header h3 {
  color: #0f172a;
}

[data-theme="light"] .scale-modal-header p {
  color: #64748b;
}

[data-theme="light"] .scale-modal-close {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}
[data-theme="light"] .scale-modal-close:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .scale-modal-tab-bar {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .scale-modal-tab-btn {
  color: #64748b;
}

[data-theme="light"] .scale-campaign-info-card,
[data-theme="light"] .scale-control-card,
[data-theme="light"] .scale-invoice-card {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .scale-campaign-name-box {
  color: #0f172a;
}

[data-theme="light"] .scale-control-title {
  color: #475569;
}

/* === ADMIN ORDER REVIEW MODAL MOBILE ADAPTATION === */
@media (max-width: 768px) {
  #modal-admin-order-review .modal-content,
  #modal-admin-order-review .review-modal-content {
    padding: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    max-height: 92vh !important;
    height: 92vh !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #080d1a !important;
  }

  .review-modal-top-bar {
    padding: 0.5rem 1.15rem 0.65rem 1.15rem !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
  }

  .review-modal-console-badge {
    font-size: 0.62rem !important;
    padding: 0.15rem 0.45rem !important;
    margin-bottom: 0.2rem !important;
  }

  .review-modal-title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    word-break: break-word !important;
  }

  .review-modal-meta-row {
    margin-top: 0.35rem !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    font-size: 0.72rem !important;
  }

  .review-modal-meta-row .review-modal-status-badge,
  .review-modal-meta-row .review-card-tag {
    font-size: 0.68rem !important;
    padding: 0.15rem 0.45rem !important;
  }

  /* Scrollable Tab Navigation Bar */
  .review-modal-tabs-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 1.25rem !important;
    padding: 0.25rem 1.15rem 0 1.15rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
  }
  .review-modal-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }

  .review-modal-tab-btn {
    padding: 0.65rem 0.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    background: transparent !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: -1px !important;
    box-shadow: none !important;
  }

  .review-modal-tab-btn:hover {
    background: transparent !important;
    color: #f8fafc !important;
  }

  .review-modal-tab-btn.active {
    background: transparent !important;
    border: none !important;
    border-bottom: 2.5px solid #ff8a00 !important;
    color: #ff8a00 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
  }

  .review-modal-tab-badge {
    font-size: 0.65rem !important;
    padding: 0.08rem 0.38rem !important;
  }

  /* Scrollable Tab Content Container */
  .review-tab-content {
    padding: 0.45rem 1.15rem 1rem 1.15rem !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 94, 0, 0.25) transparent !important;
  }
  .review-tab-content::-webkit-scrollbar {
    width: 3px !important;
  }
  .review-tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 94, 0, 0.25) !important;
    border-radius: 999px !important;
  }

  /* Tab 1: Overview Grid -> Clean 1-column responsive cards */
  .review-modal-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-bottom: 0.65rem !important;
  }

  .review-card {
    padding: 0.85rem 1rem !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .review-card-value-large {
    font-size: 1.35rem !important;
    margin-bottom: 0.35rem !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
  }

  .review-card-footer-row {
    font-size: 0.75rem !important;
    margin-top: 0.35rem !important;
    padding-top: 0.35rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }

  .review-client-meta {
    gap: 0.75rem !important;
  }

  .review-client-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  .review-client-name {
    font-size: 0.95rem !important;
  }

  .review-client-subtext {
    font-size: 0.75rem !important;
  }

  .btn-call-direct {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  /* Tab 2: Creatives Grid */
  .review-assets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  /* Tab 3: Directions Grid */
  .review-direction-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    padding-bottom: 0.75rem !important;
  }

  .review-direction-card {
    padding: 0.85rem 1rem !important;
    min-height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.85rem !important;
  }

  .review-direction-icon-box {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .review-direction-title {
    font-size: 0.88rem !important;
  }

  .review-direction-sub {
    font-size: 0.72rem !important;
  }

  .review-direction-active-badge {
    position: static !important;
    margin-left: auto !important;
    padding: 0.2rem 0.55rem !important;
    font-size: 0.65rem !important;
    flex-shrink: 0 !important;
  }

  /* Tab 4: Client Contact Grid & Social Grid */
  #review-modal-tab-content-client div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .review-client-social-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  /* Footer Action Bar on Mobile */
  .review-modal-footer {
    padding: 0.65rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) 1.15rem !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #090e17 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
  }

  .review-modal-actions-label {
    display: none !important;
  }

  .review-modal-actions-btns {
    display: flex !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .review-modal-actions-btns button,
  .review-modal-actions-btns a,
  .review-modal-actions-btns .btn-pill-publish,
  .review-modal-actions-btns .btn-pill-refuse,
  .review-modal-actions-btns .btn-pill-call {
    flex: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
  }
}

/* Light Mode Overrides for Review Modal */
[data-theme="light"] #modal-admin-order-review .modal-content,
[data-theme="light"] #modal-admin-order-review .review-modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .review-modal-top-bar {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .review-modal-tabs-bar {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .review-modal-tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

[data-theme="light"] .review-modal-tab-btn:hover {
  background: transparent !important;
  color: #0f172a !important;
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .review-modal-tab-btn.active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid #ff5e00 !important;
  color: #ff5e00 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

[data-theme="light"] .review-modal-tab-badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

[data-theme="light"] .review-modal-tab-btn.active .review-modal-tab-badge {
  background: rgba(255, 94, 0, 0.15) !important;
  color: #ff5e00 !important;
}

[data-theme="light"] .review-card {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .review-modal-footer {
  background: #ffffff !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   CUSTOM ADMIN CANCEL & REFUND CONFIRMATION MODAL
   ========================================================================== */
.cancel-confirm-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 19, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100005;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cancel-confirm-modal-overlay.active {
  display: flex !important;
  animation: cancelModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cancelModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cancel-confirm-modal-content {
  position: relative;
  width: 100%;
  max-width: 490px;
  background: #090f26;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(239, 68, 68, 0.12);
  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

.cancel-modal-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.06) 100%);
  padding: 1.75rem 1.5rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cancel-modal-icon-glow {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.38);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.9rem;
  font-size: 26px;
  line-height: 1;
}

.cancel-modal-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.cancel-modal-sub {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}

.cancel-modal-body {
  padding: 1.35rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  box-sizing: border-box;
}

.cancel-campaign-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.5rem 0.95rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.cancel-badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: cancelPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes cancelPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.cancel-badge-target {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.cancel-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

.cancel-metric-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 0.85rem 0.65rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cancel-metric-box.box-refund {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.metric-box-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cancel-metric-box.box-refund .metric-box-label {
  color: #34d399;
}

.metric-box-val, .cancel-stat-value {
  font-size: 1.02rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-box-val.val-muted {
  color: #cbd5e1;
}

.cancel-stat-value.val-refund {
  color: #10b981;
}

.cancel-action-notice {
  background: rgba(239, 68, 68, 0.07);
  border: 1px dashed rgba(239, 68, 68, 0.25);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
}

.cancel-action-notice .notice-icon {
  color: #ef4444;
  margin-top: 1px;
  flex-shrink: 0;
}

.cancel-action-notice .notice-content {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.cancel-action-notice .notice-content strong {
  color: #ffffff;
}

.cancel-action-notice .notice-content .text-refund {
  color: #10b981;
  font-family: var(--font-mono, monospace);
}

.cancel-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.btn-cancel-abort {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel-abort:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-cancel-confirm {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cancel-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.btn-cancel-confirm:active:not(:disabled) {
  transform: translateY(0);
}

.btn-cancel-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Light Theme Support */
[data-theme="light"] .cancel-confirm-modal-overlay {
  background: rgba(15, 23, 42, 0.55);
}

[data-theme="light"] .cancel-confirm-modal-content {
  background: #ffffff;
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 30px rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .cancel-modal-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.03) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cancel-modal-title {
  color: #0f172a;
}

[data-theme="light"] .cancel-modal-sub {
  color: #64748b;
}

[data-theme="light"] .cancel-campaign-badge {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
  color: #1e293b;
}

[data-theme="light"] .cancel-metric-box {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .metric-box-val {
  color: #0f172a;
}

[data-theme="light"] .metric-box-val.val-muted {
  color: #64748b;
}

[data-theme="light"] .cancel-metric-box.box-refund {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .cancel-action-notice {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .cancel-action-notice .notice-content {
  color: #334155;
}

[data-theme="light"] .cancel-action-notice .notice-content strong {
  color: #0f172a;
}

[data-theme="light"] .btn-cancel-abort {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .btn-cancel-abort:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Responsive Rules for Mobile */
@media (max-width: 520px) {
  .cancel-confirm-modal-content {
    max-width: 100%;
    margin: 0 0.5rem;
    border-radius: 20px;
  }

  .cancel-modal-banner {
    padding: 1.5rem 1.2rem 1.1rem;
  }

  .cancel-modal-icon-glow {
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 15px;
    margin-bottom: 0.75rem;
  }

  .cancel-modal-title {
    font-size: 1.15rem;
  }

  .cancel-modal-body {
    padding: 1.15rem 1.15rem 1.25rem;
    gap: 1rem;
  }

  .cancel-metrics-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .cancel-metric-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  .metric-box-val, .cancel-stat-value {
    font-size: 0.95rem;
  }

  .cancel-modal-actions {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .btn-cancel-abort, .btn-cancel-confirm {
    width: 100%;
    padding: 0.85rem;
  }
}

/* === PENDING EXPERT REVIEW NOTICE & PUBLISH BUTTON === */
#cd-pending-review-banner {
  transition: all 0.3s ease;
}

[data-theme="light"] #cd-pending-review-banner {
  background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] #cd-pending-review-banner h3 {
  color: #0f172a !important;
}

[data-theme="light"] #cd-pending-review-banner p {
  color: #475569 !important;
}

.cd-btn-publish {
  transition: all 0.25s ease !important;
}

.cd-btn-publish:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

/* ==========================================================================
   GOOGLE ADS INTERACTIVE MULTI-METRIC CHART SYSTEM
   ========================================================================== */
.gads-metrics-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Gradient Toggle Switch Styling */
.gads-toggle-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  padding: 0.35rem 0.65rem;
  border-radius: 9px;
  transition: all 0.2s ease;
}

.gads-toggle-wrapper:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.gads-switch input:checked + .slider {
  background: linear-gradient(135deg, #ff5e00 0%, #ff8a00 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 94, 0, 0.4);
}

.gads-switch .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.gads-switch input:checked + .slider:before {
  transform: translateX(16px);
}

.gads-metrics-carousel {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 6px 14px 6px;
  margin: -6px -6px 0.75rem -6px;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.gads-metrics-carousel::-webkit-scrollbar {
  display: none;
}

.gads-metric-card {
  flex: 0 0 auto;
  min-width: 120px;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  box-sizing: border-box;
}

.gads-metric-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.15);
}

.gads-metric-card.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  border-color: transparent !important;
}

/* Distinct Vibrant Colors for Active State matching Google Ads */
.gads-metric-card.metric-spent.active {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
}
.gads-metric-card.metric-results.active {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}
.gads-metric-card.metric-cpa.active {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%) !important;
}
.gads-metric-card.metric-roas.active {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
}
.gads-metric-card.metric-cpm.active {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important;
}
.gads-metric-card.metric-ctr.active {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}
.gads-metric-card.metric-cpc.active {
  background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%) !important;
}

.gads-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gads-metric-card.active .gads-metric-header {
  color: rgba(255, 255, 255, 0.92) !important;
}

.gads-metric-arrow {
  font-size: 0.65rem;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.gads-metric-card.active .gads-metric-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.gads-metric-val {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.gads-metric-card.active .gads-metric-val {
  color: #ffffff !important;
}

.gads-metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: 1px;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.gads-metric-delta .delta-arrow {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.gads-metric-delta.delta-up {
  color: #10b981;
}

.gads-metric-delta.delta-down {
  color: #ef4444;
}

/* Active Card Delta Style */
.gads-metric-card.active .gads-metric-delta {
  background: rgba(0, 0, 0, 0.22);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
}

.gads-metric-card.active .gads-metric-delta.delta-up {
  color: #a7f3d0 !important;
}

.gads-metric-card.active .gads-metric-delta.delta-down {
  color: #fecaca !important;
}

.gads-metric-indicator {
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gads-metric-card:not(.active) .gads-metric-indicator {
  opacity: 0.85;
}

/* Light Mode Overrides for Inactive Cards */
[data-theme="light"] .gads-metric-card:not(.active) {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme="light"] .gads-metric-card:not(.active):hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme="light"] .gads-metric-card:not(.active) .gads-metric-val {
  color: #0f172a;
}
[data-theme="light"] .gads-metric-card:not(.active) .gads-metric-header {
  color: #64748b;
}

/* --- Chart Frame & Multi-Axis Canvas Area --- */
.gads-chart-frame {
  position: relative;
  width: 100%;
  height: 270px;
  box-sizing: border-box;
  margin-top: 0.25rem;
}

.gads-axis-left, .gads-axis-right {
  position: absolute;
  top: 0;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  z-index: 5;
  pointer-events: none;
  padding: 2px 0;
  width: 28px;
  box-sizing: border-box;
}

.gads-axis-left {
  left: 0;
  text-align: left;
}

.gads-axis-right {
  right: 0;
  text-align: right;
}

.gads-canvas-area {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 0;
  height: 220px;
  cursor: crosshair;
  touch-action: none;
}

@media (max-width: 768px) {
  .gads-canvas-area {
    left: 26px;
    right: 26px;
  }
  .gads-chart-frame {
    height: 230px;
  }
  .gads-axis-left, .gads-axis-right, .gads-canvas-area {
    height: 185px;
  }
  .gads-axis-left {
    width: 24px;
    font-size: 0.58rem;
  }
  .gads-axis-right {
    width: 24px;
    font-size: 0.58rem;
  }
}

.gads-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.gads-crosshair-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.45);
  pointer-events: none;
  display: none;
  z-index: 10;
  transform: translateX(-50%);
}

[data-theme="light"] .gads-crosshair-line {
  border-left: 1.5px dashed rgba(15, 23, 42, 0.4);
}

.gads-intersection-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .gads-intersection-dot {
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.gads-floating-tooltip {
  position: absolute;
  display: none;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 60;
  min-width: 165px;
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}

[data-theme="light"] .gads-floating-tooltip {
  background: rgba(255, 255, 255, 0.97);
  border-color: #e2e8f0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.gads-tooltip-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

[data-theme="light"] .gads-tooltip-title {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}

.gads-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  margin-top: 4px;
}

.gads-tooltip-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gads-tooltip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gads-tooltip-label {
  color: #94a3b8;
  font-weight: 600;
}

[data-theme="light"] .gads-tooltip-label {
  color: #64748b;
}

.gads-tooltip-val {
  font-family: var(--font-mono);
  font-weight: 800;
  color: #ffffff;
}

[data-theme="light"] .gads-tooltip-val {
  color: #0f172a;
}

.gads-xaxis-labels {
  position: absolute;
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 768px) {
  .gads-xaxis-labels {
    left: 26px;
    right: 26px;
    font-size: 0.62rem;
  }

  /* Make chart containers adapt cleanly to mobile screen without bursting */
  .dashboard-trend-split > .widget:first-child,
  .cd-stats-container .cd-chart-card {
    padding: 1rem 0.75rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .gads-metrics-container {
    max-width: 100% !important;
  }

  .gads-metrics-carousel {
    gap: 0.5rem;
    padding: 6px 4px 12px 4px !important;
    margin: -4px -4px 0.65rem -4px !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .gads-metric-card {
    min-width: 105px !important;
    padding: 0.6rem 0.7rem !important;
    border-radius: 12px !important;
  }

  .gads-metric-val {
    font-size: 1.05rem !important;
  }

  .gads-metric-header {
    font-size: 0.68rem !important;
  }

  .gads-metric-delta {
    font-size: 0.64rem !important;
    gap: 2px !important;
  }
}

.gads-dots-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

/* =========================================================
   FACEBOOK BUSINESS CONNECT MODAL (#modal-fb-connect)
   Enhanced for Light Mode & Mobile Experience
   ========================================================= */
#modal-fb-connect {
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#modal-fb-connect .fb-connect-modal-card {
  max-width: 520px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: var(--bg-card, #0f172a);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

#modal-fb-connect .fb-connect-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

#modal-fb-connect .fb-connect-close-btn:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}

#modal-fb-connect .fb-connect-header {
  background: linear-gradient(135deg, #1877F2 0%, #0a5bc4 50%, #042b5e 100%);
  padding: 2.25rem 2.25rem 1.85rem;
  position: relative;
  overflow: hidden;
}

#modal-fb-connect .fb-connect-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

#modal-fb-connect .fb-connect-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#modal-fb-connect .fb-connect-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.25;
}

#modal-fb-connect .fb-connect-subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

#modal-fb-connect .fb-connect-body {
  padding: 1.75rem 2.25rem 2.25rem;
}

#modal-fb-connect .fb-connect-lead {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

#modal-fb-connect .fb-connect-lead strong {
  color: var(--text-primary, #f8fafc);
}

#modal-fb-connect .fb-permissions-box {
  background: rgba(24, 119, 242, 0.05);
  border: 1px solid rgba(24, 119, 242, 0.14);
  border-radius: 16px;
  padding: 1.2rem;
  margin-bottom: 1.65rem;
}

#modal-fb-connect .fb-perm-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.85rem;
}

#modal-fb-connect .fb-perm-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#modal-fb-connect .fb-perm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.4;
}

#modal-fb-connect .fb-perm-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(24, 119, 242, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#modal-fb-connect .fb-perm-item strong {
  color: var(--text-primary, #f8fafc);
  font-weight: 600;
}

#modal-fb-connect #btn-fb-connect-action {
  width: 100%;
  padding: 0.95rem 1.5rem;
  background: #1877F2;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px -4px rgba(24, 119, 242, 0.42);
}

#modal-fb-connect #btn-fb-connect-action:hover {
  background: #166fe5;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(24, 119, 242, 0.52);
}

#modal-fb-connect #btn-fb-connect-action:active {
  transform: translateY(0);
}

#modal-fb-connect .fb-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.15rem;
  justify-content: center;
  text-align: center;
}

#modal-fb-connect .fb-security-note span {
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

/* Light Theme Enhancements */
[data-theme="light"] #modal-fb-connect .fb-connect-modal-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.16), 0 4px 18px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] #modal-fb-connect .fb-connect-lead {
  color: #475569 !important;
}

[data-theme="light"] #modal-fb-connect .fb-connect-lead strong {
  color: #0f172a !important;
}

[data-theme="light"] #modal-fb-connect .fb-permissions-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #modal-fb-connect .fb-perm-title {
  color: #64748b !important;
}

[data-theme="light"] #modal-fb-connect .fb-perm-item {
  color: #475569 !important;
}

[data-theme="light"] #modal-fb-connect .fb-perm-item strong {
  color: #1e293b !important;
}

[data-theme="light"] #modal-fb-connect .fb-perm-icon {
  background: rgba(24, 119, 242, 0.1) !important;
}

[data-theme="light"] #modal-fb-connect .fb-security-note span {
  color: #64748b !important;
}

[data-theme="light"] #modal-fb-connect .fb-security-note svg {
  stroke: #94a3b8 !important;
}

/* Mobile Devices Optimization (<= 640px) */
@media (max-width: 640px) {
  #modal-fb-connect {
    padding: 12px;
    align-items: flex-end; /* Bottom sheet feel or cozy centered */
  }

  #modal-fb-connect .fb-connect-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 22px 22px 20px 20px !important;
    margin: 0 auto;
  }

  #modal-fb-connect .fb-connect-close-btn {
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
  }

  #modal-fb-connect .fb-connect-header {
    padding: 1.5rem 1.25rem 1.35rem !important;
  }

  #modal-fb-connect .fb-connect-header-content {
    gap: 12px;
  }

  #modal-fb-connect .fb-connect-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  #modal-fb-connect .fb-connect-icon-wrapper svg {
    width: 22px;
    height: 22px;
  }

  #modal-fb-connect .fb-connect-title {
    font-size: 1.22rem !important;
  }

  #modal-fb-connect .fb-connect-subtitle {
    font-size: 0.78rem !important;
  }

  #modal-fb-connect .fb-connect-body {
    padding: 1.25rem 1.25rem 1.5rem !important;
  }

  #modal-fb-connect .fb-connect-lead {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.1rem !important;
  }

  #modal-fb-connect .fb-permissions-box {
    padding: 0.95rem 1rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 14px;
  }

  #modal-fb-connect .fb-perm-title {
    font-size: 0.68rem !important;
    margin-bottom: 0.65rem !important;
  }

  #modal-fb-connect .fb-perm-list {
    gap: 0.55rem !important;
  }

  #modal-fb-connect .fb-perm-item {
    font-size: 0.79rem !important;
    gap: 8px !important;
  }

  #modal-fb-connect #btn-fb-connect-action {
    padding: 0.85rem 1.15rem !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
  }

  #modal-fb-connect .fb-security-note {
    margin-top: 0.95rem !important;
    gap: 6px !important;
  }

  #modal-fb-connect .fb-security-note span {
    font-size: 0.71rem !important;
  }
}

/* ========================================================
   INTEGRATIONS & OAUTH HUB (THEME ALIGNED & RESPONSIVE)
======================================================== */
.integrations-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.integrations-hub-title-wrap h2 {
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.integrations-hub-title-wrap p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 4px 0 0 0;
}
.integrations-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
}
.integrations-hub-badge.connected {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}
.integrations-hub-badge.disconnected {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
}

.integrations-hub-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .integrations-hub-grid {
    grid-template-columns: 1fr;
  }
}

.integration-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  padding: 1.75rem 2rem;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.integration-card.connected-mode {
  border-color: rgba(16, 185, 129, 0.28);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.06);
}

.integration-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 1.5rem;
}
.integration-brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}
.integration-brand-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.25);
}
.integration-brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0;
}
.integration-brand-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 2px 0 0 0;
}

/* Disconnected State presentation */
.meta-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.meta-feature-item {
  padding: 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
[data-theme="light"] .meta-feature-item {
  background: rgba(0, 0, 0, 0.02);
}
.meta-feature-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.meta-feature-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}
.meta-feature-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Connected State presentation */
.meta-connected-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.meta-profile-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.meta-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 16px rgba(24, 119, 242, 0.35);
  flex-shrink: 0;
}
.meta-profile-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 0;
}
.meta-verified-tag {
  background: #10b981;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meta-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meta-meta-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  color: var(--text-secondary);
}
[data-theme="light"] .meta-meta-tag {
  background: rgba(0, 0, 0, 0.04);
}

/* Ad accounts list */
.meta-accounts-container {
  margin: 1.5rem 0;
}
.meta-accounts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.meta-accounts-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.meta-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}
.meta-account-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}
[data-theme="light"] .meta-account-item {
  background: rgba(0, 0, 0, 0.02);
}
.meta-account-item:hover {
  border-color: rgba(255, 94, 0, 0.35);
  transform: translateY(-1px);
}
.meta-acc-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 155px;
}
.meta-acc-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.meta-acc-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  white-space: nowrap;
}

/* Action button bar */
.meta-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.btn-meta-connect {
  background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 0.95rem 1.85rem;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(24, 119, 242, 0.35);
  transition: all 0.25s ease;
}
.btn-meta-connect:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.45);
}

.btn-meta-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-meta-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.btn-meta-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary) !important;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-theme="light"] .btn-meta-secondary {
  background: rgba(0, 0, 0, 0.04);
}
.btn-meta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Sidebar Info Cards */
.integration-side-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.integration-info-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.info-panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.info-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .info-spec-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.info-spec-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-spec-label {
  color: var(--text-secondary);
}
.info-spec-value {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}