/*
 * Perfil público — identidade Clareza Acadêmica.
 * Carregado somente em /usuarios/perfil/<user_id>/ e escopado à raiz da página.
 */

body:has(.profile-public-clarity) {
    overflow-x: hidden;
    background: #f6f7fb;
}

.profile-public-clarity {
    --pp-primary: #667eea;
    --pp-primary-hover: #545fcb;
    --pp-primary-soft: #f0f1ff;
    --pp-purple: #764ba2;
    --pp-bg: #f6f7fb;
    --pp-surface: #ffffff;
    --pp-text: #1f2937;
    --pp-muted: #6b7280;
    --pp-subtle: #9ca3af;
    --pp-border: #e5e7eb;
    --pp-border-strong: #d8dce5;
    --pp-success: #10b981;
    --pp-warning: #f59e0b;
    --pp-error: #ef4444;
    color: var(--pp-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.profile-public-clarity *,
.profile-public-clarity *::before,
.profile-public-clarity *::after {
    box-sizing: border-box;
}

.profile-public-clarity .public-profile-header {
    min-height: 132px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid #dfe2ff;
    border-radius: 20px;
    background: var(--pp-primary-soft);
}

.profile-public-clarity .public-profile-header::before {
    animation: none;
    background:
        radial-gradient(circle at 8% 20%, rgba(102, 126, 234, 0.14), transparent 34%),
        radial-gradient(circle at 88% 80%, rgba(118, 75, 162, 0.10), transparent 34%);
}

.profile-public-clarity .public-profile-content {
    min-height: 82px;
}

.profile-public-clarity .header-wcoin-display {
    max-width: 100%;
    padding-right: 0;
}

.profile-public-clarity .wcoin-header-card {
    max-width: 100%;
    min-height: 64px;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: none;
}

.profile-public-clarity .wcoin-header-card:hover {
    transform: none;
    border-color: var(--pp-border-strong);
    background: #fff;
    box-shadow: none;
}

.profile-public-clarity .wcoin-header-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    animation: none;
    background: #fff7dc;
    color: #b77900;
    box-shadow: none;
}

.profile-public-clarity .wcoin-header-value {
    color: var(--pp-text);
    text-shadow: none;
}

.profile-public-clarity .wcoin-header-label {
    max-width: 220px;
    overflow-wrap: anywhere;
    color: var(--pp-muted);
    letter-spacing: 0.04em;
}

.profile-public-clarity > .container {
    max-width: 1180px;
}

.profile-public-clarity > .container > .row {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    margin: 0;
}

.profile-public-clarity > .container > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

.profile-public-clarity .public-profile-card {
    margin-top: -3.75rem;
    padding: 1.5rem;
    border: 1px solid var(--pp-border);
    border-radius: 20px;
    background: var(--pp-surface);
    box-shadow: 0 18px 50px rgba(31, 41, 55, 0.10);
    transition: border-color 0.2s ease;
}

.profile-public-clarity .public-profile-card:hover {
    transform: none;
    border-color: var(--pp-border-strong);
    box-shadow: 0 18px 50px rgba(31, 41, 55, 0.10);
}

.profile-public-clarity .public-avatar-wrapper {
    margin-bottom: 1rem;
}

.profile-public-clarity .public-avatar {
    width: 112px;
    height: 112px;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, 0.14);
}

.profile-public-clarity .public-avatar-border {
    animation: none;
    background: var(--pp-primary);
}

.profile-public-clarity .public-username {
    margin-bottom: 0.35rem;
    color: var(--pp-text);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 750;
    letter-spacing: -0.025em;
}

.profile-public-clarity .public-member-since,
.profile-public-clarity .social-links-title {
    color: var(--pp-muted);
}

.profile-public-clarity .public-bio {
    color: var(--pp-muted);
    border-left-color: var(--pp-primary);
    background: var(--pp-primary-soft);
    font-style: normal;
}

.profile-public-clarity .public-stats {
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 0;
    border-color: var(--pp-border);
}

.profile-public-clarity .public-stat-item {
    min-width: 92px;
    min-height: 52px;
    padding: 0.25rem 0.4rem;
    border-radius: 9px;
}

.profile-public-clarity .public-stat-item:hover {
    background: var(--pp-primary-soft);
}

.profile-public-clarity .public-stat-number {
    color: var(--pp-primary);
}

.profile-public-clarity .public-actions,
.profile-public-clarity .share-profile-container,
.profile-public-clarity .social-links-buttons {
    gap: 0.65rem;
}

