/* =============================================================================
   FluxForce UI — New design 2026
   Rules: CSS-only overrides, no backend changes, no LESS recompile
   ============================================================================= */

/* ── Font — Inter ────────────────────────────────────────────────────────────── */
/* Loaded via JS to avoid render-blocking */
#app-wrapper,
#app-header,
.app-sidebar,
.dropdown-menu a,
.box-layout ul.nav li a,
.page-header .pull-left {
    font-family: 'Roboto', Helvetica, sans-serif !important;
}

.header-fixed #app-header.navbar ~ #app-content > .content-body {
  padding: 70px 30px 80px 30px !important;
}
body > #app-wrapper {
    background: #f6f7f8 !important;
}
.bg-auto {
    background-color: #f6f7f8 !important;
    border-color: transparent !important;
    border-right-color: transparent !important;
    color: var(--ff-ui-text) !important;
}

/* ── Design tokens ───────────────────────────────────────────────────────────── */
:root {
    --ff-ui-w:          230px;
    --ff-ui-w-mini:      60px;
    --ff-ui-h:           60px;
    --ff-ui-bg:         #ffffff;
    --ff-ui-border:     #cfd6dd;  /* dee2e6 */
    --ff-ui-hover:      var(--ff-maincolor-light, #f3f6f8);
    --ff-ui-text:       #495057;
    --ff-ui-muted:      #adb5bd;
    --ff-ui-accent:     var(--ff-sidebar-open-color, #5CC9BA);
    --ff-ui-radius:     6px;
    --ff-ui-transition: 0.22s ease;
    /* Sidebar tint: same 12% brand-color mix used on the login right panel */
    --ff-sidebar-bg:    #ffffff;   /*color-mix(in srgb, var(--ff-main-color, #5CC9BA) 12%, white);*/
}

.label-success {
  background-color: var(--ff-main-color, #5CC9BA) !important;
}
.panel-success > .panel-heading, .panel-danger > .panel-heading {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

table tbody tr:not(#calendar table tbody tr):hover {
    background: var(--ff-maincolor-light, #DEF2F0) !important;
}

.well {
  background-color: #fff !important;
  border-radius: 3px;
}


.panel, .box-content-layout {
  background: rgba(256, 256, 256, 1);
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  font-family: 'Roboto', Helvetica, sans-serif !important;
  border: 1px solid #c5ccd2 !important;
}
.panel.panel-default > .panel-body {
  background: rgba(256, 256, 256, 1) !important;
  /*border-bottom: 1px solid var(--ff-main-color) !important;*/
  border-radius: 8px !important;
}

.panel-footer {
  padding: 10px 15px !important;
  background-color: transparent !important;
  border-top: unset !important;
  border-bottom-right-radius: unset !important;
  border-bottom-left-radius: unset !important;
}
.panel-footer .visible-sm,
.panel-footer .visible-md,
.panel-footer .visible-lg {
    background-color: transparent !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-top: 20px;
    padding-bottom: 15px;
}
.nav-tabs {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
}
.box-layout ul.nav {
  background-color: var(--ff-maincolor-light) !important;
}

#app-footer {
    border-left: 1px solid #c5ccd2 !important;
}
.pull-right {
    margin-right: 20px !important;
}
ul.pagination {
    margin-right: -70px !important;
}
.page-header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 15px 0 25px !important;
}
.content-body {
  background: #f6f7f8 !important;  /* f9fafb  f3f6f8 */
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────────── */

.app-sidebar.sidebar-left {
    background: var(--ff-sidebar-bg) !important;
    box-shadow: 1px 0 0 var(--ff-ui-border) !important;
    transition: width var(--ff-ui-transition) !important;
}

/* ── Logo / header area ──────────────────────────────────────────────────────── */
.app-sidebar.sidebar-left .sidebar-header {
    background: var(--ff-sidebar-bg) !important;
    border-bottom: 1px solid #c5ccd2 !important;
    box-shadow: none !important;
    height: var(--ff-ui-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: padding var(--ff-ui-transition), width var(--ff-ui-transition) !important;
}

/* Logo aligned left like nav items */
.app-sidebar.sidebar-left .sidebar-header .fluxforce-brand {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.app-sidebar.sidebar-left .sidebar-header .fluxforce-brand img {
    transition: opacity var(--ff-ui-transition) !important;
    margin-top: 0 !important;
}

/* ── Scroll area ─────────────────────────────────────────────────────────────── */
.app-sidebar.sidebar-left .sidebar-content {
    background: var(--ff-sidebar-bg) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent !important;
    padding-bottom: 50px !important;
}
/* Webkit — direct target on the scrollable container */
.app-sidebar.sidebar-left .sidebar-content::-webkit-scrollbar { width: 3px; }
.app-sidebar.sidebar-left .sidebar-content::-webkit-scrollbar-track { background: transparent; }
.app-sidebar.sidebar-left .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
/* Fallback generic selector kept for any other scrollable child */
.app-sidebar.sidebar-left ::-webkit-scrollbar { width: 3px; }
.app-sidebar.sidebar-left ::-webkit-scrollbar-track { background: transparent; }
.app-sidebar.sidebar-left ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* ── Sidebar font ─────────────────────────────────────────────────────────────── */
.nav-sidebar .nav-item-name,
.nav-sidebar .nav-submenu > li > a,
.nav-sidebar .nav > li.nav-header {
    font-family: 'Roboto', Helvetica, sans-serif !important;
}

/* ── Section headers (MAIN, CAMPAÑAS, etc.) ──────────────────────────────────── */
.nav-sidebar .nav > li.nav-header {
    color: var(--ff-ui-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    padding: 18px 24px 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: opacity var(--ff-ui-transition) !important;
}

/* ── Nav items ───────────────────────────────────────────────────────────────── */
.nav-sidebar > .nav > li > a {
    color: var(--ff-ui-text) !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 9px 16px 9px 13px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background var(--ff-ui-transition),
                color var(--ff-ui-transition),
                border-color var(--ff-ui-transition) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Icons — covers <i> (from addMissingIcons), span.fa (legacy), and span.icon (from replaceIcons) */
.nav-sidebar > .nav > li > a > i,
.nav-sidebar > .nav > li > a > .fa,
.nav-sidebar > .nav > li > a > .icon {
    color: var(--ff-ui-text) !important;
    font-size: 16px !important;
    width: 18px !important;
    min-width: 18px !important;     /* override app.css min-width: 26px on .icon */
    flex-shrink: 0 !important;
    float: none !important;         /* override pull-left from Mautic template */
    font-weight: 900 !important;    /* override app.css font-weight:normal — FA6 Solid requires 900 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: color var(--ff-ui-transition) !important;
}
/* Brand icons (fa-brands / fab) in sidebar need different font and weight */
.nav-sidebar > .nav > li > a > .fab,
.nav-sidebar > .nav > li > a > .icon.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Label */
.nav-sidebar > .nav > li > a .nav-item-name {
    font-size: 13.2px !important;
    font-weight: 450 !important;
    white-space: nowrap !important;
    transition: opacity var(--ff-ui-transition) !important;
    flex: 1 !important;
}

/* Hover — transparent bg (spec 0-5-2 beats FluxForceTheme 0-4-2); only text/icon change color */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.nav-group > a:hover,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.nav-group > a:focus {
    background: transparent !important;
}
.nav-sidebar > .nav > li > a:hover {
    color: var(--ff-sidebar-open-color, #5CC9BA) !important;
    border-left-color: var(--ff-sidebar-open-color, #5CC9BA) !important;
    border-left-width: 5px !important;
    padding-left: 10px !important;
}
.nav-sidebar > .nav > li > a:hover > i,
.nav-sidebar > .nav > li > a:hover > .fa,
.nav-sidebar > .nav > li > a:hover > .icon {
    color: var(--ff-sidebar-open-color, #5CC9BA) !important;
}
.nav-sidebar > .nav > li > a:hover .nav-item-name,
.nav-sidebar > .nav > li > a:hover .text {
    color: var(--ff-sidebar-open-color, #5CC9BA) !important;
}

/* Active — accent border + text */
.nav-sidebar > .nav > li.active > a {
    background: var(--ff-ui-hover) !important;
    color: var(--ff-ui-accent) !important;
    border-left-color: var(--ff-ui-accent) !important;
    border-left-width: 5px !important;
    padding-left: 10px !important;
}
.nav-sidebar > .nav > li.active > a > i,
.nav-sidebar > .nav > li.active > a > .fa,
.nav-sidebar > .nav > li.active > a > .icon {
    color: var(--ff-ui-accent) !important;
}
.nav-sidebar > .nav > li.active > a .nav-item-name,
.nav-sidebar > .nav > li.active > a .text {
    color: var(--ff-ui-accent) !important;
}

/* Active + hover — active style governs completely; hover has no visual effect (spec 0-6-2) */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.nav-group.active > a:hover,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.nav-group.active > a:focus {
    background: var(--ff-ui-hover) !important;
}
.nav-sidebar > .nav > li.active > a:hover {
    color: var(--ff-ui-accent) !important;
    border-left-color: var(--ff-ui-accent) !important;
}
.nav-sidebar > .nav > li.active > a:hover > i,
.nav-sidebar > .nav > li.active > a:hover > .fa,
.nav-sidebar > .nav > li.active > a:hover > .icon,
.nav-sidebar > .nav > li.active > a:hover .nav-item-name,
.nav-sidebar > .nav > li.active > a:hover .text {
    color: var(--ff-ui-accent) !important;
}

/* Open (parent expanded, not active) — light bg, text stays normal */
.nav-sidebar > .nav > li.open > a {
    background: var(--ff-ui-hover) !important;
    color: var(--ff-ui-text) !important;
    border-left-color: transparent !important;
}
.nav-sidebar > .nav > li.open > a > i,
.nav-sidebar > .nav > li.open > a > .fa {
    color: var(--ff-ui-text) !important;
}

/* Remove legacy yellow active dot */
.nav-sidebar > .nav > li.active > a:before,
.nav-sidebar > .nav > li.open > a:before {
    display: none !important;
}

/* Chevron — rotates 90° when parent is open */
.nav-sidebar > .nav > li > a .fa-angle-right {
    color: var(--ff-ui-muted) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    transition: transform var(--ff-ui-transition) !important;
}
.nav-sidebar > .nav > li.open > a .fa-angle-right {
    transform: rotate(90deg) !important;
}
.nav-sidebar > .nav > li > a .fa-angle-down {
    color: var(--ff-ui-muted) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
}

/* ── Sidebar width / content offset ─────────────────────────────────────────── */
.app-sidebar.sidebar-left .sidebar-header, .app-sidebar.sidebar-left .sidebar-footer {
  width: 220px !important;
}
.app-sidebar.sidebar-left {
  width: 220px !important;
}
@media (min-width: 768px) {
  .app-sidebar.sidebar-left ~ #app-header.navbar {
    left: 220px !important;
  }
}
@media (min-width: 768px) {
  .app-sidebar.sidebar-left ~ #app-footer {
    margin-left: 220px !important;
  }
}
@media (min-width: 768px) {
  .app-sidebar.sidebar-left ~ #app-content {
    margin-left: 220px !important;
  }
}

/* ── Submenus ────────────────────────────────────────────────────────────────── */
.nav-sidebar .nav-submenu {
    background: transparent !important;
    padding: 2px 0 4px !important;
}
.nav-sidebar .nav-submenu > li > a {
    color: var(--ff-ui-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 7px 16px 7px 47px !important;
    border-left: 3px solid transparent !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: all var(--ff-ui-transition) !important;
}
.nav-sidebar .nav-submenu > li > a::before {
    content: '○' !important;
    margin-right: 8px !important;
    font-size: 8px !important;
    opacity: 0.5 !important;
}
.nav-sidebar .nav-submenu > li.active > a::before {
    content: '●' !important;
    opacity: 1 !important;
    color: var(--ff-ui-accent) !important;
}
.nav-sidebar .nav-submenu > li > a:hover {
    color: var(--ff-ui-accent) !important;
    background: var(--ff-ui-hover) !important;
    /*border-left-color: var(--ff-ui-accent) !important;*/
}
.nav-sidebar .nav-submenu > li.active > a {
    color: var(--ff-ui-accent) !important;
    font-weight: 500 !important;
}

/* ── Bottom bar (hide legacy text minimizer — replaced by navbar icon) ───────── */
.nav.sidebar-left-dark {
    display: none !important;
}

/*  CARDS  */
.card {
  background: #f4f4f4 !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.09) !important;
  border: 1px solid var(--ff-ui-border) !important;
  border-radius: 8px !important;
}


/* =============================================================================
   SIDEBAR — COLLAPSED STATE  (html.sidebar-minimized)
   ============================================================================= */

html.sidebar-minimized .app-sidebar.sidebar-left,
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-header,
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-footer {
    width: var(--ff-ui-w-mini) !important;
}
@media (min-width: 768px) {
    html.sidebar-minimized .app-sidebar.sidebar-left ~ #app-header.navbar {
        left: var(--ff-ui-w-mini) !important;
    }
}
@media (min-width: 768px) {
    html.sidebar-minimized .app-sidebar.sidebar-left ~ #app-footer {
        margin-left: var(--ff-ui-w-mini) !important;
    }
}
@media (min-width: 768px) {
    html.sidebar-minimized .app-sidebar.sidebar-left ~ #app-content {
        margin-left: var(--ff-ui-w-mini) !important;
    }
}

html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-header {
    padding: 0 !important;
    justify-content: center !important;
}

html.sidebar-minimized .nav-sidebar > .nav > li > a {
    padding: 10px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-left-width: 0 !important;
}
/* Override base hover rule that adds border-left:5px + padding-left:10px */
html.sidebar-minimized .nav-sidebar > .nav > li > a:hover {
    border-left-width: 0 !important;
    padding-left: 0 !important;
    background: var(--ff-ui-hover) !important;
}
/* Active / open: subtle tinted background + accent icon; no border offset */
html.sidebar-minimized .nav-sidebar > .nav > li.active > a {
    border-left-width: 0 !important;
    background: color-mix(in srgb, var(--ff-main-color, #5CC9BA) 10%, transparent) !important;
}
html.sidebar-minimized .nav-sidebar > .nav > li.open > a {
    border-left-width: 0 !important;
}

html.sidebar-minimized .nav-sidebar > .nav > li > a .nav-item-name,
html.sidebar-minimized .nav-sidebar > .nav > li > a .text {
    display: none !important;
    margin-left: 0 !important;
}

/* Hide the scrollbar that FluxForceTheme.css forces in collapsed mode.
   FluxForceTheme sets overflow:scroll !important on .scroll-wrapper — this
   consumes ~15px from the 60px sidebar, making justify-content:center land
   off the visual midpoint and leaving a visible scrollbar track.
   Our selector adds the html element type (+1 type specificity), which beats
   FluxForceTheme's class-only selector at equal !important weight. */
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper,
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper > .scroll-content {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper::-webkit-scrollbar,
html.sidebar-minimized .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper > .scroll-content::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}

html.sidebar-minimized .nav-sidebar > .nav > li > a > i,
html.sidebar-minimized .nav-sidebar > .nav > li > a > .fa,
html.sidebar-minimized .nav-sidebar > .nav > li > a > .icon {
    font-size: 18px !important;
    width: 22px !important;
    min-width: 0 !important;
    flex: 0 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Section headers: small dot separator (NobleUI style) */
html.sidebar-minimized .nav-sidebar .nav > li.nav-header {
    padding: 10px 0 4px !important;
    text-align: center !important;
    font-size: 0 !important;
}

/* Arrow icons hidden when collapsed */
html.sidebar-minimized .nav-sidebar > .nav > li > a .fa-angle-right,
html.sidebar-minimized .nav-sidebar > .nav > li > a .fa-angle-down {
    display: none !important;
}


/* =============================================================================
   SIDEBAR — HOVER EXPAND  (html.sidebar-minimized.ff-sidebar-hovered)
   ============================================================================= */

html.sidebar-minimized.ff-sidebar-hovered .app-sidebar.sidebar-left .sidebar-content {
    width: var(--ff-ui-w) !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1) !important;
    z-index: 1100 !important;
}

/* Restore scrolling in the expanded-on-hover panel */
html.sidebar-minimized.ff-sidebar-hovered .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper,
html.sidebar-minimized.ff-sidebar-hovered .app-sidebar.sidebar-left .sidebar-content > .scroll-wrapper > .scroll-content {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}

html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a {
    padding: 9px 16px 9px 13px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-left-width: 3px !important;
}
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a:hover {
    padding-left: 10px !important;
    border-left-width: 5px !important;
}

/* Restore section header text */
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar .nav > li.nav-header {
    font-size: 10px !important;
    text-align: left !important;
    padding: 18px 24px 5px !important;
}
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar .nav > li.nav-header::after {
    display: none !important;
}

/* Show label text on hover-expand. The label span carries BOTH "nav-item-name"
   AND "text" classes (see CoreBundle Menu/main.html.php) — the base theme's
   ".text" rule sets margin-left:-500px to hide it, which our collapsed-state
   rule above also neutralizes, but we must explicitly reset it back to 0 here
   too, otherwise the text stays shifted off-canvas (invisible) even at opacity:1.
   Selector is intentionally as specific as the collapsed-state hide rule
   (".sidebar-minimized .nav-sidebar > .nav > li > a .nav-item-name", which also
   still matches while hovered since .sidebar-minimized never gets removed) PLUS
   the extra ".ff-sidebar-hovered" class, so it always wins the specificity tie. */
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a .nav-item-name,
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a .text {
    display: inline !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    transition: none !important;
    color: var(--ff-ui-text) !important;
}
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li.active > a .nav-item-name,
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li.active > a .text {
    color: var(--ff-ui-accent) !important;
}

/* Show arrow icons again */
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a .fa-angle-right,
html.sidebar-minimized.ff-sidebar-hovered .nav-sidebar > .nav > li > a .fa-angle-down {
    display: inline !important;
}


/* =============================================================================
   TOOLTIPS
   ============================================================================= */

/* Brand-colored tooltips — background uses main color, arrow matches */
.tooltip {
    opacity: 1 !important;
}
.tooltip .tooltip-inner {
    background-color: var(--ff-main-color) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
}
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--ff-main-color) !important; }
.tooltip.top    .tooltip-arrow { border-top-color:    var(--ff-main-color) !important; }
.tooltip.left   .tooltip-arrow { border-left-color:   var(--ff-main-color) !important; }
.tooltip.right  .tooltip-arrow { border-right-color:  var(--ff-main-color) !important; }

/* =============================================================================
   NAVBAR
   ============================================================================= */

/* ── Main bar ────────────────────────────────────────────────────────────────── */
/* ── Glass effect (frosted/blurred backdrop while content scrolls underneath) ── */
#app-header.navbar {
    background: rgba(255, 255, 255, 0.32) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid var(--ff-ui-border) !important;
    box-shadow: none !important;
    min-height: var(--ff-ui-h) !important;
    max-height: var(--ff-ui-h) !important;
    padding: 0 !important;
}

#app-header .navbar-nocollapse {
    height: var(--ff-ui-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.32) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid #c5ccd2 !important;
    box-shadow: 0 4px 24px rgba(31, 41, 55, 0.08) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Left / right groups */
#app-header .navbar-nav {
    display: flex !important;
    align-items: center !important;
    height: var(--ff-ui-h) !important;
    float: none !important;
    margin: 0 !important;
}
#app-header .navbar-nav > li {
    height: var(--ff-ui-h) !important;
    display: flex !important;
    align-items: center !important;
}
#app-header .navbar-nav > li > a {
    height: auto !important;
    padding: 6px 10px !important;
    line-height: normal !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: var(--ff-ui-radius) !important;
    color: #6c757d !important;
    transition: background var(--ff-ui-transition), color var(--ff-ui-transition) !important;
}
#app-header .navbar-nav > li > a:hover {
    background: transparent !important;
    color: var(--ff-ui-accent) !important;
}

/* ── Flex order: left(1) → toolbar/Tutorial(2) → right items pushed far right(3) */
#app-header .navbar-left {
    order: 1 !important;
    flex-shrink: 0 !important;
}
#app-header .navbar-toolbar {
    order: 2 !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    height: var(--ff-ui-h) !important;
    margin: 0 !important;
    padding: 0 !important;
}
#app-header .navbar-right {
    order: 3 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
#app-header.navbar .navbar-nocollapse .navbar-right .open > a::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #fff !important;
    position: absolute;
    right: 26px;
    transform: rotate(45deg);
    border-top: 1px solid var(--ff-ui-border) !important;
    border-left: 1px solid var(--ff-ui-border) !important;
    bottom: -30px;
}
#app-header.navbar .navbar-nocollapse .navbar-right .open > #notify-menu::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff !important;
  position: absolute;
  right: 26px;
  transform: rotate(45deg);
  border-top: 1px solid var(--ff-ui-border) !important;
  border-left: 1px solid var(--ff-ui-border) !important;
  bottom: -26px;
}
#app-header.navbar .navbar-nocollapse .navbar-right #admin-menu {
    margin-right: 5px !important;
}
#app-header.navbar .navbar-nocollapse .navbar-right .open > #admin-menu::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff !important;
  position: absolute;
  right: 26px;
  transform: rotate(45deg);
  border-top: 1px solid var(--ff-ui-border) !important;
  border-left: 1px solid var(--ff-ui-border) !important;
  bottom: -26px;
}

