/*
 * Card Stuff Yes - Profile Page
 *
 * This file contains styling specific to the profile page.
 * Site-wide colors come from /colors.css.
 */


/* =========================================================
   PAGE
   ========================================================= */

/* Main profile page layout */
.profile-page {
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 48px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

/* Back link at the top of the page */
.profile-nav {
    margin-bottom: 24px;
}

.profile-nav a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--global-transition-speed) ease;
}

.profile-nav a:hover {
    color: var(--color-link-hover);
}


/* =========================================================
   PROFILE HEADER
   ========================================================= */

/* Main profile heading */
.profile-header {
    padding: 24px;
    margin-bottom: 24px;

    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Username */
.profile-header h1 {
    margin: 0 0 8px;

    color: var(--color-text);
    font-size: 32px;
    word-break: break-word;
}

/* Rank below username */
.profile-header p {
    margin: 0;

    color: var(--color-text-secondary);
    font-size: 16px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

/* Generic profile section */
.profile-section {
    margin-bottom: 24px;
    padding: 24px;

    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Section heading */
.profile-section h2 {
    margin: 0 0 18px;

    color: var(--color-text);
    font-size: 22px;
}


/* =========================================================
   ACCOUNT INFORMATION
   ========================================================= */

/* Account information container */
.account-info {
    display: flex;
    flex-direction: column;
}

/* Individual account row */
.account-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border);
}

/* Remove border from final row */
.account-row:last-child {
    border-bottom: none;
}

/* Left-side labels */
.account-label {
    color: var(--color-text-secondary);
}

/* Account values */
.account-row > span:last-child {
    color: var(--color-text);
    text-align: right;
    word-break: break-word;
}

/* ELO rating */
#elo {
    font-weight: bold;
}


/* =========================================================
   BADGES
   ========================================================= */

/* Badge container */
.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Individual badge */
.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    width: 96px;
    padding: 12px;

    background: var(--color-background-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Badge image */
.badge img {
    width: 56px;
    height: 56px;

    object-fit: contain;
}

/* Badge name */
.badge-name {
    color: var(--color-text);
    font-size: 13px;
    text-align: center;
    word-break: break-word;
}


/* =========================================================
   CARDS
   ========================================================= */

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

/* Individual card */
.card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 12px;

    background: var(--color-background-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;

    cursor: pointer;

    transition:
        background var(--global-transition-speed) ease,
        border-color var(--global-transition-speed) ease;
}

.card-item:hover {
    background: var(--color-background-hover);
    border-color: var(--color-border-light);
}

/* Card image */
.card-item img {
    width: 100%;
    max-width: 110px;
    height: auto;

    object-fit: contain;

    border-radius: 4px;
}

/* Card name */
.card-name {
    color: var(--color-text);
    font-size: 13px;
    text-align: center;
    word-break: break-word;
}


/* =========================================================
   LOADING / EMPTY STATES
   ========================================================= */

/* Generic loading text */
.loading-text {
    margin: 0;

    color: var(--color-text-secondary);
}

/* Empty sections */
.empty-text {
    margin: 0;

    color: var(--color-text-secondary);
}


/* =========================================================
   PASSWORD WARNING
   ========================================================= */

/* Temporary-password warning */
.password-warning {
    margin-bottom: 24px;
    padding: 20px;

    background: var(--color-warning-background);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
}

/* Warning heading */
.password-warning h2 {
    margin: 0 0 10px;

    color: var(--color-warning-text);
    font-size: 20px;
}

/* Warning text */
.password-warning p {
    margin: 0;

    color: var(--color-warning-text);
}


/* =========================================================
   FORMS
   ========================================================= */

/* Form group */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-bottom: 16px;
}

/* Form labels */
.form-group label {
    color: var(--color-text-secondary);
}

/* Inputs */
.form-group input {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 12px;

    color: var(--color-input-text);
    background: var(--color-input);

    border: 1px solid var(--color-input-border);
    border-radius: 5px;

    font: inherit;
}

/* Input focus */
.form-group input:focus {
    outline: none;
    border-color: var(--color-border-light);
}

/* Buttons */
button {
    padding: 10px 16px;

    color: var(--color-button-text);
    background: var(--color-button);

    border: 1px solid var(--color-border-light);
    border-radius: 5px;

    font: inherit;
    cursor: pointer;

    transition:
        background var(--global-transition-speed) ease,
        border-color var(--global-transition-speed) ease;
}

/* Button hover */
button:hover {
    background: var(--color-button-hover);
}

/* Button disabled state */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =========================================================
   FORM MESSAGES
   ========================================================= */

/* Message below password form */
.form-message {
    min-height: 20px;
    margin: 12px 0 0;

    color: var(--color-text-secondary);
}

/* Successful message */
.form-message.success {
    color: var(--color-success);
}

/* Error message */
.form-message.error {
    color: var(--color-error);
}


/* =========================================================
   ACCOUNT ACTIONS
   ========================================================= */

/* Account actions section */
.account-actions {
    margin-bottom: 0;
}


/* =========================================================
   CARD ZOOM OVERLAY
   ========================================================= */

/* Full-screen card overlay */
.card-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark background behind zoomed card */
.card-overlay-background {
    position: absolute;
    inset: 0;

    background: var(--color-overlay);
}

/* Overlay content */
.card-overlay-content {
    position: relative;
    z-index: 1;

    max-width: min(90vw, 700px);
    max-height: 90vh;

    padding: 16px;

    background: var(--color-zoom-card);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Zoomed card */
.card-overlay-content img {
    display: block;

    max-width: 80vw;
    max-height: 80vh;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   UTILITY CLASSES
   ========================================================= */

/* Used to hide elements */
.hidden {
    display: none !important;
}

/* Used when an image fails to load */
.image-hidden {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .profile-page {
        width: min(100% - 20px, 900px);
        padding-top: 12px;
    }

    .profile-section,
    .profile-header {
        padding: 16px;
    }

    .profile-header h1 {
        font-size: 26px;
    }

    .account-row {
        flex-direction: column;
        gap: 4px;
    }

    .account-row > span:last-child {
        text-align: left;
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .badges-container {
        justify-content: center;
    }
}