.profile-public-clarity .btn-follow-action,
.profile-public-clarity .btn-share-profile,
.profile-public-clarity .social-link-btn,
.profile-public-clarity .btn-empty-action,
.profile-public-clarity .btn-toggle-simulados,
.profile-public-clarity .btn-iniciar-simulado,
.profile-public-clarity .btn-view-favorito {
    min-height: 44px;
    border-radius: 9px;
    box-shadow: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.profile-public-clarity .btn-share-profile {
    background: var(--pp-primary);
}

.profile-public-clarity .btn-share-profile:hover {
    transform: none;
    background: var(--pp-primary-hover);
    box-shadow: none;
}

.profile-public-clarity .btn-activity-profile,
.profile-public-clarity .btn-chat-profile {
    border: 1px solid var(--pp-border-strong) !important;
    background: #fff !important;
    color: var(--pp-primary) !important;
}

.profile-public-clarity .btn-activity-profile:hover,
.profile-public-clarity .btn-chat-profile:hover {
    filter: none;
    border-color: var(--pp-primary) !important;
    background: var(--pp-primary-soft) !important;
}

.profile-public-clarity .profile-tabs-container {
    top: 0;
    max-width: 100%;
    z-index: 20;
}

.profile-public-clarity .profile-tabs-nav {
    width: 100%;
    max-width: 100%;
    gap: 0.35rem;
    padding: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}

.profile-public-clarity .profile-tab-btn {
    min-width: 112px;
    min-height: 44px;
    flex: 1 0 auto;
    padding: 0.65rem 0.85rem;
    overflow: visible;
    scroll-snap-align: start;
    border-radius: 9px;
    color: var(--pp-muted);
    font-size: 0.86rem;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.profile-public-clarity .profile-tab-btn::before {
    display: none;
}

.profile-public-clarity .profile-tab-btn.active {
    color: #fff;
    background: var(--pp-primary);
    box-shadow: none;
}

.profile-public-clarity .profile-tab-btn:hover:not(.active) {
    color: var(--pp-primary);
    background: var(--pp-primary-soft);
}

.profile-public-clarity .performance-section,
.profile-public-clarity .expertise-section,
.profile-public-clarity .badges-section,
.profile-public-clarity .grafico-section,
.profile-public-clarity .atividades-section,
.profile-public-clarity .proof-social-section,
.profile-public-clarity .favoritos-section,
.profile-public-clarity .simulados-section {
    padding: clamp(1.15rem, 2.6vw, 1.75rem);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: var(--pp-surface);
    box-shadow: none;
}

.profile-public-clarity .section-title {
    color: var(--pp-text);
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.profile-public-clarity .section-title i {
    color: var(--pp-primary);
}

.profile-public-clarity .kpi-card,
.profile-public-clarity .favorito-card,
.profile-public-clarity .modo-chip,
.profile-public-clarity .comm-item {
    border-color: var(--pp-border);
    border-radius: 9px;
    background: #fafbfc;
    box-shadow: none;
}

.profile-public-clarity .kpi-card:hover,
.profile-public-clarity .favorito-card:hover,
.profile-public-clarity .comm-item:hover {
    transform: none;
    border-color: var(--pp-border-strong);
    box-shadow: none;
}

.profile-public-clarity .profile-subtabs {
    gap: 0.25rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-bottom-color: var(--pp-border);
}

.profile-public-clarity .profile-subtab-btn {
    min-height: 44px;
    flex: 0 0 auto;
}

.profile-public-clarity :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.32);
    outline-offset: 2px;
}

.profile-public-clarity .form-control,
.profile-public-clarity .form-select {
    min-height: 44px;
    border-color: var(--pp-border-strong);
    border-radius: 9px;
}

.profile-public-clarity .form-control:focus,
.profile-public-clarity .form-select:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

@media (max-width: 991.98px) {
    body:has(.profile-public-clarity) #mainNavbar .offcanvas:not(.show) {
        visibility: hidden;
    }

    .profile-public-clarity > .container > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-public-clarity .public-profile-card {
        margin-top: -2.5rem;
    }

    .profile-public-clarity .profile-tabs-container {
        margin-top: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .profile-public-clarity .public-profile-header {
        min-height: 108px;
        padding: 1rem;
        border-radius: 14px;
    }

    .profile-public-clarity .public-profile-content {
        min-height: 74px;
        justify-content: center !important;
    }

    .profile-public-clarity .wcoin-header-card {
        width: min(100%, 320px);
    }

    .profile-public-clarity .public-profile-card {
        margin-top: -1.75rem;
        padding: 1.25rem;
        border-radius: 14px;
    }

    .profile-public-clarity .public-avatar {
        width: 96px;
        height: 96px;
    }

    .profile-public-clarity .profile-tab-btn {
        min-width: 108px;
        flex-basis: 108px;
    }

    .profile-public-clarity .profile-tab-btn span {
        display: inline !important;
    }

    .profile-public-clarity .perf-hero {
        justify-content: space-between;
        gap: 0.5rem;
    }

    .profile-public-clarity .perf-hero-item {
        min-width: 0;
        flex: 1;
    }

    .profile-public-clarity .perf-hero-label {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 389.98px) {
    .profile-public-clarity .public-profile-header {
        padding-inline: 0.75rem;
    }

    .profile-public-clarity .wcoin-header-card {
        padding-inline: 0.75rem;
    }

    .profile-public-clarity .wcoin-header-value {
        font-size: 1.25rem;
    }

    .profile-public-clarity .public-profile-card {
        padding: 1rem;
    }

    .profile-public-clarity .public-stats {
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-public-clarity *,
    .profile-public-clarity *::before,
    .profile-public-clarity *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════ Modal "Acompanhamento diário" — tema claro ═══════════
 * O mesmo tratamento que profile-clarity.css dá ao modal do perfil próprio.
 * O escopo é `body:has(...)` — e não um seletor descendente — porque o modal
 * fica FORA de <main class="profile-public-clarity"> no template.
 */
body:has(.profile-public-clarity) .heatmap-modal .modal-content {
    border: 1px solid var(--pp-border, #e5e7eb);
    background: var(--pp-surface, #ffffff);
    color: var(--pp-text, #1f2937);
}

body:has(.profile-public-clarity) .heatmap-modal .modal-header {
    border-color: var(--pp-border, #e5e7eb);
}

body:has(.profile-public-clarity) .heatmap-modal .btn-close {
    filter: none;
}

body:has(.profile-public-clarity) .heatmap-period-tabs button {
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--pp-border-strong, #d8dce5);
    border-radius: 9px;
    background: var(--pp-surface, #ffffff);
    color: var(--pp-muted, #6b7280);
    font-size: 0.8rem;
    box-shadow: none;
}

body:has(.profile-public-clarity) .heatmap-period-tabs button:hover {
    border-color: var(--pp-primary, #667eea);
    background: var(--pp-primary-soft, #f0f1ff);
    color: var(--pp-primary-hover, #545fcb);
}

body:has(.profile-public-clarity) .heatmap-period-tabs button.active {
    border-color: var(--pp-primary, #667eea);
    background: var(--pp-primary, #667eea);
    color: #fff;
}

body:has(.profile-public-clarity) .heatmap-summary-card,
body:has(.profile-public-clarity) .heatmap-wrapper,
body:has(.profile-public-clarity) .streak-card {
    border-color: var(--pp-border, #e5e7eb);
    background: var(--pp-bg, #f6f7fb);
    box-shadow: none;
}

body:has(.profile-public-clarity) .heatmap-summary-card .label,
body:has(.profile-public-clarity) .heatmap-summary-card .sub,
body:has(.profile-public-clarity) .heatmap-title,
body:has(.profile-public-clarity) .heatmap-legend,
body:has(.profile-public-clarity) .heatmap-legend .lg-num,
body:has(.profile-public-clarity) .streak-card .streak-label {
    color: var(--pp-muted, #6b7280);
}

body:has(.profile-public-clarity) .heatmap-summary-card .value,
body:has(.profile-public-clarity) .streak-card .streak-value {
    color: var(--pp-text, #1f2937);
}

body:has(.profile-public-clarity) .heatmap-period-tabs button:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.28);
    outline-offset: 2px;
}

/* Escala do heatmap no tema claro — mesma correção de profile-clarity.css:
 * o nível 0 herdado é invisível sobre fundo claro e a rampa verde escura
 * inverte a leitura (pouca atividade contrastando mais que muita). */
body:has(.profile-public-clarity) .heatmap-cell,
body:has(.profile-public-clarity) .heatmap-cell[data-level="0"],
body:has(.profile-public-clarity) .heatmap-legend .lg-cell-0 {
    background: #e6e9f0;
    outline-color: rgba(31, 41, 55, 0.06);
}

body:has(.profile-public-clarity) .heatmap-cell[data-level="1"],
body:has(.profile-public-clarity) .heatmap-legend .lg-cell-1 { background: #9be9a8; }
body:has(.profile-public-clarity) .heatmap-cell[data-level="2"],
body:has(.profile-public-clarity) .heatmap-legend .lg-cell-2 { background: #40c463; }
body:has(.profile-public-clarity) .heatmap-cell[data-level="3"],
body:has(.profile-public-clarity) .heatmap-legend .lg-cell-3 { background: #30a14e; }
body:has(.profile-public-clarity) .heatmap-cell[data-level="4"],
body:has(.profile-public-clarity) .heatmap-legend .lg-cell-4 { background: #216e39; }

body:has(.profile-public-clarity) .heatmap-cell:hover {
    outline: 1px solid var(--pp-text, #1f2937);
}