/* ============================================================
   KMT White-Label Overrides for Mautic 5
   Keystone Marketing Technology — keystonemartech.com

   Applied via bind mount override of head.html.twig and
   base.html.twig (login page). Loaded AFTER Mautic's
   system stylesheets so our rules take precedence.

   Color Reference (KMT Application UI Palette):
     Blue-Purple  #4F5F9E  — headers, sidebar header, links
     Orange       #ec8c39  — buttons, CTAs, brand accent
     Gold         #FDCB33  — menu hover/active states
   ============================================================ */


/* --- Inter Font (self-hosted, GDPR-compliant) ---
   Same font files used in the Matomo white-label.
   Served from /media/fonts/ via bind mount. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/fonts/inter-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/media/fonts/inter-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/media/fonts/inter-600.ttf') format('truetype');
}


/* --- Typography ---
   Override Mautic's default Source Sans 3 with Inter. */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif !important;
}


/* --- Primary Color Scale (KMT Orange) ---
   Mautic 5 uses a --primary-* variable scale that flows into
   buttons, links, focus rings, toggles, and interactive elements.
   We override the entire scale to KMT Orange #ec8c39.

   This replaces Mautic's default blue-purple accent for
   all interactive UI elements. The sidebar header keeps
   its own blue-purple via a direct background-color rule. */

:root,
:root[theme="light"] {
    --primary-20: #fbe8d4;
    --primary-30: #f5c99a;
    --primary-40: #f0ab64;
    --primary-50: #ee9b4e;
    --primary-60: #ec8c39;
    --primary-70: #d47a2e;
    --primary-80: #a65f24;
    --primary-90: #78441a;
    --primary-100: #4a2a10;
}

/* Dark mode: same orange scale, Mautic adjusts usage automatically */
:root[theme="dark"] {
    --primary-20: #fbe8d4;
    --primary-30: #f5c99a;
    --primary-40: #f0ab64;
    --primary-50: #ee9b4e;
    --primary-60: #ec8c39;
    --primary-70: #d47a2e;
    --primary-80: #a65f24;
    --primary-90: #78441a;
    --primary-100: #4a2a10;
}


/* --- Navbar Header Bar (KMT Blue-Purple) ---
   Mautic 5's navbar (#app-header.navbar) defaults to a translucent
   frosted-glass effect. We replace it with a solid KMT Blue-Purple
   bar that matches the sidebar header, creating one continuous
   branded header across the top (same pattern as the Matomo white-label).

   All navbar icons and text are set to white for contrast against
   the dark background. */

#app-header.navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(to right, transparent 230px, #4F5F9E 230px) !important;
    min-height: 64px !important;
}

/* Push page content below the taller fixed header (default is 48px) */
.header-fixed #app-header.navbar ~ #app-content > .content-body {
    padding-top: 64px !important;
}

/* Navbar icons, links, and text — white on blue-purple */
#app-header.navbar .navbar-nocollapse .navbar-nav > li > a {
    color: #fff !important;
    line-height: 64px !important;
}

#app-header.navbar .navbar-nocollapse .navbar-nav > li > a:hover,
#app-header.navbar .navbar-nocollapse .navbar-nav > li > a:focus {
    color: #FDCB33 !important;
}

/* Toolbar buttons (action buttons that appear on detail pages) */
#app-header.navbar .navbar-toolbar .btn-default {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

#app-header.navbar .navbar-toolbar .btn-default:hover {
    color: #FDCB33 !important;
}


/* --- Sidebar Header (KMT Blue-Purple logo block) ---
   The sidebar header holds the KMT logo on a blue-purple background,
   matching the HeadStart pattern. Height matches the navbar (64px). */

.app-sidebar.sidebar-left .sidebar-header,
.app-sidebar.sidebar-left .sidebar-footer {
    background-color: #4F5F9E !important;
}

