/* =============================================================================
 * Sarvella — Global Liquid Glass sticky header
 *
 * Shared by three different layouts: the admin panel, the instructor panel and
 * the Bootstrap frontend theme (student area). Written as plain CSS for that
 * reason — Tailwind lives only on the marketing pages, and pulling its
 * preflight into any of these three would reset the theme underneath them.
 *
 * Everything is namespaced under .sv-lh so it cannot touch the 226 admin pages
 * or the theme's own components.
 * ========================================================================== */

.sv-lh {
    --sv-lh-h: 66px;
    --sv-lh-primary: #0A5BFF;
    --sv-lh-primary-2: #1E88FF;
    --sv-lh-navy: #081B4B;
    --sv-lh-ink: #14203A;
    --sv-lh-ink-soft: #55617A;
    --sv-lh-radius: 16px;

    position: sticky;
    top: 0;
    z-index: 1050;          /* above Bootstrap's sticky-top (1020), below modals (1055) */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--sv-lh-h);
    padding: 8px 16px;
    font-family: "Tajawal", "Cairo", system-ui, sans-serif;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-bottom: 1px solid rgba(10, 91, 255, 0.12);
    box-shadow: 0 4px 20px -2px rgba(10, 91, 255, 0.05);
}

/* Dark navy variant, for a layout whose canvas is dark. */
.sv-lh--dark {
    --sv-lh-ink: #EAF0FF;
    --sv-lh-ink-soft: rgba(207, 224, 255, 0.72);
    background: rgba(8, 27, 75, 0.70);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
}

.sv-lh *,
.sv-lh *::before,
.sv-lh *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- sections */

.sv-lh__start,
.sv-lh__end {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;           /* lets the title truncate instead of pushing */
}

.sv-lh__start { flex: 1 1 auto; }
.sv-lh__end { flex: 0 0 auto; margin-inline-start: auto; }

/* ------------------------------------------------------------------ brand */

.sv-lh__brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.sv-lh__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(10, 91, 255, 0.18);
    /* Slow breathing float — the mascot is the one thing here allowed to move
       on its own. */
    animation: sv-lh-bob 5s ease-in-out infinite;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.sv-lh__mark img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.sv-lh__brand:hover .sv-lh__mark {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 0 22px -4px rgba(10, 91, 255, 0.75);
}

@keyframes sv-lh-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -3px; }
}

/* ------------------------------------------------------- frosted controls */

.sv-lh__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    color: var(--sv-lh-ink);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.sv-lh--dark .sv-lh__btn {
    color: var(--sv-lh-ink);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.25);
}

.sv-lh__btn:hover {
    transform: translateY(-1px);
    border-color: rgba(10, 91, 255, 0.4);
    background: rgba(10, 91, 255, 0.10);
    color: var(--sv-lh-primary);
}

