/* =========================================================
   GT Toolbar (sexy skin) — uses your existing CSS vars
   Drop-in overrides for:
   .GTToolbarMain / .GTMenubar / .GTToolbar / .GTToolbarItem etc.
   ========================================================= */

/* Optional: if you reference --ToolbarMain in markup, define a sane default */
:root {
    --ToolbarMain: var(--surface-2);
}

/* ---------- Top “module” bar (Home / Reporting / Views / …) ---------- */
.GTToolbarMain {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: radial-gradient(1200px 240px at 15% 0%, color-mix(in srgb, var(--main), transparent 80%), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--surface-3), transparent 38%), transparent 24%), var(--glass-tint);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 10px 28px color-mix(in srgb, #000, transparent 65%), inset 0 1px 0 color-mix(in srgb, var(--text), transparent 92%);
}

    /* subtle “premium” highlight line */
    .GTToolbarMain::before {
        content: "";
        display: block;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--main), transparent 55%), transparent);
        opacity: .95;
    }

.GTMenubar {
    list-style: none;
    margin: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* avoid float chaos if legacy CSS exists */
    float: none !important;
}

/* Base tab item */
.GTMenubarItem,
.GTActiveMenuItem {
    user-select: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 650;
    letter-spacing: .2px;
    border: 1px solid transparent;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Inactive */
.GTMenubarItem {
    color: var(--text-muted);
    background: transparent;
}

    .GTMenubarItem:hover {
        color: var(--text);
        background: color-mix(in srgb, var(--surface-2), transparent 40%);
        border-color: var(--border);
        transform: translateY(-1px);
    }

/* Active tab */
.GTActiveMenuItem {
    color: var(--text-over-main);
    background: color-mix(in srgb, var(--MainColor), transparent 30%);
    border-color: var(--main-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
    position: relative;
}

    /* Active accent underline */
.GTActiveMenuItem::after {
        content: "";
        position: absolute;
        left: 4px !important;
        right: 4px !important;
        bottom: -7px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--main), color-mix(in srgb, var(--main), transparent 43%));
        box-shadow: 0 10px 18px color-mix(in srgb, var(--main), transparent 25%);
    }

/* The “SUPER ADMIN” labels are <label> sitting inside the <ul> */
.GTMenubar label {
    margin-left: 8px !important;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800 !important;
    letter-spacing: .4px;
    background: color-mix(in srgb, #ff3b3b, transparent 85%);
    border: 1px solid color-mix(in srgb, #ff3b3b, transparent 55%);
    color: color-mix(in srgb, var(--text), #ff3b3b 10%);
}

/* =========================
   Main menu image (top-left)
   ========================= */

/* Make the left slot align with the new tighter toolbar height */
#mainmenu {
    width: 56px;
    height: 30px;
    display: grid;
    place-items: center;
    float: left; /* keep your legacy layout */
}
.mainmenuImage {
    position: relative;
    background: var(--LoginLogoBackColor);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 69px;
    height: 31px;
    border-radius: 10px;
}

.mainmenuImage__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* like background-size: contain */
    pointer-events: none; /* click still hits the div */
}
/* The clickable logo "button" */


/* subtle “glass” highlight */
/*.mainmenuImage::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 13px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text), transparent 92%),
    transparent 55%);
  pointer-events:none;
  opacity: .9;
}*/

/* Hover = same language as your icon tiles */
.mainmenuImage:hover{
  transform: translateY(-1px);
  
  border-color: color-mix(in srgb, var(--main), transparent 58%);
  box-shadow:
    0 10px 18px color-mix(in srgb, #000, transparent 78%),
    0 0 0 3px var(--focus-ring);
}

/* If your logo has transparent edges, this helps it pop */
.mainmenuImage{
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--text), transparent 86%));
}

/* Keyboard focus */
.mainmenuImage:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring), 0 10px 18px color-mix(in srgb, #000, transparent 78%);
}

