/**
 * GameHub User Profile & Auth CSS
 *
 * Sections:
 *  1. Toasts
 *  2. Auth Modal
 *  3. Header User Menu
 *  4. Profile Page – Guest Wall
 *  5. Profile Page – Hero
 *  6. Profile Page – Tabs
 *  7. Profile Page – Games Grid
 *  8. Profile Page – Empty State
 *  9. Profile Page – Settings
 * 10. Utility Buttons
 *
 * @package GameHub
 */

/* ─── 0. Shared variables fallback ────────────────────────────────────────── */
:root {
    --up-radius:        12px;
    --up-radius-sm:     8px;
    --up-transition:    0.25s ease;
    --up-overlay-bg:    rgba(0, 0, 0, 0.65);
    --up-modal-width:   420px;
    --up-shadow:        0 12px 40px rgba(0,0,0,.3);
}

/* ─── 1. Toasts ────────────────────────────────────────────────────────────── */
#ghToastContainer {
    position:    fixed;
    bottom:      24px;
    right:       24px;
    z-index:     100000;
    display:     flex;
    flex-direction: column;
    gap:         10px;
    pointer-events: none;
}
.gh-toast {
    padding:         10px 18px;
    border-radius:   var(--up-radius-sm);
    font-size:       0.875rem;
    font-weight:     500;
    color:           #fff;
    background:      #333;
    opacity:         0;
    transform:       translateY(12px);
    transition:      opacity var(--up-transition), transform var(--up-transition);
    pointer-events:  auto;
    max-width:       280px;
    box-shadow:      0 4px 16px rgba(0,0,0,.25);
}
.gh-toast.show         { opacity: 1; transform: translateY(0); }
.gh-toast-success      { background: #22c55e; }
.gh-toast-error        { background: #ef4444; }
.gh-toast-info         { background: var(--primary-color, #6366f1); }

/* ─── 2. Auth Modal ─────────────────────────────────────────────────────────── */
.auth-modal-overlay {
    position:   fixed;
    inset:      0;
    background: var(--up-overlay-bg);
    z-index:    99999;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    16px;
    opacity:    0;
    transition: opacity var(--up-transition);
    backdrop-filter: blur(2px);
}
.auth-modal-overlay.open { opacity: 1; }
.auth-modal-overlay[hidden] { display: none; }

.auth-modal {
    background:    var(--card-background, #1e1e2e);
    border-radius: var(--up-radius);
    box-shadow:    var(--up-shadow);
    width:         100%;
    max-width:     var(--up-modal-width);
    max-height:    90vh;
    overflow-y:    auto;
    padding:       32px 28px 28px;
    position:      relative;
    transform:     translateY(-18px) scale(.97);
    transition:    transform var(--up-transition);
    border:        1px solid var(--border-color, rgba(255,255,255,.08));
}
.auth-modal-overlay.open .auth-modal {
    transform: translateY(0) scale(1);
}

.auth-modal-close {
    position:   absolute;
    top:        14px;
    right:      14px;
    background: transparent;
    border:     none;
    cursor:     pointer;
    color:      var(--text-color-muted, rgba(0,0,0,.5));
    font-size:  1.4rem;
    line-height: 1;
    padding:    4px 6px;
    border-radius: var(--up-radius-sm);
    transition: color var(--up-transition), background var(--up-transition);
}
.auth-modal-close:hover {
    color:      var(--text-color, #111);
    background: var(--hover-bg, rgba(0,0,0,.05));
}

/* Brand */
.auth-modal-brand {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  22px;
}
.auth-modal-brand-icon {
    width:         36px;
    height:        36px;
    border-radius: 8px;
    object-fit:    cover;
}
.auth-modal-brand-name {
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--text-color, #111);
}

/* Tabs */
.auth-tabs {
    display:       flex;
    gap:           4px;
    background:    var(--glass-bg, rgba(0,0,0,.04));
    border-radius: var(--up-radius-sm);
    padding:       4px;
    margin-bottom: 22px;
}
.auth-tab {
    flex:           1;
    padding:        8px;
    border:         none;
    background:     transparent;
    border-radius:  6px;
    cursor:         pointer;
    font-size:      0.875rem;
    font-weight:    500;
    color:          var(--text-color-muted, rgba(0,0,0,.55));
    transition:     all var(--up-transition);
}
.auth-tab:hover { color: var(--text-color, #111); }
.auth-tab.active {
    background: var(--primary-color, #6366f1);
    color:      #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Feedback */
.auth-feedback {
    padding:       10px 14px;
    border-radius: var(--up-radius-sm);
    font-size:     0.85rem;
    margin-bottom: 16px;
}
.auth-feedback[hidden] { display: none; }
.auth-feedback-error   { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.auth-feedback-success { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.3); }

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field {
    display:       flex;
    flex-direction: column;
    gap:           6px;
    margin-bottom: 16px;
}
.auth-field label {
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--text-color-muted, rgba(0,0,0,.6));
    text-transform: uppercase;
    letter-spacing: .05em;
}
.auth-field input {
    background:    var(--input-bg, rgba(0,0,0,.06));
    border:        1px solid var(--border-color, rgba(0,0,0,.15));
    border-radius: var(--up-radius-sm);
    padding:       10px 12px;
    color:         var(--text-color, #111);
    font-size:     0.9rem;
    transition:    border-color var(--up-transition), box-shadow var(--up-transition);
    width:         100%;
    outline:       none;
}
.auth-field input:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow:   0 0 0 3px rgba(99,102,241,.2);
}

.auth-field-pw-wrap {
    position: relative;
    display:  flex;
}
.auth-field-pw-wrap input { padding-right: 42px; flex: 1; }
.pw-toggle {
    position:   absolute;
    right:      10px;
    top:        50%;
    transform:  translateY(-50%);
    background: transparent;
    border:     none;
    cursor:     pointer;
    color:      var(--text-color-muted, rgba(0,0,0,.4));
    padding:    4px;
    transition: color var(--up-transition);
}
.pw-toggle:hover { color: var(--text-color, #111); }
.pw-toggle svg  { width: 18px; height: 18px; display: block; }
.hidden         { display: none !important; }

/* Password strength */
.pw-strength-bar {
    height:        4px;
    border-radius: 2px;
    background:    var(--glass-bg, rgba(0,0,0,.1));
    overflow:      hidden;
    margin-top:    6px;
}
#pwStrengthFill {
    height:     100%;
    width:      0;
    border-radius: 2px;
    transition: width .25s ease, background .25s ease;
}
.pw-strength-weak   { background: #ef4444; }
.pw-strength-fair   { background: #f97316; }
.pw-strength-good   { background: #eab308; }
.pw-strength-strong { background: #22c55e; }

/* Remember / terms */
.auth-remember,
.auth-terms {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 16px;
    font-size:   0.82rem;
    color:       var(--text-color-muted, rgba(0,0,0,.55));
}
.checkbox-custom {
    width:         16px;
    height:        16px;
    border-radius: 4px;
    border:        1px solid var(--border-color, rgba(0,0,0,.2));
    background:    var(--input-bg, rgba(0,0,0,.06));
    cursor:        pointer;
    accent-color:  var(--primary-color, #6366f1);
}
.auth-remember a,
.auth-terms a {
    color:           var(--primary-color, #8b8cf8);
    text-decoration: none;
}
.auth-remember a:hover,
.auth-terms a:hover { text-decoration: underline; }

.auth-forgot {
    margin-left: auto;
    font-size:   0.82rem;
    color:       var(--primary-color, #8b8cf8);
    text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }

/* Submit button */
.auth-submit-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         11px;
    background:      var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
    border:          none;
    border-radius:   var(--up-radius-sm);
    color:           #fff;
    font-size:       0.95rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      opacity var(--up-transition), transform var(--up-transition);
    margin-top:      4px;
}
.auth-submit-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.auth-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-spinner {
    width:  18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ghSpin .7s linear infinite;
}
@keyframes ghSpin { to { transform: rotate(360deg); } }

/* ─── 3. Header User Menu ────────────────────────────────────────────────────── */
.header-login-btn {
    padding:       7px 16px;
    background:    var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
    border:        none;
    border-radius: var(--up-radius-sm);
    color:         #fff;
    font-size:     0.82rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    opacity var(--up-transition);
    white-space:   nowrap;
}
.header-login-btn:hover { opacity: .85; }

.header-user-menu {
    position:   relative;
    display:    flex;
    align-items: center;
}
.header-user-menu.hidden { display: none; }

.header-user-menu-trigger {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    transparent;
    border:        1.5px solid var(--border-color, rgba(255,255,255,.15));
    border-radius: 999px;
    padding:       4px 10px 4px 4px;
    cursor:        pointer;
    transition:    border-color var(--up-transition), background var(--up-transition);
    color:         var(--text-color, #fff);
}
.header-user-menu-trigger:hover {
    border-color: var(--primary-color, #6366f1);
    background:   var(--hover-bg, rgba(0,0,0,.05));
}

#headerUserAvatar {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}

.header-user-name {
    font-size:   0.82rem;
    font-weight: 600;
    max-width:   90px;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-user-chevron {
    width:      14px;
    height:     14px;
    opacity:    .6;
    transition: transform var(--up-transition);
}
.header-user-menu-trigger[aria-expanded="true"] .header-user-chevron {
    transform: rotate(-180deg);
}

.header-user-dropdown {
    position:   absolute;
    top:        calc(100% + 8px);
    right:      0;
    background: var(--card-background, #1e1e2e);
    border:     1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: var(--up-radius-sm);
    min-width:  170px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    padding:    6px;
    z-index:    9999;
    display:    none;
}
.header-user-dropdown.open { display: block; }

.header-user-dropdown a,
.header-user-dropdown button {
    display:       flex;
    align-items:   center;
    gap:           10px;
    width:         100%;
    text-align:    left;
    background:    transparent;
    border:        none;
    padding:       9px 12px;
    border-radius: 6px;
    font-size:     0.85rem;
    color:         var(--text-color, #fff);
    cursor:        pointer;
    text-decoration: none;
    transition:    background var(--up-transition);
}
.header-user-dropdown a:hover,
.header-user-dropdown button:hover { background: var(--hover-bg, rgba(0,0,0,.05)); }
.header-user-dropdown .dropdown-divider {
    height:     1px;
    background: var(--border-color, rgba(255,255,255,.08));
    margin:     4px 0;
}
.header-user-dropdown .danger-text { color: #f87171; }

/* ─── 4. Profile Page – Guest Wall ────────────────────────────────────────── */
.profile-guest-wall {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    min-height:      60vh;
    padding:         60px 20px;
}
.profile-guest-icon {
    font-size:   4rem;
    margin-bottom: 16px;
    opacity:     .5;
}
.profile-guest-wall h2 {
    font-size:     1.6rem;
    margin-bottom: 8px;
    color:         var(--text-color, #111);
}
.profile-guest-wall p {
    font-size:     1rem;
    color:         var(--text-color-muted, rgba(0,0,0,.55));
    max-width:     380px;
    margin-bottom: 28px;
}
.profile-guest-actions {
    display: flex;
    gap:     12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── 5. Profile Page – Hero ────────────────────────────────────────────────── */
.profile-page {
    padding-bottom: 60px;
}
.profile-hero {
    position:      relative;
    padding:       48px 0 32px;
    overflow:      hidden;
}
.profile-hero-bg {
    position:   absolute;
    inset:      0;
    background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
    opacity:    .12;
    z-index:    0;
}
.profile-hero-content {
    position:      relative;
    z-index:       1;
    display:       flex;
    align-items:   flex-start;
    gap:           28px;
    flex-wrap:     wrap;
}
@media (max-width: 600px) {
    .profile-hero-content { flex-direction: column; align-items: center; text-align: center; }
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.profile-avatar {
    width:         110px;
    height:        110px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--primary-color, #6366f1);
    display:       block;
}

.profile-hero-info { flex: 1; min-width: 0; }
.profile-display-name {
    font-size:     1.6rem;
    font-weight:   700;
    color:         var(--text-color, #111);
    margin-bottom: 4px;
}
.profile-username {
    font-size:   0.9rem;
    color:       var(--text-color-muted, rgba(0,0,0,.55));
    margin-bottom: 10px;
}
.profile-bio {
    font-size:     0.9rem;
    color:         var(--text-color-muted, rgba(0,0,0,.7));
    margin-bottom: 14px;
    line-height:   1.55;
}
.profile-meta {
    font-size:   0.78rem;
    color:       var(--text-color-muted, rgba(0,0,0,.4));
    margin-bottom: 16px;
}

.profile-hero-stats {
    display:  flex;
    gap:      12px;
    flex-wrap: wrap;
}
.pstat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     var(--glass-bg, rgba(0,0,0,.04));
    border:         1px solid var(--border-color, rgba(0,0,0,.1));
    border-radius:  var(--up-radius-sm);
    padding:        10px 18px;
    min-width:      80px;
}
.pstat-value {
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--text-color, #111);
    line-height: 1;
}
.pstat-label {
    font-size:  0.72rem;
    color:      var(--text-color-muted, rgba(0,0,0,.5));
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ─── 6. Profile Page – Tabs ─────────────────────────────────────────────────── */
.profile-tabs-bar {
    display:       flex;
    gap:           4px;
    border-bottom: 2px solid var(--border-color, rgba(255,255,255,.08));
    margin-bottom: 28px;
    padding-bottom: 0;
    overflow-x:    auto;
    scrollbar-width: none;
}
.profile-tabs-bar::-webkit-scrollbar { display: none; }

.profile-tab {
    padding:        10px 20px;
    background:     transparent;
    border:         none;
    border-bottom:  2px solid transparent;
    margin-bottom:  -2px;
    cursor:         pointer;
    font-size:      0.9rem;
    font-weight:    600;
    color:          var(--text-color-muted, rgba(0,0,0,.5));
    white-space:    nowrap;
    transition:     color var(--up-transition), border-color var(--up-transition);
}
.profile-tab:hover { color: var(--text-color, #111); }
.profile-tab.active {
    color:        var(--primary-color, #8b8cf8);
    border-bottom-color: var(--primary-color, #8b8cf8);
}

.profile-tab-panel        { display: none; }
.profile-tab-panel.active { display: block; }

/* ─── 7. Profile Page – Games Grid ───────────────────────────────────────────── */
.profile-games-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   16px;
}

/* ─── 8. Profile Page – Empty State ─────────────────────────────────────────── */
.profile-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         48px 20px;
    text-align:      center;
    background:      var(--glass-bg, rgba(0,0,0,.03));
    border-radius:   var(--up-radius);
    border:          1px dashed var(--border-color, rgba(0,0,0,.1));
}
.profile-empty-icon    { font-size: 2.6rem; margin-bottom: 12px; opacity: .5; }
.profile-empty-state p { font-size: .9rem; color: var(--text-color-muted, rgba(0,0,0,.5)); margin-bottom: 16px; }

/* ─── 9. Profile Page – Settings ─────────────────────────────────────────────── */
.profile-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.settings-card {
    background:    var(--card-background, #1e1e2e);
    border:        1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: var(--up-radius);
    padding:       24px;
}
.settings-card h3 {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--text-color, #111);
    margin-bottom: 4px;
}
.settings-card .settings-card-desc {
    font-size:     0.82rem;
    color:         var(--text-color-muted, rgba(0,0,0,.45));
    margin-bottom: 18px;
}
.settings-card.danger-card {
    border-color: rgba(239,68,68,.3);
}
.settings-card.danger-card h3 { color: #f87171; }

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}
.settings-field label {
    font-size:      0.78rem;
    font-weight:    600;
    color:          var(--text-color-muted, rgba(0,0,0,.55));
    text-transform: uppercase;
    letter-spacing: .05em;
}
.settings-field input,
.settings-field textarea {
    background:    var(--input-bg, rgba(0,0,0,.06));
    border:        1px solid var(--border-color, rgba(0,0,0,.15));
    border-radius: var(--up-radius-sm);
    padding:       9px 12px;
    color:         var(--text-color, #111);
    font-size:     0.88rem;
    font-family:   inherit;
    width:         100%;
    outline:       none;
    transition:    border-color var(--up-transition), box-shadow var(--up-transition);
    resize:        vertical;
}
.settings-field input:focus,
.settings-field textarea:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow:   0 0 0 3px rgba(99,102,241,.2);
}
.settings-field input::placeholder,
.settings-field textarea::placeholder { color: var(--placeholder-color, rgba(0,0,0,.3)); }

.settings-feedback {
    font-size: 0.82rem;
    padding:   6px 10px;
    border-radius: 5px;
    margin-top: -4px;
}
.settings-feedback.success { background: rgba(34,197,94,.12); color: #86efac; }
.settings-feedback.error   { background: rgba(239,68,68,.12); color: #fca5a5; }

/* ─── 10. Utility Buttons ───────────────────────────────────────────────────── */
.btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 22px;
    background:      var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
    border:          none;
    border-radius:   var(--up-radius-sm);
    color:           #fff;
    font-size:       0.88rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      opacity var(--up-transition), transform var(--up-transition);
}
.btn-primary:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 22px;
    background:      transparent;
    border:          1.5px solid var(--border-color, rgba(255,255,255,.2));
    border-radius:   var(--up-radius-sm);
    color:           var(--text-color, #fff);
    font-size:       0.88rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      border-color var(--up-transition), background var(--up-transition);
}
.btn-secondary:hover { border-color: var(--primary-color, #6366f1); background: var(--hover-bg, rgba(0,0,0,.05)); }

.btn-danger {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 22px;
    background:      transparent;
    border:          1.5px solid rgba(239,68,68,.4);
    border-radius:   var(--up-radius-sm);
    color:           #f87171;
    font-size:       0.88rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--up-transition), border-color var(--up-transition);
}
.btn-danger:hover {
    background:    rgba(239,68,68,.12);
    border-color:  #f87171;
}

/* Card-level favorite button */
.card-fav-btn {
    position:      absolute;
    top:           8px;
    right:         8px;
    background:    rgba(0,0,0,.6);
    border:        none;
    border-radius: 50%;
    width:         32px;
    height:        32px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    color:         rgba(255,255,255,.7);
    font-size:     1rem;
    transition:    background var(--up-transition), color var(--up-transition), transform var(--up-transition);
    z-index:       2;
    backdrop-filter: blur(4px);
}
.card-fav-btn:hover { background: rgba(0,0,0,.8); color: #fff; transform: scale(1.1); }
.card-fav-btn.favorited { color: #f43f5e; }
.card-fav-btn.favorited:hover { color: #fb7185; }

/* Responsive tweaks */
@media (max-width: 768px) {
    .profile-hero { padding: 32px 0 20px; }
    .profile-avatar { width: 80px; height: 80px; }
    .profile-display-name { font-size: 1.3rem; }
    .profile-settings-grid { grid-template-columns: 1fr; }
    .pstat { padding: 8px 12px; min-width: 64px; }
    .pstat-value { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .auth-modal { padding: 24px 18px 20px; }
    .profile-games-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}