/**
 * Etchly — Shared Account Avatar Dropdown Menu
 *
 * Single source of truth for the styling of the account dropdown
 * (avatar → Account Details / My Designs / My Orders / View Cart / Admin Portal /
 *  Live Monitor / Dark Mode / Sign Out)
 *
 * Loaded by every page that has the avatar menu, so the menu looks identical
 * everywhere. Page-specific stylesheets must NOT define rules for #accountMenu,
 * .account-menu-item, .account-menu-toggle-row, .account-menu-admin, or
 * .account-menu-signout — those belong here.
 *
 * Inherits theme variables from variables.css. Works in both dark and light
 * mode without any per-page overrides.
 */

/* ─── Container ──────────────────────────────────────────────────────── */
.account-menu-container {
    position: relative;
}

#accountMenu,
.account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    padding: 6px;
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

body.dark-mode #accountMenu,
body.dark-mode .account-menu,
html.dark-mode #accountMenu,
html.dark-mode .account-menu {
    background: var(--dark-card-bg, #1a1f27);
    border-color: var(--dark-card-border, #2d3748);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ─── Menu items (Account Details, My Designs, etc.) ─────────────────── */
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--content-text, #1a1f27);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.account-menu-item:hover {
    background: var(--light-panel, #f1f5f9);
    color: var(--accent, #00A9E0);
}

.account-menu-item i {
    color: var(--accent, #00A9E0);
    flex-shrink: 0;
}

body.dark-mode .account-menu-item,
html.dark-mode .account-menu-item {
    color: var(--dark-hi, #f7fbff);
}

body.dark-mode .account-menu-item:hover,
html.dark-mode .account-menu-item:hover {
    background: var(--dark-panel, #10151c);
}

/* ─── Admin-only block (Admin Portal, Live Monitor) ──────────────────── */
#adminMenuItems {
    border-top: 1px solid var(--card-border, #e2e8f0);
    margin-top: 4px;
    padding-top: 4px;
}

body.dark-mode #adminMenuItems,
html.dark-mode #adminMenuItems {
    border-top-color: var(--dark-card-border, #2d3748);
}

.account-menu-admin {
    color: var(--warn, #F58220) !important;
    font-weight: 600;
}

.account-menu-admin:hover {
    background: rgba(245, 130, 32, 0.08) !important;
    color: var(--warn-hover, #cc7000) !important;
}

.account-menu-admin i {
    color: var(--warn, #F58220) !important;
}

.account-menu-livemonitor {
    color: var(--accent, #00A9E0) !important;
    font-weight: 500;
}

.account-menu-livemonitor:hover {
    background: rgba(0, 169, 224, 0.08) !important;
}

.account-menu-livemonitor i {
    color: var(--accent, #00A9E0) !important;
}

/* ─── Dark mode toggle row ───────────────────────────────────────────── */
.account-menu-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--card-border, #e2e8f0);
    margin-top: 4px;
    font-size: 14px;
    color: var(--content-text, #1a1f27);
}

.account-menu-toggle-row i {
    color: var(--accent, #00A9E0);
    margin-right: 4px;
}

.account-menu-toggle-row span {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .account-menu-toggle-row,
html.dark-mode .account-menu-toggle-row {
    color: var(--dark-hi, #f7fbff);
    border-top-color: var(--dark-card-border, #2d3748);
}

/* ─── Sign out row ───────────────────────────────────────────────────── */
.account-menu-signout {
    color: var(--danger, #dc3545) !important;
    border-top: 1px solid var(--card-border, #e2e8f0);
    margin-top: 4px;
    padding-top: 12px;
    cursor: pointer;
}

.account-menu-signout:hover {
    background: rgba(220, 53, 69, 0.08) !important;
    color: var(--danger-hover, #c82333) !important;
}

.account-menu-signout i {
    color: var(--danger, #dc3545) !important;
}

body.dark-mode .account-menu-signout,
html.dark-mode .account-menu-signout {
    border-top-color: var(--dark-card-border, #2d3748);
}

/* ─── Avatar circle (the click target) ───────────────────────────────── */
#userAvatarContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#headerAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border, #e2e8f0);
    transition: border-color 0.15s;
}

#userAvatarContainer:hover #headerAvatar {
    border-color: var(--accent, #00A9E0);
}

body.dark-mode #headerAvatar,
html.dark-mode #headerAvatar {
    border-color: var(--dark-card-border, #2d3748);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — burger button + slide-out menu (≤768px)
   On mobile we hide the avatar dropdown and show a burger that opens a
   full-height slide-out drawer with the SAME menu items.
   ═══════════════════════════════════════════════════════════════════════ */

/* Burger button — hidden on desktop, shown on mobile */
.mobile-burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 8px;
    color: var(--content-text, #1a1f27);
    font-size: 22px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mobile-burger-btn:hover {
    background: var(--light-panel, #f1f5f9);
    border-color: var(--accent, #00A9E0);
    color: var(--accent, #00A9E0);
}

body.dark-mode .mobile-burger-btn,
html.dark-mode .mobile-burger-btn {
    border-color: var(--dark-card-border, #2d3748);
    color: var(--dark-hi, #f7fbff);
}

body.dark-mode .mobile-burger-btn:hover,
html.dark-mode .mobile-burger-btn:hover {
    background: var(--dark-panel, #10151c);
}

/* Slide-out drawer — full height, slides in from the right */
.mobile-slide-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 290px;
    max-width: 88vw;
    height: 100vh;
    background: var(--card-bg, #ffffff);
    border-left: 1px solid var(--card-border, #e2e8f0);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-slide-menu.open {
    transform: translateX(0);
}

body.dark-mode .mobile-slide-menu,
html.dark-mode .mobile-slide-menu {
    background: var(--dark-card-bg, #1a1f27);
    border-left-color: var(--dark-card-border, #2d3748);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

/* Drawer header (avatar + name + close button) */
.mobile-slide-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--card-border, #e2e8f0);
}

body.dark-mode .mobile-slide-menu-header,
html.dark-mode .mobile-slide-menu-header {
    border-bottom-color: var(--dark-card-border, #2d3748);
}

.mobile-slide-menu-header img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent, #00A9E0);
}

.mobile-slide-menu-header .user-info {
    flex: 1;
    min-width: 0;
}

.mobile-slide-menu-header .user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--content-text, #1a1f27);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-slide-menu-header .user-email {
    font-size: 12px;
    color: var(--muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .mobile-slide-menu-header .user-name,
html.dark-mode .mobile-slide-menu-header .user-name {
    color: var(--dark-hi, #f7fbff);
}

.mobile-slide-menu-close {
    background: none;
    border: none;
    color: var(--muted, #6b7280);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
}

/* Backdrop overlay behind the drawer */
.mobile-slide-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 999;
}

.mobile-slide-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile (≤768px): avatar hidden, burger shown, body lock when drawer open */
@media (max-width: 768px) {
    #userAvatarContainer {
        display: none !important;
    }
    .mobile-burger-btn {
        display: inline-flex;
    }
    body.menu-open {
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — header simplification across customer-facing pages (≤768px)
   On mobile, the burger drawer carries every nav link the desktop header
   shows as buttons. Hide the duplicate desktop buttons so the header is
   just brand + burger.

   Scope: only customer-facing pages that ALSO load this stylesheet AND
   have a mobileBurgerBtn. Staff/admin/workshop pages don't load this
   stylesheet at all, so they're unaffected.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hide every .btn inside header .btns EXCEPT the burger itself.
       The burger has its own class so it survives. */
    header .btns > a.btn,
    header .btns > button.btn:not(.mobile-burger-btn) {
        display: none !important;
    }
    /* Keep brand visible, scale logo to fit short mobile headers */
    header .brand img {
        max-height: 44px;
        height: 44px;
        width: auto;
    }
    /* Tighten header spacing */
    header {
        padding: 8px 14px !important;
        gap: 8px;
    }
    /* Burger anchored to right when header uses flex */
    header .btns,
    header .header-btns {
        margin-left: auto;
        gap: 6px;
    }
}