.app-sidebar.sidebar-left .sidebar-header {
    height: 64px !important;
    min-height: 64px !important;
}

/* Remove the 48px top offset on sidebar content — Mautic adds this to
   account for the navbar overlapping the sidebar header area. Since our
   sidebar header is now visible (navbar is transparent over it), the
   gap is no longer needed. */
.app-sidebar .sidebar-header ~ .sidebar-content {
    top: 0 !important;
}


/* --- Sidebar Navigation ---
   White background, KMT Blue-Purple text by default,
   KMT Orange on hover and active states with top/bottom border
   for visibility on the white background. Gold was too low-contrast
   on white (~1.6:1), so we use Orange (#ec8c39) here instead. */

/* Sidebar background — white instead of Mautic's default grey */
.app-sidebar.sidebar-left {
    background-color: #fff !important;
}

/* Default nav item color — KMT Blue-Purple */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a {
    color: #4F5E9D !important;
}

/* Icons match the text color */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a i {
    color: #4F5E9D !important;
}

/* Hover/focus — KMT Orange with top/bottom border */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a:hover,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a:focus {
    color: #ec8c39 !important;
    border-top: 1px solid #ec8c39 !important;
    border-bottom: 1px solid #ec8c39 !important;
    background-color: #fff !important;
}

.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a:hover i,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > a:focus i {
    color: #ec8c39 !important;
}

/* Active/open — KMT Orange with top/bottom border */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.active > a,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.open > a {
    color: #ec8c39 !important;
    border-top: 1px solid #ec8c39 !important;
    border-bottom: 1px solid #ec8c39 !important;
    background-color: #fff !important;
}

.app-sidebar.sidebar-left .nav-sidebar > .nav > li.active > a i,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.open > a i {
    color: #ec8c39 !important;
}

/* Submenu container — white to match sidebar */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.active > .nav-submenu,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li.open > .nav-submenu {
    background-color: #fff !important;
}

/* Submenu items — same pattern */
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu > li > a {
    color: #4F5E9D !important;
}

.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu > li > a:hover,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu > li > a:focus {
    color: #ec8c39 !important;
    border-top: 1px solid #ec8c39 !important;
    border-bottom: 1px solid #ec8c39 !important;
    background-color: #fff !important;
}

.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu > li.active > a,
.app-sidebar.sidebar-left .nav-sidebar > .nav > li > .nav-submenu > li.open > a {
    color: #ec8c39 !important;
    border-top: 1px solid #ec8c39 !important;
    border-bottom: 1px solid #ec8c39 !important;
    background-color: #fff !important;
}


/* --- Hide Appearance & Accessibility tabs on Account page ---
   Mautic 5 lets users change accent colors and themes via
   Account > Appearance, which would override our white-label.
   The Accessibility tab also has color/contrast settings.
   We hide both tabs and their content panes to protect branding. */

/* Hide the tab links */
a.steps[href="#appearance"],
a.steps[href="#accessibility"] {
    display: none !important;
}

/* Hide the parent <li> to remove the list gap */
a.steps[href="#appearance"],
a.steps[href="#accessibility"] {
    display: none !important;
}
li.list-group-item:has(a[href="#appearance"]),
li.list-group-item:has(a[href="#accessibility"]) {
    display: none !important;
}

/* Hide the tab panes in case someone navigates directly */
#appearance,
#accessibility {
    display: none !important;
}


/* --- Login Page ---
   Remove default Mautic logo styling (white circle background)
   since we're using our own image. */

.mautic-logo {
    background: transparent !important;
}


/* --- Sidebar Header Brand Logo ---
   Mautic's default .mautic-brand has padding-left: 35px and
   padding-right: 32px designed for its SVG logo elements.
   We override this to make room for our KMT image logo.
   The logo is placed ONLY in the sidebar header (not the navbar)
   since the navbar overlay has been made transparent (see above). */

.app-sidebar.sidebar-left .sidebar-header .mautic-brand {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}