/* Custom styles for arrows and hamburger menu visibility */

/* ======= TABLE STYLES - match real site ======= */
th {
    color: #aaa !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    padding: 10px 10px !important;
    text-align: left !important;
    border-top: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    text-transform: capitalize !important;
}
td {
    padding: 22px 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 15px !important;
    vertical-align: middle !important;
    color: #333 !important;
}

/* Page title - match real site */
.page-title {
    text-align: center !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #1a2942 !important;
    margin: 50px 0 40px !important;
    letter-spacing: -0.5px;
}

/* GOVERNMENT TOP STRIP - match real site with grid icon */
.government-strip {
    background-color: #f8f9fa !important; /* Very light grey/white */
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 14px !important;
    color: #666 !important;
}
.government-strip i.portal-grid {
    font-size: 16px !important;
    color: #333 !important;
}

/* App header logo section - white outline borders */
.app-header-top, .app-header__main {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    background-color: #1a2942 !important; /* Force navy */
    height: 60px !important; /* Fixed height for consistency */
    border-top: 1px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    padding: 0 !important; /* Remove padding to let buttons fill height */
}

.app-header-top .app-container, .app-header__main .app-container {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
}

.logo-holder {
    display: flex !important;
    align-items: center !important;
    padding: 0 30px !important;
    border-right: 1px solid #ffffff !important; /* Vertical line after logo */
    height: 100% !important;
}

/* ======= NAV STYLES ======= */
.app-header-bottom, .app-header__menu {
    background-color: #1a2942 !important; /* Force navy as in SS */
    border-top: none !important;
    border-bottom: 1px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
}

.top-menu { 
    margin-left: 0 !important; 
    display: flex !important; 
    height: 100% !important;
}
.top-menu a, .app-header__menu ul li a { 
    color: #ffffff !important; /* White links as in SS */
    text-decoration: none !important; 
    font-size: 13px !important; 
    font-weight: 600 !important;
    padding: 0 25px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 48px !important; /* Ensure consistent height across layouts */
    border-right: 1px solid #ffffff !important; /* Vertical separators */
    transition: background 0.2s;
}
.top-menu a:first-child, .app-header__menu ul li:first-child a {
    border-left: 1px solid #ffffff !important;
}
.menu-item { padding: 0 !important; } /* Reset menu-item padding if any */
.top-menu a:hover, .top-menu a.active, .app-header__menu ul li a:hover { 
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: white !important; 
}
.top-menu a.active { 
    border-bottom: 2px solid white; 
}

/* Style the existing chevron icons in navbar */
.menu-item__icon {
    font-size: 10px !important;
    margin-left: 8px !important;
    color: #8bb3ff !important;
    transform: none !important;
}

.app-header__main__actions-holder {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
}

/* Header Action Buttons (Go to eApplications) */
.main-link-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 30px !important; /* Increased padding as in SS */
    height: 100% !important;
    min-height: 60px !important;
    text-decoration: none !important;
    position: relative !important;
    background-color: #5a87e8 !important; 
    color: white !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    border-right: 1px solid #ffffff !important; /* Vertical separator */
}

.main-link-button.white-button {
    background-color: white !important;
    color: #1a2942 !important; /* Dark navy text */
    border: none !important;
}

.main-link-button.white-button span {
    color: #1a2942 !important;
}

.main-link-button.white-button::after {
    color: #1a2942 !important; /* Dark chevron */
}

.main-link-button span:first-child {
    font-size: 10px !important;
    opacity: 0.8 !important;
    text-transform: none !important;
}

