/* Rextractor theme override — Ferrari-inspired (red/black/white + yellow accent) */
/* Loaded after Mautic's compiled app.css/libraries.css so these rules win the cascade. */

:root {
    --rex-red: #DC0000;
    --rex-red-hover: #B00000;
    --rex-black: #0A0A0A;
    --rex-yellow: #FFD800;
}

/* =========================================================
   1) Design-token overrides
   Mautic 6 drives most of its UI color through CSS custom
   properties (scoped per theme/accent via :root[theme="..."]).
   Redeclaring them at :root with !important wins over every
   theme/accent combination regardless of specificity, since
   importance beats specificity in the cascade.
   ========================================================= */
:root {
    /* primary buttons */
    --button-primary: var(--rex-red) !important;
    --button-primary-hover: var(--rex-red-hover) !important;
    --button-primary-active: var(--rex-red-hover) !important;

    /* secondary buttons — black with white text */
    --button-secondary: var(--rex-black) !important;
    --button-secondary-hover: #1a1a1a !important;
    --button-secondary-active: #1a1a1a !important;
    --button-secondary-text: #ffffff !important;

    /* links */
    --link-primary: var(--rex-red) !important;
    --link-primary-hover: var(--rex-red-hover) !important;
    --link-secondary: var(--rex-red) !important;
    --link-visited: var(--rex-red-hover) !important;

    /* brand background (text selection, .bg-primary, .background-brand, datepicker "today") */
    --background-brand: var(--rex-red) !important;

    /* focus ring */
    --focus: var(--rex-red) !important;

    /* checkbox / radio / toggle checked state */
    --checked: var(--rex-red) !important;

    /* "brand" badge/label variant */
    --label-background-brand: var(--rex-red) !important;
    --label-color-brand: #ffffff !important;
    --label-border-brand: var(--rex-red) !important;
}

/* =========================================================
   2) Links
   ========================================================= */
a,
a:visited {
    color: var(--rex-red);
}
a:hover,
a:focus {
    color: var(--rex-red-hover);
}

/* =========================================================
   3) Buttons
   ========================================================= */
.btn-primary,
.btn-primary + .dropdown-toggle,
a.btn-primary,
button.btn-primary,
input.btn-primary {
    background-color: var(--rex-red) !important;
    border-color: var(--rex-red) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary + .dropdown-toggle:hover {
    background-color: var(--rex-red-hover) !important;
    border-color: var(--rex-red-hover) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--rex-black) !important;
    border-color: var(--rex-black) !important;
    color: #ffffff !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus {
    background-color: #1a1a1a !important;
    border-color: var(--rex-yellow) !important;
    color: #ffffff !important;
}
.btn-secondary:active,
.btn-secondary.active {
    background-color: #1a1a1a !important;
    border-color: var(--rex-yellow) !important;
    color: #ffffff !important;
}

/* Login button (login panel reinforcement) */
[name="form-login"] button[type="submit"],
[name="form-login"] .btn-primary {
    background-color: var(--rex-red) !important;
    border-color: var(--rex-red) !important;
    color: #ffffff !important;
}
[name="form-login"] button[type="submit"]:hover,
[name="form-login"] .btn-primary:hover {
    background-color: var(--rex-red-hover) !important;
    border-color: var(--rex-red-hover) !important;
}

/* =========================================================
   4) Form inputs — focus border/ring
   ========================================================= */
.form-control:focus,
.form-control:focus-visible,
input:focus,
textarea:focus,
select:focus,
.chosen-container.chosen-with-drop .chosen-single {
    border-color: var(--rex-red) !important;
    box-shadow: 0 0 0 2px rgba(220, 0, 0, 0.15) !important;
    outline-color: var(--rex-red) !important;
}

/* Checkboxes / radios / toggles — checked state */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--rex-red);
}
.toggle__switch,
.switch-primary .switch-slider {
    accent-color: var(--rex-red);
}

/* =========================================================
   5) Left sidebar — dark racing look
   ========================================================= */