/* ── Sidebar toggle in navbar ────────────────────────────────────────────────── */
/* Restyle the existing sidebar-minimizer in the navbar */
#app-header li a.sidebar-minimizer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: var(--ff-ui-radius) !important;
    background: transparent !important;
    color: #6c757d !important;
    font-size: 18px !important;
    transition: background var(--ff-ui-transition), color var(--ff-ui-transition) !important;
    margin: 0 4px !important;
}
#app-header li a.sidebar-minimizer:hover {
    background: transparent !important;
    color: var(--ff-ui-accent) !important;
}
/* Hide the default arrow span — JS replaces it with BI icon */
#app-header li a.sidebar-minimizer .arrow {
    display: none !important;
}

/* ── Profile trigger — avatar only, no name, no caret ───────────────────────── */
/* All states locked to the same box model to prevent layout shift on click.   */
#app-header .navbar-right > li > a,
#app-header .navbar-right > li > a:hover,
#app-header .navbar-right > li > a:focus,
#app-header .navbar-right > li > a:active,
#app-header .navbar-right > li.open > a,
#app-header .navbar-right > li.open > a:hover,
#app-header .navbar-right > li.open > a:focus {
    background: transparent !important;
    color: #495057 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hide name text and Bootstrap caret from trigger */
#app-header .navbar-right .text.fw-sb,
#app-header .navbar-right a.dropdown-toggle .caret {
    display: none !important;
}

