/* ==========================================================================
   Hub Stylesheet — Hub-specific overrides only
   ==========================================================================
   Shared palette, navbar, sidebar, footer, and utility classes live in:
     vinosports-core → static/vinosports/css/design-system.css
   This file contains only Hub-specific rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LEAGUE CARDS
   -------------------------------------------------------------------------- */

.league-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 0.75rem;
    border-bottom: 4px solid #485f84;
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.league-card--active:hover {
    border-bottom-color: #b3262f;
    box-shadow: 0 8px 24px rgba(179, 38, 47, 0.12);
    transform: translateY(-2px);
}

.league-card--soon {
    opacity: 0.55;
    cursor: default;
}

.league-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: #ffdad8;
    color: #b3262f;
}

.league-card-icon--muted {
    background-color: #e5e0d0;
    color: #8d706e;
}


/* --------------------------------------------------------------------------
   2. FORM INPUTS
   -------------------------------------------------------------------------- */

.themed-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-text));
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.themed-input:focus {
    outline: none;
    border-color: rgb(var(--color-accent));
    box-shadow: 0 0 0 2px rgba(var(--color-accent) / 0.15);
}

.themed-input-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

select.themed-input {
    appearance: auto;
}


/* --------------------------------------------------------------------------
   3. PROFILE IMAGE UPLOAD
   -------------------------------------------------------------------------- */

.profile-upload-zone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 2px dashed rgb(var(--color-border));
    border-radius: 0.5rem;
    background-color: rgb(var(--color-bg));
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.profile-upload-zone:hover {
    border-color: rgb(var(--color-accent));
    background-color: rgb(var(--color-accent) / 0.05);
}