/**
 * AppUI Template - User Custom CSS
 *
 * Add your custom styles here.
 * This file will be loaded after all template styles.
 */

/* Mod Login - Form Fields */
.mod-login-hero .form-control {
    color: #000;
    transition: all 0.2s ease;
}

.mod-login-hero .form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-login-hero .form-control:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.mod-login-hero .form-control:focus {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.mod-login-hero .input-password-toggle:hover,
.mod-login-hero .input-password-toggle:focus {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Login button gradient when form is complete */
.mod-login-hero .btn-login-ready {
    background: linear-gradient(135deg, #667eea 0%, #ec4899 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.mod-login-hero .btn-login-ready:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    transform: scale(1.04);
}

/* ==========================================================================
   Sidebar Fixed Menu Styling (nav-menu / mod_menu)
   ========================================================================== */

#sidebarFixed .nav-menu,
#sidebarFixed .mod-menu,
.sidebar-fixed-nav .nav-menu,
.sidebar-fixed-nav .mod-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebarFixed .nav-menu > li,
#sidebarFixed .mod-menu > li,
.sidebar-fixed-nav .nav-menu > li,
.sidebar-fixed-nav .mod-menu > li {
    margin: 0;
}

#sidebarFixed .nav-menu > li > a,
#sidebarFixed .mod-menu > li > a,
.sidebar-fixed-nav .nav-menu > li > a,
.sidebar-fixed-nav .mod-menu > li > a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #495057;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

#sidebarFixed .nav-menu > li > a:hover,
#sidebarFixed .mod-menu > li > a:hover,
.sidebar-fixed-nav .nav-menu > li > a:hover,
.sidebar-fixed-nav .mod-menu > li > a:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.02) 100%);
    color: #667eea;
    border-left-color: #667eea;
}

#sidebarFixed .nav-menu > li.active > a,
#sidebarFixed .nav-menu > li.current > a,
#sidebarFixed .mod-menu > li.active > a,
#sidebarFixed .mod-menu > li.current > a,
.sidebar-fixed-nav .nav-menu > li.active > a,
.sidebar-fixed-nav .nav-menu > li.current > a,
.sidebar-fixed-nav .mod-menu > li.active > a,
.sidebar-fixed-nav .mod-menu > li.current > a {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.03) 100%);
    color: #667eea;
    border-left-color: #667eea;
    font-weight: 600;
}