/* app.css lines 164-171 add a clearfix via ::before/::after (display:table)  */
/* to every navbar <a>. Inside a display:flex <a> these become flex items.    */
/* When .open is added, they switch to position:absolute (arrow triangle) and */
/* exit flex flow — the <a> shrinks and the avatar shifts.                     */
/* Fix: keep them position:absolute at 0×0 in ALL states so flex size never  */
/* changes. The .open rules in app.css then add the visible triangle on top.  */
#app-header .navbar-right li.dropdown > a::before,
#app-header .navbar-right li.dropdown > a::after {
    position: absolute !important;
    display: block !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Avatar circle — clean border */
#app-header .navbar-right .img-wrapper {
    border-radius: 50% !important;
    overflow: hidden !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border: none !important;
    transition: border-color var(--ff-ui-transition) !important;
}
#app-header .navbar-right .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
/*#app-header .navbar-right li.open .img-wrapper,
#app-header .navbar-right .dropdown-toggle:hover .img-wrapper {
    border-color: var(--ff-ui-accent) !important;
}*/

/* Icons (notifications, search, gear) */
#app-header .navbar-nav > li > a > .fa,
#app-header .navbar-nav > li > a > i.fa {
    font-size: 18px !important;
    color: var(--ff-ui-text);
}
#app-header .navbar-nav > li > a > .fa:hover,
#app-header .navbar-nav > li > a > i.fa:hover {
    color: var(--ff-main-color) !important;
}

