/**
 * GLerp Brand Variables & Overrides
 * Version: 1.0 (V16 Compatible)
 *
 * This file defines the GLerp brand identity variables.
 * It loads BEFORE frappe_theme to allow user customization to take precedence.
 */

:root {
	/* Primary Brand Colors */
	--glerp-primary: #27B093;
	--glerp-primary-dark: #072B31;

	/* Secondary Colors */
	--glerp-secondary: #00534C;
	--glerp-secondary-alt: #2B5B6C;

	/* Accent/Pulse Colors */
	--glerp-accent-blue: #77C5D5;
	--glerp-accent-green: #9BE198;
	--glerp-accent-neutral: #D1E0D7;

	/* Frappe Variable Overrides */
	--primary: var(--glerp-primary);
	--primary-color: var(--glerp-primary);
	--btn-primary-bg: var(--glerp-primary);
	--link-color: var(--glerp-primary);

	/* Typography Variables */
	--font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-subheading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Notification & Alert Accents */
	--alert-border-color: var(--glerp-accent-blue);
	--notification-accent: var(--glerp-primary);
}

/* Typography Application */
h1, h2, h3, .page-title, .section-head {
	font-family: var(--font-family-heading) !important;
	font-weight: 600;
}

h4, h5, h6, .sidebar-label, .form-label {
	font-family: var(--font-family-subheading) !important;
	font-weight: 600;
}

body, p, .body-text, .form-control, input, textarea {
	font-family: var(--font-family-body) !important;
	font-weight: 400;
}

/* Sidebar Branding (V16 Specific) */
.sidebar-header .app-logo {
	max-height: 16px;
	margin-top: 2px;
}

.sidebar-collapsed .app-logo-collapsed {
	max-height: 16px;
	margin-top: 2px;
}

/* Notification Customization */
.msgprint-dialog .modal-header,
.frappe-alert {
	border-top: 3px solid var(--glerp-primary);
}

/* Command Palette Accent (V16) */
.command-palette .modal-header {
	border-bottom: 2px solid var(--glerp-primary);
}

/* Button Primary Hover - Allows frappe_theme override */
.btn-primary:hover {
	background-color: var(--glerp-primary-dark);
	border-color: var(--glerp-primary-dark);
}

/* Splash Screen Animation Color */
.splash-screen .splash-icon {
	color: var(--glerp-primary);
}

/* Link Hover Effect */
a:hover {
	color: var(--glerp-primary-dark);
}

/* Focus State */
input:focus,
textarea:focus,
.form-control:focus {
	border-color: var(--glerp-accent-blue);
	box-shadow: 0 0 0 0.2rem rgba(39, 176, 147, 0.15);
}

/* Loading Indicator */
.loading-indicator {
	border-top-color: var(--glerp-primary);
}

/* Pulse Animation Override */
@keyframes glerp-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.pulse-animation {
	animation: glerp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===================================================================
   MOBILE HAMBURGER MENU FIX
   =================================================================== */

/* Fix invisible hamburger icon on mobile
 * Problem: Frappe's navbar.scss sets stroke: none on line 44
 * Solution: Override and restore stroke using Frappe's icon color variable
 * Uses --icon-stroke so clients can customize via Website Theme settings
 */

.navbar-light .navbar-toggler .icon,
.navbar-light .navbar-toggler svg.icon {
	stroke: var(--icon-stroke) !important;  /* Uses Frappe's icon color variable */
	fill: var(--icon-fill) !important;  /* Uses Frappe's icon fill variable (transparent) */
	stroke-width: 2px;
}

/* Ensure icon visible on all navbar color schemes */
.navbar-toggler .icon {
	stroke: var(--icon-stroke) !important;
	fill: var(--icon-fill) !important;
	stroke-width: 2px;
}

/* Optional: Add subtle hover effect */
.navbar-light .navbar-toggler:hover .icon,
.navbar-light .navbar-toggler:focus .icon {
	opacity: 0.7;
}

/* ===================================================================
   NAVBAR FADE-IN ANIMATION (ELIMINATES VISIBLE FLICKER)
   =================================================================== */

/* HOW IT WORKS (Updated Approach - Zero Flicker):
 *
 * 1. CRITICAL INLINE CSS (www_hooks.py):
 *    - Injected directly into <head> BEFORE body renders
 *    - Hides navbar immediately with opacity: 0, visibility: hidden
 *    - Prevents any flash of default navbar
 *    - NOTE: No transform property (it breaks Bootstrap dropdowns)
 *
 * 2. JAVASCRIPT ANIMATION (navbar_animation.js):
 *    - Waits 350ms for My Theme colors to load
 *    - Removes critical CSS style tag
 *    - Animates navbar in with smooth fade-in effect (opacity only)
 *    - Explicitly removes transform property to prevent dropdown issues
 *
 * 3. RESULT:
 *    - Zero visible flicker - navbar hidden before HTML renders
 *    - User only sees final color after 350ms fade-in
 *    - Bootstrap dropdowns work correctly (no transform stacking context)
 *
 * PROS:
 * ✅ Zero visible flicker - critical CSS loads before body
 * ✅ Professional fade-in animation
 * ✅ Works with any navbar color (My Theme, Website Theme, defaults)
 * ✅ No code changes needed for different clients
 * ✅ Bootstrap dropdowns fully functional
 *
 * CONS:
 * ❌ Navbar appears 350ms after page load (intentional delay)
 * ❌ Adds small Python hook overhead
 *
 * TO DISABLE:
 * - Comment out "update_website_context" in hooks.py (line 116)
 * - Remove "navbar_animation.js" from web_include_js (line 39)
 */