/* (Optional) If the hamburger/whatever icon next to it looks off, align it */
#mainmenu img, #mainmenu svg{
  max-width: 24px;
  max-height: 24px;
}

/* =========================
   Optional: right-side logo tile polish
   ========================= */
.GTToolbarItemLogo{
  height: 52px;             /* match your tightened tile height */
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 45%);
  background: color-mix(in srgb, var(--surface), transparent 45%);
  box-shadow: 0 10px 18px color-mix(in srgb, #000, transparent 85%);
}

.GTToolbarItemLogo:hover{
  border-color: color-mix(in srgb, var(--main), transparent 70%);
  box-shadow: 0 10px 18px color-mix(in srgb, #000, transparent 80%), 0 0 0 3px var(--focus-ring);
}

/* Main toolbar UL */
.GTToolbar {
    list-style: none;
    margin: 0;
    padding: 10px 10px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* kill legacy float styles gracefully */
    float: none;
}

/* Individual toolbar button */
.GTToolbarItem {
    height: 56px;
    min-width: 70px;
/*    margin-top: 4px;*/
    padding: 6px 10px;
    border-radius: 16px;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: color-mix(in srgb, var(--surface), transparent 35%);
    border: 1px solid color-mix(in srgb, var(--border), transparent 30%);
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

    .GTToolbarItem:hover {
        transform: translateY(-2px);
        background: color-mix(in srgb, var(--surface-2), transparent 20%);
        border-color: color-mix(in srgb, var(--main), transparent 55%);
        box-shadow: 0 12px 22px color-mix(in srgb, #000, transparent 72%), 0 0 0 3px var(--focus-ring);
    }

/* Container for icon */
.GTToolbarImage {
  /*  width: 34px;*/
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--surface-2), transparent 35%);
    border: 1px solid color-mix(in srgb, var(--border), transparent 45%);
    transition: background .15s ease, border-color .15s ease;
}

.GTToolbarItem:hover .GTToolbarImage {
    background: color-mix(in srgb, var(--surface-3), transparent 30%);
    border-color: color-mix(in srgb, var(--main), transparent 70%);
}

/* Labels */
.GTToolbarText,
.GTToolbarFAText {
    margin: 4px 0 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 650;
    letter-spacing: .15px;
    color: var(--text-muted);
}

.GTToolbarItem:hover .GTToolbarText,
.GTToolbarItem:hover .GTToolbarFAText {
    color: var(--text);
}

/* FontAwesome icon sizing */
.ToolBarFont {
    font-size: 22px;
    line-height: 1;
    color: inherit;
    /* little crispness on dark */
    filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--text), transparent 85%));
}

/* If you have legacy PNG/CSS icons using .ToolBarImage, keep them aligned */
.ToolBarImage {
    width: 22px;
    height: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---------- “Ask Bob” BETA bubble ---------- */
.beta-bubble {
    position: absolute;
    transform: translate(18px, -10px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text-over-main);
    background: var(--main-hard);
    border: 1px solid var(--main-border);
    box-shadow: 0 10px 18px color-mix(in srgb, var(--main), transparent 72%);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .beta-bubble {
        animation: betaPulse 2.1s ease-in-out infinite;
    }

    @keyframes betaPulse {
        0%,100% {
            box-shadow: 0 0 0 0 transparent, 0 10px 18px color-mix(in srgb, var(--main), transparent 72%);
        }

        50% {
            box-shadow: 0 0 0 7px color-mix(in srgb, var(--main), transparent 88%), 0 10px 18px color-mix(in srgb, var(--main), transparent 72%);
        }
    }
}

/* ---------- Right-side logo item ---------- */
.GTToolbarItemLogo {
    margin-left: auto;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface), transparent 35%);
    border: 1px solid color-mix(in srgb, var(--border), transparent 30%);
    box-shadow: 0 10px 18px color-mix(in srgb, #000, transparent 80%);
}

    .GTToolbarItemLogo #menulogo {
        cursor: pointer;
        transition: transform .12s ease, filter .15s ease;
    }

    .GTToolbarItemLogo:hover #menulogo {
        transform: scale(1.02);
        filter: drop-shadow(0 10px 16px color-mix(in srgb, #000, transparent 75%));
    }

/* ---------- Small polish / accessibility ---------- */
.GTMenubarItem:focus-visible,
.GTActiveMenuItem:focus-visible,
.GTToolbarItem:focus-visible,
.mainmenuImage:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* On touch devices, reduce hover “lift” */
@media (hover: none) {
    .GTMenubarItem:hover,
    .GTToolbarItem:hover,
    .mainmenuImage:hover {
        transform: none;
    }
}

/* Optional: keep toolbar compact if text wraps */
.GTToolbarItem p {
    white-space: nowrap;
}

/* ============================
   Tighten + refine (overrides)
   ============================ */

/* 1) Make the whole stack a bit slimmer */
.GTToolbarMain .GTMenubar {
    padding: 2px 10px;
}
.SubToolBar{
    /*height:70px;*/
}
.GTToolbar {
    padding: 4px 10px;
    height: 100%;
}

#mainmenu {
    height: 64px;
}