#showtuto {
    font-size: 14px !important;
}

/* =============================================================================
    DROPDOWN
   ============================================================================= */

#app-header .navbar-right .dropdown-menu {
    width: 240px !important;
    padding: 0 !important;
    border: 1px solid var(--ff-ui-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-bottom: 8px !important;
    padding-top: 5px !important;
}

/* Header injected by JS */
.ff-profile-header {
    padding: 15px 16px 16px !important;
    text-align: center !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ff-ui-border) !important;
    display: block !important;
}
.ff-profile-header img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--ff-ui-border) !important;
    display: block !important;
    margin: 0 auto 10px !important;
}
.ff-profile-header .ff-profile-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #343a40 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}
.ff-profile-header .ff-profile-email {
    font-size: 12px !important;
    color: var(--ff-ui-muted) !important;
    word-break: break-all !important;
}

/* Dropdown items */
.dropdown-menu.dropdown-menu-right li {
  margin-top: 5px !important;
}
#app-header .navbar-right .dropdown-menu li:not(.ff-profile-header-li) > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ff-ui-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    transition: background var(--ff-ui-transition), color var(--ff-ui-transition) !important;
    white-space: nowrap !important;
    margin: 0 10px !important;
}
#app-header .navbar-right .dropdown-menu li:not(.ff-profile-header-li) > a:hover {
    background: var(--ff-ui-hover) !important;
    color: #000 !important;
    border-color: transparent !important;
    border-radius: 5px;
}
#app-header .navbar-right .dropdown-menu li:not(.ff-profile-header-li) > a > i {
    font-size: 15px !important;
    color: var(--ff-ui-muted) !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color var(--ff-ui-transition) !important;
}
#app-header .navbar-right .dropdown-menu li:not(.ff-profile-header-li) > a:hover > i {
    color: #000 !important;
}

/* Divider */
#app-header .navbar-right .dropdown-menu .divider {
    margin: 0 !important;
    border-color: var(--ff-ui-border) !important;
}
.dropdown-menu a {
  line-height: 100% !important;
}

/* =============================================================================
   SETTINGS DROPDOWN (#ff-settings-dropdown)
   Built by JS from #OffCanvasRight pre-rendered content
   ============================================================================= */

#ff-settings-dropdown {
    min-width: 230px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Section labels */
#ff-settings-dropdown .dropdown-header {
    color: var(--ff-ui-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 10px 16px 4px !important;
}

/* Dividers between sections */
#ff-settings-dropdown .divider {
    margin: 4px 0 !important;
    border-color: var(--ff-ui-border) !important;
}

#app-header #notify-menu-icon,
#app-header #admin-menu-icon {
    font-size: 20px !important;
    color: var(--ff-ui-text) !important;
}
#app-header #notify-menu-icon:hover,
#app-header #admin-menu-icon:hover {
    color: var(--ff-main-color) !important;
}
/* ── Notification bell — dropdown items ─────────────────────────────────────── */
#ff-notify-dropdown {
    min-width: 260px !important;
    padding: 6px 0 !important;
}
#ff-notify-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--ff-ui-text) !important;
    transition: background var(--ff-ui-transition) !important;
}
#ff-notify-dropdown li a:hover {
    background: var(--ff-ui-hover) !important;
}
#ff-notify-dropdown li a i {
    font-size: 15px !important;
    color: var(--ff-main-color) !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
#ff-notify-empty {
    display: flex !important;
    justify-content: center !important;
    padding: 18px 16px !important;
}
.ff-notify-empty-text {
    font-size: 13px !important;
    color: var(--ff-ui-muted) !important;
}

/* ── Notification bell pulse indicator ─────────────────────────────────────── */
#app-header #notify-menu {
  position: relative;
}
#app-header #notify-menu .indicator {
  display: none;        /* shown by JS when count > 0 */
  position: absolute;
  top: 0;
  right: 3px;
  pointer-events: none;
}
#app-header #notify-menu .indicator .circle {
  background: var(--ff-main-color, #f80e0e);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}
#app-header #notify-menu .indicator .circle::before {
  content: "";
  background-color: var(--ff-main-color, #f80e0e);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  animation: ff-pulse .9s ease-out infinite;
}

@keyframes ff-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}


/* =============================================================================
   CONTENT AREA
   ============================================================================= */

#app-content {
    background-color: #f5f6fa !important;
}


/* =============================================================================
   PAGE HEADER — title + toolbar (applies to all pages)
   ============================================================================= */

/* Outline brand style — covers page-header action buttons (Nuevo, Edición masiva, ▼)
   AND the "Búsqueda avanzada..." btn injected by FluxforceFiltersBundle JS */
