/* ========================================
   COMMON.CSS v22 – ULTRA GLASS + MOBILE DROPDOWN FIXED
   Works BEFORE & AFTER login | No "Hi, Name" in mobile
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
    color: #222;
    overflow-x: hidden;
    line-height: 1.5;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========================================
   HEADER – ULTRA GLASS (50% TRANSPARENT)
   ======================================== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 78px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 6px 30px rgba(0, 0, 0, 0.07),
        0 1px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-header.scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(42px) saturate(200%);
    -webkit-backdrop-filter: blur(42px) saturate(200%);
    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.app-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #222;
    font-weight: 700;
    font-size: 1.35rem;
    transition: transform 0.2s ease;
}
.logo:hover { transform: scale(1.04); }
.logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

/* Desktop Nav */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-btn {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    transition: background 0.22s ease, color 0.22s ease;
}
.nav-btn:hover { background: rgba(0, 0, 0, 0.08); }
.nav-btn.primary {
    background: #47c2e2;
    color: #fff;
    font-weight: 700;
}
.nav-btn.primary:hover { background: #3aa8c7; }
.nav-btn.logout { color: #e63946; }
.nav-btn.logout:hover { background: rgba(230, 57, 70, 0.15); }

/* "Hi, Name" Button */
.nav-btn.greeting {
    background: rgba(0, 0, 0, 0.06);
    color: #444;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}
.nav-btn.greeting:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    position: relative;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}
.menu-toggle:hover { background: rgba(0, 0, 0, 0.08); }
.menu-toggle svg {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
}
.menu-toggle .icon-open { opacity: 1; }
.menu-toggle .icon-close { opacity: 0; }
.menu-toggle[aria-expanded="true"] .icon-open { opacity: 0; }
.menu-toggle[aria-expanded="true"] .icon-close { opacity: 1; }

/* ========================================
/* ========================================
   PAGE LAYOUT FIX – FOOTER AT BOTTOM
   ======================================== */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* Main content expands to fill remaining space */
.page-content {
    flex: 1 0 auto;
    padding-top: 78px; /* header height */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ========================================
   FOOTER – ULTRA GLASS (WHITE TEXT + FIXED BOTTOM)
   ======================================== */
.app-footer {
    flex-shrink: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.50); /* darker glass */
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 -6px 30px rgba(0, 0, 0, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: #7d7e81; /* all footer text white */
}

/* Footer content layout */
.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Footer links - white, no underline */
.footer-content .links a,
.footer-content .intoque a {
    color: #7d7e81 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Hover state: slightly dimmer */
.footer-content .links a:hover,
.footer-content .intoque a:hover {
    color: #f1f1f1 !important;
    text-decoration: none !important;
}

/* Mobile footer alignment */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}


/* ========================================
   MOBILE RESPONSIVE – 100% WORKING DROPDOWN
   Click to show | Keeps your working styles
   ======================================== */
@media (max-width: 768px) {
    .app-header {
        height: 68px;
        padding: 0 0.75rem;
    }
    .logo-img { height: 38px; }
    .logo { font-size: 1.25rem; }
    .menu-toggle { display: flex; }

    /* HIDE "Hi, Name" ON MOBILE */
    .nav-btn.greeting { display: none !important; }

    /* MOBILE DROPDOWN – HIDDEN BY DEFAULT */
    .nav-links {
        position: absolute;
        top: 68px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(32px) saturate(180%);
        -webkit-backdrop-filter: blur(32px) saturate(180%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        flex-direction: column;
        padding: 0 1rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: 
            max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            visibility 0.3s;
        z-index: 3000;
        pointer-events: none;
    }

    /* SHOW ONLY ON CLICK */
    .nav-links.active {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ALL LINKS & BUTTONS – YOUR ORIGINAL STYLES */
    .nav-links a,
    .nav-links .nav-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.95rem 0;
        font-weight: 600;
        color: #222;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        transition: background 0.2s ease;
    }
    .nav-links a:last-child,
    .nav-links .nav-btn:last-child {
        border-bottom: none;
    }
    .nav-links .nav-btn.primary,
    .nav-links .nav-btn.logout {
        background: #47c2e2;
        color: #fff;
        border-radius: 8px;
        margin: 0.5rem 0;
        padding: 0.75rem 0;
    }
    .nav-links .nav-btn.logout {
        background: #e63946;
    }

    .page-content { padding-top: 68px; }
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .logo { font-size: 1.1rem; }
    .logo-img { height: 36px; }
    .nav-links a,
    .nav-links .nav-btn {
        padding: 0.8rem 0;
        font-size: 0.95rem;
    }
}