/* ================================================================
   USER PANEL — LIGHT THEME
   Scoped to: .app-shell.with-shell.light-mode
   Landing / Login / Signup / Admin → NEVER affected.
   ================================================================ */

/* ---------------- MAIN AREA BG ---------------- */
.app-shell.with-shell.light-mode .main-area { background: #f1f5f9 !important; }
.app-shell.with-shell.light-mode .main-inner { color: #0f172a !important; }
.app-shell.with-shell.light-mode .bg-grid { opacity: .12 !important; }
.app-shell.with-shell.light-mode .bg-orb { opacity: .08 !important; }

/* ---------------- HEADERS ---------------- */
.app-shell.with-shell.light-mode .page-header h1,
.app-shell.with-shell.light-mode .dash-header h1,
.app-shell.with-shell.light-mode .panel-head h2,
.app-shell.with-shell.light-mode .panel-head-text h2,
.app-shell.with-shell.light-mode .section-head h2,
.app-shell.with-shell.light-mode .header-text h1,
.app-shell.with-shell.light-mode .editor-header h1 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
.app-shell.with-shell.light-mode .page-header p,
.app-shell.with-shell.light-mode .dash-header p,
.app-shell.with-shell.light-mode .panel-head p,
.app-shell.with-shell.light-mode .panel-head-text p,
.app-shell.with-shell.light-mode .section-head p {
  color: #475569 !important;
}
.app-shell.with-shell.light-mode .eyebrow { color: #1d4ed8 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .eyebrow-dot {
  background: #2563eb !important;
  box-shadow: 0 0 8px rgba(37,99,235,.5) !important;
}

/* ---------------- PANELS / CARDS ---------------- */
.app-shell.with-shell.light-mode .panel,
.app-shell.with-shell.light-mode .card,
.app-shell.with-shell.light-mode .stat-card,
.app-shell.with-shell.light-mode .trial-card,
.app-shell.with-shell.light-mode .plan-card,
.app-shell.with-shell.light-mode .domain-card,
.app-shell.with-shell.light-mode .list-card,
.app-shell.with-shell.light-mode .template-card,
.app-shell.with-shell.light-mode .campaign-card,
.app-shell.with-shell.light-mode .settings-card,
.app-shell.with-shell.light-mode .invoice-card,
.app-shell.with-shell.light-mode .info-card,
.app-shell.with-shell.light-mode .quota-card,
.app-shell.with-shell.light-mode .step-card,
.app-shell.with-shell.light-mode .mail-panel,
.app-shell.with-shell.light-mode .preview-wrap {
  background: #ffffff !important;
  border-color: #d8e0ea !important;
  color: #0b1220 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
}
.app-shell.with-shell.light-mode .panel:hover,
.app-shell.with-shell.light-mode .domain-card:hover,
.app-shell.with-shell.light-mode .stat-card:hover,
.app-shell.with-shell.light-mode .campaign-card:hover,
.app-shell.with-shell.light-mode .list-card:hover,
.app-shell.with-shell.light-mode .plan-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}
.app-shell.with-shell.light-mode .panel-glow,
.app-shell.with-shell.light-mode .card-glow {
  opacity: .1 !important;
}

/* ---------------- TEXT ---------------- */
.app-shell.with-shell.light-mode .stat-value,
.app-shell.with-shell.light-mode .quota-value,
.app-shell.with-shell.light-mode .plan-price,
.app-shell.with-shell.light-mode .price-value,
.app-shell.with-shell.light-mode .proof-number {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
  background-clip: unset !important;
}
.app-shell.with-shell.light-mode .stat-label,
.app-shell.with-shell.light-mode .stat-foot,
.app-shell.with-shell.light-mode .quota-label,
.app-shell.with-shell.light-mode .quota-unit,
.app-shell.with-shell.light-mode .plan-desc,
.app-shell.with-shell.light-mode .info-label,
.app-shell.with-shell.light-mode .name-sub,
.app-shell.with-shell.light-mode .toolbar-count,
.app-shell.with-shell.light-mode .field-note {
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .name-title,
.app-shell.with-shell.light-mode .card-title,
.app-shell.with-shell.light-mode .panel-head-text strong {
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .cell-mono,
.app-shell.with-shell.light-mode .cell-pri,
.app-shell.with-shell.light-mode .smtp-val,
.app-shell.with-shell.light-mode .invoice-number,
.app-shell.with-shell.light-mode .email-text {
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .cell-title { color: #0b1220 !important; font-weight: 700 !important; }

/* ---------------- FORMS ---------------- */
.app-shell.with-shell.light-mode input,
.app-shell.with-shell.light-mode select,
.app-shell.with-shell.light-mode textarea,
.app-shell.with-shell.light-mode .form-input,
.app-shell.with-shell.light-mode .form-select,
.app-shell.with-shell.light-mode .form-textarea,
.app-shell.with-shell.light-mode .field input,
.app-shell.with-shell.light-mode .field textarea,
.app-shell.with-shell.light-mode .field select,
.app-shell.with-shell.light-mode .input-wrapper input,
.app-shell.with-shell.light-mode .search-wrap input,
.app-shell.with-shell.light-mode .reveal-input,
.app-shell.with-shell.light-mode .plain-textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode input::placeholder,
.app-shell.with-shell.light-mode textarea::placeholder { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode input:focus,
.app-shell.with-shell.light-mode select:focus,
.app-shell.with-shell.light-mode textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}
.app-shell.with-shell.light-mode .form-select option { background: #ffffff !important; color: #0b1220 !important; }
.app-shell.with-shell.light-mode .field label,
.app-shell.with-shell.light-mode .map-item label {
  color: #1e293b !important; font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .field-help { color: #64748b !important; }
.app-shell.with-shell.light-mode .field-help code,
.app-shell.with-shell.light-mode .inline-code {
  background: #dbeafe !important; color: #1e40af !important;
}

/* ---------------- BUTTONS ---------------- */
.app-shell.with-shell.light-mode .btn-ghost,
.app-shell.with-shell.light-mode .btn-secondary,
.app-shell.with-shell.light-mode .btn-action,
.app-shell.with-shell.light-mode .btn-view,
.app-shell.with-shell.light-mode .action-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .btn-ghost:hover,
.app-shell.with-shell.light-mode .btn-action:hover,
.app-shell.with-shell.light-mode .btn-view:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .btn-danger,
.app-shell.with-shell.light-mode .btn-delete,
.app-shell.with-shell.light-mode .action-delete {
  color: #dc2626 !important; border-color: #fecaca !important;
}

/* ---------------- TABS ---------------- */
.app-shell.with-shell.light-mode .tabs { border-bottom-color: #e2e8f0 !important; }
.app-shell.with-shell.light-mode .tab-btn { color: #64748b !important; }
.app-shell.with-shell.light-mode .tab-btn:hover { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .tab-btn.active,
.app-shell.with-shell.light-mode .tab-btn.is-active {
  color: #0b1220 !important; border-bottom-color: #2563eb !important;
}
.app-shell.with-shell.light-mode .tab-count {
  background: #e2e8f0 !important; color: #334155 !important;
}

/* ---------------- TABLES ---------------- */
.app-shell.with-shell.light-mode table thead tr,
.app-shell.with-shell.light-mode .dns-table thead tr,
.app-shell.with-shell.light-mode .sup-table thead tr,
.app-shell.with-shell.light-mode .inv-table thead tr,
.app-shell.with-shell.light-mode .tpl-table thead tr,
.app-shell.with-shell.light-mode .preview-table thead tr,
.app-shell.with-shell.light-mode .compare-table thead tr {
  background: #e8eef6 !important;
  border-bottom-color: #cbd5e1 !important;
}
.app-shell.with-shell.light-mode table thead th { color: #334155 !important; }
.app-shell.with-shell.light-mode table tbody tr { border-bottom-color: #e8edf3 !important; }
.app-shell.with-shell.light-mode table tbody tr:hover { background: #f5f8fc !important; }
.app-shell.with-shell.light-mode table tbody td { color: #1e293b !important; }
.app-shell.with-shell.light-mode .title-badge {
  background: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe !important;
}
.app-shell.with-shell.light-mode .type-badge {
  background: #e2e8f0 !important; color: #334155 !important;
}

/* ---------------- BADGES / PILLS ---------------- */
.app-shell.with-shell.light-mode .badge-success,
.app-shell.with-shell.light-mode .status-pill.ok {
  background: #dcfce7 !important; color: #166534 !important; border-color: #86efac !important;
}
.app-shell.with-shell.light-mode .badge-warning,
.app-shell.with-shell.light-mode .status-pill.warn {
  background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important;
}
.app-shell.with-shell.light-mode .badge-danger {
  background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important;
}
.app-shell.with-shell.light-mode .plan-chip,
.app-shell.with-shell.light-mode .count-chip {
  background: #dbeafe !important; color: #1e40af !important; border-color: #93c5fd !important;
}
.app-shell.with-shell.light-mode .chip-violet {
  background: #ede9fe !important; color: #5b21b6 !important; border-color: #c4b5fd !important;
}

/* ---------------- EMPTY / LOADING ---------------- */
.app-shell.with-shell.light-mode .empty-state h3,
.app-shell.with-shell.light-mode .empty-panel h3,
.app-shell.with-shell.light-mode .empty-recipients h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .empty-state p,
.app-shell.with-shell.light-mode .empty-panel p,
.app-shell.with-shell.light-mode .empty-recipients p,
.app-shell.with-shell.light-mode .loading-state { color: #64748b !important; }
.app-shell.with-shell.light-mode .empty-icon {
  background: #eff6ff !important; border-color: #bfdbfe !important; color: #2563eb !important;
}
.app-shell.with-shell.light-mode .loading-spinner {
  border-color: #cbd5e1 !important; border-top-color: #2563eb !important;
}

/* ---------------- ALERTS ---------------- */
.app-shell.with-shell.light-mode .alert-error,
.app-shell.with-shell.light-mode .error-msg {
  background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important;
}
.app-shell.with-shell.light-mode .alert-success {
  background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important;
}
.app-shell.with-shell.light-mode .alert-warn {
  background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important;
}

/* ---------------- MODALS ---------------- */
.app-shell.with-shell.light-mode .modal-backdrop,
.app-shell.with-shell.light-mode .bulk-backdrop,
.app-shell.with-shell.light-mode .dialog-backdrop {
  background: rgba(15,23,42,.45) !important;
}
.app-shell.with-shell.light-mode .modal-box,
.app-shell.with-shell.light-mode .bulk-box,
.app-shell.with-shell.light-mode .dialog-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0b1220 !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.22) !important;
}
.app-shell.with-shell.light-mode .modal-head,
.app-shell.with-shell.light-mode .bulk-head,
.app-shell.with-shell.light-mode .dialog-head {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .modal-head h3,
.app-shell.with-shell.light-mode .bulk-head h3,
.app-shell.with-shell.light-mode .dialog-head h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .modal-head p,
.app-shell.with-shell.light-mode .bulk-head p,
.app-shell.with-shell.light-mode .dialog-head p { color: #64748b !important; }
.app-shell.with-shell.light-mode .modal-close,
.app-shell.with-shell.light-mode .bulk-close,
.app-shell.with-shell.light-mode .dialog-close {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .modal-body,
.app-shell.with-shell.light-mode .bulk-body,
.app-shell.with-shell.light-mode .dialog-body {
  background: #ffffff !important;
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .modal-foot,
.app-shell.with-shell.light-mode .bulk-foot,
.app-shell.with-shell.light-mode .dialog-toolbar {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .from-suffix {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .modal-body .field input,
.app-shell.with-shell.light-mode .modal-body .field textarea,
.app-shell.with-shell.light-mode .modal-body .form-input,
.app-shell.with-shell.light-mode .modal-body .form-select {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0b1220 !important;
}

/* ---------------- CONTACT LIST / BULK UPLOAD ---------------- */
.app-shell.with-shell.light-mode .drop-zone {
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
}
.app-shell.with-shell.light-mode .drop-zone h3,
.app-shell.with-shell.light-mode .drop-zone h4 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .drop-zone p { color: #64748b !important; }
.app-shell.with-shell.light-mode .drop-icon {
  background: #e0e7ff !important; color: #4f46e5 !important;
}
.app-shell.with-shell.light-mode .drop-icon svg { color: #4f46e5 !important; }
.app-shell.with-shell.light-mode .supported-formats {
  background: #e2e8f0 !important; color: #334155 !important;
}
.app-shell.with-shell.light-mode .btn-template {
  background: #ffffff !important; border-color: #cbd5e1 !important; color: #2563eb !important;
}
.app-shell.with-shell.light-mode .expected-columns {
  background: #f8fafc !important; border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .expected-title { color: #475569 !important; }
.app-shell.with-shell.light-mode .expected-hint { color: #64748b !important; }
.app-shell.with-shell.light-mode .col-chip {
  background: #ffffff !important; border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .col-name { color: #1e40af !important; }
.app-shell.with-shell.light-mode .col-desc { color: #64748b !important; }
.app-shell.with-shell.light-mode .contact-row {
  background: #ffffff !important; border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .contact-name { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .contact-email { color: #64748b !important; }
.app-shell.with-shell.light-mode .contact-avatar {
  background: #e0e7ff !important; color: #4f46e5 !important;
}
.app-shell.with-shell.light-mode .contacts-list { background: #ffffff !important; }
.app-shell.with-shell.light-mode .preview-table-wrap {
  background: #ffffff !important; border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .preview-title { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .errors-box {
  background: #fef2f2 !important; border: 1px solid #fecaca !important;
}
.app-shell.with-shell.light-mode .errors-title { color: #991b1b !important; }
.app-shell.with-shell.light-mode .errors-list { color: #7f1d1d !important; }
.app-shell.with-shell.light-mode .file-info,
.app-shell.with-shell.light-mode .file-count,
.app-shell.with-shell.light-mode .import-count { color: #334155 !important; }
.app-shell.with-shell.light-mode .progress-bar { background: #e2e8f0 !important; }

/* ---------------- DOMAIN PAGE ---------------- */
.app-shell.with-shell.light-mode .domain-head { border-bottom-color: #e2e8f0 !important; }
.app-shell.with-shell.light-mode .domain-head-text h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .domain-head-text p { color: #64748b !important; }
.app-shell.with-shell.light-mode .domain-foot {
  background: #f8fafc !important; border-top-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .foot-meta { color: #64748b !important; }
.app-shell.with-shell.light-mode .meta-ok { color: #16a34a !important; }
.app-shell.with-shell.light-mode .meta-warn { color: #d97706 !important; }
.app-shell.with-shell.light-mode .row-error { color: #dc2626 !important; }
.app-shell.with-shell.light-mode .sep { color: #94a3b8 !important; }

/* ---------------- AI SUGGESTIONS ---------------- */
.app-shell.with-shell.light-mode .ai-suggestions {
  background: linear-gradient(180deg, #faf5ff, #f3e8ff) !important;
  border-color: #d8b4fe !important;
}
.app-shell.with-shell.light-mode .ai-title { color: #7c3aed !important; }
.app-shell.with-shell.light-mode .ai-item {
  background: #ffffff !important; border-color: #e9d5ff !important;
}
.app-shell.with-shell.light-mode .ai-item-text { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .ai-open-rate { color: #16a34a !important; }
.app-shell.with-shell.light-mode .ai-icon-btn {
  background: #ffffff !important; border-color: #d8b4fe !important; color: #7c3aed !important;
}

/* ---------------- CAMPAIGN DETAIL ---------------- */
.app-shell.with-shell.light-mode .step-card {
  background: #ffffff !important; border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .camp-step-done {
  background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #166534 !important;
}
.app-shell.with-shell.light-mode .camp-step-pending {
  background: #f8fafc !important; border-color: #e2e8f0 !important; color: #64748b !important;
}
.app-shell.with-shell.light-mode .camp-step-failed {
  background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important;
}
.app-shell.with-shell.light-mode .count-sent {
  background: #ecfdf5 !important; color: #166534 !important; border-color: #a7f3d0 !important;
}
.app-shell.with-shell.light-mode .count-failed {
  background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important;
}

/* ---------------- SENT MAILS ---------------- */
.app-shell.with-shell.light-mode .mail-row {
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .mail-row:hover { background: #f5f8fc !important; }
.app-shell.with-shell.light-mode .mail-row .sender,
.app-shell.with-shell.light-mode .mail-row .sender * { color: #0b1220 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .mail-row .subject,
.app-shell.with-shell.light-mode .mail-row .subject * { color: #475569 !important; }
.app-shell.with-shell.light-mode .mail-row .mail-time,
.app-shell.with-shell.light-mode .mail-row .mail-right { color: #64748b !important; }
.app-shell.with-shell.light-mode .mail-row .mail-action { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .mail-row .mail-action:hover { color: #334155 !important; }
.app-shell.with-shell.light-mode .mail-list { background: #ffffff !important; }

/* ---------------- SCROLLBAR ---------------- */
.app-shell.with-shell.light-mode ::-webkit-scrollbar-thumb { background: #b6c4d6 !important; }
.app-shell.with-shell.light-mode ::-webkit-scrollbar-thumb:hover { background: #8fa3bd !important; }

/* ---------------- MISC ---------------- */
.app-shell.with-shell.light-mode dl dt { color: #475569 !important; font-weight: 700 !important; }
.app-shell.with-shell.light-mode dl dd { color: #0b1220 !important; font-weight: 700 !important; }
.app-shell.with-shell.light-mode .detail-item {
  background: #f8fafc !important; border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .detail-item dt { color: #64748b !important; }
.app-shell.with-shell.light-mode .detail-item dd { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .smtp-row,
.app-shell.with-shell.light-mode .smtp-item {
  background: #f8fafc !important; border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .password-value,
.app-shell.with-shell.light-mode .revealed-value {
  background: #ffffff !important; border-color: #cbd5e1 !important; color: #0b1220 !important;
}

/* ================================================================
   TARGETED FIXES — Dashboard, Sent Mails, Loading
   ================================================================ */

/* ---------------- DASHBOARD ROOT + LAYOUT ---------------- */
.app-shell.with-shell.light-mode .dashboard,
.app-shell.with-shell.light-mode .sent-page,
.app-shell.with-shell.light-mode .domains-wrapper,
.app-shell.with-shell.light-mode .domains-page,
.app-shell.with-shell.light-mode .lists-wrapper,
.app-shell.with-shell.light-mode .templates-wrapper,
.app-shell.with-shell.light-mode .campaigns-wrapper,
.app-shell.with-shell.light-mode .campaigns-page,
.app-shell.with-shell.light-mode .campaign-detail-page,
.app-shell.with-shell.light-mode .settings-page,
.app-shell.with-shell.light-mode .subs-page,
.app-shell.with-shell.light-mode .invoices-page,
.app-shell.with-shell.light-mode .sup-page {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  width: 100% !important;
}
.app-shell.with-shell.light-mode .dashboard > *,
.app-shell.with-shell.light-mode .sent-page > * {
  max-width: 100% !important;
}
.app-shell.with-shell.light-mode .dashboard .page,
.app-shell.with-shell.light-mode .sent-page .page {
  background: transparent !important;
  color: #0f172a !important;
}

/* Fix loading spinner centering — page ke andar rahe, bahar na jaye */
.app-shell.with-shell.light-mode .loading-state {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  padding: 70px 20px !important;
  color: #475569 !important;
  overflow: hidden !important;
}
.app-shell.with-shell.light-mode .loading-spinner {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 20px !important;
  border: 3px solid #cbd5e1 !important;
  border-top-color: #2563eb !important;
  border-radius: 50% !important;
  animation: spin .8s linear infinite !important;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------- DASHBOARD HEADER TEXT ---------------- */
.app-shell.with-shell.light-mode .dash-header h1,
.app-shell.with-shell.light-mode .page-header h1 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
}
.app-shell.with-shell.light-mode .dash-header p,
.app-shell.with-shell.light-mode .page-header p {
  color: #475569 !important;
}
.app-shell.with-shell.light-mode .dash-header p strong,
.app-shell.with-shell.light-mode .dash-header strong,
.app-shell.with-shell.light-mode .dash-header p span {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}

/* Live badge */
.app-shell.with-shell.light-mode .live-badge {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
.app-shell.with-shell.light-mode .live-badge .live-dot {
  background: #16a34a !important;
  box-shadow: 0 0 8px rgba(22, 163, 74, .6) !important;
}

/* ---------------- STAT CARDS ---------------- */
.app-shell.with-shell.light-mode .stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
}
.app-shell.with-shell.light-mode .stat-card .stat-icon {
  background: rgba(37, 99, 235, .08) !important;
  border-color: rgba(37, 99, 235, .12) !important;
}
.app-shell.with-shell.light-mode .stat-card .stat-label {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .stat-card .stat-value {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .stat-card .stat-foot,
.app-shell.with-shell.light-mode .stat-card .stat-foot span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Per-stat card tint */
.app-shell.with-shell.light-mode .stat-sent {
  background: linear-gradient(180deg, #fffbeb, #ffffff) !important;
  border-color: #fde68a !important;
}
.app-shell.with-shell.light-mode .stat-sent .stat-label { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }
.app-shell.with-shell.light-mode .stat-sent .stat-value { color: #78350f !important; -webkit-text-fill-color: #78350f !important; }
.app-shell.with-shell.light-mode .stat-sent .dot-amber { background: #f59e0b !important; }

.app-shell.with-shell.light-mode .stat-opened {
  background: linear-gradient(180deg, #ecfdf5, #ffffff) !important;
  border-color: #a7f3d0 !important;
}
.app-shell.with-shell.light-mode .stat-opened .stat-label { color: #047857 !important; -webkit-text-fill-color: #047857 !important; }
.app-shell.with-shell.light-mode .stat-opened .stat-value { color: #064e3b !important; -webkit-text-fill-color: #064e3b !important; }
.app-shell.with-shell.light-mode .stat-opened .dot-emerald { background: #10b981 !important; }

.app-shell.with-shell.light-mode .stat-clicked {
  background: linear-gradient(180deg, #f0f9ff, #ffffff) !important;
  border-color: #bae6fd !important;
}
.app-shell.with-shell.light-mode .stat-clicked .stat-label { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; }
.app-shell.with-shell.light-mode .stat-clicked .stat-value { color: #0c4a6e !important; -webkit-text-fill-color: #0c4a6e !important; }
.app-shell.with-shell.light-mode .stat-clicked .dot-sky { background: #0ea5e9 !important; }

.app-shell.with-shell.light-mode .stat-bounced {
  background: linear-gradient(180deg, #fef2f2, #ffffff) !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .stat-bounced .stat-label { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }
.app-shell.with-shell.light-mode .stat-bounced .stat-value { color: #7f1d1d !important; -webkit-text-fill-color: #7f1d1d !important; }
.app-shell.with-shell.light-mode .stat-bounced .dot-rose { background: #f43f5e !important; }

/* ---------------- SENT MAILS PAGE FULL COVERAGE ---------------- */
.app-shell.with-shell.light-mode .sent-page .bg-grid { opacity: .08 !important; }
.app-shell.with-shell.light-mode .sent-page .bg-orb { opacity: .06 !important; }

.app-shell.with-shell.light-mode .sent-page .mail-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-list {
  background: #ffffff !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-row {
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-row:hover {
  background: #f5f8fc !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-avatar {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-content .mail-line-one,
.app-shell.with-shell.light-mode .sent-page .mail-content .sender,
.app-shell.with-shell.light-mode .sent-page .mail-content .subject,
.app-shell.with-shell.light-mode .sent-page .mail-content .sender *,
.app-shell.with-shell.light-mode .sent-page .mail-content .subject * {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-content .subject {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 600 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-time,
.app-shell.with-shell.light-mode .sent-page .mail-right,
.app-shell.with-shell.light-mode .sent-page .mail-right span {
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-action {
  color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-action:hover {
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-action.favorite-action:hover {
  color: #f59e0b !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-action.delete-action:hover {
  color: #dc2626 !important;
}

/* Sent Mails toolbar / search */
.app-shell.with-shell.light-mode .sent-page .search-wrap,
.app-shell.with-shell.light-mode .sent-page .search-wrap input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .search-wrap input::placeholder {
  color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .sent-page .search-wrap svg { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .sent-page .result-count,
.app-shell.with-shell.light-mode .sent-page .count { color: #475569 !important; }

/* Sent Mails empty state */
.app-shell.with-shell.light-mode .sent-page .empty,
.app-shell.with-shell.light-mode .sent-page .empty * { color: #64748b !important; }
.app-shell.with-shell.light-mode .sent-page .empty h3 { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; }

/* ---------------- SENT MAIL DETAIL MODAL ---------------- */
.app-shell.with-shell.light-mode .sent-page .detail-backdrop,
.app-shell.with-shell.light-mode .sent-page .overlay {
  background: rgba(15, 23, 42, .5) !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-modal,
.app-shell.with-shell.light-mode .sent-page .mail-detail,
.app-shell.with-shell.light-mode .sent-page .modal-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-header,
.app-shell.with-shell.light-mode .sent-page .modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-header *,
.app-shell.with-shell.light-mode .sent-page .modal-header * {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-header .eyebrow,
.app-shell.with-shell.light-mode .sent-page .modal-header .eyebrow {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-detail-content {
  background: #ffffff !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-meta-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-meta-row {
  border-bottom: 1px solid #e8edf3 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-meta-row * {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .mail-meta-row > span:first-child,
.app-shell.with-shell.light-mode .sent-page .mail-meta-row > strong:first-child {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 700 !important;
}

/* Detail body / iframe */
.app-shell.with-shell.light-mode .sent-page .actual-mail,
.app-shell.with-shell.light-mode .sent-page .mail-body,
.app-shell.with-shell.light-mode .sent-page .mail-body * {
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .actual-mail-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .actual-mail-preview,
.app-shell.with-shell.light-mode .sent-page .actual-mail-preview iframe {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .sent-page .no-mail-content,
.app-shell.with-shell.light-mode .sent-page .html-loading {
  color: #64748b !important;
}

/* ================================================================
   SENT MAIL DETAIL MODAL — Header icon buttons
   ================================================================ */

/* Back button (top-left, router-link back to dashboard) */
.app-shell.with-shell.light-mode .sent-page .detail-modal .back-btn,
.app-shell.with-shell.light-mode .sent-page .modal .back-btn,
.app-shell.with-shell.light-mode .sent-page .back-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
}
.app-shell.with-shell.light-mode .sent-page .back-btn svg {
  color: #475569 !important;
  stroke: #475569 !important;
}
.app-shell.with-shell.light-mode .sent-page .back-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .back-btn:hover svg {
  color: #0b1220 !important;
  stroke: #0b1220 !important;
}

/* Close button (top-right X) */
.app-shell.with-shell.light-mode .sent-page .detail-modal .close-btn,
.app-shell.with-shell.light-mode .sent-page .modal .close-btn,
.app-shell.with-shell.light-mode .sent-page .close-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
}
.app-shell.with-shell.light-mode .sent-page .close-btn svg {
  color: #475569 !important;
  stroke: #475569 !important;
}
.app-shell.with-shell.light-mode .sent-page .close-btn:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
.app-shell.with-shell.light-mode .sent-page .close-btn:hover svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

/* If icons rendered as text (not SVG) */
.app-shell.with-shell.light-mode .sent-page .back-btn *,
.app-shell.with-shell.light-mode .sent-page .close-btn * {
  color: inherit !important;
}

/* Modal header bg + title */
.app-shell.with-shell.light-mode .sent-page .detail-modal .detail-header,
.app-shell.with-shell.light-mode .sent-page .modal .detail-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-header .eyebrow {
  color: #1d4ed8 !important;
}
.app-shell.with-shell.light-mode .sent-page .detail-header .detail-title,
.app-shell.with-shell.light-mode .sent-page .detail-header h1,
.app-shell.with-shell.light-mode .sent-page .detail-header h2,
.app-shell.with-shell.light-mode .sent-page .detail-title-area h1,
.app-shell.with-shell.light-mode .sent-page .detail-title-area h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}

/* Message summary (From / To / Date) */
.app-shell.with-shell.light-mode .sent-page .message-summary {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .sent-page .summary-from,
.app-shell.with-shell.light-mode .sent-page .summary-to,
.app-shell.with-shell.light-mode .sent-page .summary-from *,
.app-shell.with-shell.light-mode .sent-page .summary-to * {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .summary-date {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.app-shell.with-shell.light-mode .sent-page .summary-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}

/* ================================================================
   SENT MAIL DETAIL — Back button fix (class: .back-detail)
   ================================================================ */
.app-shell.with-shell.light-mode .sent-page .detail-title-area .back-detail,
.app-shell.with-shell.light-mode .sent-page .back-detail {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-shell.with-shell.light-mode .sent-page .back-detail svg {
  color: #475569 !important;
  stroke: #475569 !important;
  fill: none !important;
}
.app-shell.with-shell.light-mode .sent-page .back-detail:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sent-page .back-detail:hover svg {
  color: #0b1220 !important;
  stroke: #0b1220 !important;
}

/* ================================================================
   SUBSCRIPTIONS PAGE — Complete Light Mode
   Exact classes from SubscriptionsView.vue
   ================================================================ */

/* ---------- PAGE HEADER ---------- */
.app-shell.with-shell.light-mode .page-header h1 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .page-header p { color: #475569 !important; }
.app-shell.with-shell.light-mode .eyebrow { color: #1d4ed8 !important; }

/* ================================================================
   TRIAL CARD
   ================================================================ */
.app-shell.with-shell.light-mode .trial-card {
  background: #ffffff !important;
  border: 1px solid #d8e0ea !important;
  color: #0b1220 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .trial-ok {
  border-color: #a7f3d0 !important;
  background: linear-gradient(180deg, #f0fdf4, #ffffff) !important;
}
.app-shell.with-shell.light-mode .trial-warn {
  border-color: #fecaca !important;
  background: linear-gradient(180deg, #fef2f2, #ffffff) !important;
}

/* Trial badge pill */
.app-shell.with-shell.light-mode .trial-badge {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .trial-badge.badge-ok {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}
.app-shell.with-shell.light-mode .trial-badge.badge-warn {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}
.app-shell.with-shell.light-mode .trial-badge .badge-dot {
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
}

/* Trial heading "15 days remaining" — THIS was faded */
.app-shell.with-shell.light-mode .trial-card .trial-content h2,
.app-shell.with-shell.light-mode .trial-content h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  text-fill-color: #0b1220 !important;
  opacity: 1 !important;
}

/* Trial meta row (calendar + expiry + date) */
.app-shell.with-shell.light-mode .trial-meta {
  color: #475569 !important;
}
.app-shell.with-shell.light-mode .trial-meta svg {
  color: #64748b !important;
  stroke: #64748b !important;
}
.app-shell.with-shell.light-mode .trial-meta span {
  color: #64748b !important;
  font-weight: 600 !important;
}
.app-shell.with-shell.light-mode .trial-meta strong {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}

/* Subscribe Now button */
.app-shell.with-shell.light-mode .trial-cta {
  color: #ffffff !important;
}

/* ================================================================
   PLAN CARDS (Monthly / Yearly)
   ================================================================ */
.app-shell.with-shell.light-mode .plan-card {
  background: #ffffff !important;
  border: 1px solid #d8e0ea !important;
  color: #0b1220 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .plan-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
}
.app-shell.with-shell.light-mode .plan-featured {
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%) !important;
  border: 2px solid #c4b5fd !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .12) !important;
}
.app-shell.with-shell.light-mode .plan-featured:hover {
  border-color: #a855f7 !important;
  box-shadow: 0 12px 32px rgba(124, 58, 237, .18) !important;
}

/* Plan tag "MailRocket Business" */
.app-shell.with-shell.light-mode .plan-tag {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .plan-featured .plan-tag {
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}

/* Plan price (₹1,999) */
.app-shell.with-shell.light-mode .plan-price {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
.app-shell.with-shell.light-mode .plan-price span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Plan description */
.app-shell.with-shell.light-mode .plan-desc {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Divider */
.app-shell.with-shell.light-mode .plan-divider {
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important;
}

/* ================================================================
   FEATURE LIST — THIS was the faded rows
   ================================================================ */
.app-shell.with-shell.light-mode .feature-list {
  background: transparent !important;
}
.app-shell.with-shell.light-mode .feature-list li {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  font-weight: 500 !important;
}
.app-shell.with-shell.light-mode .feature-list li * {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
.app-shell.with-shell.light-mode .feature-list .feat-icon {
  color: #16a34a !important;
  stroke: #16a34a !important;
}
.app-shell.with-shell.light-mode .feature-list .feat-shield {
  color: #2563eb !important;
  stroke: #2563eb !important;
}
.app-shell.with-shell.light-mode .plan-featured .feat-shield {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
}

/* Plan badge chip (Monthly / Yearly) */
.app-shell.with-shell.light-mode .plan-badge,
.app-shell.with-shell.light-mode .plan-cycle-badge {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .plan-featured .plan-badge,
.app-shell.with-shell.light-mode .plan-featured .plan-cycle-badge {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border-color: #ddd6fe !important;
}

/* Popular ribbon (BEST VALUE) — keep white text */
.app-shell.with-shell.light-mode .popular-ribbon {
  color: #ffffff !important;
}

/* Plan CTA buttons — keep white text on gradient */
.app-shell.with-shell.light-mode .plan-cta {
  color: #ffffff !important;
}

/* ================================================================
   SUBSCRIPTIONS — Info Card (Razorpay notice)
   ================================================================ */
.app-shell.with-shell.light-mode .info-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}
.app-shell.with-shell.light-mode .info-card h3 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .info-card p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
.app-shell.with-shell.light-mode .info-card .info-icon {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .info-card .info-icon svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}

/* ================================================================
   CONTACT LIST DIALOG + BULK UPLOAD MODAL
   These use <Teleport to="body"> — so they're OUTSIDE .app-shell.
   Target with html.light-theme + specific class names only this
   component uses (.dialog-*, .bulk-*, .contact-row, .drop-zone, etc.)
   ================================================================ */

/* ---------- OVERLAY / BACKDROP ---------- */
html.light-theme .dialog-overlay,
html.light-theme .bulk-overlay {
  background: rgba(15, 23, 42, .5) !important;
}
html.light-theme .dialog-backdrop,
html.light-theme .bulk-backdrop {
  background: rgba(15, 23, 42, .5) !important;
}

/* ---------- DIALOG BOX ---------- */
html.light-theme .dialog-box,
html.light-theme .bulk-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0b1220 !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .22) !important;
}

/* ---------- HEADER ---------- */
html.light-theme .dialog-head,
html.light-theme .bulk-head {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .dialog-head h3,
html.light-theme .bulk-head h3 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
html.light-theme .dialog-head p,
html.light-theme .bulk-head p {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* ---------- CLOSE BUTTON ---------- */
html.light-theme .dialog-close,
html.light-theme .bulk-close {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
html.light-theme .dialog-close:hover,
html.light-theme .bulk-close:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
html.light-theme .dialog-close svg,
html.light-theme .bulk-close svg {
  color: #475569 !important;
  stroke: #475569 !important;
}

/* ---------- BODY / FOOTER ---------- */
html.light-theme .dialog-body,
html.light-theme .bulk-body {
  background: #ffffff !important;
  color: #334155 !important;
}
html.light-theme .dialog-toolbar,
html.light-theme .bulk-foot {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ---------- TOOLBAR BUTTONS ---------- */
html.light-theme .btn-single,
html.light-theme .btn-bulk {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
html.light-theme .btn-single:hover,
html.light-theme .btn-bulk:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
html.light-theme .btn-single.is-active,
html.light-theme .btn-bulk.is-active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ---------- FORM FIELDS ---------- */
html.light-theme .dialog-body input,
html.light-theme .dialog-body textarea,
html.light-theme .dialog-body select,
html.light-theme .bulk-body input,
html.light-theme .bulk-body textarea,
html.light-theme .bulk-body select,
html.light-theme .single-form input,
html.light-theme .form-input,
html.light-theme .form-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
}
html.light-theme .dialog-body input::placeholder,
html.light-theme .bulk-body input::placeholder {
  color: #94a3b8 !important;
}

/* ---------- CONTACT LIST ROWS ---------- */
html.light-theme .contacts-list {
  background: #ffffff !important;
}
html.light-theme .contact-row {
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  color: #0b1220 !important;
}
html.light-theme .contact-row:hover {
  background: #f5f8fc !important;
}
html.light-theme .contact-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}
html.light-theme .contact-name {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 700 !important;
}
html.light-theme .contact-email {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* ---------- DROP ZONE (BULK UPLOAD) ---------- */
html.light-theme .drop-zone {
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
}
html.light-theme .drop-zone:hover,
html.light-theme .drop-zone.dragover {
  background: #eff6ff !important;
  border-color: #6366f1 !important;
}
html.light-theme .drop-zone h3,
html.light-theme .drop-zone h4 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
html.light-theme .drop-zone p {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
html.light-theme .drop-icon {
  background: #e0e7ff !important;
  color: #4f46e5 !important;
}
html.light-theme .drop-icon svg {
  color: #4f46e5 !important;
  stroke: #4f46e5 !important;
}
html.light-theme .supported-formats {
  background: #e2e8f0 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* ---------- DOWNLOAD TEMPLATE BUTTON ---------- */
html.light-theme .btn-template {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}
html.light-theme .btn-template:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

/* ---------- EXPECTED COLUMNS SECTION ---------- */
html.light-theme .expected-columns {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.light-theme .expected-title {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 800 !important;
}
html.light-theme .expected-hint {
  color: #64748b !important;
}
html.light-theme .col-chip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html.light-theme .col-name {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  font-weight: 800 !important;
}
html.light-theme .col-desc {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* ---------- PREVIEW TABLE ---------- */
html.light-theme .preview-table-wrap {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html.light-theme .preview-title {
  color: #0b1220 !important;
  font-weight: 800 !important;
}
html.light-theme .preview-table thead tr {
  background: #f1f5f9 !important;
}
html.light-theme .preview-table thead th {
  color: #475569 !important;
}
html.light-theme .preview-table tbody td {
  color: #334155 !important;
  border-bottom-color: #e8edf3 !important;
}

/* ---------- ERRORS BOX ---------- */
html.light-theme .errors-box {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
}
html.light-theme .errors-title {
  color: #991b1b !important;
  font-weight: 800 !important;
}
html.light-theme .errors-list {
  color: #7f1d1d !important;
}

/* ---------- FILE INFO / PROGRESS ---------- */
html.light-theme .file-info,
html.light-theme .file-count,
html.light-theme .import-count {
  color: #334155 !important;
}
html.light-theme .progress-bar {
  background: #e2e8f0 !important;
}
html.light-theme .progress-fill {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
}
html.light-theme .import-spinner,
html.light-theme .loading-spinner {
  border-color: #cbd5e1 !important;
  border-top-color: #2563eb !important;
}
html.light-theme .bulk-done,
html.light-theme .done-icon {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

/* ---------- MAP GRID (BULK MAPPING) ---------- */
html.light-theme .map-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.light-theme .map-title,
html.light-theme .map-item label {
  color: #334155 !important;
  font-weight: 700 !important;
}

/* ---------- DELETE BUTTONS ---------- */
html.light-theme .btn-del {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}
html.light-theme .btn-del:hover {
  background: #fee2e2 !important;
}
html.light-theme .confirm-text {
  color: #334155 !important;
}
html.light-theme .btn-confirm-yes {
  background: #dc2626 !important;
  color: #ffffff !important;
}
html.light-theme .btn-confirm-no {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* ---------- ACTIONS/VIEW BUTTONS ---------- */
html.light-theme .btn-action {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.light-theme .btn-action:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* ---------- EMPTY STATE ---------- */
html.light-theme .empty-state h3 {
  color: #0b1220 !important;
  font-weight: 800 !important;
}
html.light-theme .empty-state p {
  color: #64748b !important;
}
html.light-theme .empty-icon {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

/* ================================================================
   LISTS PAGE — List cards
   ================================================================ */
.app-shell.with-shell.light-mode .lists-wrapper,
.app-shell.with-shell.light-mode .lists-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .list-card {
  background: #ffffff !important;
  border: 1px solid #d8e0ea !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .list-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}
.app-shell.with-shell.light-mode .list-body {
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .list-text h3,
.app-shell.with-shell.light-mode .list-text strong {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .list-text p {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.app-shell.with-shell.light-mode .list-icon {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}
.app-shell.with-shell.light-mode .list-actions .btn-ghost,
.app-shell.with-shell.light-mode .btn-view {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .list-actions .btn-ghost:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .list-actions .btn-delete,
.app-shell.with-shell.light-mode .list-actions .btn-danger {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .list-actions .btn-delete:hover,
.app-shell.with-shell.light-mode .list-actions .btn-danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* ================================================================
   TEMPLATES PAGE — Editor view (light mode)
   Exact classes: .back-btn, .tag-btn, .tag-btn-ai, .editor-tab-active,
   .editor-panel, .editor-header, .save-panel, .action-*, .panel-icon-violet
   ================================================================ */

/* ---------- PAGE WRAPPER ---------- */
.app-shell.with-shell.light-mode .templates-wrapper,
.app-shell.with-shell.light-mode .templates-page,
.app-shell.with-shell.light-mode .editor-panel {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .bg-grid { opacity: .1 !important; }
.app-shell.with-shell.light-mode .bg-orb { opacity: .05 !important; }

/* ---------- BACK BUTTON (grey circle in screenshot) ---------- */
.app-shell.with-shell.light-mode .header-flex .back-btn,
.app-shell.with-shell.light-mode .back-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .back-btn svg {
  color: #475569 !important;
  stroke: #475569 !important;
}
.app-shell.with-shell.light-mode .back-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .back-btn:hover svg {
  color: #0b1220 !important;
  stroke: #0b1220 !important;
}

/* ---------- PAGE HEADER ---------- */
.app-shell.with-shell.light-mode .header-flex h1,
.app-shell.with-shell.light-mode .header-flex h2,
.app-shell.with-shell.light-mode .editor-header h1 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .header-flex p,
.app-shell.with-shell.light-mode .editor-header p {
  color: #475569 !important;
}

/* ---------- PANEL-ICON-VIOLET (Basic info / Email body icons) ---------- */
.app-shell.with-shell.light-mode .panel-icon-violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
}

/* ---------- MERGE TAG CHIPS ({{first_name}}, etc.) ---------- */
.app-shell.with-shell.light-mode .tag-btn {
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .tag-btn:hover {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
  color: #5b21b6 !important;
}
.app-shell.with-shell.light-mode .tag-btn svg {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
}

/* AI Suggest button (tag-btn-ai) */
.app-shell.with-shell.light-mode .tag-btn-ai {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, .3) !important;
}
.app-shell.with-shell.light-mode .tag-btn-ai:hover {
  box-shadow: 0 6px 20px rgba(168, 85, 247, .42) !important;
}
.app-shell.with-shell.light-mode .tag-btn-ai svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ---------- DESIGN / CODE TOGGLE ---------- */
.app-shell.with-shell.light-mode .editor-tab,
.app-shell.with-shell.light-mode [class*="tab-"]:not(.editor-tab-active) {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .editor-tab:hover {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .editor-tab-active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important;
}
.app-shell.with-shell.light-mode .editor-tab-active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Toggle wrapper */
.app-shell.with-shell.light-mode .editor-toggle,
.app-shell.with-shell.light-mode .mode-toggle,
.app-shell.with-shell.light-mode .tabs-mini {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 3px !important;
}

/* ---------- FORM FIELDS ---------- */
.app-shell.with-shell.light-mode .editor-panel input,
.app-shell.with-shell.light-mode .editor-panel textarea,
.app-shell.with-shell.light-mode .editor-panel select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .editor-panel input::placeholder,
.app-shell.with-shell.light-mode .editor-panel textarea::placeholder {
  color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .editor-panel input:focus,
.app-shell.with-shell.light-mode .editor-panel textarea:focus,
.app-shell.with-shell.light-mode .editor-panel select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
}

/* Form labels */
.app-shell.with-shell.light-mode .editor-panel label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* ---------- PANELS ---------- */
.app-shell.with-shell.light-mode .editor-panel .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .editor-panel .panel h2,
.app-shell.with-shell.light-mode .editor-panel .panel h3 {
  color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .editor-panel .panel p {
  color: #64748b !important;
}

/* Save panel */
.app-shell.with-shell.light-mode .save-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .save-panel h2,
.app-shell.with-shell.light-mode .save-panel h3 {
  color: #0b1220 !important;
}

/* Header buttons (small icons top-right) */
.app-shell.with-shell.light-mode .header-btn,
.app-shell.with-shell.light-mode .icon-search {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
.app-shell.with-shell.light-mode .header-btn:hover,
.app-shell.with-shell.light-mode .icon-search:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .header-btn svg {
  color: #475569 !important;
  stroke: #475569 !important;
}

/* ---------- STATUS PILLS ---------- */
.app-shell.with-shell.light-mode .status-ready {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

/* ---------- ACTION BUTTONS (row actions) ---------- */
.app-shell.with-shell.light-mode .action-edit,
.app-shell.with-shell.light-mode .action-dup {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
.app-shell.with-shell.light-mode .action-edit:hover,
.app-shell.with-shell.light-mode .action-dup:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .action-delete {
  background: #ffffff !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}
.app-shell.with-shell.light-mode .action-delete:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
.app-shell.with-shell.light-mode .action-confirm-yes {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
}
.app-shell.with-shell.light-mode .action-confirm-no {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* ---------- AI SUGGESTIONS BOX ---------- */
.app-shell.with-shell.light-mode .ai-suggestions {
  background: linear-gradient(180deg, #faf5ff, #f3e8ff) !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 12px !important;
}
.app-shell.with-shell.light-mode .ai-header {
  background: transparent !important;
}
.app-shell.with-shell.light-mode .ai-title {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .ai-icon-btn {
  background: #ffffff !important;
  border: 1px solid #ddd6fe !important;
  color: #7c3aed !important;
}
.app-shell.with-shell.light-mode .ai-icon-btn:hover:not(:disabled) {
  background: #ede9fe !important;
  border-color: #a855f7 !important;
}

/* AI error */
.app-shell.with-shell.light-mode .ai-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}

/* ---------- PLAIN TEXT FALLBACK ---------- */
.app-shell.with-shell.light-mode .editor-panel .optional {
  color: #94a3b8 !important;
}

/* ---------- CODE EDITOR AREA (keep dark — CodeMirror convention) ---------- */
.app-shell.with-shell.light-mode .editor-panel .code-editor,
.app-shell.with-shell.light-mode .editor-panel .CodeMirror,
.app-shell.with-shell.light-mode .editor-panel .cm-editor {
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
}

/* ---------- ALERTS ---------- */
.app-shell.with-shell.light-mode .editor-panel .alert-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.app-shell.with-shell.light-mode .editor-panel .alert-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

/* ================================================================
   CAMPAIGNS PAGE — Light Mode
   Exact classes: .campaigns-wrapper, .campaign-card, .card-head,
   .card-title, .card-icon, .status-pill, .stats-row, .stat-val,
   .stat-lbl, .btn-sm, .note-error, .note-warn
   ================================================================ */

/* ---------- PAGE WRAPPER ---------- */
.app-shell.with-shell.light-mode .campaigns-wrapper,
.app-shell.with-shell.light-mode .campaigns-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .campaigns-wrapper .bg-grid { opacity: .1 !important; }
.app-shell.with-shell.light-mode .campaigns-wrapper .bg-orb { opacity: .05 !important; }

/* ---------- PAGE HEADER ---------- */
.app-shell.with-shell.light-mode .campaigns-page .page-header h1 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .campaigns-page .page-header p {
  color: #475569 !important;
}
.app-shell.with-shell.light-mode .campaigns-page .eyebrow {
  color: #1d4ed8 !important;
}

/* ---------- CAMPAIGN CARDS ---------- */
.app-shell.with-shell.light-mode .campaign-card {
  background: #ffffff !important;
  border: 1px solid #d8e0ea !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .campaign-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
}

/* Card head */
.app-shell.with-shell.light-mode .card-head {
  border-bottom-color: #e8edf3 !important;
}
.app-shell.with-shell.light-mode .card-title {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .card-title span {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .card-title:hover,
.app-shell.with-shell.light-mode .card-title:hover span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* Card icon */
.app-shell.with-shell.light-mode .card-icon {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}

/* ---------- STATUS PILLS ---------- */
.app-shell.with-shell.light-mode .status-pill {
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .status-pill.sent,
.app-shell.with-shell.light-mode .status-pill.status-sent {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
.app-shell.with-shell.light-mode .status-pill.draft,
.app-shell.with-shell.light-mode .status-pill.status-draft {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.app-shell.with-shell.light-mode .status-pill.sending,
.app-shell.with-shell.light-mode .status-pill.status-sending,
.app-shell.with-shell.light-mode .status-pill.scheduled,
.app-shell.with-shell.light-mode .status-pill.status-scheduled {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
.app-shell.with-shell.light-mode .status-pill.failed,
.app-shell.with-shell.light-mode .status-pill.status-failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* ---------- STATS ROW ---------- */
.app-shell.with-shell.light-mode .stats-row {
  border-top: 1px solid #e8edf3 !important;
  border-bottom: 1px solid #e8edf3 !important;
  background: #f8fafc !important;
}
.app-shell.with-shell.light-mode .stat-val {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 850 !important;
}
.app-shell.with-shell.light-mode .stat-lbl {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 700 !important;
}

/* Stat tints */
.app-shell.with-shell.light-mode .stat-emerald .stat-val { color: #047857 !important; -webkit-text-fill-color: #047857 !important; }
.app-shell.with-shell.light-mode .stat-sky .stat-val { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; }
.app-shell.with-shell.light-mode .stat-rose .stat-val { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }

/* ---------- SMALL BUTTONS ---------- */
.app-shell.with-shell.light-mode .btn-sm {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .btn-sm:hover:not(:disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .btn-primary.btn-sm {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ---------- MONO TEXT (campaign IDs) ---------- */
.app-shell.with-shell.light-mode .mono {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* ---------- NOTES ---------- */
.app-shell.with-shell.light-mode .note-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.app-shell.with-shell.light-mode .note-warn {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

/* ---------- ALERTS ---------- */
.app-shell.with-shell.light-mode .campaigns-page .alert-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.app-shell.with-shell.light-mode .campaigns-page .alert-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

/* ---------- EMPTY STATE ---------- */
.app-shell.with-shell.light-mode .campaigns-page .empty-state h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .campaigns-page .empty-state p { color: #64748b !important; }
.app-shell.with-shell.light-mode .campaigns-page .empty-icon {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

/* ================================================================
   CAMPAIGN DETAIL VIEW — Light Mode
   Classes: .stats-section, .stat-btn, .recipient-card, .recipient-email,
   .recipient-name, .timeline-panel, .timeline-step, .step-*,
   .detail-item, .detail-item-full, .icon-violet, .count-*
   ================================================================ */

/* ---------- PAGE WRAPPER ---------- */
.app-shell.with-shell.light-mode .campaign-detail-page,
.app-shell.with-shell.light-mode .campaign-detail-wrapper {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}

/* ---------- STATS SECTION HEADER ---------- */
.app-shell.with-shell.light-mode .stats-section {
  background: transparent !important;
}
.app-shell.with-shell.light-mode .stats-head h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 850 !important;
}
.app-shell.with-shell.light-mode .stats-head p,
.app-shell.with-shell.light-mode .stats-filter-note {
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .stats-filter-note strong {
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .clear-btn {
  color: #2563eb !important;
  font-weight: 700 !important;
}

/* ---------- STAT BUTTONS (Recipients/Sent/Delivered/etc.) ---------- */
.app-shell.with-shell.light-mode .stat-btn {
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  color: #0b1220 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}
.app-shell.with-shell.light-mode .stat-btn:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
}
.app-shell.with-shell.light-mode .stat-btn.is-active {
  border-color: #2563eb !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .18) !important;
}
.app-shell.with-shell.light-mode .stat-btn-glow {
  opacity: .06 !important;
}
.app-shell.with-shell.light-mode .stat-btn-label {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .stat-btn-value {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
}

/* Stat button color variants */
.app-shell.with-shell.light-mode .stat-btn-all {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
.app-shell.with-shell.light-mode .stat-btn-all .stat-btn-value { color: #334155 !important; -webkit-text-fill-color: #334155 !important; }

.app-shell.with-shell.light-mode .stat-btn-sent {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
.app-shell.with-shell.light-mode .stat-btn-sent .stat-btn-value { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }
.app-shell.with-shell.light-mode .stat-btn-sent .stat-btn-label { color: #92400e !important; -webkit-text-fill-color: #92400e !important; }

.app-shell.with-shell.light-mode .stat-btn-delivered {
  background: #f0fdfa !important;
  border-color: #99f6e4 !important;
}
.app-shell.with-shell.light-mode .stat-btn-delivered .stat-btn-value { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; }
.app-shell.with-shell.light-mode .stat-btn-delivered .stat-btn-label { color: #115e59 !important; -webkit-text-fill-color: #115e59 !important; }

.app-shell.with-shell.light-mode .stat-btn-opened {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.app-shell.with-shell.light-mode .stat-btn-opened .stat-btn-value { color: #047857 !important; -webkit-text-fill-color: #047857 !important; }
.app-shell.with-shell.light-mode .stat-btn-opened .stat-btn-label { color: #065f46 !important; -webkit-text-fill-color: #065f46 !important; }

.app-shell.with-shell.light-mode .stat-btn-clicked {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
}
.app-shell.with-shell.light-mode .stat-btn-clicked .stat-btn-value { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; }
.app-shell.with-shell.light-mode .stat-btn-clicked .stat-btn-label { color: #075985 !important; -webkit-text-fill-color: #075985 !important; }

.app-shell.with-shell.light-mode .stat-btn-bounced {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .stat-btn-bounced .stat-btn-value { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }
.app-shell.with-shell.light-mode .stat-btn-bounced .stat-btn-label { color: #991b1b !important; -webkit-text-fill-color: #991b1b !important; }

.app-shell.with-shell.light-mode .stat-btn-failed {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .stat-btn-failed .stat-btn-value { color: #991b1b !important; -webkit-text-fill-color: #991b1b !important; }
.app-shell.with-shell.light-mode .stat-btn-failed .stat-btn-label { color: #7f1d1d !important; -webkit-text-fill-color: #7f1d1d !important; }

/* Check badge */
.app-shell.with-shell.light-mode .stat-btn-check {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
}

/* ---------- TIMELINE PANEL ---------- */
.app-shell.with-shell.light-mode .timeline-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .timeline-panel h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .timeline-panel p {
  color: #64748b !important;
}
.app-shell.with-shell.light-mode .panel-glow-violet {
  opacity: .08 !important;
}
.app-shell.with-shell.light-mode .icon-violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
}

/* ---------- RECIPIENT CARDS ---------- */
.app-shell.with-shell.light-mode .recipient-card {
  background: #ffffff !important;
  border-top: 1px solid #e8edf3 !important;
}
.app-shell.with-shell.light-mode .recipient-card:hover {
  background: #f8fafc !important;
}
.app-shell.with-shell.light-mode .recipient-email {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 600 !important;
}
.app-shell.with-shell.light-mode .recipient-name {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .recipient-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}

/* ---------- TIMELINE STEPS ---------- */
.app-shell.with-shell.light-mode .timeline-step {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .step-name {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .step-time {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .step-done {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.app-shell.with-shell.light-mode .step-done .step-name { color: #166534 !important; -webkit-text-fill-color: #166534 !important; }
.app-shell.with-shell.light-mode .step-done .step-time { color: #16a34a !important; -webkit-text-fill-color: #16a34a !important; }
.app-shell.with-shell.light-mode .step-pending {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .step-pending .step-name { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .step-failed {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .step-failed .step-name { color: #991b1b !important; -webkit-text-fill-color: #991b1b !important; }

/* ---------- DETAIL ITEMS (Campaign info) ---------- */
.app-shell.with-shell.light-mode .detail-item,
.app-shell.with-shell.light-mode .detail-item-full {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .detail-item dt,
.app-shell.with-shell.light-mode .detail-item-full dt {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .detail-item dd,
.app-shell.with-shell.light-mode .detail-item-full dd {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 700 !important;
}

/* ---------- COUNT CHIPS ---------- */
.app-shell.with-shell.light-mode .count-sent {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border: 1px solid #a7f3d0 !important;
}
.app-shell.with-shell.light-mode .count-failed {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

/* ================================================================
   CAMPAIGNS LIST — Delete button fix
   (In CampaignsView the delete button has dark grey bg)
   ================================================================ */
.app-shell.with-shell.light-mode .campaigns-page .btn-sm.btn-danger,
.app-shell.with-shell.light-mode .campaigns-page .btn-sm.btn-del,
.app-shell.with-shell.light-mode .campaigns-page .btn-del,
.app-shell.with-shell.light-mode .campaigns-page .btn-danger,
.app-shell.with-shell.light-mode .campaign-card .btn-danger,
.app-shell.with-shell.light-mode .campaign-card .btn-del {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .campaigns-page .btn-sm.btn-danger:hover,
.app-shell.with-shell.light-mode .campaigns-page .btn-sm.btn-del:hover,
.app-shell.with-shell.light-mode .campaign-card .btn-danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}

/* ================================================================
   CAMPAIGNS LIST — Delete button (exact class: .btn-delete)
   ================================================================ */
.app-shell.with-shell.light-mode .campaigns-page .btn-delete,
.app-shell.with-shell.light-mode .campaign-card .btn-delete {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .campaigns-page .btn-delete svg,
.app-shell.with-shell.light-mode .campaign-card .btn-delete svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}
.app-shell.with-shell.light-mode .campaigns-page .btn-delete:hover:not(:disabled),
.app-shell.with-shell.light-mode .campaign-card .btn-delete:hover:not(:disabled) {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}
.app-shell.with-shell.light-mode .campaigns-page .btn-delete:hover:not(:disabled) svg {
  color: #b91c1c !important;
  stroke: #b91c1c !important;
}

/* Confirm delete buttons */
.app-shell.with-shell.light-mode .btn-confirm-yes {
  background: #dc2626 !important;
  border: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .btn-confirm-yes:hover:not(:disabled) {
  background: #b91c1c !important;
}
.app-shell.with-shell.light-mode .btn-confirm-no {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .btn-confirm-no:hover:not(:disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .confirm-text {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 600 !important;
}

/* ================================================================
   SETTINGS PAGE — Light Mode
   ================================================================ */
.app-shell.with-shell.light-mode .settings-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .settings-page .page-header h1 { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; }
.app-shell.with-shell.light-mode .settings-page .page-header p { color: #475569 !important; }
.app-shell.with-shell.light-mode .settings-page .eyebrow { color: #1d4ed8 !important; }
.app-shell.with-shell.light-mode .settings-page .eyebrow-dot { background: #2563eb !important; box-shadow: 0 0 8px rgba(37,99,235,.5) !important; }

/* Panels */
.app-shell.with-shell.light-mode .settings-page .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .settings-page .panel-head-text h2,
.app-shell.with-shell.light-mode .settings-page .panel-head-text h3 {
  color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .settings-page .panel-head-text p { color: #64748b !important; }
.app-shell.with-shell.light-mode .settings-page .panel-icon { color: #ffffff !important; }
.app-shell.with-shell.light-mode .settings-page .panel-icon-blue { background: linear-gradient(135deg, #2563eb, #4f46e5) !important; }
.app-shell.with-shell.light-mode .settings-page .panel-icon-violet { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }

/* Info grid (Account info card) */
.app-shell.with-shell.light-mode .settings-page .info-grid { background: transparent !important; }
.app-shell.with-shell.light-mode .settings-page .info-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .settings-page .info-item dt,
.app-shell.with-shell.light-mode .settings-page .info-item .info-label { color: #64748b !important; -webkit-text-fill-color: #64748b !important; font-weight: 700 !important; }
.app-shell.with-shell.light-mode .settings-page .info-item dd { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .settings-page .mono { color: #0b1220 !important; font-family: ui-monospace, "SF Mono", Menlo, monospace !important; }

/* SMTP grid */
.app-shell.with-shell.light-mode .settings-page .smtp-grid { background: transparent !important; }
.app-shell.with-shell.light-mode .settings-page .smtp-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .settings-page .smtp-item > span:first-child,
.app-shell.with-shell.light-mode .settings-page .smtp-item dt { color: #475569 !important; -webkit-text-fill-color: #475569 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .settings-page .smtp-val { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; font-weight: 700 !important; }

/* Revealed box */
.app-shell.with-shell.light-mode .settings-page .revealed-box {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
}
.app-shell.with-shell.light-mode .settings-page .revealed-head { color: #1e40af !important; -webkit-text-fill-color: #1e40af !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .settings-page .revealed-value {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .settings-page .revealed-hint { color: #92400e !important; }

/* Action buttons */
.app-shell.with-shell.light-mode .settings-page .btn-action,
.app-shell.with-shell.light-mode .settings-page .btn-ghost {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .settings-page .btn-action:hover,
.app-shell.with-shell.light-mode .settings-page .btn-ghost:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .settings-page .btn-reveal {
  background: #ffffff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .settings-page .btn-reveal:hover { background: #eff6ff !important; }
.app-shell.with-shell.light-mode .settings-page .btn-rotate {
  background: #ffffff !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
.app-shell.with-shell.light-mode .settings-page .btn-rotate:hover { background: #fef2f2 !important; }
.app-shell.with-shell.light-mode .settings-page .btn-resync {
  background: #ffffff !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
.app-shell.with-shell.light-mode .settings-page .btn-resync:hover { background: #fffbeb !important; }

/* Plan chip */
.app-shell.with-shell.light-mode .settings-page .plan-chip {
  background: #dbeafe !important;
  color: #1e40af !important;
  border: 1px solid #93c5fd !important;
  font-weight: 800 !important;
}

/* Status pill */
.app-shell.with-shell.light-mode .settings-page .status-pill {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}

/* Usage panel */
.app-shell.with-shell.light-mode .settings-page .usage-card,
.app-shell.with-shell.light-mode .settings-page .usage-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .settings-page .usage-card-main {
  background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
  border: 1px solid #bfdbfe !important;
}
.app-shell.with-shell.light-mode .settings-page .usage-label { color: #64748b !important; font-weight: 700 !important; }
.app-shell.with-shell.light-mode .settings-page .usage-number { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; font-weight: 850 !important; }
.app-shell.with-shell.light-mode .settings-page .usage-loading { color: #64748b !important; }

/* Confirm form */
.app-shell.with-shell.light-mode .settings-page .confirm-form,
.app-shell.with-shell.light-mode .settings-page .confirm-actions {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .settings-page .confirm-msg { color: #334155 !important; font-weight: 600 !important; }
.app-shell.with-shell.light-mode .settings-page .confirm-btn-yes { background: #dc2626 !important; color: #ffffff !important; border: none !important; }
.app-shell.with-shell.light-mode .settings-page .confirm-btn-no { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; }

/* Form input */
.app-shell.with-shell.light-mode .settings-page .form-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .settings-page .form-input::placeholder { color: #94a3b8 !important; }

/* Success / error boxes */
.app-shell.with-shell.light-mode .settings-page .success-box {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}
.app-shell.with-shell.light-mode .settings-page .error-msg {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.app-shell.with-shell.light-mode .settings-page .pending { color: #b45309 !important; }

/* ================================================================
   INVOICES PAGE — Light Mode
   ================================================================ */
.app-shell.with-shell.light-mode .invoices-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .invoices-page .page-header h1 { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; }
.app-shell.with-shell.light-mode .invoices-page .page-header p { color: #475569 !important; }
.app-shell.with-shell.light-mode .invoices-page .eyebrow { color: #1d4ed8 !important; }
.app-shell.with-shell.light-mode .invoices-page .eyebrow-dot { background: #2563eb !important; }
.app-shell.with-shell.light-mode .invoices-page .header-icon { color: #ffffff !important; }

/* Panel */
.app-shell.with-shell.light-mode .invoices-page .panel,
.app-shell.with-shell.light-mode .invoices-page .invoice-wrap {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}

/* Table */
.app-shell.with-shell.light-mode .invoices-page .inv-table thead tr {
  background: #e8eef6 !important;
}
.app-shell.with-shell.light-mode .invoices-page .inv-table thead th { color: #334155 !important; }
.app-shell.with-shell.light-mode .invoices-page .inv-table tbody tr { border-bottom: 1px solid #e8edf3 !important; }
.app-shell.with-shell.light-mode .invoices-page .inv-table tbody tr:hover { background: #f5f8fc !important; }
.app-shell.with-shell.light-mode .invoices-page .inv-table tbody td { color: #1e293b !important; }

/* Cells */
.app-shell.with-shell.light-mode .invoices-page .cell-invoice,
.app-shell.with-shell.light-mode .invoices-page .invoice-number { color: #0b1220 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .invoices-page .cell-plan { color: #1e293b !important; }
.app-shell.with-shell.light-mode .invoices-page .cell-amount { color: #0b1220 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .invoices-page .cell-date { color: #64748b !important; }
.app-shell.with-shell.light-mode .invoices-page .cell-status,
.app-shell.with-shell.light-mode .invoices-page .cell-action { color: #334155 !important; }

/* Plan name + cycle */
.app-shell.with-shell.light-mode .invoices-page .plan-name { color: #0b1220 !important; font-weight: 800 !important; }
.app-shell.with-shell.light-mode .invoices-page .plan-cycle { color: #64748b !important; }

/* Invoice avatar */
.app-shell.with-shell.light-mode .invoices-page .invoice-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}

/* Status pills */
.app-shell.with-shell.light-mode .invoices-page .status-pill { font-weight: 800 !important; }
.app-shell.with-shell.light-mode .invoices-page .status-paid {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
.app-shell.with-shell.light-mode .invoices-page .status-failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}
.app-shell.with-shell.light-mode .invoices-page .pill-dot { background: currentColor !important; }

/* Download button */
.app-shell.with-shell.light-mode .invoices-page .download-btn {
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .invoices-page .download-btn:hover:not(:disabled) {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
}

/* Alerts + empty */
.app-shell.with-shell.light-mode .invoices-page .alert-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.app-shell.with-shell.light-mode .invoices-page .alert-icon { color: #dc2626 !important; }
.app-shell.with-shell.light-mode .invoices-page .empty-state h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .invoices-page .empty-state p { color: #64748b !important; }
.app-shell.with-shell.light-mode .invoices-page .empty-icon {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .invoices-page .loading-state { color: #64748b !important; }
.app-shell.with-shell.light-mode .invoices-page .loading-spinner {
  border: 3px solid #cbd5e1 !important;
  border-top-color: #2563eb !important;
}

/* ================================================================
   SUPPRESSIONS PAGE — Light Mode
   ================================================================ */
.app-shell.with-shell.light-mode .sup-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sup-page .page-header h1 { color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important; }
.app-shell.with-shell.light-mode .sup-page .page-header p { color: #475569 !important; }
.app-shell.with-shell.light-mode .sup-page .eyebrow { color: #1d4ed8 !important; }
.app-shell.with-shell.light-mode .sup-page .eyebrow-dot { background: #2563eb !important; }
.app-shell.with-shell.light-mode .sup-page .header-icon { color: #ffffff !important; }

/* Tabs */
.app-shell.with-shell.light-mode .sup-page .tabs-row {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 4px !important;
  display: inline-flex !important;
  gap: 4px !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-btn {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-btn:hover {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-btn.is-active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-btn.is-active .tab-count {
  background: rgba(255, 255, 255, .25) !important;
  color: #ffffff !important;
}
.app-shell.with-shell.light-mode .sup-page .tab-dot { background: currentColor !important; }

/* Panel + table */
.app-shell.with-shell.light-mode .sup-page .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.app-shell.with-shell.light-mode .sup-page .sup-table thead tr {
  background: #e8eef6 !important;
}
.app-shell.with-shell.light-mode .sup-page .sup-table thead th { color: #334155 !important; }
.app-shell.with-shell.light-mode .sup-page .sup-table tbody tr { border-bottom: 1px solid #e8edf3 !important; }
.app-shell.with-shell.light-mode .sup-page .sup-table tbody tr:hover { background: #f5f8fc !important; }
.app-shell.with-shell.light-mode .sup-page .sup-table tbody td { color: #1e293b !important; }

/* Cells */
.app-shell.with-shell.light-mode .sup-page .email-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}
.app-shell.with-shell.light-mode .sup-page .email-text { color: #0b1220 !important; font-weight: 700 !important; }
.app-shell.with-shell.light-mode .sup-page .date-value { color: #64748b !important; }
.app-shell.with-shell.light-mode .sup-page .source-value { color: #475569 !important; }

/* Reason pills */
.app-shell.with-shell.light-mode .sup-page .reason-pill { font-weight: 800 !important; }
.app-shell.with-shell.light-mode .sup-page .reason-unsub {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.app-shell.with-shell.light-mode .sup-page .reason-bounced {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* Remove button */
.app-shell.with-shell.light-mode .sup-page .remove-btn {
  background: #ffffff !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .sup-page .remove-btn:hover:not(:disabled) {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* Empty + loading */
.app-shell.with-shell.light-mode .sup-page .empty-state h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .sup-page .empty-state p { color: #64748b !important; }
.app-shell.with-shell.light-mode .sup-page .empty-icon {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .sup-page .loading-state { color: #64748b !important; }
.app-shell.with-shell.light-mode .sup-page .loading-spinner {
  border: 3px solid #cbd5e1 !important;
  border-top-color: #2563eb !important;
}

/* ================================================================
   TEMPLATES LIST PAGE — Table header + toolbar fixes
   ================================================================ */

/* "Your templates" heading */
.app-shell.with-shell.light-mode .editor-panel h2,
.app-shell.with-shell.light-mode .editor-panel .panel h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}

/* Toolbar count ("1 template") */
.app-shell.with-shell.light-mode .toolbar-count {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 700 !important;
}

/* Search input */
.app-shell.with-shell.light-mode .search-wrap input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .search-wrap input::placeholder {
  color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .search-wrap .search-icon {
  color: #94a3b8 !important;
}
.app-shell.with-shell.light-mode .search-wrap:focus-within .search-icon {
  color: #2563eb !important;
}

/* ================================================================
   TEMPLATES TABLE — header + rows
   ================================================================ */
.app-shell.with-shell.light-mode .table-wrap {
  background: transparent !important;
}
.app-shell.with-shell.light-mode .tpl-table thead tr {
  background: #e8eef6 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}
.app-shell.with-shell.light-mode .tpl-table thead th {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .tpl-table tbody tr {
  border-bottom: 1px solid #e8edf3 !important;
  background: #ffffff !important;
}
.app-shell.with-shell.light-mode .tpl-table tbody tr:hover {
  background: #f5f8fc !important;
}
.app-shell.with-shell.light-mode .tpl-table td {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

/* Row content: name, subject, avatar */
.app-shell.with-shell.light-mode .name-avatar {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}
.app-shell.with-shell.light-mode .name-title {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .name-sub,
.app-shell.with-shell.light-mode .email-template-sub {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.app-shell.with-shell.light-mode .subject-cell,
.app-shell.with-shell.light-mode .tpl-table .subject {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Status pill "READY" */
.app-shell.with-shell.light-mode .status-ready {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}

/* Row action buttons (Edit / Duplicate / Delete) */
.app-shell.with-shell.light-mode .action-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .action-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .action-btn svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
.app-shell.with-shell.light-mode .action-delete {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .action-delete:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* "New template" button (top right) */
.app-shell.with-shell.light-mode .page-header .btn-primary,
.app-shell.with-shell.light-mode .editor-panel > .btn-primary,
.app-shell.with-shell.light-mode .page-header .header-btn.btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
}

/* Templates panel wrapper */
.app-shell.with-shell.light-mode .editor-panel .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}

/* ================================================================
   TEMPLATES LIST — Toolbar heading (exact: .toolbar h2)
   ================================================================ */
.app-shell.with-shell.light-mode .toolbar h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .templates-page .toolbar h2,
.app-shell.with-shell.light-mode .templates-page .panel h2 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}

/* ================================================================
   TABS — Button feel (Domains page + any page using .tabs + .tab-btn)
   ================================================================ */

/* Group container — pill/segmented control look */
.app-shell.with-shell.light-mode .tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04) !important;
  margin-bottom: 22px !important;
  width: auto !important;
}

/* Each tab button */
.app-shell.with-shell.light-mode .tab-btn {
  padding: 9px 18px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  border-bottom: 1px solid transparent !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  transition: all .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Hover — subtle grey fill */
.app-shell.with-shell.light-mode .tab-btn:hover:not(.active) {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}

/* Active tab — clear purple/blue gradient */
.app-shell.with-shell.light-mode .tab-btn.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28) !important;
  font-weight: 800 !important;
}

/* Dark mode — same treatment for consistency */
html:not(.light-theme) .tab-btn {
  cursor: pointer !important;
}
html:not(.light-theme) .tab-btn:hover:not(.active) {
  background: rgba(148, 163, 184, .08) !important;
  border-radius: 8px !important;
}
html:not(.light-theme) .tab-btn.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(79, 70, 229, .18)) !important;
  border-radius: 8px !important;
  border-bottom-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .2) !important;
}

/* Group in dark mode — subtle container */
html:not(.light-theme) .tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(15, 23, 42, .5) !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
  border-radius: 12px !important;
  width: auto !important;
}

/* ================================================================
   SEND TEST MAIL MODAL (Teleported to body)
   Uses html.light-theme prefix — only applies when light mode is ON.
   These modal classes exist ONLY on logged-in pages (Domains, etc.)
   so no impact on landing/login/signup.
   ================================================================ */

html.light-theme .modal-overlay {
  background: rgba(15, 23, 42, .5) !important;
}
html.light-theme .modal-backdrop {
  background: rgba(15, 23, 42, .5) !important;
  backdrop-filter: blur(6px) !important;
}

/* Modal container */
html.light-theme .modal-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0b1220 !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .25) !important;
}

/* Modal header */
html.light-theme .modal-head {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .modal-head h3 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
}
html.light-theme .modal-head p {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Modal icon — keep gradient (Send icon) */
html.light-theme .modal-icon {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #ffffff !important;
}
html.light-theme .modal-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Close button */
html.light-theme .modal-close {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
html.light-theme .modal-close:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
html.light-theme .modal-close svg {
  color: #475569 !important;
  stroke: #475569 !important;
}
html.light-theme .modal-close:hover svg {
  color: #0b1220 !important;
  stroke: #0b1220 !important;
}

/* Modal body */
html.light-theme .modal-body {
  background: #ffffff !important;
  color: #334155 !important;
}

/* Field labels */
html.light-theme .modal-body .field label {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 800 !important;
}

/* Inputs / textareas */
html.light-theme .modal-body .field input,
html.light-theme .modal-body .field textarea,
html.light-theme .modal-body .field select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
html.light-theme .modal-body .field input::placeholder,
html.light-theme .modal-body .field textarea::placeholder {
  color: #94a3b8 !important;
}
html.light-theme .modal-body .field input:focus,
html.light-theme .modal-body .field textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
  outline: none !important;
}

/* From suffix (@mailrockets.com chip) */
html.light-theme .from-row {
  background: transparent !important;
}
html.light-theme .from-suffix {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 700 !important;
}

/* Modal footer */
html.light-theme .modal-foot {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Footer buttons */
html.light-theme .modal-foot .btn-ghost {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 700 !important;
}
html.light-theme .modal-foot .btn-ghost:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
html.light-theme .modal-foot .btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
}

/* Alerts inside modal */
html.light-theme .modal-body .alert-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
html.light-theme .modal-body .alert-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

/* ================================================================
   TEMPLATES TABLE — Fit without horizontal scroll
   ================================================================ */
.app-shell.with-shell.light-mode .tpl-table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: auto !important;
}
.app-shell.with-shell.light-mode .table-wrap {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: visible !important;
}

/* Column widths — Template flexible, others fixed */
.app-shell.with-shell.light-mode .tpl-table th:nth-child(1),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(1) {
  width: 40% !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(2),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(2) {
  width: 35% !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(3),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(3) {
  width: 10% !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(4),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(4) {
  width: 15% !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* Compact padding */
.app-shell.with-shell.light-mode .tpl-table thead th {
  padding: 12px 14px !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.app-shell.with-shell.light-mode .tpl-table td {
  padding: 14px 14px !important;
}

/* Truncate long subject with ellipsis */
.app-shell.with-shell.light-mode .tpl-table td:nth-child(2) {
  max-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Actions cell — compact */
.app-shell.with-shell.light-mode .cell-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.app-shell.with-shell.light-mode .cell-actions .action-btn {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

/* Subject text visible & dark */
.app-shell.with-shell.light-mode .tpl-table tbody td:nth-child(2) {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 12.5px !important;
}

/* Status cell compact */
.app-shell.with-shell.light-mode .tpl-table td:nth-child(3) {
  text-align: center !important;
}

@media (max-width: 900px) {
  .app-shell.with-shell.light-mode .tpl-table th:nth-child(1),
  .app-shell.with-shell.light-mode .tpl-table td:nth-child(1) { width: 35% !important; }
  .app-shell.with-shell.light-mode .tpl-table th:nth-child(2),
  .app-shell.with-shell.light-mode .tpl-table td:nth-child(2) { width: 30% !important; }
  .app-shell.with-shell.light-mode .tpl-table th:nth-child(4),
  .app-shell.with-shell.light-mode .tpl-table td:nth-child(4) { width: 25% !important; }
}

/* ================================================================
   TEMPLATES TABLE — FIX v2 (proper column widths, no overlap)
   ================================================================ */

/* Reset previous constraints */
.app-shell.with-shell.light-mode .tpl-table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: fixed !important;
}
.app-shell.with-shell.light-mode .table-wrap {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: visible !important;
}

/* Column widths — Actions ko proper space do */
.app-shell.with-shell.light-mode .tpl-table th:nth-child(1),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(1) {
  width: 26% !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(2),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(2) {
  width: 30% !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(3),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(3) {
  width: 12% !important;
  text-align: center !important;
}
.app-shell.with-shell.light-mode .tpl-table th:nth-child(4),
.app-shell.with-shell.light-mode .tpl-table td:nth-child(4) {
  width: 32% !important;
  text-align: right !important;
}

/* Compact padding */
.app-shell.with-shell.light-mode .tpl-table thead th {
  padding: 12px 14px !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.app-shell.with-shell.light-mode .tpl-table td {
  padding: 14px 14px !important;
  vertical-align: middle !important;
}

/* Subject — truncate with ellipsis */
.app-shell.with-shell.light-mode .tpl-table td:nth-child(2) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 12.5px !important;
}

/* Template cell — truncate too if needed */
.app-shell.with-shell.light-mode .tpl-table td:nth-child(1) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Actions — proper flex layout */
.app-shell.with-shell.light-mode .tpl-table .cell-actions {
  display: inline-flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: 100% !important;
}

/* Buttons compact but readable */
.app-shell.with-shell.light-mode .tpl-table .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.app-shell.with-shell.light-mode .tpl-table .action-btn svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

/* Status pill compact */
.app-shell.with-shell.light-mode .tpl-table .status-pill {
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  display: inline-flex !important;
}

/* Responsive — smaller screens pe buttons icon-only */
@media (max-width: 1100px) {
  .app-shell.with-shell.light-mode .tpl-table .action-btn span:not(.keep-text) {
    display: none !important;
  }
  .app-shell.with-shell.light-mode .tpl-table .action-btn {
    padding: 8px 10px !important;
  }
  .app-shell.with-shell.light-mode .tpl-table th:nth-child(4),
  .app-shell.with-shell.light-mode .tpl-table td:nth-child(4) {
    width: 22% !important;
  }
}

/* ================================================================
   TEMPLATES TABLE — FINAL fix (icon-only buttons, proper widths)
   ================================================================ */

.app-shell.with-shell.light-mode .tpl-table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto !important;
}
.app-shell.with-shell.light-mode .table-wrap {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

/* Column widths */
.app-shell.with-shell.light-mode .tpl-table .col-name { width: 32% !important; }
.app-shell.with-shell.light-mode .tpl-table .col-subject { width: 42% !important; }
.app-shell.with-shell.light-mode .tpl-table .col-status { width: 12% !important; text-align: center !important; }
.app-shell.with-shell.light-mode .tpl-table .col-actions { width: 14% !important; text-align: right !important; }

/* Compact padding */
.app-shell.with-shell.light-mode .tpl-table thead th {
  padding: 12px 14px !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.app-shell.with-shell.light-mode .tpl-table td {
  padding: 14px 14px !important;
  vertical-align: middle !important;
}

/* Subject — truncate */
.app-shell.with-shell.light-mode .tpl-table .cell-subject .subject-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 12.5px !important;
  max-width: 100% !important;
}

/* Actions group — inline, no wrap */
.app-shell.with-shell.light-mode .tpl-table .actions-group {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Icon-only buttons */
.app-shell.with-shell.light-mode .tpl-table .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  flex-shrink: 0 !important;
}
.app-shell.with-shell.light-mode .tpl-table .action-btn svg {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}
.app-shell.with-shell.light-mode .tpl-table .action-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}

/* Edit — blue accent */
.app-shell.with-shell.light-mode .tpl-table .action-edit:hover {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #2563eb !important;
}

/* Duplicate — slate */
.app-shell.with-shell.light-mode .tpl-table .action-dup:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}

/* Delete — red */
.app-shell.with-shell.light-mode .tpl-table .action-delete {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .tpl-table .action-delete:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* Confirm Yes/No — keep as small text buttons */
.app-shell.with-shell.light-mode .tpl-table .action-confirm-yes {
  width: auto !important;
  padding: 0 10px !important;
  background: #dc2626 !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.app-shell.with-shell.light-mode .tpl-table .action-confirm-no {
  width: auto !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.app-shell.with-shell.light-mode .tpl-table .confirm-text {
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* Dark mode — same icon-only treatment */
html:not(.light-theme) .tpl-table .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

/* ================================================================
   TEMPLATES TABLE — DEFINITIVE FIX (locked widths + right-aligned)
   ================================================================ */

.app-shell.with-shell.light-mode .tpl-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
}

/* Column widths — LOCKED via class names */
.app-shell.with-shell.light-mode .tpl-table th.col-name,
.app-shell.with-shell.light-mode .tpl-table td.cell-name {
  width: 28% !important;
  max-width: 28% !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-subject,
.app-shell.with-shell.light-mode .tpl-table td.cell-subject {
  width: 38% !important;
  max-width: 38% !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-status,
.app-shell.with-shell.light-mode .tpl-table td.cell-status {
  width: 12% !important;
  max-width: 12% !important;
  text-align: center !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-actions,
.app-shell.with-shell.light-mode .tpl-table td.cell-actions {
  width: 22% !important;
  max-width: 22% !important;
  text-align: right !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
}

/* Actions group — remove flex entirely, use block + text-align */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .actions-group {
  display: block !important;
  text-align: right !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
}

/* Buttons — inline, right-aligned, no wrapping */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn {
  display: inline-flex !important;
  vertical-align: middle !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  box-sizing: border-box !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn:first-child {
  margin-left: 0 !important;
}

/* Confirm Yes/No — inline pill buttons */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-confirm-yes {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 12px !important;
  height: 32px !important;
  background: #dc2626 !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  vertical-align: middle !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-confirm-no {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 12px !important;
  height: 32px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  vertical-align: middle !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .confirm-text {
  font-size: 11.5px !important;
  color: #334155 !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMPLATES TABLE — FINAL DEFINITIVE OVERRIDE
   (sabse last me hai, isliye sab pichle rules ko beat karega)
   ════════════════════════════════════════════════════════════════ */

/* Table container — full width */
.app-shell.with-shell.light-mode .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow-x: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Table itself — full width, auto layout (NO fixed) */
.app-shell.with-shell.light-mode .tpl-table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

/* Actions header + cell — right-aligned */
.app-shell.with-shell.light-mode .tpl-table th.col-actions {
  text-align: right !important;
  width: 180px !important;
  min-width: 180px !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions {
  text-align: right !important;
  width: 180px !important;
  min-width: 180px !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Status column — center */
.app-shell.with-shell.light-mode .tpl-table th.col-status,
.app-shell.with-shell.light-mode .tpl-table td.cell-status {
  text-align: center !important;
  width: 100px !important;
}

/* Actions group — right-aligned inline-flex */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .actions-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Icon buttons — 34x34 */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all .15s ease !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn svg {
  width: 15px !important;
  height: 15px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-edit:hover {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #2563eb !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-dup:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-delete {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-delete:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* ================================================================
   CAMPAIGN DETAIL — Back to campaigns button (light mode)
   ================================================================ */
.app-shell.with-shell.light-mode .back-link {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05) !important;
  padding: 8px 14px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
}
.app-shell.with-shell.light-mode .back-link svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}
.app-shell.with-shell.light-mode .back-link:hover {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
.app-shell.with-shell.light-mode .back-link:hover svg {
  color: #1d4ed8 !important;
  stroke: #1d4ed8 !important;
}

/* ================================================================
   TEMPLATES TABLE — Row alignment polish (definitive)
   ================================================================ */

/* Lock vertical alignment across ALL cells */
.app-shell.with-shell.light-mode .tpl-table tbody td {
  vertical-align: middle !important;
  height: 72px !important;
  padding: 0 16px !important;
}

/* Template cell — avatar + text inline */
.app-shell.with-shell.light-mode .tpl-table td.cell-name {
  padding-left: 20px !important;
}
.app-shell.with-shell.light-mode .tpl-table .name-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}
.app-shell.with-shell.light-mode .tpl-table .name-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.app-shell.with-shell.light-mode .tpl-table .name-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: left !important;
}
.app-shell.with-shell.light-mode .tpl-table .name-title {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
}
.app-shell.with-shell.light-mode .tpl-table .name-sub {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

/* Subject column — vertical center */
.app-shell.with-shell.light-mode .tpl-table td.cell-subject {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}

/* Status column — center */
.app-shell.with-shell.light-mode .tpl-table td.cell-status {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Actions column — right aligned, vertical center */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions {
  text-align: right !important;
  padding-right: 22px !important;
  vertical-align: middle !important;
}

/* Icon buttons — consistent 36x36 */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin-left: 6px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transition: all .15s ease !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn:first-child {
  margin-left: 0 !important;
}
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn svg {
  width: 15px !important;
  height: 15px !important;
}

/* Row borders — clean thin lines */
.app-shell.with-shell.light-mode .tpl-table tbody tr {
  border-bottom: 1px solid #eef2f7 !important;
  transition: background .15s ease !important;
}
.app-shell.with-shell.light-mode .tpl-table tbody tr:hover {
  background: #f8fafc !important;
}
.app-shell.with-shell.light-mode .tpl-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Header row — consistent with body padding */
.app-shell.with-shell.light-mode .tpl-table thead th {
  height: 44px !important;
  padding: 0 16px !important;
  vertical-align: middle !important;
}
.app-shell.with-shell.light-mode .tpl-table thead th.col-actions {
  padding-right: 22px !important;
  text-align: right !important;
}
.app-shell.with-shell.light-mode .tpl-table thead th.col-status {
  text-align: center !important;
}

/* Dark mode — same treatment for consistency */
html:not(.light-theme) .tpl-table tbody td {
  vertical-align: middle !important;
  height: 72px !important;
}
html:not(.light-theme) .tpl-table td.cell-actions .action-btn {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}

/* ================================================================
   TEMPLATES TABLE — Actions column FAR RIGHT alignment (final fix)
   ================================================================ */

/* Force table layout with proper column widths */
.app-shell.with-shell.light-mode .tpl-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Column width locks */
.app-shell.with-shell.light-mode .tpl-table th.col-name,
.app-shell.with-shell.light-mode .tpl-table td.cell-name {
  width: 30% !important;
  max-width: 30% !important;
  min-width: 30% !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-subject,
.app-shell.with-shell.light-mode .tpl-table td.cell-subject {
  width: 38% !important;
  max-width: 38% !important;
  min-width: 38% !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-status,
.app-shell.with-shell.light-mode .tpl-table td.cell-status {
  width: 12% !important;
  max-width: 12% !important;
  min-width: 12% !important;
  text-align: center !important;
}

.app-shell.with-shell.light-mode .tpl-table th.col-actions,
.app-shell.with-shell.light-mode .tpl-table td.cell-actions {
  width: 20% !important;
  max-width: 20% !important;
  min-width: 20% !important;
  text-align: right !important;
  padding-right: 24px !important;
}

/* Actions cell — force right alignment */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions {
  display: table-cell !important;
  text-align: right !important;
  vertical-align: middle !important;
}

/* Wrapper div inside td — align content to right */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: right !important;
}

/* If there is an actions-group wrapper */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .actions-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Header alignment — match */
.app-shell.with-shell.light-mode .tpl-table thead th.col-actions {
  text-align: right !important;
  padding-right: 24px !important;
}

/* Icon buttons themselves */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-btn {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Confirm buttons override — right aligned */
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-confirm-yes,
.app-shell.with-shell.light-mode .tpl-table td.cell-actions .action-confirm-no {
  margin: 0 !important;
}

/* Subject cell — truncate properly within 38% */
.app-shell.with-shell.light-mode .tpl-table td.cell-subject .subject-text {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Header cells also align vertically */
.app-shell.with-shell.light-mode .tpl-table thead th {
  height: 48px !important;
  vertical-align: middle !important;
}

/* ================================================================
   INBOX PAGE — Light Mode
   ================================================================ */
.app-shell.with-shell.light-mode .inbox-wrapper,
.app-shell.with-shell.light-mode .inbox-page {
  background: #f1f5f9 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .inbox-page .page-header h1 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .inbox-page .page-header p { color: #475569 !important; }
.app-shell.with-shell.light-mode .inbox-page .eyebrow { color: #1d4ed8 !important; }

.app-shell.with-shell.light-mode .inbox-page .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}

/* Filter tabs */
.app-shell.with-shell.light-mode .inbox-page .filter-group {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
.app-shell.with-shell.light-mode .inbox-page .filter-btn { color: #64748b !important; }
.app-shell.with-shell.light-mode .inbox-page .filter-btn:hover { background: #e2e8f0 !important; color: #0b1220 !important; }
.app-shell.with-shell.light-mode .inbox-page .filter-btn.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.app-shell.with-shell.light-mode .inbox-page .filter-btn:not(.active) .filter-badge {
  background: #dbeafe !important;
  color: #1e40af !important;
}
.app-shell.with-shell.light-mode .inbox-page .filter-btn.active .filter-badge {
  background: rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}

/* Search */
.app-shell.with-shell.light-mode .inbox-page .search-wrap input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .inbox-page .search-wrap input::placeholder { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .inbox-page .search-wrap .search-icon { color: #94a3b8 !important; }

/* Mail rows */
.app-shell.with-shell.light-mode .inbox-page .mail-row {
  border-bottom-color: #e8edf3 !important;
  background: #ffffff !important;
}
.app-shell.with-shell.light-mode .inbox-page .mail-row:hover { background: #f5f8fc !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-row.unread { background: #f0f7ff !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-row.unread .mail-from {
  color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .inbox-page .mail-row .mail-from { color: #334155 !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-row .mail-subject { color: #475569 !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-row.unread .mail-subject {
  color: #0b1220 !important; -webkit-text-fill-color: #0b1220 !important;
}
.app-shell.with-shell.light-mode .inbox-page .mail-row .mail-preview { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-row .mail-time { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-action { color: #94a3b8 !important; }
.app-shell.with-shell.light-mode .inbox-page .mail-action:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

/* Empty state */
.app-shell.with-shell.light-mode .inbox-page .empty-panel h3 { color: #0b1220 !important; }
.app-shell.with-shell.light-mode .inbox-page .empty-panel p { color: #64748b !important; }
.app-shell.with-shell.light-mode .inbox-page .empty-icon {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* Modal */
html.light-theme .modal-box.mail-detail {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light-theme .modal-box.mail-detail .modal-head {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}
html.light-theme .modal-box.mail-detail .modal-head h3 { color: #0b1220 !important; }
html.light-theme .modal-box.mail-detail .modal-head p { color: #64748b !important; }
html.light-theme .modal-box.mail-detail .modal-close {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html.light-theme .modal-box.mail-detail .detail-meta {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.light-theme .modal-box.mail-detail .detail-meta-row span { color: #64748b !important; }
html.light-theme .modal-box.mail-detail .detail-meta-row strong { color: #0b1220 !important; }
html.light-theme .modal-box.mail-detail .detail-body { background: #ffffff !important; color: #1e293b !important; }
html.light-theme .modal-box.mail-detail .modal-foot {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}
html.light-theme .modal-box.mail-detail .btn-ghost {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light-theme .modal-box.mail-detail .btn-ghost.btn-danger {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* ================================================================
   INBOX — Reply Composer (Light Mode)
   ================================================================ */
html.light-theme .reply-overlay {
  background: rgba(15, 23, 42, .5) !important;
}
html.light-theme .reply-panel {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .2) !important;
}
html.light-theme .reply-head h4 { color: #0b1220 !important; }
html.light-theme .reply-head p { color: #64748b !important; }
html.light-theme .reply-textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0b1220 !important;
}
html.light-theme .reply-textarea::placeholder { color: #94a3b8 !important; }
html.light-theme .reply-textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
}
html.light-theme .reply-msg.error {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
html.light-theme .reply-msg.success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}