.std-toolbar .btn-default {
    min-height: 36px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background .2s, color .2s, border-color .2s !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
}
.std-toolbar .btn-default:hover,
.std-toolbar .btn-default:focus {
    background: var(--ff-main-color) !important;
    color: #fff !important;
}
.std-toolbar .btn-default span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.std-toolbar .btn-default i {
    color: inherit !important;
}
.std-toolbar .btn-default:hover i,
.std-toolbar .btn-default:focus i {
    color: #fff !important;
}
/* Caret dropdown — compact square, no padding */
.std-toolbar .dropdown-toggle {
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ── Primary toolbar button (new/edit template actions) ─────────────────────── */
/* page_actions.html.php adds ff-toolbar-btn-primary to 'new' and 'edit' actions */
.std-toolbar .btn-default.ff-toolbar-btn-primary {
    background: var(--ff-main-color) !important;
    color: #fff !important;
    border-color: var(--ff-main-color) !important;
}
.std-toolbar .btn-default.ff-toolbar-btn-primary:hover,
.std-toolbar .btn-default.ff-toolbar-btn-primary:focus {
    background: var(--ff-sidebar-open-color, #4db8a8) !important;
    border-color: var(--ff-sidebar-open-color, #4db8a8) !important;
    color: #fff !important;
}
.std-toolbar .btn-default.ff-toolbar-btn-primary i,
.std-toolbar .btn-default.ff-toolbar-btn-primary .fa {
    color: #fff !important;
}
.std-toolbar .btn-default.ff-toolbar-btn-primary:hover i,
.std-toolbar .btn-default.ff-toolbar-btn-primary:hover .fa,
.std-toolbar .btn-default.ff-toolbar-btn-primary:focus i,
.std-toolbar .btn-default.ff-toolbar-btn-primary:focus .fa {
    color: #fff !important;
}

/* ── FA6 font override ───────────────────────────────────────────────────────── */
/* Mautic core loads FA4 which can override FA6's .fa { font-family } via cascade.
   This ensures FA6 Free Solid always wins for icon elements across the entire app.
   Elements with .fab are Brand icons — excluded so their font-family stays correct. */
i.fa:not(.fab),
.btn i.fa:not(.fab),
.dropdown-menu i.fa:not(.fab) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
/* Brand icons rendered as <i class="fab fa-*"> */
i.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.fa.pull-left {
  margin-right: 0 !important;
}

/* h3 → h4 visual weight with Roboto */
.page-header h3 {
    font-size: 20px !important;
    font-weight: 500 !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Toolbar: flex so date form + buttons sit on one line */
.page-header #toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

/* ── Dashboard toolbar wrapper ───────────────────────────────────────────────── */
.ff-ui-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Reset Bootstrap table-layout inside the date input-group */
.ff-ui-toolbar .form-filter {
    max-width: none !important;
}
.ff-ui-toolbar .form-filter .input-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
}
.ff-ui-toolbar .form-filter .input-group > * {
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    position: static !important;
}

/* Date inputs */
.ff-ui-toolbar .form-filter .form-control {
    height: 36px !important;
    min-width: 108px !important;
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    color: #374151 !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 10px !important;
    line-height: 36px !important;
}
.ff-ui-toolbar .form-filter .form-control:focus,
.panel-body .box-layout .form-control:focus {
    border-color: var(--ff-main-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* "Desde" / "Hasta" label addons → calendar-icon style */
.ff-ui-toolbar .form-filter .input-group-addon {
    background: #fff !important;
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    height: 36px !important;
    align-items: center !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    white-space: nowrap !important;
    line-height: 36px !important;
}

/* ── Datepicker (jQuery UI) — hover day ─────────────────────────────────────── */
.ui-datepicker .ui-datepicker-calendar td .ui-state-hover,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover {
    background: var(--ff-main-color) !important;
    color: #fff !important;
    border-color: var(--ff-main-color) !important;
    border-radius: 4px !important;
}
.xdsoft_today_button, .xdsoft_prev, .xdsoft_next {
    color: var(--ff-main-color) !important;
}

/* Apply button — secondary outline style */
.ff-ui-toolbar .form-filter .input-group-btn,
.ff-ui-toolbar .form-filter .input-group-btn .btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    position: static !important;
    width: auto !important;
}
.ff-ui-toolbar .form-filter .input-group-btn .btn, #btn-filter {
    padding: 0 14px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: border-color .2s, color .2s !important;
    white-space: nowrap !important;
    min-height: 36px !important;
}
.ff-ui-toolbar .form-filter .input-group-btn .btn:hover, #btn-filter:hover {
    background: var(--ff-main-color) !important;
    color: #fff !important;
}

/* Icon-only buttons (search magnifying glass, help "?") — square, centered icon,
   no text padding so they don't look squashed next to the text buttons */
.ff-ui-toolbar .form-filter .input-group-btn .btn.btn-search,
.ff-ui-toolbar .form-filter .input-group-btn .btn[data-toggle="modal"] {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
}

/* .std-toolbar wrapper from page_actions */
.ff-ui-toolbar .std-toolbar {
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Primary action button (.ff-btn-primary-action) ──────────────────────────── */
a.ff-btn-primary-action,
button.ff-btn-primary-action {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 6px !important;
    background: var(--ff-main-color) !important;
    color: #fff !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    white-space: nowrap !important;
}
a.btn.ff-btn-primary-action:hover,
a.btn.ff-btn-primary-action:focus,
button.btn.ff-btn-primary-action:hover,
button.btn.ff-btn-primary-action:focus {
    background: var(--ff-sidebar-open-color, #4db8a8) !important;
    color: #fff !important;
    opacity: 1 !important;
    text-decoration: none !important;
}
.ff-btn-primary-action i,
.ff-btn-primary-action .fa {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.ff-btn-primary-action span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}


/* =============================================================================
   LOGIN PAGE  (MauticUserBundle:Security:base.html.php)
   ============================================================================= */

body.ff-login-body {
    font-family: 'Roboto', Helvetica, sans-serif;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    color: #1a1d23;
    margin: 0;
    padding: 0;
}
body.ff-login-body * { box-sizing: border-box; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.ff-login-wrap { display: flex; height: 100vh; }

/* ── Carousel panel (left) ───────────────────────────────────────────────────── */
.ff-login-right {
    flex: 1;
    background: var(--ff-login-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    overflow: hidden;
}

.ff-carousel { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }

.ff-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: ff-fadein .45s ease;
}
.ff-slide.active { display: flex; }
@keyframes ff-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ff-slide svg { width: 100%; max-width: 400px; height: auto; margin-bottom: 28px; }

.ff-slide-title {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    font-family: 'Roboto', Helvetica, sans-serif;
}
.ff-slide-desc { font-size: 14px; color: #6b7280; max-width: 320px; line-height: 1.65; }

.ff-carousel-dots { display: flex; gap: 7px; margin-top: 28px; }
.ff-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,0,0,.15); cursor: pointer;
    transition: all .28s;
}
.ff-dot.active { width: 24px; border-radius: 4px; background: var(--ff-main-color); }

/* ── Form panel (right) ──────────────────────────────────────────────────────── */
.ff-login-left {
    width: 42%;
    min-width: 360px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 60px;
    position: relative;
}
.ff-login-logo {
    max-height: 42px;
    max-width: 200px;
    margin-bottom: 40px;
    object-fit: contain;
}
.ff-login-form-wrap { width: 100%; max-width: 360px; }
.ff-login-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
    font-family: 'Roboto', Helvetica, sans-serif;
}
.ff-login-subtitle { font-size: 14px; color: #6b7280; margin-bottom: 28px; }
.ff-login-copy {
    position: absolute;
    bottom: 22px;
    left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    color: #adb5bd;
}

/* Scoped reset — avoids breaking Bootstrap panels on authenticated pages */
.ff-login-left .panel,
.ff-login-left #main-panel-flash-msgs { all: unset; display: block; width: 100%; }

/* Scoped alert */
.ff-login-left .alert { border-radius: 10px; margin-bottom: 16px; padding: 12px 16px; font-size: 13px; }

/* ── Form fields ─────────────────────────────────────────────────────────────── */
.ff-field { position: relative; margin-bottom: 14px; }
.ff-field input {
    width: 100% !important;
    height: 50px !important;
    border: 1.5px solid #c5ccd2 !important;
    border-radius: 50px !important;
    padding: 0 48px 0 22px !important;
    font-size: 14px !important;
    color: #111827 !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .2s !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
}
.ff-field input:focus { border-color: var(--ff-main-color) !important; }
.ff-field input::placeholder { color: #9ca3af !important; }

.ff-pw-toggle {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #9ca3af; padding: 0; display: flex; align-items: center;
}
.ff-pw-toggle:hover { color: var(--ff-main-color); }
.ff-pw-toggle svg { width: 20px; height: 20px; }

.ff-forgot { text-align: right; margin-bottom: 20px; }
.ff-forgot a { font-size: 13px; color: var(--ff-main-color); text-decoration: none; }
.ff-forgot a:hover { text-decoration: underline; }

.ff-btn-login {
    width: 100%; height: 50px; border: none; border-radius: 50px;
    background: var(--ff-main-color); color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: opacity .2s, transform .12s; letter-spacing: .3px;
    font-family: 'Roboto', Helvetica, sans-serif;
}
.ff-btn-login:hover  { opacity: .88; transform: translateY(-1px); }
.ff-btn-login:active { transform: translateY(0); }
.ff-btn-login:disabled { cursor: default; opacity: .88; transform: none; }

.ff-btn-login .ff-btn-spinner {
    display: none;
    width: 18px; height: 18px;
    margin: 0 auto;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ff-spin .7s linear infinite;
}
.ff-btn-login.is-loading .ff-btn-spinner { display: block; }
.ff-btn-login.is-loading .ff-btn-label   { display: none; }

@keyframes ff-spin {
    to { transform: rotate(360deg); }
}

/* ── SSO buttons ─────────────────────────────────────────────────────────────── */
.ff-sso { list-style: none; margin-top: 18px; }
.ff-sso a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: 1.5px solid #c5ccd2; border-radius: 50px;
    text-decoration: none; color: #374151; font-size: 13px;
    margin-bottom: 10px; transition: border-color .2s;
    font-family: 'Roboto', Helvetica, sans-serif;
}
.ff-sso a:hover { border-color: var(--ff-main-color); }
.ff-sso img { height: 16px; }

#updatemasivelead_action_update_scope label {
  font-size: 13px !important;
  margin-right: 30px;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.ff-login-body { overflow: auto; }
    .ff-login-wrap  { flex-direction: column; height: auto; min-height: 100vh; }
    .ff-login-left  { width: 100%; min-width: 0; padding: 36px 28px 56px; }
    .ff-login-right { width: 100%; padding: 36px 24px; }
}

/* =============================================================================
   DASHBOARD WIDGET CARDS — spacing
   Core sets .dashboard-widgets .card { margin: 5px } (10px gap between cards).
   Bump to 10px each side so adjacent cards land 20px apart, same gutter as
   the .ff-kpi-card row above.
   ============================================================================= */
.dashboard-widgets .card {
    margin: 10px !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.09) !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    border: 1px solid var(--ff-ui-border) !important;
    background-color: #fff !important;
}

/* =============================================================================
   DASHBOARD KPI CARDS
   ============================================================================= */

.ff-kpi-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
.ff-kpi-col {
    flex: 1 1 33.333%;
    min-width: 280px;
    box-sizing: border-box;
}
.dashboard-widgets.cards {
    padding: 10px 0 !important;
}
.ff-kpi-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 22px;
    margin: 10px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.09) !important;
    font-family: 'Roboto', Helvetica, sans-serif;
    border: 1px solid var(--ff-ui-border) !important;
}
.card {
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}
.dashboard-widgets.cards {
    padding-top: 0px !important;
}

