/* Brand Color Definitions */
:root {
    --eccph-maroon: #800000;
    --eccph-maroon-hover: #5d0000;
    --eccph-gray: #6c757d;
    --eccph-gray-light: #f8f9fa;
    --eccph-gray-border: #dee2e6;
}

/* Force relative wrapper on the header avatar button */
.eccph-header-user-menu {
    position: relative !important;
    display: inline-block;
    z-index: 999999 !important;
}

/* Force fixed styling on the dropdown card so general theme styles cannot pollute it */
.eccph-header-user-menu .profile-panel,
.eccph-header-user-menu .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 280px !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    padding: 16px !important;
    margin: 0 !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Reset link and text styling inside dropdown */
.eccph-header-user-menu .profile-panel *,
.eccph-header-user-menu .dropdown-menu * {
    box-sizing: border-box !important;
}

.eccph-header-user-menu .profile-panel a,
.eccph-header-user-menu .dropdown-menu a {
    color: #333333 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
    border: none !important;
}

.eccph-header-user-menu .profile-panel a:hover,
.eccph-header-user-menu .dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #800000 !important; /* ECCPH Maroon/Red */
}

/* Prevent container clipping in archives, custom templates, or Elementor headers */
.site-header, 
.elementor-location-header, 
header.eccph-header {
    overflow: visible !important;
    z-index: 99999 !important;
}

/* Override Blue Focus Outline on Avatar Triggers */
.eccph-avatar-toggle,
.eccph-avatar-toggle:focus,
.eccph-avatar-toggle:active,
.eccph-avatar-toggle.show {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Fallback Profile Avatar Badges */
.eccph-avatar-mini {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
}
.eccph-avatar-large {
    width: 80px;
    height: 80px;
    font-size: 2.25rem;
    border: 3px solid #fff;
}

/* Nav Tab Interface Configuration */
.nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: var(--eccph-gray) !important;
}
.nav-tabs .nav-link.active {
    color: var(--eccph-maroon) !important;
    border-bottom: 3px solid var(--eccph-maroon) !important;
}

/* Card Branding Layout Line */
.eccph-card {
    border-top: 5px solid var(--eccph-maroon) !important;
}

/* Text and Badge Utilities */
.text-eccph-maroon {
    color: var(--eccph-maroon) !important;
}
.text-eccph-gray {
    color: var(--eccph-gray) !important;
}
.bg-eccph-maroon {
    background-color: var(--eccph-maroon) !important;
}
.btn-eccph-maroon {
    background-color: var(--eccph-maroon) !important;
    border-color: var(--eccph-maroon) !important;
    color: #fff !important;
}
.btn-eccph-maroon:hover {
    background-color: var(--eccph-maroon-hover) !important;
    border-color: var(--eccph-maroon-hover) !important;
    color: #fff !important;
}
.btn-eccph-gray {
    background-color: var(--eccph-gray) !important;
    border-color: var(--eccph-gray) !important;
    color: #fff !important;
}
.btn-eccph-gray:hover {
    background-color: #565e64 !important;
    border-color: #4e555b !important;
}
.badge-eccph-maroon {
    background-color: var(--eccph-maroon) !important;
}
.badge-eccph-gray {
    background-color: var(--eccph-gray) !important;
}

/* Styled Secret Key block */
.eccph-secret-code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f1f1f1;
    color: #333;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    display: inline-block;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    border: 1px solid var(--eccph-gray-border);
}

/* 2FA Verification Inputs */
.eccph-otp-input {
    letter-spacing: 0.35em;
    font-size: 1.75rem;
    text-align: center;
    font-weight: bold;
    max-width: 280px;
    margin: 0 auto;
}

/* Admin Panel Scoped Container Overrides */
.eccph-admin-scope {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
.eccph-admin-scope .eccph-card {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}