.app-sidebar.sidebar-left,
.sidebar-left .sidebar-content,
.sidebar-left .scroll-content,
.nav-sidebar {
    background-color: var(--rex-black) !important;
}
.nav-sidebar > .nav > li > a,
.nav-sidebar > .nav > li > .nav-submenu > li > a,
.nav-sidebar .nav-heading {
    color: #e8e8e8 !important;
}
.nav-sidebar > .nav > li > a .icon,
.nav-sidebar > .nav > li > a .text,
.nav-sidebar > .nav > li > a .arrow {
    color: inherit !important;
}
.nav-sidebar > .nav > li > a:hover,
.nav-sidebar > .nav > li > a:focus,
.nav-sidebar > .nav > li.open > a {
    background-color: rgba(220, 0, 0, 0.15) !important;
    color: #ffffff !important;
}
.nav-sidebar > .nav > li.active > a {
    background-color: rgba(220, 0, 0, 0.18) !important;
    color: var(--rex-red) !important;
    border-left: 3px solid var(--rex-red) !important;
}
.nav-sidebar > .nav > li.active > a .icon,
.nav-sidebar > .nav > li.active > a .text {
    color: var(--rex-red) !important;
}
.nav-sidebar > .nav .nav-divider {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.sidebar-header,
.sidebar-footer {
    background-color: var(--rex-black) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Expanded submenus (e.g. "Components", "Channels") — Mautic's default
   styles these with background-color:var(--layer-accent) and
   color:var(--text-secondary), a light-gray-on-light-gray combo that
   washes out against our dark sidebar. Force dark bg + white text,
   red on hover/active/open, one shade lighter than the sidebar itself
   (#1A1A1A vs #0A0A0A) for visual hierarchy. */
.nav-sidebar > .nav > li > .nav-submenu {
    background-color: #1a1a1a !important;
}
.nav-sidebar > .nav > li > .nav-submenu > li > a {
    color: #ffffff !important;
}
.nav-sidebar > .nav > li > .nav-submenu > li > a:hover,
.nav-sidebar > .nav > li > .nav-submenu > li > a:focus,
.nav-sidebar > .nav > li > .nav-submenu > li.open > a {
    color: var(--rex-red) !important;
    background-color: rgba(220, 0, 0, 0.15) !important;
}
.nav-sidebar > .nav > li > .nav-submenu > li.active > a {
    color: var(--rex-red) !important;
    background-color: rgba(220, 0, 0, 0.18) !important;
}

/* =========================================================
   6) Top navbar — white with red accents
   ========================================================= */
#app-header,
#app-header.navbar {
    background-color: #ffffff !important;
}
#app-header a,
#app-header .search-button,
#app-header i {
    color: var(--rex-black);
}
#app-header a:hover,
#app-header a:focus,
#app-header .search-button:hover i,
#app-header i:hover {
    color: var(--rex-red) !important;
}

/* Navbar logo — Mautic ships a rule intended for circular profile
   avatars that catches ANY <img> inside .navbar-nav:
     .navbar .navbar-nocollapse .navbar-nav img {
         border-radius:100%; width:28px; min-width:28px; aspect-ratio:1/1
     }
   Our brand logo sits inside that same .navbar-nav, so it silently
   inherited aspect-ratio:1/1 (we never declared aspect-ratio inline,
   so nothing contested it), squashing the wide wordmark into a
   square box and stretching it to fill (default object-fit:fill).
   Neutralize every property from that rule explicitly, matching its
   selector specificity and adding !important so this always wins
   regardless of what else targets .navbar-nav img in the future. */
.navbar .navbar-nocollapse .navbar-nav .rex-navbar-logo,
#app-header.navbar .navbar-nocollapse .navbar-nav .rex-navbar-logo,
.mautic-brand .rex-navbar-logo {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* =========================================================
   6b) Dropdown menus — profile menu (top-right) and table row
   action menus both use the shared .dropdown-menu component.
   Mautic's default already renders these as light bg / dark text
   (no washed-out contrast issue found), but pin it explicitly so
   it can't drift with theme/accent changes, and give it the same
   red hover language as the rest of the UI.
   ========================================================= */
.dropdown-menu {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}
.dropdown-menu > li > a {
    color: #0a0a0a !important;
    background-color: transparent !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background-color: var(--rex-red) !important;
}
.dropdown-menu > li.active > a {
    color: #ffffff !important;
    background-color: var(--rex-red) !important;
}