.ff-kpi-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 14px;
}

.ff-kpi-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ff-kpi-figures { flex: 0 0 auto; }

.ff-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.ff-kpi-change {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ff-kpi-change.is-up   { color: #00B49C; }
.ff-kpi-change.is-down { color: #ef4444; }
.ff-kpi-change i { font-size: 11px; }

.ff-kpi-chart {
    flex: 1 1 auto;
    height: 56px;
    min-width: 90px;
    max-width: 160px;
}
.ff-kpi-chart canvas { width: 100% !important; height: 100% !important; }

.ff-control {
  box-shadow: unset;
}

#list-search {
    box-shadow: unset !important;
}

/* ── Search input-group: gap between ? help button, input, and 🔍 button ──────── */
/* Bootstrap input-group uses table-cell display (no gaps). Convert to flex so the
   border-radius on each element is visible with natural spacing between them. */
.panel-body .box-layout .form-inline .input-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
}
.panel-body .box-layout .form-inline .input-group .form-control {
    border-radius: 6px !important;
}
.panel-body .box-layout .form-inline .input-group .input-group-btn {
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Filter bar buttons (search "?", search icon, toolbar ⚡/🔒) ─────────────── */
/* Targets buttons in the box-layout left (form-inline) and right (text-right) */
.panel-body .box-layout .btn-default {
    padding: 0 12px !important;
    height: 34px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background .2s, color .2s !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    vertical-align: middle !important;
}
.panel-body .box-layout .btn-default:hover,
.panel-body .box-layout .btn-default:focus {
    background: var(--ff-main-color) !important;
    color: #fff !important;
}
.panel-body .box-layout .btn-default i {
    color: inherit !important;
}

.panel-body .box-layout .text-right .btn-default {
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
}

/* ── List/card view switch (moved to toolbar right via JS) ──────────────────── */
.card-list-sw {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 6px !important;
}
.card-list-sw .btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background .2s, color .2s !important;
}
.card-list-sw .btn.btn-success,
.card-list-sw .btn:hover {
    background: var(--ff-main-color) !important;
    color: #fff !important;
}

/* ── Toolbar select fields (Oportunidades process/owner selectors) ───────────── */
.panel-body .box-layout .ff-control {
    height: 34px !important;
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: border-color .18s ease !important;
    box-shadow: none !important;
}
.panel-body .box-layout .ff-control:hover,
.panel-body .box-layout .ff-control:focus {
    border-color: var(--ff-main-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── List row dropdown toggles (the ▼ caret next to each row checkbox) ──────── */
.input-group-btn .btn-default.dropdown-toggle i {
    color: var(--ff-main-color) !important;
}
.input-group-btn .btn-default.dropdown-toggle:hover i {
    color: #fff !important;
}
.input-group-btn .btn-default.dropdown-toggle:active i {
    color: var(--ff-main-color) !important;
}

.panel-info > .panel-heading {
  color: var(--ff-ui-text) !important;
  background: var(--ff-maincolor-light) !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

/* ── Table header row — light brand tint + clean typography ─────────────────── */
table thead:not(#calendar table thead) {
  border-bottom: 1px solid var(--ff-main-color) !important;
  background: var(--ff-maincolor-light) !important;
}
#expired-container table thead, #upcoming-container table thead, #closed-container table thead {
    height: 42px !important;
}


.page-list .table > thead > tr > th,
.table-responsive .table > thead > tr > th {
    background: var(--ff-maincolor-light) !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    border-top: none !important;
    border-color: var(--ff-ui-border) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
}

/* ── Table rows — tighten and clean up ──────────────────────────────────────── */
.page-list .table > tbody > tr > td,
.table-responsive .table > tbody > tr > td {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    border-color: var(--ff-ui-border) !important;
    vertical-align: middle !important;
    padding: 9px 12px !important;
}

.box-layout ul.nav li.active a {
  background: #FFF;
  border-radius: 8px 8px 0 0 !important;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover  {
  overflow: hidden;
  border-top-color: transparent;
  border-radius: 8px 8px 0 0 !important;
}

.box-layout ul.nav li.active a.lead-details-tab {
    font-weight: 700 !important;
}
.box-layout ul.nav li.active a.lead-details-tab, .box-layout ul.nav li a.lead-details-tab:hover {
  background: transparent !important;
  border-radius: 8px !important;  
}

/* ── #btn-filter already has explicit styles above — ensure height matches ───── */
#btn-filter {
    height: 34px !important;
    min-height: 34px !important;
}

/* ── Per-row action group (checkbox + ▼ dropdown) ───────────────────────────── */
/* Keep Bootstrap's connected input-group layout; only round the right corners */
.page-list tbody .input-group.input-group-sm .input-group-btn > .btn.dropdown-toggle {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.table .input-group-sm .dropdown-toggle {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}


/* =============================================================================
   CALENDAR PAGE — FullCalendar v3 styling
   ============================================================================= */

#calendar {
    min-height: 580px;
}

/* Toolbar buttons (prev/next/today + view switchers) */
#calendar .fc-toolbar .fc-button {
    padding: 0 14px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: border-color .2s, color .2s !important;
    white-space: nowrap !important;
}
#calendar .fc-toolbar .fc-button:hover,
#calendar .fc-toolbar .fc-button:focus {
    background: var(--ff-main-color) !important;
    color: #fff !important;
}
#calendar .fc-toolbar .fc-button.fc-state-active,
#calendar .fc-toolbar .fc-button.fc-state-down {
    background: var(--ff-main-color) !important;
    border-color: var(--ff-main-color) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Calendar title */
#calendar .fc-toolbar h2 {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Event pills */
#calendar .fc-event {
    background: var(--ff-main-color) !important;
    border-color: var(--ff-main-color) !important;
    border-radius: 4px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
#calendar .fc-event:hover {
    opacity: 0.88 !important;
}