.main-link-button span:nth-child(2) {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.main-link-button::after {
    display: none !important; /* Remove chevron as in SS */
}

/* Body Content Styles */
.e-applications-section__item {
    border-left: 3px solid #4A90E2 !important;
    padding-left: 15px !important;
    margin-bottom: 15px !important;
}

/* Icons and Fixes */
.fa, .fas, .fa-solid {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free", sans-serif !important;
}

/* Force all chevrons to point right */
[class*="fa-chevron-"]::before,
.menu-item__icon::before {
    content: "\f054" !important;
}

/* Blue Arrows for Body Content */
.app-hyperlink::after,
.app-btn::after,
.app-btn-wide::after,
.page-card-section__item__details a::after,
.e-applications-section__block__content a::after,
.fa-arrow-right::before {
    color: #4A90E2 !important;
    margin-left: 8px;
    font-size: 1em;
    display: inline-block !important;
    transform: none !important;
}

.app-hyperlink {
    color: #4A90E2 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.app-btn-primary, 
.btn-start, 
.page-visa-discovery-section__action__holder .app-btn,
.app-btn-wide {
    background-color: #4A90E2 !important;
    color: white !important;
    border: none !important;
}

/* Hover effects */
.app-hyperlink:hover::after, .app-btn:hover::after {
    transform: translateX(3px) !important;
}

/* Mobile adjustments */
.mobile-menu-button {
    cursor: pointer;
    z-index: 10002;
    padding: 10px !important;
    display: none;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 991px) {
    .mobile-menu-button { display: flex !important; }
}

/* Hamburger Icon */
.mobile-menu-button .fa-bars::before {
    content: "" !important;
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    box-shadow: 0 7px 0 0 white, 0 -8px 0 0 white; /* Hand-tuned for better spacing */
}

/* Fix mobile menu background */
.app-header.open .app-header__menu {
    background: #1a2942 !important;
    display: block !important;
}

/* Prevent menu icon rotation in mobile */
.app-header__menu .menu-item__icon {
    transform: rotate(0deg) !important;
    color: #8bb3ff !important;
}

/* Page Titles */
.page-title { 
    text-align: center !important; 
    color: #253956 !important; 
    margin: 60px 0 !important; 
    font-weight: bold !important; 
    font-size: 44px !important; 
}

/* Logo Vertical Bars (Red/Blue/White) */
.logo-flag {
    display: flex !important;
    width: 6px !important;
    height: 50px !important;
    background: linear-gradient(to bottom, #d60812 0%, #d60812 33%, #003896 33%, #003896 66%, #ffffff 66%, #ffffff 100%) !important;
    margin-right: 15px !important;
}
.logo-flag img { display: none !important; } /* Use CSS background instead of SVG for precision if needed */

/* Open Request Button */
.btn-open { 
    background-color: #253956 !important; 
    color: white !important; 
    border: none !important; 
    padding: 8px 24px !important; 
    border-radius: 4px !important; 
    font-size: 13px !important; 
    line-height: 1.2 !important;
    font-weight: bold !important; 
    cursor: pointer !important; 
    transition: 0.2s !important;
    text-align: center !important;
}
.btn-open:hover { background-color: #1a2942 !important; }

/* User Profile Box - matches full-height block design */
.user-box { 
    background-color: #ffffff !important; 
    color: #1a2942 !important; 
    padding: 0 18px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important;
    align-self: stretch !important; /* Stretches from top to bottom edge natively */
    margin-right: 5% !important;
    font-weight: 500 !important; 
    font-size: 11px !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.2px !important;
    border-radius: 0 !important; /* Sharp block corners */
    box-shadow: none !important;
    width: 280px !important; /* Fixed width to center above languages */
    justify-content: center !important;
    margin-right: 5% !important;
}
/* Show user name left, restrict width gracefully */
.user-box .user-name-text { 
    display: inline-block !important; 
    color: #7a828f !important; /* Accurate light grey font from screenshot */
    max-width: 170px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.user-box .user-aa-text { display: none !important; }
.user-box i { display: flex !important; font-size: 17px !important; color: #1a2942 !important; margin-left: 10px; }

/* Language Toggle Fix */
.language-toggle { 
    display: flex !important; 
    gap: 15px !important; 
    align-items: center !important; 
    justify-content: center !important;
    font-size: 11px !important; 
    text-transform: uppercase !important; 
    margin-left: auto !important; 
    width: 280px !important; /* Match name box above */
    margin-right: 0px !important; /* Gap handled by container padding */
}
.language-toggle a { color: #d1d9e6 !important; text-decoration: none !important; transition: 0.2s; }
.language-toggle a.active, .language-toggle a:hover { color: white !important; font-weight: bold !important; }
.language-toggle i { color: #d1d9e6 !important; font-size: 14px !important; }

/* Unified Footer */
.footer-banner { 
    background-color: #253956 !important; 
    color: #d1d9e6 !important; 
    text-align: right !important; 
    padding: 12px 5% !important; 
    font-size: 12px !important; 
    cursor: pointer !important; 
    transition: 0.2s;
}
.footer-banner:hover { color: white !important; }

.footer-bottom { 
    padding: 50px 5% !important; 
    display: flex !important; 
    align-items: flex-start !important; 
    gap: 25px !important; 
    background-color: white !important; 
    border-top: 1px solid #eee !important;
}
.footer-bottom img { height: 75px !important; }
.footer-bottom-text { margin-top: 0 !important; text-align: left !important; }
.footer-bottom h4 { margin: 0 0 8px 0 !important; font-size: 26px !important; color: #253956 !important; font-weight: bold !important; }
.footer-bottom p { margin: 0 0 5px 0 !important; font-size: 13px !important; color: #666 !important; max-width: 700px; line-height: 1.6 !important; }
.footer-bottom a { color: #5a87e8 !important; text-decoration: none !important; font-weight: 600 !important; }
.footer-bottom a:hover { text-decoration: underline !important; }

/* Table Status Badges */
.status-badge { 
    display: inline-block !important; 
    padding: 5px 15px !important; 
    font-size: 13px !important; 
    text-align: center !important; 
    color: white !important;
    border-radius: 2px !important;
    font-weight: 500 !important;
}
.status-approved { background-color: #34a853 !important; }
.status-pending { background-color: #fbbc05 !important; color: #333 !important; }
.status-processing { background-color: #4285f4 !important; }
.status-updating { background-color: #5a87e8 !important; }
.status-rejected { background-color: #ea4335 !important; }
.status-submitted { background-color: #5a87e8 !important; }

/* Responsive Header Menu */
@media only screen and (max-width: 991px) {
    .top-menu { margin-left: 0 !important; flex-wrap: wrap; }
    .top-menu a { padding: 10px 15px !important; font-size: 12px !important; }
    .user-box { margin-right: 2% !important; padding: 6px 12px !important; }
}

/* Mobile Hamburger: eApplication buttons inside menu */
.mobile-eapp-buttons {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 10px 0 5px;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 5px;
}
.mobile-eapp-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
}
.mobile-eapp-btn:hover { background: rgba(255,255,255,0.15); color: white; }
.mobile-eapp-btn.btn-blue { background-color: #5a87e8; }
.mobile-eapp-btn.btn-blue:hover { background-color: #4a77d8; }
.mobile-eapp-btn.btn-white { background-color: white; color: #1a2942; }
.mobile-eapp-btn.btn-white:hover { background-color: #f5f5f5; }
.mobile-eapp-btn .btn-label small { display: block; font-size: 10px; opacity: 0.75; font-weight: 400; margin-bottom: 1px; }
.mobile-eapp-btn .btn-label strong { display: block; font-size: 13px; }
.mobile-eapp-btn i { font-size: 13px; }

@media only screen and (max-width: 991px) {
    .mobile-eapp-buttons { display: flex !important; }
    .main-link-button { display: none !important; } /* hide header buttons on mobile, they're in menu */
}