/* =================================================================
   Profile module — compact design for all four sub-pages.
   Uses shared design tokens. Overrides .card padding locally.
   ================================================================= */

/* Override the theme's generous .card padding inside profile pages */
.profile-page .card { padding: 1rem 1.1rem; margin-bottom: .35rem; }
.profile-page .card h3 { font-size: .92rem; margin-bottom: .6rem; }

/* ---------- Sub-navigation — single compact bar ----------------- */
.profile-subnav {
    display: flex; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); margin-bottom: .35rem;
    overflow: hidden; gap: 0;
}
.profile-subnav-identity {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 .9rem; flex-shrink: 0; border-right: 1px solid var(--border);
    height: 42px;
}
.profile-subnav-avatar {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.profile-subnav-avatar-initial {
    --avatar-color: #6b7280;
    background: color-mix(in srgb, var(--avatar-color) 88%, black 0%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .75rem;
}
.profile-subnav-name { font-weight: 700; font-size: .82rem; white-space: nowrap; }

.profile-subnav-tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.profile-subnav-tabs::-webkit-scrollbar { display: none; }
.profile-subnav-tabs a {
    flex: 1; min-width: 72px; height: 42px;
    display: flex; align-items: center; justify-content: center; gap: .25rem;
    padding: 0 .5rem; font-size: .78rem; font-weight: 600;
    color: var(--ink-soft); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
}
.profile-subnav-tabs a.is-active { color: var(--indigo); border-bottom-color: var(--marigold, #f4a300); }
.profile-subnav-tabs a:hover:not(.is-active) { color: var(--ink); }

/* ---------- Profile view card ---------------------------------- */
.chip {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700;
    background: color-mix(in srgb, var(--chip-color) 16%, white);
    color: var(--chip-color);
}
.profile-view-bio { margin-top: .65rem; font-size: .88rem; line-height: 1.45; }

/* ---------- Profile hero (cover banner + overlapping avatar) ---- */
.profile-hero {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); overflow: hidden; margin-bottom: .35rem;
}
.profile-hero-cover {
    height: 140px; position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px),
        linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
    background-size: cover, cover; background-position: center; background-repeat: no-repeat;
}
.profile-hero-menu { position: absolute; top: .6rem; right: .6rem; z-index: 5; }
.profile-hero-rank-badge {
    position: absolute; top: .6rem; left: .6rem; z-index: 5;
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--chip-color, #6b7280);
    color: #fff; font-size: .7rem; font-weight: 700;
    padding: .3rem .7rem; border-radius: 999px;
    text-decoration: none; box-shadow: 0 3px 10px -4px rgba(0,0,0,.4);
    transition: transform .1s ease, filter .12s ease;
}
.profile-hero-rank-badge:hover { transform: translateY(-1px); filter: brightness(1.1); }
.profile-hero-menu-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,.45); color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1;
    backdrop-filter: blur(2px); transition: background .12s ease;
}
.profile-hero-menu-btn:hover, .profile-hero-menu.is-open .profile-hero-menu-btn { background: rgba(0,0,0,.65); }
.profile-hero-menu-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 160px; padding: .35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.35);
}
.profile-hero-menu-dropdown a, .profile-hero-menu-dropdown button, .profile-hero-menu-dropdown form {
    display: block; width: 100%;
}
.profile-hero-menu-dropdown a, .profile-hero-menu-dropdown button {
    padding: .5rem .6rem; border-radius: 5px; border: none; background: none;
    font-family: inherit; font-size: .86rem; font-weight: 600; text-align: left;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.profile-hero-menu-dropdown a:hover, .profile-hero-menu-dropdown button:hover { background: var(--paper); }
.profile-hero-menu-divider { height: 1px; margin: .3rem .2rem; background: var(--border); }
.profile-hero-bottom {
    display: flex; align-items: flex-start; gap: .85rem; flex-wrap: wrap;
    padding: 0 1.4rem 1rem; margin-top: -46px;
}
.profile-hero-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-hero-avatar {
    width: 76px; height: 76px; border-radius: 16px; object-fit: cover; display: block;
    border: 4px solid var(--surface); background: var(--surface);
}
.profile-hero-avatar-initial {
    --avatar-color: #6b7280;
    background: color-mix(in srgb, var(--avatar-color) 88%, black 0%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: 800; font-family: var(--font-display);
}
.profile-hero-avatar-edit {
    position: absolute; bottom: -2px; right: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--indigo); color: #fff; font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--surface); text-decoration: none;
}
.profile-hero-identity { flex: 1; min-width: 0; padding-bottom: .2rem; padding-top: 48px; }
.profile-hero-name-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.profile-hero-name-row h1 { margin: 0; font-size: 1.2rem; }
.profile-hero-level-badge {
    display: inline-block; background: var(--chip-color, var(--marigold));
    color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px;
}
.profile-hero-subline { margin: .2rem 0 0; font-size: .84rem; }

@media (max-width: 640px) {
    .profile-hero-cover { height: 92px; }
    .profile-hero-avatar { width: 58px; height: 58px; border-radius: 13px; border-width: 3px; }
    .profile-hero-avatar-initial { font-size: 1.3rem; }
    .profile-hero-bottom { margin-top: -35px; padding: 0 1rem .8rem; gap: .6rem; }
    .profile-hero-identity { padding-top: 37px; }
    .profile-hero-name-row h1 { font-size: 1rem; }
}

/* ---------- Quick action cards (compact list) ------------------- */
.profile-actions-grid {
    display: flex; flex-direction: column;
    gap: 0; margin-bottom: .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); overflow: hidden;
}
.profile-action-card {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem 1rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background .12s ease;
}
.profile-action-card:last-child { border-bottom: none; }
.profile-action-card:hover { background: var(--paper); }
.profile-action-icon { font-size: 1.05rem; flex-shrink: 0; width: 22px; text-align: center; }
.profile-action-card div { flex: 1; min-width: 0; }
.profile-action-card strong { font-size: .88rem; display: block; }
.profile-action-card span { font-size: .76rem; color: var(--ink-soft); }
.profile-action-arrow { color: var(--border); font-size: .95rem; flex-shrink: 0; }

