/**
 * profile.css — Personal area (profile.html).
 * Built on the shared brand tokens/components from css/sheets_archive.css
 * (linked alongside this file): --primary, --accent, .state-card,
 * .skeleton-card, prefers-reduced-motion. Adds the profile-specific hero,
 * info cards, favorites grid, and security panel.
 */

body { background: var(--bg-gray); }

/* ── Hero ─────────────────────────────────────────────────────── */
.profile-hero {
    background: linear-gradient(135deg, #003366 0%, #004d99 50%, #0077cc 100%);
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
    color: white; padding: 60px 0 90px; position: relative; overflow: hidden;
    border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
    box-shadow: 0 15px 30px rgba(0,77,153,0.12); margin-bottom: -60px;
}
.profile-hero::before {
    content: ''; position: absolute; top: -30%; left: -10%; width: 60%; height: 200%;
    background: radial-gradient(circle, rgba(255,179,0,0.08) 0%, transparent 70%);
    transform: rotate(-20deg); pointer-events: none;
}
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.profile-hero-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; position: relative; }

.avatar-shell { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.avatar-circle {
    width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px); border: 4px solid rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
    overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,0.25); transition: var(--transition);
}
.avatar-circle:hover { transform: scale(1.04); }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-btn {
    position: absolute; bottom: 2px; left: 2px; width: 36px; height: 36px; border-radius: 50%;
    background: white; color: var(--primary); border: 3px solid var(--primary-dark);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.avatar-edit-btn:hover { background: var(--accent); color: white; transform: rotate(15deg) scale(1.1); }

.profile-hero-name { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.9rem; margin-bottom: 4px; }
.profile-hero-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.92rem; opacity: 0.92; }
.profile-hero-meta span { display: flex; align-items: center; gap: 6px; }

.occupation-badge {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(255,179,0,0.2);
    border: 1.5px solid rgba(255,179,0,0.45); color: var(--accent); padding: 4px 14px;
    border-radius: 50px; font-weight: 700; font-size: 0.8rem;
}
.verify-badge {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(220,38,38,0.18);
    border: 1.5px solid rgba(248,113,113,0.5); color: #fecaca; padding: 3px 12px;
    border-radius: 50px; font-weight: 700; font-size: 0.76rem; cursor: pointer; transition: var(--transition);
}
.verify-badge:hover { background: rgba(220,38,38,0.3); }

/* ── Main content ─────────────────────────────────────────────── */
.profile-content { position: relative; z-index: 2; padding-bottom: 50px; }

.panel {
    background: white; border-radius: var(--radius-card); border: 1px solid rgba(0,77,153,0.08);
    box-shadow: var(--shadow-card); padding: 26px; margin-bottom: 24px;
    animation: cardAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.panel-title { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--primary-dark); margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title span { display: flex; align-items: center; gap: 10px; }
.panel-title i { color: var(--accent); }

/* Admin quick-link card */
.admin-quicklink {
    display: flex; align-items: center; gap: 16px; padding: 20px 24px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border-radius: var(--radius-card); color: white; margin-bottom: 24px;
    box-shadow: var(--shadow-card); transition: var(--transition); text-decoration: none;
}
.admin-quicklink:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,77,153,0.25); color: white; }
.admin-quicklink-icon { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }

/* ── Favorites ────────────────────────────────────────────────── */
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fav-card {
    background: white; border: 1px solid var(--border-color); border-radius: 16px; padding: 16px;
    display: flex; align-items: center; gap: 14px; transition: var(--transition); position: relative;
}
.fav-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,77,153,0.1); border-color: rgba(0,77,153,0.2); }
.fav-icon-box { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.fav-title { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); text-decoration: none; line-height: 1.35; display: block; }
.fav-title:hover { color: var(--primary); }
.fav-remove-btn {
    position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--bg-gray); color: var(--text-muted); display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; cursor: pointer; transition: var(--transition); opacity: 0; transform: scale(0.85);
}
.fav-card:hover .fav-remove-btn { opacity: 1; transform: scale(1); }
.fav-remove-btn:hover { background: var(--danger, #dc2626); color: white; }

/* ── Security panel ───────────────────────────────────────────── */
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #f1f5f9; gap: 12px; flex-wrap: wrap; }
.security-row:last-child { border-bottom: none; }
.security-row-label { font-weight: 700; font-size: 0.9rem; color: var(--text-dark); }
.security-row-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* ── Form styling ─────────────────────────────────────────────── */
.panel .form-label { font-weight: 700; font-size: 0.85rem; color: var(--text-dark); }
.panel .form-control, .panel .form-select { border-radius: 10px; border: 1.5px solid var(--border-color); padding: 0.6rem 0.9rem; }
.panel .form-control:focus, .panel .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,77,153,0.1); }

@media (max-width: 767px) {
    .profile-hero { padding: 48px 0 100px; text-align: center; }
    .profile-hero-inner { flex-direction: column; }
    .profile-hero-meta { justify-content: center; }
}