/* =========================================================
   7) Tabs / selected states
   ========================================================= */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #000000 !important;
    border-bottom: 3px solid var(--rex-yellow) !important;
    background: transparent !important;
}
.nav > li.active > a,
.nav > li > a.active {
    color: var(--rex-red) !important;
}

/* =========================================================
   8) Tables
   ========================================================= */
.table > thead > tr > th,
.table thead th {
    background-color: var(--rex-black) !important;
    color: #ffffff !important;
    border-color: var(--rex-black) !important;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(220, 0, 0, 0.05) !important;
}

/* =========================================================
   9) Pagination
   ========================================================= */
.pagination > li > a,
.pagination > li > span {
    color: var(--rex-red);
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--rex-red) !important;
    border-color: var(--rex-red) !important;
    color: #ffffff !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    color: var(--rex-red-hover);
}

/* =========================================================
   10) Badges / labels
   ========================================================= */
.badge,
.label-brand,
.label-primary {
    background-color: var(--rex-red) !important;
    color: #ffffff !important;
}

/* =========================================================
   11) Progress bars
   ========================================================= */
.progress-bar {
    background-color: var(--rex-red) !important;
}
.progress-bar-danger {
    background-color: #7a0000 !important;
}
.progress-bar-warning {
    background-color: var(--rex-yellow) !important;
    color: #000000 !important;
}

/* =========================================================
   12) Alerts (info variant)
   ========================================================= */
.alert-info {
    background-color: rgba(220, 0, 0, 0.06) !important;
    border-color: var(--rex-red) !important;
    color: #7a0000 !important;
}
.alert-primary {
    background-color: var(--rex-red) !important;
    border-color: var(--rex-red) !important;
    color: #ffffff !important;
}

/* =========================================================
   13) Modals
   ========================================================= */
.modal-header {
    background-color: var(--rex-black) !important;
    border-bottom: 1px solid var(--rex-black) !important;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header .close {
    color: #ffffff !important;
}
.modal-footer .btn-primary {
    background-color: var(--rex-red) !important;
    border-color: var(--rex-red) !important;
    color: #ffffff !important;
}

/* =========================================================
   14) Mautibot mascot removal + tip/no-results box restyle

   mautibotGetImage() returns a base64 data: URI, so it can't be
   targeted by img[src*="mautibot"] — the reliable hook is the
   .mautibot-image wrapper class, used consistently everywhere the
   mascot appears (empty-list tips, dashboard empty state, error
   pages). Note: the notifications panel also reuses the
   .mautibot-image class for a plain emoji/text empty-state with no
   image inside — so we hide the actual <img> elements, not the
   container itself, to avoid deleting that panel's text.

   app/bundles/CoreBundle/Resources/views/Helper/noresults.html.twig
   (the "Hey! How about a tip?" box, reused on ~30 empty-list pages)
   is overridden directly in branding/ with the mascot markup
   removed and rex-noresults-alert / rex-tip-box classes added for
   the styling below. Dashboard's empty-widget tip and the
   error/exception pages aren't overridden, so they're handled here
   via the generic mascot-image hide + sibling-column expand.
   ========================================================= */
img.mautibot,
.mautibot-image img,
.mautibot-content img {
    display: none !important;
}
.mautibot-image:has(img) {
    display: none !important;
}
.mautibot-image:has(img) + [class*="col-xs-"],
.mautibot-image:has(img) + .mautibot-content {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* No Results Found alert — red left-border accent, white/light bg,
   black text, instead of the default yellow alert-warning look. */
.rex-noresults-alert {
    background-color: #fafafa !important;
    border: 1px solid #eeeeee !important;
    border-left: 4px solid var(--rex-red) !important;
    color: #0a0a0a !important;
}
.rex-noresults-alert h4 {
    color: #0a0a0a !important;
}

/* Tip box (the well containing the mascot quote) — same treatment. */
.rex-tip-box {
    background-color: #fafafa !important;
    border: 1px solid #eeeeee !important;
    border-left: 4px solid var(--rex-red) !important;
    color: #0a0a0a !important;
}
.rex-tip-box h4,
.rex-tip-box p,
.rex-tip-box i {
    color: #0a0a0a !important;
}

/* =========================================================
   15) Base surfaces — keep clean white/black
   ========================================================= */
body {
    background-color: #ffffff;
    color: #000000;
}