/* Day-header row (Mon, Tue…) */
#calendar .fc-day-header,
#calendar th.fc-widget-header {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: 8px 0 !important;
    background: #f4f4f4 !important;
    border-color: var(--ff-ui-border) !important;
}

/* Grid lines */
#calendar td.fc-widget-content,
#calendar th.fc-widget-header {
    border-color: var(--ff-ui-border) !important;
}

/* Axis gutter alignment: header th.fc-axis and body td.fc-axis must have the
   same horizontal padding so FullCalendar's JS-set inline width renders
   identically in both. The th.fc-widget-header rule above zeroes out
   th.fc-axis horizontal padding while FullCalendar base leaves td.fc-axis at
   padding:0 4px — the resulting 8px width difference offsets every day-column
   separator between the header row and the all-day / time-grid rows below. */
#calendar th.fc-axis,
#calendar td.fc-axis {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.fc-ltr .fc-axis {
  text-align: center !important;
}

/* Day number in month view */
#calendar .fc-day-number {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    padding: 4px 8px !important;
}
#calendar .fc-other-month .fc-day-number {
    color: #adb5bd !important;
}

/* Today's date number — circular brand-color badge */
#calendar .fc-today .fc-day-number {
    background: var(--ff-main-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: right !important;
}

/* Today cell highlight */
#calendar .fc-today {
  background: var(--ff-maincolor-light) !important;
}

#calendar .fc-toolbar {
  background: var(--ff-maincolor-light) !important;
  border-bottom: 2px solid #fff !important;
  padding: 7px 15px !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
#calendar .fc-toolbar .fc-left {
  float: left;
  margin-top: 10px;
}

/* =============================================================================
   FORM CONTROLS — inputs, selects, textareas, Select2, xdsoft datetimepicker
   ============================================================================= */

.mdropzone {
  min-height: 150px;
  border: 1px solid #c5ccd2 !important;
  border-radius: 6px !important;
  background: white;
  padding: 30px 30px;
}

.preview {
    box-shadow: none !important;
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    height: auto !important;
    min-height: 150px;
    width: 100%;
    margin-top: 35px;
    display: block;
    justify-content: unset !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    background-color: #ffffff !important;
}

/* ── Base fields ─────────────────────────────────────────────────────────────── */
input.form-control ,
select.form-control,
textarea.form-control,
#fxfilters-content .form-control {
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    color: #495057 !important;
    background-color: #fff !important;
    transition: border-color .18s ease !important;
    min-height: 34px !important;
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
#fxfilters-content .form-control:focus {
    border-color: var(--ff-main-color, #5CC9BA) !important;
    box-shadow: 0px 3px 7px rgba(103, 111, 121, 0.5) !important;
    outline: none !important;
}
input[type=checkbox].form-control {
    min-height: auto !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #adb5bd !important;
    font-weight: 400 !important;
}

/* ── Input group (preaddon icon) ─────────────────────────────────────────────── */
.input-group .input-group-addon {
    border: 1px solid #c5ccd2 !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    background-color: #f3f6f8 !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    transition: border-color .18s ease !important;
}
/*.input-group input.form-control {
    border-radius: 0 6px 6px 0 !important;
}*/
#liveModeButton, #anonymousLeadButton {
  box-shadow: none !important;
  border-radius: 6px !important;
  border: unset;
}
.input-group:focus-within .input-group-addon,
.input-group:focus-within input.form-control {
    border-color: var(--ff-main-color, #5CC9BA) !important;
}

form .chosen-container-multi .chosen-choices {
    border-radius: 6px !important;
}

/* ── Select2 v4 — single ─────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    height: 34px !important;
    box-shadow: none !important;
    background: #fff !important;
    transition: border-color .18s ease !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: #495057 !important;
    font-size: 13.5px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    right: 6px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ff-main-color, #5CC9BA) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Select2 — multiple ──────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: #fff !important;
    min-height: 34px !important;
    transition: border-color .18s ease !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ff-main-color, #5CC9BA) !important;
    box-shadow: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--ff-main-color, #5CC9BA) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    padding: 1px 8px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,.75) !important;
    margin-right: 4px !important;
}

/* ── Select2 — dropdown panel ────────────────────────────────────────────────── */
.select2-dropdown {
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.09) !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    overflow: hidden !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #c5ccd2 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13px !important;
    outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ff-main-color, #5CC9BA) !important;
}
.select2-results__option {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    color: #495057 !important;
    padding: 7px 12px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ff-main-color, #5CC9BA) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(92,201,186,.12) !important;
    color: #495057 !important;
}