.sv-lh__btn:focus-visible {
    outline: 2px solid var(--sv-lh-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ page title */

.sv-lh__title {
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sv-lh-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-lh--dark .sv-lh__title { color: #fff; }

/* --------------------------------------------------- gamification pill */

.sv-lh__game {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.sv-lh--dark .sv-lh__game {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}

.sv-lh__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sv-lh-ink);
    font-variant-numeric: tabular-nums;
}

.sv-lh__stat--streak { color: #C2410C; }
.sv-lh--dark .sv-lh__stat--streak { color: #FDBA74; }

.sv-lh__stat--xp { color: #A16207; }
.sv-lh--dark .sv-lh__stat--xp { color: #FCD34D; }

/* The flame's glow pulses; the glyph itself stays still so the number beside
   it never appears to wobble. */
.sv-lh__flame {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.16);
    animation: sv-lh-flame 2.4s ease-in-out infinite;
}

@keyframes sv-lh-flame {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    60%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

/* --------------------------------------------------------- notifications */

.sv-lh__dot {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #EF4444;
    border: 2px solid #fff;
    animation: sv-lh-live 1.9s ease-in-out infinite;
}

.sv-lh--dark .sv-lh__dot { border-color: rgba(8, 27, 75, 0.9); }

@keyframes sv-lh-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    60%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}

/* ------------------------------------------------------ language switcher */

.sv-lh__lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.sv-lh--dark .sv-lh__lang {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}

.sv-lh__lang a {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sv-lh-ink-soft);
    transition: background-color .2s ease, color .2s ease;
}

.sv-lh__lang a:hover { color: var(--sv-lh-primary); }

.sv-lh__lang a.is-active {
    color: #fff;
    background: linear-gradient(90deg, var(--sv-lh-primary), var(--sv-lh-primary-2));
    box-shadow: 0 4px 12px -4px rgba(10, 91, 255, 0.7);
}

/* -------------------------------------------------------------- profile */

.sv-lh__user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: background-color .2s ease, border-color .2s ease;
}

.sv-lh--dark .sv-lh__user {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}

.sv-lh__user:hover { border-color: rgba(10, 91, 255, 0.35); }

.sv-lh__avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    /* The glowing ring the brief asks for — a ring, not a border, so it does
       not change the avatar's box and shift the row. */
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--sv-lh-primary), 0 0 14px -2px rgba(10, 91, 255, 0.85);
}

.sv-lh--dark .sv-lh__avatar {
    box-shadow: 0 0 0 2px rgba(8, 27, 75, 0.9), 0 0 0 3.5px var(--sv-lh-primary), 0 0 14px -2px rgba(10, 91, 255, 0.9);
}

.sv-lh__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.sv-lh__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--sv-lh-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.sv-lh__role {
    font-size: 11px;
    font-weight: 500;
    color: var(--sv-lh-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* -------------------------------------------------------------- dropdowns */

.sv-lh__pop {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 1060;
    width: 300px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border-radius: var(--sv-lh-radius);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 50px -12px rgba(8, 27, 75, 0.28);
    /* Hidden via the `hidden` attribute, which JS toggles. Using an attribute
       rather than a class keeps it hidden even before the CSS loads. */
}

.sv-lh--dark .sv-lh__pop {
    background: rgba(10, 24, 60, 0.92);
    border-color: rgba(255, 255, 255, 0.22);
}

.sv-lh__pop[hidden] { display: none; }

.sv-lh__pop-head {
    padding: 8px 10px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sv-lh-ink-soft);
    border-bottom: 1px solid rgba(10, 91, 255, 0.10);
}

.sv-lh__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--sv-lh-ink);
    transition: background-color .18s ease;
}

.sv-lh__item:hover {
    background: rgba(10, 91, 255, 0.07);
    color: var(--sv-lh-ink);
}

.sv-lh__item-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-size: 14px;
    color: var(--sv-lh-primary);
    background: rgba(10, 91, 255, 0.10);
}

.sv-lh__item-icon--warn {
    color: #B45309;
    background: rgba(245, 158, 11, 0.14);
}

.sv-lh__item-title { font-size: 13px; font-weight: 700; }

.sv-lh__item-body,
.sv-lh__item-time {
    font-size: 11.5px;
    color: var(--sv-lh-ink-soft);
}

.sv-lh__empty {
    padding: 22px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--sv-lh-ink-soft);
}

.sv-lh__sep {
    height: 1px;
    margin: 6px 4px;
    background: rgba(10, 91, 255, 0.10);
}

.sv-lh__menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--sv-lh-ink);
    transition: background-color .18s ease, color .18s ease;
}

.sv-lh__menu-link:hover { background: rgba(10, 91, 255, 0.07); color: var(--sv-lh-primary); }
.sv-lh__menu-link--danger { color: #DC2626; }
.sv-lh__menu-link--danger:hover { background: rgba(239, 68, 68, 0.09); color: #DC2626; }

.sv-lh__anchor { position: relative; }

/* ------------------------------------------------------------ responsive */

/*
 * Below 992px the gamification pill and the name block are the first things
 * to go: they are the widest items and the least load-bearing. The streak and
 * XP are not lost — they move into the profile dropdown, which is why that
 * block exists in the markup at every size.
 */
@media (max-width: 991.98px) {
    .sv-lh__game,
    .sv-lh__who { display: none; }
}

@media (max-width: 575.98px) {
    .sv-lh { padding: 8px 10px; gap: 8px; }
    .sv-lh__title { font-size: 14px; }
    .sv-lh__lang { display: none; }   /* still reachable from the dropdown */
    .sv-lh__user { padding: 3px; }
    .sv-lh__pop { width: min(300px, calc(100vw - 20px)); }
}

/* The mobile-only copy of the stats inside the dropdown. */
.sv-lh__game-mobile { display: none; }

@media (max-width: 991.98px) {
    .sv-lh__game-mobile { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .sv-lh__mark,
    .sv-lh__flame,
    .sv-lh__dot { animation: none !important; }

    .sv-lh__btn,
    .sv-lh__mark,
    .sv-lh__item,
    .sv-lh__menu-link { transition: none !important; }

    .sv-lh__btn:hover,
    .sv-lh__brand:hover .sv-lh__mark { transform: none !important; }
}

/* Never print the chrome. */
@media print {
    .sv-lh { display: none !important; }
}