/* ============================================================================
   FunnelFlow theme
   ----------------------------------------------------------------------------
   Brand layer for the FunnelFlow CRM, loaded AFTER Sneat's core.css /
   theme-default.css / app.css so it wins the cascade without editing vendor
   files. The identity is the funnel: four stage colors running wide-blue
   (top of funnel / prospect) down to narrow-green (won). Those four hex
   values below are the whole palette — every accent in this file derives
   from them.

   Funnel Top   #0F4C81  deep blue — primary actions (matches the accent the
                          app's existing inline styles already use everywhere)
   Funnel Mid   #0E7FA8  cyan-blue — hover / secondary
   Funnel Low   #0BA8A0  teal — progress
   Won          #17A673  green — success / bottom of funnel
   Signal       #E8A13D  amber — reminders & attention (used sparingly)

   Type: Rubik for the wordmark + headings, IBM Plex Sans for body/UI — both
   already loaded by the master pages' Google Fonts link.
   ========================================================================== */

:root {
    --ff-ink: #1b2a3a;
    --ff-paper: #f5f7fa;
    --ff-line: #e3e9f0;
    --ff-muted: #64748b;
    --ff-top: #0f4c81;
    --ff-top-deep: #0c3e6a;
    --ff-mid: #0e7fa8;
    --ff-low: #0ba8a0;
    --ff-won: #17a673;
    --ff-signal: #e8a13d;
    --ff-sidebar: #152536;
    --ff-sidebar-text: #b9c7d6;
    --ff-sidebar-dim: #6e8098;
    --ff-funnel-gradient: linear-gradient(180deg, var(--ff-top) 0%, var(--ff-mid) 40%, var(--ff-low) 72%, var(--ff-won) 100%);
    --ff-funnel-gradient-x: linear-gradient(90deg, var(--ff-top) 0%, var(--ff-mid) 40%, var(--ff-low) 72%, var(--ff-won) 100%);
}

/* ---- Base type & canvas ------------------------------------------------- */

body {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ff-paper);
    color: #2b3a4c;
}

h1, h2, h3, h4, h5, h6,
.ff-wordmark {
    font-family: "Rubik", "IBM Plex Sans", sans-serif;
    color: var(--ff-ink);
}

/* ---- Wordmark ------------------------------------------------------------
   "Funnel" in solid ink/white, "Flow" carries the funnel gradient. Used in
   the sidebar brand and on the login card. */

.ff-wordmark {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ff-wordmark .ff-wordmark-flow {
    background: var(--ff-funnel-gradient-x);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ---- Sidebar: the one bold move ------------------------------------------
   Deep-ink menu with the funnel-gradient rail marking the active item.
   !important is deliberate: Sneat's .bg-menu-theme rules are high-specificity
   and we are overriding a vendor theme we don't edit. */

.bg-menu-theme {
    background: var(--ff-sidebar) !important;
    color: var(--ff-sidebar-text) !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-link div {
    color: var(--ff-sidebar-text) !important;
}

.bg-menu-theme .menu-link .menu-icon {
    color: var(--ff-sidebar-dim) !important;
}

.bg-menu-theme .menu-header-text {
    color: var(--ff-sidebar-dim) !important;
    letter-spacing: 0.08em;
}

.bg-menu-theme .menu-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.bg-menu-theme .menu-item > .menu-link {
    position: relative;
    border-radius: 6px;
    margin: 1px 8px;
}

.bg-menu-theme .menu-item > .menu-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.bg-menu-theme .menu-item > .menu-link:hover,
.bg-menu-theme .menu-item > .menu-link:hover div,
.bg-menu-theme .menu-item > .menu-link:hover .menu-icon {
    color: #ffffff !important;
}

/* Sneat paints the active <li> itself pale gray (#eceded) in addition to the
   link — on the ink sidebar that reads as a washed-out white pill. The active
   treatment belongs to the link + rail below, so the li stays transparent. */
.bg-menu-theme .menu-inner > .menu-item.active {
    background-color: transparent !important;
}

/* Specificity note: Sneat's own active rules run five classes deep
   (.bg-menu-theme .menu-inner .menu-item.active > .menu-link) with the same
   colors light or dark, so these selectors must go at least as deep to win. */
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-item.active > .menu-link {
    background: rgba(255, 255, 255, 0.08) !important;
}

.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
.bg-menu-theme .menu-item.active > .menu-link,
.bg-menu-theme .menu-item.active > .menu-link div,
.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
    color: #ffffff !important;
}

/* The funnel rail: a thin vertical gradient on the active item's left edge. */
.bg-menu-theme .menu-item.active > .menu-link::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--ff-funnel-gradient);
}

