/* ═══════════════════════════════════════════════════════════════
   SWITCHBOARD IFRAME POLISH FOR MAUTIC
   Hides Mautic's own logo + first-run wizard chrome and recolors
   with the Switchboard theme. Colors are live-updated via postMessage
   from the parent (see bridge.js). The fallback values below match
   DEFAULT_THEME = "sand-teal" so the first paint is correct even
   before the postMessage round-trip completes.
   Mautic 5.x uses Bootstrap 4 + a custom blue-grey theme; we override
   the Bootstrap CSS variables Mautic reads + .bg-primary, .nav, etc.
   ═══════════════════════════════════════════════════════════════ */

/* Fallback = sand-teal (DEFAULT_THEME). Overridden by bridge.js once
   the parent sends switchboard:theme with the user's selected palette. */
:root,
body {
  --bx-bg: #eae4d8;
  --bx-surface: #f5f1ea;
  --bx-surface-2: #f5f1ea;
  --bx-border: #cfc6b2;
  --bx-primary: #0d9488;
  --bx-primary-hover: #0f766e;
  --bx-text: #141210;
  --bx-muted: #5c564e;
}

/* Override Bootstrap 4 + Mautic theme defaults */
:root {
  --primary: var(--bx-primary);
  --bs-primary: var(--bx-primary);
  --bs-primary-rgb: 13, 148, 136;
  --bs-link-color: var(--bx-primary);
  --bs-link-hover-color: var(--bx-primary-hover);
  --bs-body-bg: var(--bx-bg);
  --bs-body-color: var(--bx-text);
  --bs-border-color: var(--bx-border);
  --bs-secondary-bg: var(--bx-surface);
  --bs-tertiary-bg: var(--bx-surface-2);
}

/* Page background + body text */
html, body, .app-wrapper, .container-fluid, .content-wrapper {
  background: var(--bx-bg) !important;
  color: var(--bx-text) !important;
}

/* Hide Mautic's branded chrome — top header bar */
nav.navbar,
header.navbar,
.app-header,
.top-bar,
.global-search-container {
  display: none !important;
}

/* Hide Mautic's left sidebar (we render Switchboard's own).
   Mautic uses #sidebar-container and .nav-sidebar. */
#sidebar-container,
nav.nav-sidebar,
aside.app-sidebar,
.sidebar-collapse,
.sidebar-wrap {
  display: none !important;
}

/* Make the main content fill the viewport */
.main, main, .app-content, #app-content, .container.content,
.row.content, .page-content, .content-body, .content-block {
  margin-left: 0 !important;
  padding-top: 1rem !important;
  background: var(--bx-bg) !important;
  color: var(--bx-text) !important;
}

/* Cards / panels */
.card, .panel, .box, .well, .widget {
  background: var(--bx-surface) !important;
  border-color: var(--bx-border) !important;
  color: var(--bx-text) !important;
}
.card-header, .card-body, .card-footer,
.panel-heading, .panel-body, .panel-footer {
  background: var(--bx-surface) !important;
  color: var(--bx-text) !important;
  border-color: var(--bx-border) !important;
}

/* Tables */
.table, table {
  background: var(--bx-surface) !important;
  color: var(--bx-text) !important;
}
.table th, .table td, table th, table td {
  border-color: var(--bx-border) !important;
  background: transparent !important;
  color: var(--bx-text) !important;
}
.table thead th, table thead th {
  color: var(--bx-muted) !important;
  background: var(--bx-surface-2) !important;
}
.table-hover tbody tr:hover {
  background: var(--bx-surface-2) !important;
}

/* Inputs */
input, select, textarea,
.form-control, .form-select, .input-group-text {
  background: var(--bx-bg) !important;
  border-color: var(--bx-border) !important;
  color: var(--bx-text) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--bx-muted) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bx-primary) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