/* ── xdsoft datetimepicker popup ─────────────────────────────────────────────── */
.xdsoft_label {
    font-family: 'Roboto', Helvetica, sans-serif !important;
}
.xdsoft_datetimepicker {
    border: 1px solid #c5ccd2 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.09) !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 12.5px !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today > span {
    color: var(--ff-main-color, #5CC9BA) !important;
    font-weight: 700 !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current > span,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--ff-main-color, #5CC9BA) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover > span,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: rgba(92,201,186,.15) !important;
    color: #374151 !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_today_button {
    opacity: .65 !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_today_button:hover {
    opacity: 1 !important;
}

.chosen-single {
    /*border: 1px solid #c5ccd2 !important;*/
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    color: #495057 !important;
    background-color: #fff !important;
    transition: border-color .18s ease !important;
}
.chosen-container {
    box-shadow: none !important;
}

.fr-toolbar.fr-top {
    border: 1px solid #c5ccd2 !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    box-shadow: none !important;
}
.fr-box.fr-basic.fr-top .fr-wrapper {
    border: 1px solid #c5ccd2 !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: none !important;
}
.fr-box.fr-basic .fr-element:focus {
    border: var(--ff-main-color) 1px solid !important;
    box-shadow: 0px 3px 7px rgba(103, 111, 121, 0.5) !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.chosen-container {
    border: 1px solid #c5ccd2 !important;
    border-radius: 6px !important;
}
.chosen-container.chosen-container-active {
    border: var(--ff-main-color) 1px solid !important;
    box-shadow: 0px 3px 7px rgba(103, 111, 121, 0.5) !important;
    border-radius: 6px !important;
}

form .tab-content {
    padding: 20px 30px !important;
}
.label {
    line-height: 1 !important;
    font-size: 11px !important;
    padding: 4px 7px !important;
}

.sidebar-lead .fields-panel {
    background-color: #fff !important;
    border-left: #c5ccd2 1px solid !important;
    border-top: #c5ccd2 1px solid !important;
    border-bottom: #c5ccd2 1px solid !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.bg-auto.bg-dark-xs.lead-graph, .bg-auto .bg-dark-xs.lead-graph {
    background-color: #E4E5E9 !important;
    border-top: #c5ccd2 1px solid !important;
    border-right: #c5ccd2 1px solid !important;
    border-left: #c5ccd2 1px solid !important;
    border-top-right-radius: 8px !important;
    border-color: #c5ccd2 !important;
}
.lead-activities-panel {
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.lead-activities-panel .tab-content {
    border-left: #c5ccd2 1px solid !important;
    border-right: #c5ccd2 1px solid !important;
    border-bottom: #c5ccd2 1px solid !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
#timeline-table table {
    border-right: 0 !important;
    margin-bottom: 30px !important;
}
#LeadNotes .panel-body div {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

#form-view-0 .ff-list-card {
    background-color: var(--ff-maincolor-light) !important;
}
.panel.panel-default.ff-list-card > .panel-body {
    background: unset !important;
}

/* ── Forms grid — fix float-wrapping misalignment ───────────────────────────── */
/* Bootstrap's float-based .row breaks when cards have different heights:
   the Nth item floats into the gap left by the shortest card in the previous row.
   Flexbox overrides the floats and forces clean rows with uniform height. */
#form-view-0 {
    overflow-x: hidden !important;
}
#form-view-0 .row {
    display: flex !important;
    flex-wrap: wrap !important;
}
#form-view-0 .col-xs-3 {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
}
#form-view-0 .col-xs-3 > .card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
#form-view-0 .col-xs-3 > .card > .card-body {
    flex: 1 !important;
}
/* Card header: badge on left, actions dropdown on right (shared by forms + emails grid) */
.ff-form-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
}
.ff-form-card-header > div:last-child {
    flex-shrink: 0 !important;
}
.ff-card-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    background: var(--ff-main-color) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
/* Email grid: same flexbox + overflow fix as form grid */
#email-view-0 {
    overflow-x: hidden !important;
}
#email-view-0 .row {
    display: flex !important;
    flex-wrap: wrap !important;
}
#email-view-0 .col-xs-3 {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
}
#email-view-0 .col-xs-3 > .card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
#email-view-0 .col-xs-3 > .card > .card-body {
    flex: 1 !important;
}
/* Landing Pages grid: same flexbox + overflow fix */
#page-view-0 {
    overflow-x: hidden !important;
}
#page-view-0 .row {
    display: flex !important;
    flex-wrap: wrap !important;
}
#page-view-0 .col-xs-3 {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
}
#page-view-0 .col-xs-3 > .card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
#page-view-0 .col-xs-3 > .card > .card-body {
    flex: 1 !important;
}

.product-delete, .lead-delete {
  font-size: 12px !important;
  color: rgb(238,40,40);
}

/* =============================================================================
   TUTORIAL POPOVER — infinite glow pulse
   Overrides FluxforceCrmBundle/Assets/css/FluxForceTheme.css's .popover /
   @keyframes animatePopover (hardcoded teal). Same rule/keyframe name so it
   fully replaces the legacy one; colors now follow the tenant's brand color
   via --ff-main-color (dark) / --ff-maincolor-light (light).
   ============================================================================= */
.popover {
    animation-delay: 1.5s !important;
    animation: animatePopover 3s linear infinite;
}
@keyframes animatePopover {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ff-main-color) 60%, transparent);
    }
    40% {
        box-shadow: 0 0 0 30px color-mix(in srgb, var(--ff-maincolor-light) 0%, transparent);
    }
    100% {
        box-shadow: none;
    }
}

.panel-primary > .panel-heading {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.form-tab-results .std-toolbar {
    margin-bottom: 10px !important;
}

#companiesFiltersModalBody .modal-content .modal-footer, 
#contactsFiltersModalBody .modal-content .modal-footer {
    padding-top: 20px !important;
} 

.list-group-item > a > span.fa {
    margin-right: 10px !important;
    color: var(--ff-ui-text) !important;
}
.list-group-item.active, .list-group-item:hover {
    background-color: var(--ff-maincolor-light) !important;
    color: #000 !important;
}
.shuffle-item .panel {
    border-color: var(--ff-secondary-color) !important;
}
.shuffle-item .panel:hover {
    border-color: var(--ff-main-color) !important;
    background-color: var(--ffmaincolor-light) !important;
}

.btn-leadnote-add {
  margin-left: 0 !important;
  border-bottom-left-radius: 6px !important;
  border-top-left-radius: 6px !important;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 500;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
}
.popover-content .mm_actions .btn.next-tuto {
    padding: 4px 12px !important;
}
.btn-info, .open .dropdown-toggle.btn-default {
  color: var(--ff-ui-text, #343a40) !important;
  background-color: transparent !important;
  border-color: var(--ff-main-color) !important;
}
.btn-info:hover, .open .dropdown-toggle.btn-default:hover, .dropdown-toggle:hover {
  color: rgb(256, 256, 256) !important;
  background-color: var(--ff-main-color) !important;
  border-color: var(--ff-main-color) !important;
}

.btn-cancel, .btn-dnd, .btn-apply, .btn-save {
    padding: 0 14px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid var(--ff-main-color) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ff-main-color) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: border-color .2s, color .2s !important;
    white-space: nowrap !important;
    min-height: 36px !important;
}
.btn-cancel i {
    color: var(--ff-main-color) !important;
}

.btn-save {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 6px !important;
    background: var(--ff-main-color) !important;
    color: #fff !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity .2s !important;
    white-space: nowrap !important;
}
.btn-cancel:hover, .btn-dnd:hover, .btn-apply:hover, .btn-save:hover {
    border-color: var(--ff-main-color) !important;
    box-shadow: 0px 3px 7px rgba(103, 111, 121, 0.4) !important;
}
.btn-default {
    color: #5d6c7c;
    background-color: #fff;
    border-color: #c5ccd2 !important;
}
.btn.btn-xs {
    padding: 5px 8px;
    border-radius: 5px;
}
.campaign-event-buttons .btn.btn-xs {
    padding: 4px 3px;
}

#opp-funnel-period, #process-selector {
    margin-right: 20px !important;
}
.stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  height: auto;
  word-break: break-all;
  min-width: 260px;
  margin-right: 5px;
  border: 1px solid var(--ff-ui-border) !important;
  background-color: #F5F8FA;
  border-radius: 5px;
}

.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.dropdown-menu > li > a {
  padding: 7px 10px !important;
}
.dropdown-menu > li > a:hover {
  background-color: var(--ff-maincolor-light) !important;
  border-radius: 5px !important;
  color: #000 !important;
}
.dropdown-menu.dropdown-menu-right {
    padding: 5px !important;
}

#dashboard-widgets .dropdown-toggle {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 6px !important;
}
#dashboard-widgets .dropdown-toggle:hover i {
    color: #fff !important;
}
#dashboard-widgets table thead {
  background: transparent !important;
}

button[data-target="#-search-help"], button[data-target="#form-search-search-help"] {
    margin-right: 5px !important;
}
.btn i {
    font-weight: 400 !important;
}

/* ── Modal wrapper ───────────────────────────────────────────────────────────── */
.modal-content {
  position: relative;
  background-color: #f3f6f8;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0,0,0,0.5);
  background-clip: unset;
  outline: 0;
}
.modal-title {
    font-size: 18px !important;
    font-weight: normal !important;
    color: var(--ff-sidebar-open-color) !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
}
.modal-body {
    position: relative;
    padding: 25px !important;
    background-color: #f3f6f8 !important;
    border-radius: 8px !important;
}
.modal-footer {
    padding: 5px 25px 25px;
    text-align: right;
    border-top: none !important;
    background-color: #f3f6f8 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}