/* Brand block sits on the dark sidebar. */
.ff-brand .ff-wordmark {
    color: #ffffff;
    font-size: 19px;
}

.ff-brand-mark {
    display: inline-flex;
    align-items: center;
}

.ff-brand-mark svg {
    display: block;
}

/* Sidebar collapse/expand toggle icon needs to stay visible on ink. */
.bg-menu-theme .layout-menu-toggle i {
    color: var(--ff-sidebar-dim) !important;
}

/* ---- Buttons & links ------------------------------------------------------ */

/* Unclassed links only: classed links (menu-link, footer-link, dropdown-item)
   keep their own colors, and :not([class]) outranks the bare `a` rule that
   template-customizer.js re-injects after this sheet at runtime. */
a:not([class]) {
    color: var(--ff-top);
}

a:not([class]):hover {
    color: var(--ff-mid);
}

.btn-primary {
    background-color: var(--ff-top) !important;
    border-color: var(--ff-top) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ff-top-deep) !important;
    border-color: var(--ff-top-deep) !important;
}

.btn-outline-primary {
    color: var(--ff-top) !important;
    border-color: var(--ff-top) !important;
}

.btn-outline-primary:hover {
    background-color: var(--ff-top) !important;
    color: #ffffff !important;
}

.text-primary {
    color: var(--ff-top) !important;
}

.bg-primary {
    background-color: var(--ff-top) !important;
}

/* Success maps to the bottom of the funnel. */
.btn-success,
.bg-success {
    background-color: var(--ff-won) !important;
    border-color: var(--ff-won) !important;
}

.text-success {
    color: var(--ff-won) !important;
}

.bg-warning {
    background-color: var(--ff-signal) !important;
}

/* ---- Cards & surfaces ------------------------------------------------------ */

.card {
    border: 1px solid var(--ff-line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(27, 42, 58, 0.06);
}

.btncard {
    border-radius: 12px;
    border-color: var(--ff-line);
}

/* ---- Forms ---------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
    border-color: var(--ff-mid);
    box-shadow: 0 0 0 0.2rem rgba(14, 127, 168, 0.15);
}

/* Keyboard focus stays visible everywhere. */
:focus-visible {
    outline: 2px solid var(--ff-mid);
    outline-offset: 1px;
}

/* ---- Login (Site1LoggedOut.Master wraps the form in .authentication-wrapper) —
   the auth card gets the funnel gradient as a top edge: the signature echoed
   once, quietly. */

.authentication-wrapper .card {
    border-top: 4px solid transparent;
    border-image: var(--ff-funnel-gradient-x) 1;
    border-radius: 12px 12px 12px 12px;
}

/* Sneat's decorative auth-page blobs are purple and fight the funnel palette.
   The card's gradient edge is the only accent the login page needs. */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none;
}

.ff-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 4px;
}

.ff-login-brand .ff-wordmark {
    font-size: 30px;
}

.ff-login-tagline {
    text-align: center;
    color: var(--ff-muted);
    font-size: 12.5px;
    margin: 2px 0 0;
}

/* ---- Motion discipline ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}