/* ═══════════════════════════════════════════════════════════════
   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 — spacing MUST come from item margins, not container
   `gap`. LANDMINE: Mautic's DashboardBundle wires jQuery UI Sortable on
   `.dashboard-widgets.cards` with `tolerance: "pointer"`. Sortable
   measures item offsets against the flex container's box; introducing
   `gap` creates non-item space the placeholder can't occupy, so drops
   silently fail (widget "won't move", or placeholder jumps to wrong slot).
   `padding !important` had the same effect on the container's client-rect.
   Give each widget an outer margin instead — Sortable handles margins
   correctly and visual spacing is preserved. See
   app/bundles/DashboardBundle/Assets/js/dashboard.js in the Mautic tree. */
.card-flex.widget {
  margin: 5px !important;
}

/* Drag handle. Mautic's Sortable uses `handle: '.card-header h4'` — ensure
   our theme overrides don't block the pointer or hide the move cursor. */
.card-header,
.card-header h4 {
  pointer-events: auto;
  cursor: move;
}

/* .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;
}

/* ═══════════════════════════════════════════════════════════════
   CHOSEN.JS ENHANCED DROPDOWNS & CONTROLS (Item #38)
   Restores native sprites/chevrons and search inputs for Mautic's
   Chosen jQuery select controls on widget-editor modals & filters.
   ═══════════════════════════════════════════════════════════════ */
.chosen-container {
  font-size: 0.875rem !important;
  color: var(--bx-text) !important;
}
.chosen-container-single .chosen-single {
  background: var(--bx-surface-2) !important;
  border: 1px solid var(--bx-border) !important;
  color: var(--bx-text) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 10px !important;
}
.chosen-container-single .chosen-single div b {
  background: none !important;
}
.chosen-container-single .chosen-single div b::after {
  content: "▼";
  font-size: 9px;
  color: var(--bx-muted);
  position: absolute;
  right: 10px;
  top: 0;
}
.chosen-container-active.chosen-with-drop .chosen-single div b::after {
  content: "▲";
}
.chosen-container-single .chosen-single abbr {
  background: none !important;
  font-size: 14px;
  color: var(--bx-muted);
  line-height: 34px;
  top: 0;
  right: 26px;
}
.chosen-container-single .chosen-single abbr::before {
  content: "✕";
}
.chosen-container .chosen-drop {
  background: var(--bx-surface) !important;
  border: 1px solid var(--bx-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 0 4px 4px !important;
}
.chosen-container .chosen-search input[type="text"] {
  background: var(--bx-bg) !important;
  border: 1px solid var(--bx-border) !important;
  color: var(--bx-text) !important;
  border-radius: 3px !important;
  padding: 4px 8px !important;
}
.chosen-container .chosen-results {
  color: var(--bx-text) !important;
}
.chosen-container .chosen-results li.highlighted {
  background: var(--bx-primary) !important;
  color: #ffffff !important;
}
.chosen-container-multi .chosen-choices {
  background: var(--bx-surface-2) !important;
  border: 1px solid var(--bx-border) !important;
  border-radius: 4px !important;
}
.chosen-container-multi .chosen-choices li.search-choice {
  background: var(--bx-surface) !important;
  border: 1px solid var(--bx-border) !important;
  color: var(--bx-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MAUTIC FORM & ENTITY EDITOR POLISH (Item #39)
   High-contrast input borders, custom select chevrons, and active
   tab highlights across Forms, Segments, Campaigns & Emails.
   ═══════════════════════════════════════════════════════════════ */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  border: 1px solid var(--bx-border) !important;
  background: var(--bx-surface-2) !important;
  color: var(--bx-text) !important;
  border-radius: 4px !important;
}
select.form-control,
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235c564e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25em 1.25em !important;
  padding-right: 2.25rem !important;
}
.builder-tabs .nav-tabs .nav-link {
  font-weight: 500;
  padding: 0.75rem 1.25rem;
}
.builder-tabs .nav-tabs .nav-link.active {
  border-bottom: 3px solid var(--bx-primary) !important;
  color: var(--bx-primary) !important;
  background: var(--bx-surface) !important;
}
.btn-cancel,
.btn.btn-cancel {
  background: var(--bx-surface-2) !important;
  border: 1px solid var(--bx-border) !important;
  color: var(--bx-text) !important;
}