/* ============================
   === Shared Variables ===
   ============================ */
:root {
    --banner-padding: 0.75rem 1rem;
    --banner-border: 1px solid #dee2e6;
    --banner-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
    --nav-height: 56px;
    --league-expanded-height: 96px;
    --league-collapsed-height: 48px;
}

/* ============================
   === League Banner ===
   ============================ */
.league-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--banner-padding);
    height: var(--league-expanded-height);
    border-bottom: var(--banner-border);
    box-shadow: var(--banner-shadow);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: 0 !important;
    color: inherit;
}

    .league-banner img {
        display: block;
        flex-shrink: 0;
        height: 48px;
        width: auto;
        transition: transform 0.3s ease;
    }

    .league-banner .league-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
    }

    .league-banner h2 {
        font-size: 1rem;
        margin: 0;
        transition: font-size 0.3s ease;
    }

    .league-banner small {
        font-size: 0.75rem;
        transition: font-size 0.3s ease;
    }

.collapsed-league-banner,
.preload-league-banner-collapsed .league-banner {
    height: var(--league-collapsed-height);
    padding: 0.25rem 1rem !important;
}

    .collapsed-league-banner img,
    .preload-league-banner-collapsed .league-banner img {
        transform: scale(0.75);
        transform-origin: left center;
    }

    .collapsed-league-banner h2,
    .preload-league-banner-collapsed .league-banner h2 {
        font-size: 0.875rem !important;
    }

    .collapsed-league-banner small,
    .preload-league-banner-collapsed .league-banner small {
        font-size: 0.65rem !important;
    }

/* ============================
   === Team Banner (Expanded) ===
   ============================ */
.team-banner {
    position: relative;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
    box-shadow: var(--banner-shadow);
    transition: all 0.3s ease;
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0 !important;
    color: inherit;
}

.team-center {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.team-logo {
    height: 75px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.team-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

    .team-title .team-init,
    .team-title .team-division {
        font-size: 0.9em;
        vertical-align: baseline;
    }

.team-meta {
    margin-top: 0.25rem;
    font-size: 1rem;
}

.team-record-row {
    margin-top: 0.25rem;
    font-size: 1rem;
}

.trophy-row {
    margin-top: 0.5rem;
}

/* Trophy summary (expanded default) */
.trophy-summary img {
    height: 28px;
    width: 28px;
    transition: height 0.2s ease, width 0.2s ease;
}

.trophy-summary .badge {
    font-size: 0.7rem;
    padding: 0.15em 0.4em;
    transition: font-size 0.2s ease, padding 0.2s ease;
}

/* ===============================
   === Team Banner (Collapsed) ===
   =============================== */
.collapsed-banner,
.preload-team-banner-collapsed .team-banner {
    height: 60px !important;
    min-height: unset !important;
    padding: 0.2rem 0.5rem !important;
    overflow: hidden;
}

    .collapsed-banner .team-logo,
    .preload-team-banner-collapsed .team-banner .team-logo {
        height: 50px;
        width: auto;
        transform: none;
    }

    .collapsed-banner .team-title,
    .preload-team-banner-collapsed .team-banner .team-title {
        font-size: 0.85rem !important;
        line-height: 1.05 !important;
        margin: 0;
    }

    .collapsed-banner .team-meta,
    .collapsed-banner .team-record-row,
    .preload-team-banner-collapsed .team-banner .team-meta,
    .preload-team-banner-collapsed .team-banner .team-record-row {
        font-size: 0.65rem !important;
        line-height: 1.05 !important;
        margin-top: 0.15rem !important;
    }

    .collapsed-banner .trophy-row,
    .preload-team-banner-collapsed .team-banner .trophy-row {
        margin-top: 0.15rem !important;
    }

    /* Trophy summary shrinks when collapsed */
    #teamBanner.collapsed-banner .trophy-summary img,
    .preload-team-banner-collapsed .team-banner .trophy-summary img {
        height: 20px;
        width: 20px;
    }

    #teamBanner.collapsed-banner .trophy-summary .badge,
    .preload-team-banner-collapsed .team-banner .trophy-summary .badge {
        font-size: 0.6rem;
        padding: 0.1em 0.3em;
    }

/* ============================
   === Controls (Right side) ===
   ============================ */
.fixed-banner-controls,
.fixed-banner-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 1030;
    display: flex;
    gap: 0.5rem;
}

/* ============================
   === Responsive Adjustments ===
   ============================ */
@media (max-width: 576px) {
    .team-banner {
        min-height: 120px;
        padding: 0.75rem 1rem;
    }

    .team-logo {
        width: 72px;
    }

    .team-title {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .team-meta,
    .team-record-row {
        font-size: 0.875rem;
    }
}

/* ============================
   === Visibility Overrides ===
   ============================ */
.league-banner .clipboard-icon i,
.team-banner .clipboard-icon i {
    color: inherit !important;
    text-shadow: none !important;
}

/* ============================
   === Stack Fixes          ===
   ============================ */
.team-sticky {
    top: calc(var(--nav-height) + var(--league-expanded-height)) !important;
}

html.preload-league-banner-collapsed .team-sticky,
html.league-collapsed .team-sticky {
    top: calc(var(--nav-height) + var(--league-collapsed-height)) !important;
}

/* ============================
   === Draft Banner         ===
   ============================ */
#draftBanner {
    position: sticky;
    top: 56px;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    min-height: 84px;
    max-height: 84px;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.2;
}

.draft-banner-content {
    width: 100%;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.team-logo-md,
.team-logo-sm {
    height: 60px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.draft-text-block,
.on-deck-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .draft-text-block span,
    .draft-text-block strong,
    .on-deck-block span,
    .on-deck-block strong {
        font-size: 0.875rem;
    }

.on-deck-block {
    align-items: end;
}

.countdown-timer {
    font-weight: bold;
    font-family: monospace;
    color: #ffc107;
    transition: color 0.3s ease;
}

    .countdown-timer.warning {
        color: #ff4d4d;
    }

    .countdown-timer.blink {
        animation: blink 1s step-start infinite;
    }

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.draft-banner-wrapper {
    position: sticky;
    top: var(--nav-height);
    z-index: 1020;
    padding: var(--banner-padding);
    border-bottom: var(--banner-border);
    box-shadow: var(--banner-shadow);
    transition: var(--transition);
    background-color: #f8f9fa;
    min-height: 64px;
    overflow: hidden;
}
.draft-on-clock,
.draft-on-deck,
.draft-last-pick,
.draft-next-picks {
    margin-bottom: 0.5rem;
}

    .draft-next-picks ul {
        padding-left: 0;
        margin-bottom: 0;
    }

.team-logo-sm {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

.draft-banner,
.team-banner,
.league-banner {
    margin-top: 0 !important;
    border: none;
}