/* Buttons (Bootstrap btn-* classes) */
.btn {
  border-color: var(--bx-border) !important;
}
.btn-primary, .btn-default.btn-primary, button.btn-primary {
  background-color: var(--bx-primary) !important;
  border-color: var(--bx-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, button.btn-primary:hover {
  background-color: var(--bx-primary-hover) !important;
  border-color: var(--bx-primary-hover) !important;
}
.btn-secondary, .btn-default {
  background: var(--bx-surface-2) !important;
  border-color: var(--bx-border) !important;
  color: var(--bx-text) !important;
}
.btn-link {
  color: var(--bx-primary) !important;
}

/* Badges / chips */
.badge, .label, .tag {
  background: var(--bx-surface-2) !important;
  color: var(--bx-text) !important;
  border: 1px solid var(--bx-border);
}
.badge-primary, .label-primary, .badge.bg-primary {
  background: var(--bx-primary) !important;
  color: #ffffff !important;
}

/* Tabs / nav */
.nav-tabs {
  border-bottom-color: var(--bx-border) !important;
}
.nav-tabs .nav-link {
  color: var(--bx-muted) !important;
  border: none !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bx-primary) !important;
  background: var(--bx-surface) !important;
  border-bottom: 2px solid var(--bx-primary) !important;
}

/* Modals */
.modal-content, .modal-header, .modal-footer, .modal-body {
  background: var(--bx-surface) !important;
  color: var(--bx-text) !important;
  border-color: var(--bx-border) !important;
}
.modal-backdrop {
  background: var(--bx-bg) !important;
}

/* Alerts / notifications / toasts */
.alert, .toast, .notify {
  background: var(--bx-surface-2) !important;
  color: var(--bx-text) !important;
  border-color: var(--bx-border) !important;
}
.alert-success { border-left: 3px solid #10b981 !important; }
.alert-warning { border-left: 3px solid #f59e0b !important; }
.alert-danger, .alert-error { border-left: 3px solid #ef4444 !important; }

/* Dropdowns */
.dropdown-menu {
  background: var(--bx-surface) !important;
  border-color: var(--bx-border) !important;
}
.dropdown-item {
  color: var(--bx-text) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--bx-surface-2) !important;
  color: var(--bx-text) !important;
}

/* List groups (used by Mautic for many sidebar / panel lists) */
.list-group-item {
  background: var(--bx-surface) !important;
  color: var(--bx-text) !important;
  border-color: var(--bx-border) !important;
}

/* Hide Mautic logo on login form */
.mautic-logo, img[src*="logo"], img[alt*="Mautic" i] {
  display: none !important;
}

/* Hide Mautic footer (powered-by line, version) */
footer, .footer, .app-footer {
  display: none !important;
}

/* Welcome / onboarding overlays — Mautic's first-run wizard */
.welcome-screen, .onboarding-modal, .first-run-wizard {
  display: none !important;
}

/* Login screen — softened so the bridge's loading skeleton dominates */
form[name="login"], .login-form-body {
  opacity: 0.6;
}

/* Mautic 5+ dashboard widget internals not covered by Bootstrap overrides above */

/* Dashboard flex grid — add gap between widget cards. Mautic's native
   .tile { margin: 5px } is inner padding only; the flex container needs
   an explicit gap so adjacent .card-flex.widget items don't touch. */
.dashboard-widgets.cards {
  gap: 10px !important;
  padding: 16px !important;
}

/* .tile wraps each widget's content area; defaults white in Mautic 5 */
.tile {
  background: var(--bx-surface) !important;
  color: var(--bx-text) !important;
  border-color: var(--bx-border) !important;
}

/* Empty-state placeholder shown when a chart widget has no data */
.chart-no-data {
  background: var(--bx-surface-2) !important;
  color: var(--bx-muted) !important;
}

/* Mautic utility: muted/disabled text — keep readable on dark bg */
.text-disable {
  color: var(--bx-muted) !important;
}