/* ===== GME ADMIN — SHARED BRANDED TOP BAR ===== */
/* Version: 1.0 — 2026-06-13                                                  */
/*                                                                            */
/* Green branded header (logo, title, user chip, Refresh / Settings gear /    */
/* Logout) rendered above the white category nav (shared/nav.css). Mounted by */
/* GMETopBar.mount() in shared/topbar.js. Colors key off the design-system    */
/* variables defined in dashboard-home.css (--gme-green, --gme-green-bright).  */

.gme-topbar {
    position: relative;
    /* Clean white SaaS header. No overflow:hidden — it would clip the gear
       dropdown; the hero banner fades its own edges via a CSS mask. */
    background: #ffffff;
    color: #17233a;
    border-bottom: 1px solid #ecefe9;
    box-shadow: 0 1px 2px rgba(20, 35, 25, 0.04);
    z-index: 51;
}

/* Pebble Beach hero banner — sits center/right between the title block and the
   control section. Edges fade to white on all four sides (intersected masks)
   so the photo melts into the header instead of looking pasted in.            */
.gme-topbar-hero {
    flex: 0 1 540px;
    min-width: 0;
    align-self: stretch;
    margin-left: auto;          /* hug toward the controls (center/right) */
    border-radius: 14px;
    background-image: none;   /* set inline by topbar.js (resolves relative to the page) */
    background-size: cover;
    background-position: center 42%;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

.gme-topbar-inner {
    position: relative;
    z-index: 1;
    max-width: 88rem;
    margin: 0 auto;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ----- Left: logo + title ----- */
.gme-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.gme-topbar-logo {
    height: 2.25rem;
    width: auto;
    flex-shrink: 0;
    /* Dark brand logo shows as-is on the white header. */
}
.gme-topbar-divider {
    width: 1px;
    height: 2.1rem;
    align-self: center;
    background: #e6e9e2;
    flex-shrink: 0;
}
.gme-topbar-titles { min-width: 0; }
.gme-topbar-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #17233a;            /* dark navy */
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gme-topbar-subtitle {
    font-size: 0.74rem;
    color: #6b7787;            /* muted navy-gray */
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Right: clean control section (user chip + buttons) ----- */
.gme-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    padding: 0.3rem 0.35rem;
    background: #fbfcfa;
    border: 1px solid #ebeee8;
    border-radius: 0.85rem;
}

/* thin divider between the user chip and the action buttons */
.gme-topbar-sep {
    width: 1px;
    height: 1.6rem;
    background: #e6e9e2;
    flex-shrink: 0;
    margin: 0 0.05rem;
}

.gme-user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.18rem 0.55rem 0.18rem 0.2rem;
}
.gme-user-avatar {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: var(--gme-green-bright, #1d7a3e);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    text-transform: uppercase;
}
.gme-user-meta { line-height: 1.2; text-align: left; }
.gme-user-name { font-size: 0.82rem; font-weight: 700; color: #17233a; }
.gme-user-email { font-size: 0.68rem; color: #7c8a7e; }

.gme-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    color: var(--gme-green, #1a3d28);
    background: #ffffff;
    border: 1px solid #e2e6df;
    box-shadow: 0 1px 1px rgba(20, 35, 25, 0.03);
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.gme-topbar-btn:hover:not(:disabled) { background: var(--gme-cream, #faf8f1); border-color: #d5dccf; }
.gme-topbar-btn:disabled { opacity: 0.55; cursor: default; }
.gme-topbar-btn-icon {
    padding: 0.45rem 0.55rem;   /* square-ish for the gear */
    font-size: 0.95rem;
}

.gme-topbar-btn-primary {
    color: #ffffff;
    background: var(--gme-green-bright, #1d7a3e);
    border-color: var(--gme-green-bright, #1d7a3e);
}
.gme-topbar-btn-primary:hover:not(:disabled) { background: var(--gme-green, #1a3d28); border-color: var(--gme-green, #1a3d28); }

.gme-spin { display: inline-block; animation: gme-spin 0.8s linear infinite; }
@keyframes gme-spin { to { transform: rotate(360deg); } }

/* ----- Settings gear dropdown (reuses nav-dropdown visual language) ----- */
.gme-gear-wrap { position: relative; }
.gme-gear-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    background: #ffffff;
    border: 1px solid var(--gme-nav-border, #e7e2d5);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 35, 25, 0.22);
    padding: 6px 0;
    display: none;
    z-index: 70;
}
.gme-gear-wrap.gme-open > .gme-gear-menu { display: block; }
.gme-gear-heading {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gme-muted, #75806f);
    padding: 4px 14px 6px;
}
.gme-gear-item,
.gme-gear-item-soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.83rem;
    text-decoration: none;
    white-space: nowrap;
}
.gme-gear-item { color: #374151; }
.gme-gear-item:hover,
.gme-gear-item:focus {
    background: var(--gme-nav-hover, #f3f0e4);
    color: var(--gme-nav-accent, #1a3d28);
    outline: none;
}
.gme-gear-item.gme-nav-active {
    color: var(--gme-nav-accent, #1a3d28);
    font-weight: 700;
    background: var(--gme-nav-hover, #f3f0e4);
}
.gme-gear-item-soon { color: #b3aea0; cursor: default; }

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .gme-topbar-hero { display: none; }   /* decorative — drop it before it crowds the controls */
}
@media (max-width: 768px) {
    .gme-topbar-title { font-size: 1rem; }
    .gme-topbar-subtitle { display: none; }
}
@media (max-width: 640px) {
    .gme-user-meta { display: none; }
    .gme-topbar-divider { display: none; }
    .gme-topbar-sep { display: none; }
    .gme-topbar-btn span.gme-btn-label { display: none; }
}