/**
 * layout.css
 * header/sidebar/dropdown এর জন্য shared structural CSS।
 * আগে এগুলো head.php আর header.php এর ভেতরে ছড়ানো inline <style> ছিল।
 */

.bg-gradient-auth {
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%) !important;
}
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
}

/* Sidebar (mobile drawer) */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.sidebar.active {
    transform: translateX(0);
}
.sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Profile dropdown */
.profile-dropdown {
    width: 14rem !important;
    min-width: 14rem !important;
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}
.profile.active .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.guest-profile-dropdown,
.guest-notification-dropdown {
    animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar submenus */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.submenu.active {
    max-height: 500px;
}
.submenu-icon {
    transition: transform 0.3s ease-in-out;
}
.has-submenu.active .submenu-icon {
    transform: rotate(180deg);
}

/* Desktop nav dropdowns */
.desktop-nav-item {
    position: relative;
}
.desktop-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0.75rem 0;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.desktop-nav-item:hover .desktop-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.desktop-nav-item button i.fa-chevron-down {
    display: none !important;
}

/* Theme toggle button */
.theme-toggle-btn {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: background-color .2s;
}
.theme-toggle-btn:hover {
    background-color: var(--surface-alt);
}
.theme-toggle-btn .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .fa-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle-btn .fa-moon { display: none; }

/* Mobile header responsive rules (Tier 1 <768px, Tier 2 <=380px) */
@media (max-width: 767px) {
    .hdr-currency-label { display: none !important; }
    .hdr-currency-btn { padding: 4px 8px !important; gap: 10px !important; }
    .right-section > :not([hidden]) ~ :not([hidden]),
    .right-section > div > :not([hidden]) ~ :not([hidden]) { margin-left: 16px !important; }

    #menuToggle { display: block !important; }
    .desktop-nav { display: none !important; }
    .desktop-balance { display: none !important; }
    .mobile-balance { display: flex !important; }
    .right-section { margin-left: auto; }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 65% !important;
        background: var(--surface) !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar-overlay { display: block !important; }
}

@media (max-width: 380px) {
    .right-section > :not([hidden]) ~ :not([hidden]),
    .right-section > div > :not([hidden]) ~ :not([hidden]) { margin-left: 12px !important; }
    .hdr-currency-btn { padding: 3px 6px !important; font-size: 11px !important; }
    .hdr-icon { font-size: 20px !important; }
    .hdr-profile-btn { padding: 3px !important; }
    .hdr-profile-icon { font-size: 18px !important; }
}

@media (min-width: 768px) {
    #menuToggle { display: none !important; }
    .desktop-nav { display: flex !important; margin-left: auto; }
    .desktop-balance { display: flex !important; }
    .mobile-balance { display: none !important; }
    .header-container { justify-content: space-between; }
    .sidebar { display: none !important; }
    .sidebar-overlay { display: none !important; }
    main { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; }
}