/* 2) Tabs: less “pill”, more “premium tab” */
.GTMenubarItem,
.GTActiveMenuItem {
    padding: 7px 11px;
    border-radius: 10px; /* was 12 */
    font-size: 13px;
}

    /* Underline: slightly closer + thinner */
    .GTActiveMenuItem::after {
        bottom: -6px; /* was -7 */
        height: 2px; /* was 3 */
        left: 16px;
        right: 16px;
        box-shadow: 0 8px 14px color-mix(in srgb, var(--main), transparent 74%);
    }

/* 3) Second row: reduce “big card” feel */
/*.GTToolbarItem {
    height: 52px;
    min-width: 64px;
    padding: 2px 9px;
    border-radius: 14px;*/ /* was 16 */
    /*background: color-mix(in srgb, var(--surface), transparent 45%);*/ /* lighter */
    /*border: 1px solid color-mix(in srgb, var(--border), transparent 45%);
}*/

    /* Hover: keep lift, but reduce shadow heaviness */
    .GTToolbarItem:hover {
        transform: translateY(-1px); /* was -2 */
        box-shadow: 0 10px 18px color-mix(in srgb, #000, transparent 78%), 0 0 0 3px var(--focus-ring);
    }

/* 4) Icon “tile”: make it more subtle (less tile-in-tile) */
.GTToolbarImage {
  /*  width: 32px;*/
    height: 32px;
    border-radius: 11px;
    background: transparent; /* remove inner tile fill */
    border: 1px solid transparent; /* remove inner border */
}

/* But on hover, add just a hint */
.GTToolbarItem:hover .GTToolbarImage {
    background: color-mix(in srgb, var(--surface-2), transparent 55%);
    border-color: color-mix(in srgb, var(--border), transparent 55%);
}

/* 5) Labels: slightly smaller, tighter, higher contrast */
.GTToolbarText,
.GTToolbarFAText {
    font-size: 11px;
    margin-top: 3px;
    color: var(--text-subtle); /* was muted */
}

.GTToolbarItem:hover .GTToolbarText,
.GTToolbarItem:hover .GTToolbarFAText {
    color: var(--text);
}

/* 6) FontAwesome sizing: a bit smaller so it feels cleaner */
.ToolBarFont {
    font-size: 32px;
}

/* 7) Beta chip: smaller + anchor it neatly to top-right of the tile */
.GTToolbarItem {
    position: relative;
}
/* ensures chip anchors correctly */

.beta-bubble {
    transform: none; /* kill the old translate */
    position: absolute;
/*    top: -7px;*/
    right: 10px;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 999px;
    opacity: .95;
}

/* 8) (Optional) If the second bar background is too flat, give it a subtle gradient */
div[style*="--ToolbarMain"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2), transparent 25%), var(--ToolbarMain)) !important;
    border-bottom: 1px solid var(--border);
}