/* Menu icons */
#sidebarFixed .nav-menu a i,
#sidebarFixed .nav-menu a .icon,
#sidebarFixed .nav-menu a .fa,
#sidebarFixed .nav-menu a .fas,
#sidebarFixed .nav-menu a .far,
#sidebarFixed .nav-menu a .fab,
.sidebar-fixed-nav .nav-menu a i,
.sidebar-fixed-nav .nav-menu a .icon {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#sidebarFixed .nav-menu > li > a:hover i,
#sidebarFixed .nav-menu > li > a:hover .icon,
#sidebarFixed .nav-menu > li.active > a i,
#sidebarFixed .nav-menu > li.active > a .icon,
.sidebar-fixed-nav .nav-menu > li > a:hover i,
.sidebar-fixed-nav .nav-menu > li > a:hover .icon {
    opacity: 1;
}

/* Submenu styling */
#sidebarFixed .nav-menu .nav-child,
#sidebarFixed .nav-menu ul ul,
.sidebar-fixed-nav .nav-menu .nav-child,
.sidebar-fixed-nav .nav-menu ul ul {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 0 0 8px 0;
    border-left: 2px solid #e9ecef;
    margin-left: 16px;
}

#sidebarFixed .nav-menu .nav-child > li > a,
#sidebarFixed .nav-menu ul ul > li > a,
.sidebar-fixed-nav .nav-menu .nav-child > li > a,
.sidebar-fixed-nav .nav-menu ul ul > li > a {
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #6c757d;
    border-radius: 6px;
    margin-bottom: 2px;
    border-left: none;
}

#sidebarFixed .nav-menu .nav-child > li > a:hover,
#sidebarFixed .nav-menu ul ul > li > a:hover,
.sidebar-fixed-nav .nav-menu .nav-child > li > a:hover,
.sidebar-fixed-nav .nav-menu ul ul > li > a:hover {
    background: rgba(102, 126, 234, 0.08);
    color: #667eea;
}

#sidebarFixed .nav-menu .nav-child > li.active > a,
#sidebarFixed .nav-menu .nav-child > li.current > a,
.sidebar-fixed-nav .nav-menu .nav-child > li.active > a,
.sidebar-fixed-nav .nav-menu .nav-child > li.current > a {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-weight: 600;
}

/* Menu separator / divider styling */
#sidebarFixed .nav-menu > li.divider,
#sidebarFixed .nav-menu > li.separator,
.sidebar-fixed-nav .nav-menu > li.divider,
.sidebar-fixed-nav .nav-menu > li.separator {
    height: 1px;
    background: #e9ecef;
    margin: 12px 16px;
}

/* Menu heading / category styling */
#sidebarFixed .nav-menu > li.nav-header,
#sidebarFixed .nav-menu > li.menu-header,
.sidebar-fixed-nav .nav-menu > li.nav-header,
.sidebar-fixed-nav .nav-menu > li.menu-header {
    padding: 20px 16px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #adb5bd;
}

/* Badge styling for menu items */
#sidebarFixed .nav-menu .badge,
.sidebar-fixed-nav .nav-menu .badge {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 4px 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
}


/* ===== app-ui.digital brand override — OUI4all accessibility panel — v2 no-blue — 2026-05-30 ===== */
/* Editorial neutral palette only (ink / cream / warm). No blue, no !important,
   no font-size changes — the widget's text-scaling and the user's light/dark
   and html-level contrast toggles all keep working. */

/* Typography */
.oui4all-container,
.oui4all-container .oui4all__btn,
.oui4all-container .oui4all__footer {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}
.oui4all-container .oui4all__title {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Trigger button (normally hidden by the template; styled for completeness) */
.oui4all-container .oui4all__openbtn {
  background: #0e1320;
  color: #fbfaf7;
  box-shadow: 0 4px 14px rgba(14, 19, 32, 0.30);
}
.oui4all-container .oui4all__openbtn svg { fill: #fbfaf7; }
.oui4all-container .oui4all__openbtn:hover {
  background: #0d1424;
  box-shadow: 0 6px 20px rgba(14, 19, 32, 0.40);
}
.oui4all-container .oui4all__openbtn:focus-visible {
  outline: 2px solid #0e1320;
  outline-offset: 3px;
}

/* Header — ink with cream text */
.oui4all-container .oui4all__header { background: #0e1320; color: #fbfaf7; }
.oui4all-container .oui4all__header .oui4all__title,
.oui4all-container .oui4all__header .oui4all__title-credit,
.oui4all-container .oui4all__header .oui4all__credit-link,
.oui4all-container .oui4all__header .oui4all__close,
.oui4all-container .oui4all__header .oui4all__reset { color: #fbfaf7; }
.oui4all-container .oui4all__header .oui4all__close svg,
.oui4all-container .oui4all__header .oui4all__reset svg { fill: #fbfaf7; }

/* Active option — ink */
.oui4all-container .oui4all__btn--active {
  background: #0e1320;
  color: #fbfaf7;
  border-color: #0e1320;
}
.oui4all-container .oui4all__btn--active svg { fill: #fbfaf7; }
.oui4all-container .oui4all__btn--active:hover { background: #0d1424; }

/* Progress / value bar fill — ink */
.oui4all-container .oui4all__bar::after,
.oui4all-container .oui4all__bar > span,
.oui4all-container .oui4all__bar--fill { background: #0e1320; }

/* Steppers */
.oui4all-container .oui4all__dec:hover,
.oui4all-container .oui4all__inc:hover { border-color: #0e1320; }
.oui4all-container .oui4all__dec:active,
.oui4all-container .oui4all__inc:active {
  background: #0e1320;
  color: #fbfaf7;
  border-color: #0e1320;
}

/* Custom links */
.oui4all-container .oui4all__custom-links a { color: #0e1320; }

/* --- Light theme surface: cream / ink / warm --- */
.oui4all-container.oui4all--light .oui4all__panel {
  background: #fbfaf7;
  color: #0e1320;
  border: 1px solid #e7e3da;
}
.oui4all-container.oui4all--light .oui4all__btn:hover {
  background: rgba(14, 19, 32, 0.06);
  color: #0e1320;
  border-color: rgba(14, 19, 32, 0.12);
}
.oui4all-container.oui4all--light .oui4all__footer { color: #5b6472; }
.oui4all-container.oui4all--light .oui4all__footer a { color: #0e1320; }
.oui4all-container.oui4all--light .oui4all__custom-links a:hover { background: rgba(14, 19, 32, 0.06); }
.oui4all-container.oui4all--light .oui4all__dec:hover,
.oui4all-container.oui4all--light .oui4all__inc:hover { color: #0e1320; }

/* --- Dark theme surface: brand dark / cream --- */
.oui4all-container.oui4all--dark .oui4all__panel {
  background: #0d1424;
  color: #f4f2ec;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.oui4all-container.oui4all--dark .oui4all__header {
  background: #161d2e;
  color: #f4f2ec;
}
.oui4all-container.oui4all--dark .oui4all__btn { color: #f4f2ec; }
.oui4all-container.oui4all--dark .oui4all__btn svg { fill: #f4f2ec; }
.oui4all-container.oui4all--dark .oui4all__btn:hover { background: rgba(255, 255, 255, 0.07); }
.oui4all-container.oui4all--dark .oui4all__btn--active {
  background: #f4f2ec;
  color: #0d1424;
  border-color: #f4f2ec;
}
.oui4all-container.oui4all--dark .oui4all__btn--active svg { fill: #0d1424; }
.oui4all-container.oui4all--dark .oui4all__bar::after { background: #f4f2ec; }
.oui4all-container.oui4all--dark .oui4all__footer { color: rgba(244, 242, 236, 0.65); }

/* Focus ring */
.oui4all-container *:focus-visible {
  outline: 2px solid #0e1320;
  outline-offset: 2px;
}
/* ===== end app-ui.digital OUI4all override v2 ===== */


/* ===== app-ui.digital brand override — ConsentKit cookie panel — 2026-05-30 ===== */
/*
 * Rebrands the ConsentKit widget (consent.oui.it.com, site fdzrf6a7) to the app-ui
 * editorial palette — blue-free, mirroring the OUI4all override above.
 *
 * VERDICT: LIGHT DOM. The hosted JS (consentkit.js) builds its UI with
 * document.createElement + document.body.appendChild and injects a single
 * <style id="ck-styles"> into document.head. No attachShadow / shadowRoot /
 * adoptedStyleSheets anywhere — so this external stylesheet reaches the widget.
 * (Confirmed against the actual source, not just the template integration code.)
 *
 * HOW CONSENTKIT THEMES ITSELF: its injected CSS reads four custom properties
 * declared on :root — --ck-accent, --ck-bg, --ck-text, --ck-radius — and uses
 * --ck-accent for every brand surface (accept button bg, deny outline, link
 * color, toggle-ON track, focus ring, launcher icon, credit link). Overriding
 * those four vars is therefore the primary rebrand lever.
 *
 * WHY !important HERE (unlike the OUI4all block): ConsentKit injects its
 * <style id="ck-styles"> via a DEFERRED script, so it lands in <head> AFTER this
 * stylesheet's <link>. On equal specificity ConsentKit's :root / single-class
 * rules would therefore win on source order and our override would silently lose.
 * We use !important (on html:root for the vars) to beat it deterministically.
 * Safe to do so: ConsentKit has no text-scaling or contrast toggles to preserve,
 * and we never touch font-size.
 *
 * The widget ships with NO hardcoded brand color in the JS literals; accent/bg/
 * text come from the remote config (api/config/<site>). Default neutrals seen in
 * source: rgba(0,0,0,0.4) backdrop, rgba(128,128,128,0.3) toggle-off track,
 * #fff toggle knob, #666 placeholder text. So whatever blue currently shows is
 * the dashboard-configured accentColor — these vars override it client-side.
 *
 * REAL classes used below (verbatim from source):
 *   .ck-backdrop .ck-banner(--bottom-bar|--modal|--corner-*) .ck-panel
 *   .ck-title .ck-desc .ck-link .ck-btn .ck-btn--accept .ck-btn--deny
 *   .ck-btn--prefs .ck-category .ck-cat-label .ck-cat-desc .ck-toggle
 *   .ck-toggle-track .ck-icon .ck-panel-actions .ck-credit .ck-credit-link
 *   (toggle-ON = `.ck-toggle input:checked + .ck-toggle-track`)
 */

/* --- PRIMARY LEVER: retheme via ConsentKit's own custom properties ---
   html:root + !important so we beat ConsentKit's later-injected :root block. */
html:root {
	--ck-accent: #0e1320 !important;   /* ink — drives accept bg, deny/link/toggle-on, icon, focus */
	--ck-bg:     #fbfaf7 !important;   /* cream surface + accept-button text */
	--ck-text:   #0e1320 !important;   /* ink body text */
	--ck-radius: 8px !important;
}

/* --- Surfaces: warm border + editorial typography (vars handle bg/text/radius) --- */
.ck-banner,
.ck-panel {
	border: 1px solid #e7e3da !important;
	font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
}

/* Backdrop / overlay — ink scrim instead of plain black */
.ck-backdrop {
	background: rgba(13, 20, 36, 0.55) !important;
}

/* Title — Bricolage editorial */
.ck-title {
	font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif !important;
}

/* Body / category description — muted secondary ink (overrides ck-desc opacity look) */
.ck-desc,
.ck-cat-desc {
	color: #5b6472 !important;
	opacity: 1 !important;
}

/* Category row separators — warm border */
.ck-category {
	border-bottom-color: #e7e3da !important;
}

/* Deny / Preferences buttons: ghost-outline, equal weight (no dark pattern).
   ck-btn--deny already inverts accent via vars; pin ck-btn--prefs to full ink. */
.ck-btn--prefs {
	color: #0e1320 !important;
	border-color: #0e1320 !important;
	opacity: 1 !important;
}
.ck-btn--prefs:hover {
	background: rgba(14, 19, 32, 0.06) !important;
}

/* Toggle: OFF track neutral warm grey, ON track ink. The ON rule must be re-asserted
   with !important + its native specificity, else the !important OFF rule below would
   also flatten the checked state. */
.ck-toggle-track {
	background: #e7e3da !important;
}
.ck-toggle input:checked + .ck-toggle-track {
	background: #0e1320 !important;
}

/* ===== end app-ui.digital ConsentKit override ===== */