/* ---------- Info list ------------------------------------------ */
.profile-info-list { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.profile-info-list > div {
    display: flex; justify-content: space-between; gap: .75rem;
    font-size: .85rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border);
}
.profile-info-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.profile-info-list dt { color: var(--ink-soft); margin: 0; }
.profile-info-list dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Recent activity table (admin-only, account.php) ---- */
.profile-activity-table { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.profile-activity-table th {
    text-align: left; padding: .5rem .6rem; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .02em; color: var(--ink-soft); border-bottom: 1px solid var(--border);
}
.profile-activity-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.profile-activity-table tr:last-child td { border-bottom: none; }

/* Panel head inline */
.panel-head-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.panel-head-inline h3 { margin: 0; }

/* ---------- Avatar section (edit page) ------------------------- */
.profile-edit-cover-preview {
    width: 100%; height: 140px; border-radius: 5px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}
.profile-edit-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-edit-avatar-row {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.profile-edit-avatar-preview {
    width: 56px; height: 56px; max-width: 56px; max-height: 56px;
    border-radius: 50%; object-fit: cover; display: block;
    border: 2px solid var(--border); flex-shrink: 0;
}
.profile-edit-avatar-initial {
    --avatar-color: #6b7280;
    background: color-mix(in srgb, var(--avatar-color) 88%, black 0%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800;
}
.profile-edit-avatar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.profile-edit-avatar-btn { cursor: pointer; }

/* ---------- Form (edit, password, settings) -------------------- */
.profile-edit-form { display: flex; flex-direction: column; gap: .65rem; }

.pef-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.pef-field { display: flex; flex-direction: column; gap: .2rem; }
.pef-field label {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.pef-req { color: var(--danger); }
.pef-hint { font-size: .7rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .25rem; }

.pef-field input[type=text], .pef-field input[type=password],
.pef-field textarea {
    padding: .55rem .7rem; border: 1px solid var(--border);
    border-radius: 5px; background: var(--paper);
    font-family: inherit; font-size: .9rem; line-height: 1.4;
    transition: outline .1s ease;
}
.pef-field input:focus, .pef-field textarea:focus {
    outline: 2px solid var(--marigold, #f4a300); outline-offset: 1px;
    border-color: transparent;
}
.pef-field textarea { resize: vertical; min-height: 80px; }
.pef-field select {
    padding: .55rem 2rem .55rem .7rem; border: 1px solid var(--border);
    border-radius: 5px; background-color: var(--paper);
    font-family: inherit; font-size: .9rem; line-height: 1.4; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    transition: outline .1s ease, border-color .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 11px 7px;
}
.pef-field select:focus {
    outline: 2px solid var(--marigold, #f4a300); outline-offset: 1px;
    border-color: transparent;
}
.pef-field select:hover { border-color: color-mix(in srgb, var(--indigo) 35%, var(--border)); }
.pef-label-icon { color: var(--indigo); font-size: .8rem; margin-right: .1rem; }
.dob-select-row-compact { gap: .35rem; }
.dob-select-row-compact select { padding-left: .5rem; padding-right: 1.5rem; font-size: .85rem; background-position: right .55rem center; }
@media (max-width: 480px) {
    .dob-select-row-compact { flex-wrap: nowrap; }
    .dob-select-row-compact select { font-size: .78rem; padding-left: .35rem; padding-right: 1.3rem; }
}
.pef-counter { font-size: .72rem; color: var(--ink-soft); text-align: right; margin-top: -.25rem; }

.pef-actions { display: flex; gap: .5rem; margin-top: .25rem; }

/* ---------- Radio cards (settings) ----------------------------- */
.pef-radio-card {
    display: flex; align-items: center; gap: .7rem;
    border: 1px solid var(--border); border-radius: 5px;
    padding: .65rem .85rem; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.pef-radio-card input[type=radio] { display: none; }
.pef-radio-card.is-selected { border-color: var(--indigo); background: rgba(29,53,87,.04); }
.pef-radio-icon { font-size: 1.15rem; flex-shrink: 0; }
.pef-radio-card div { display: flex; flex-direction: column; gap: .1rem; }
.pef-radio-card strong { font-size: .88rem; }
.pef-radio-card span { font-size: .76rem; color: var(--ink-soft); }

/* ---------- Photo strip --------------------------------------- */
.photo-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.photo-strip a { flex-shrink: 0; width: 54px; height: 54px; border-radius: 7px; overflow: hidden; display: block; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip-icon {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--paper); font-size: 1.3rem;
}

/* ---------- Compact card — tighter padding only, no size changes to
   the content inside (avatars/thumbnails keep their own fixed sizes) --- */
.profile-compact-card { padding: .65rem .75rem; margin-bottom: .3rem; }
.profile-compact-card h3 { font-size: .85rem; margin: 0; }
.profile-compact-card .panel-head-inline { margin-bottom: .4rem; }

/* ---------- Profile actions bar (Add Friend / Message / Full details) - */
.profile-actions-bar {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem .9rem; margin-bottom: .35rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.profile-actions-bar .btn {
    border-radius: 5px; font-weight: 700; font-size: .82rem; padding: .5rem 1rem;
    display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.profile-actions-bar .btn:hover { transform: translateY(-1px); }
.profile-actions-bar .btn-primary {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
    box-shadow: 0 3px 10px -4px rgba(29,53,87,.5);
}
.profile-actions-bar .btn-ghost {
    background: var(--paper); color: var(--ink); border-color: var(--border);
}
.profile-actions-bar .btn-ghost:hover { background: var(--indigo-soft, var(--paper)); border-color: var(--indigo); color: var(--indigo); }
.profile-actions-bar .fr-btn-friends {
    background: rgba(42,157,111,.12); color: var(--success); border-color: rgba(42,157,111,.25);
}
.profile-actions-bar .fr-btn-pending {
    background: rgba(244,163,0,.12); color: var(--marigold-deep); border-color: rgba(244,163,0,.25);
}
/* ---------- Profile stats row (Posts / Likes / Friends) ------- */
.profile-stats-row {
    display: flex; align-items: center; gap: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .35rem; overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.profile-stat-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .65rem .75rem; text-decoration: none; color: inherit;
    border-right: 1px solid var(--border); transition: background .12s ease;
}
.profile-stat-item:last-child { border-right: none; }
a.profile-stat-item:hover { background: var(--paper); }
.profile-stat-item strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.profile-stat-item span { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; }
.profile-stat-streak strong { color: #f7931e; }
.profile-stat-streak strong i { font-size: .92em; }

/* Link/danger button */
.link-btn { background: none; border: none; padding: 0; color: var(--danger); font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ---------- Responsive ---------------------------------------- */
@media (max-width: 640px) {
    .profile-subnav-name { display: none; }
    .profile-subnav-identity { padding: 0 .65rem; }
    .profile-action-card span { display: none; }
    .pef-row { grid-template-columns: 1fr; gap: .5rem; }
    .profile-actions-bar { padding: .6rem .75rem; }
    .profile-actions-bar .btn { padding: .45rem .8rem; font-size: .76rem; }
    .profile-stat-item { padding: .65rem .75rem; }
    .profile-stat-item strong { font-size: 1rem; }
    .profile-stat-item span { font-size: .68rem; }
}

/* ---------- Connected accounts (Settings) --------------------------- */
.pef-oauth-list { display: flex; flex-direction: column; gap: .1rem; }
.pef-oauth-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.pef-oauth-row:last-child { border-bottom: none; }
.pef-oauth-label { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; }

/* ---------- Toggle switch (e.g. Notification sound) ------------------ */
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toggle-switch { display: flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch-track {
    position: relative; width: 36px; height: 20px; border-radius: 999px;
    background: var(--border); transition: background .18s ease; flex-shrink: 0;
}
.toggle-switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.toggle-switch input:checked + .toggle-switch-track { background: var(--indigo); }
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-switch-track { outline: 2px solid var(--marigold, #f4a300); outline-offset: 2px; }
.toggle-switch-label { font-size: .88rem; font-weight: 600; color: var(--ink); }

/* ---------- Compact card variant (toggle-only settings cards) -------- */
.card-compact { padding: .65rem 1.1rem; margin-bottom: .5rem; }

/* ---------- Per-module notification preferences grid ------------------ */
.notif-module-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem;
}
.notif-module-toggle {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 5px;
    background: var(--paper);
}
.notif-module-toggle .toggle-switch-label { font-size: .82rem; font-weight: 600; }
@media (max-width: 480px) {
    .notif-module-grid { grid-template-columns: 1fr; }
}