/* =============================================================
   FreeLab — Profile Completion Widget
   Pill badge · Drawer · Checklist · SVG ring · Achievements
   ============================================================= */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --pc-accent:      #7c3aed;
    --pc-accent-light:rgba(124,58,237,.15);
    --pc-success:     #4ade80;
    --pc-surface:     transparent;
    --pc-border:      rgba(255,255,255,.08);
    --pc-text:        var(--text-primary, #f1f5f9);
    --pc-muted:       var(--text-secondary, #9ca3af);
    --pc-radius:      12px;
    --pc-shadow:      0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════
   BADGE (topbar pill)
   ══════════════════════════════════════════════════════════════ */
.pc-badge {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          4px 10px 4px 5px;
    background:       var(--pc-accent-light);
    border:           1.5px solid #c4b5fd;
    border-radius:    999px;
    cursor:           pointer;
    font-size:        13px;
    font-weight:      600;
    color:            var(--pc-accent);
    line-height:      1;
    position:         relative;
    transition:       background .15s, box-shadow .15s;
    white-space:      nowrap;
}
.pc-badge:hover,
.pc-badge[aria-expanded="true"] {
    background:  #ddd6fe;
    box-shadow:  0 2px 8px rgba(124,58,237,.25);
}

/* Pulse when < 100% */
@keyframes pcPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.35); }
    50%       { box-shadow: 0 0 0 5px rgba(124,58,237,0); }
}
.pc-badge {
    animation: pcPulse 2.8s ease-in-out infinite;
}

/* ── SVG ring inside badge ──────────────────────────────────── */
.pc-badge-ring {
    position:   relative;
    width:       28px;
    height:      28px;
    flex-shrink: 0;
}
.pc-ring-svg {
    width:     28px;
    height:    28px;
    transform: rotate(-90deg);
}
.pc-ring-track {
    fill:             none;
    stroke:           #ddd6fe;
    stroke-width:     3.5;
}
.pc-ring-fill {
    fill:             none;
    stroke:           var(--pc-accent);
    stroke-width:     3.5;
    stroke-linecap:   round;
    transition:       stroke-dasharray .5s ease;
}
.pc-badge-pct {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items:center;
    justify-content: center;
    font-size:  8.5px;
    font-weight:700;
    color:      var(--pc-accent);
}
.pc-badge-label {
    font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════
   DRAWER
   ══════════════════════════════════════════════════════════════ */
#pcWidgetMount {
    position: relative;
}

.pc-drawer {
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    width:         320px;
    max-height:    480px;
    overflow-y:    auto;
    background:    var(--pc-surface);
    border:        1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow:    var(--pc-shadow);
    z-index:       1200;
    /* slide-down animation */
    transform-origin: top right;
    animation:    pcSlideIn .18s ease;
}
@keyframes pcSlideIn {
    from { opacity:0; transform: translateY(-6px) scale(.97); }
    to   { opacity:1; transform: translateY(0)    scale(1);   }
}

.pc-drawer-header {
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--pc-border);
}
.pc-drawer-title {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       14px;
    margin-bottom:   4px;
}
.pc-drawer-pct {
    font-size:   18px;
    font-weight: 700;
    color:       var(--pc-accent);
}
.pc-drawer-sub {
    font-size:   11.5px;
    color:       var(--pc-muted);
    margin:      0 0 8px;
}
.pc-drawer-bar-wrap {
    height:        5px;
    background:    var(--pc-accent-light);
    border-radius: 999px;
    overflow:      hidden;
}
.pc-drawer-bar {
    height:        100%;
    background:    var(--pc-accent);
    border-radius: 999px;
    transition:    width .5s ease;
}

/* ══════════════════════════════════════════════════════════════
   CHECKLIST
   ══════════════════════════════════════════════════════════════ */
.pc-checklist {
    list-style:  none;
    margin:      0;
    padding:     8px 0;
}
.pc-checklist--card {
    padding: 0;
}

.pc-item {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    padding:       8px 14px;
    transition:    background .12s;
}
.pc-item:hover {
    background: rgba(255,255,255,.04);
    border-radius: 8px;
}
.pc-item--done {
    opacity: .55;
}
.pc-item-icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    margin-top:  1px;
}
.pc-item-icon svg {
    width:  18px;
    height: 18px;
}
.pc-item--done .pc-item-icon svg {
    stroke: var(--pc-success);
}
.pc-item-body {
    flex:        1;
    min-width:   0;
}
.pc-item-label {
    display:     block;
    font-size:   13px;
    font-weight: 500;
    color:       var(--pc-text);
    line-height: 1.3;
}
.pc-item-desc {
    display:     block;
    font-size:   11px;
    color:       var(--pc-muted);
    margin-top:  2px;
    line-height: 1.4;
}
.pc-item-cta {
    flex-shrink:      0;
    font-size:        11px;
    font-weight:      600;
    color:            var(--pc-accent);
    text-decoration:  none;
    white-space:      nowrap;
    padding:          3px 8px;
    border:           1.5px solid #c4b5fd;
    border-radius:    6px;
    transition:       background .12s;
}
.pc-item-cta:hover {
    background: var(--pc-accent-light);
}
.pc-item-weight {
    flex-shrink:  0;
    font-size:    10px;
    color:        var(--pc-muted);
    white-space:  nowrap;
    margin-left:  auto;
    padding-left: 6px;
}
.pc-item-empty {
    padding:   12px 16px;
    color:     var(--pc-muted);
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════
   ACHIEVEMENTS (drawer + card)
   ══════════════════════════════════════════════════════════════ */
.pc-achievements {
    padding:       10px 14px 14px;
    border-top:    1px solid var(--pc-border);
}
.pc-ach-title {
    font-size:     11px;
    font-weight:   600;
    color:         var(--pc-muted);
    text-transform:uppercase;
    letter-spacing:.04em;
    margin:        0 0 8px;
}
.pc-ach-grid {
    display: flex;
    gap:     6px;
    flex-wrap: wrap;
}
.pc-ach-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    background:      rgba(124,58,237,.15);
    border:          1.5px solid rgba(124,58,237,.3);
    border-radius:   50%;
    font-size:       18px;
    cursor:          default;
    transition:      transform .15s;
}
.pc-ach-badge:hover {
    transform: scale(1.1);
}
.pc-ach-icon { line-height: 1; }

/* ══════════════════════════════════════════════════════════════
   CARD (conta.html expanded)
   ══════════════════════════════════════════════════════════════ */
#profileCompletionCard {
    background:    transparent;
    border:        none;
    border-radius: 0;
    padding:       24px;
    margin-bottom: 24px;
}

.pc-card-header {
    display:       flex;
    gap:           20px;
    align-items:   flex-start;
    margin-bottom: 20px;
}
.pc-card-ring-wrap {
    position:    relative;
    flex-shrink: 0;
    width:       90px;
    height:      90px;
}
.pc-card-ring-svg {
    width:  90px;
    height: 90px;
    transform: rotate(-90deg);
}
.pc-card-ring-svg .pc-ring-track { stroke-width: 10; }
.pc-card-ring-svg .pc-ring-fill  { stroke-width: 10; }
.pc-card-pct-wrap {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
}
.pc-card-pct {
    font-size:   22px;
    font-weight: 800;
    color:       var(--pc-accent);
    line-height: 1;
}
.pc-card-pct-sign {
    font-size:   11px;
    font-weight: 600;
    color:       var(--pc-muted);
}
.pc-card-info {
    flex: 1;
    min-width: 0;
}
.pc-card-title {
    font-size:   17px;
    font-weight: 700;
    color:       var(--pc-text);
    margin:      0 0 6px;
}
.pc-card-sub {
    font-size:   13px;
    color:       var(--pc-muted);
    line-height: 1.5;
    margin:      0 0 10px;
}
.pc-card-ach-row {
    display: flex;
    gap:     6px;
    flex-wrap: wrap;
}

/* legacy override — kept for safety; dark variant handled by .pc-checklist--dark */

/* ══════════════════════════════════════════════════════════════
   SKILLS SECTION (inside card)
   ══════════════════════════════════════════════════════════════ */
.pc-skills-section {
    margin-top:    16px;
    padding-top:   16px;
    border-top:    1px solid var(--pc-border);
}
.pc-skills-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   10px;
}
.pc-skills-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--pc-text);
}
.pc-skills-add-btn {
    font-size:        12px;
    font-weight:      600;
    color:            var(--pc-accent);
    background:       var(--pc-accent-light);
    border:           1.5px solid #c4b5fd;
    border-radius:    8px;
    padding:          4px 10px;
    cursor:           pointer;
    transition:       background .12s;
}
.pc-skills-add-btn:hover { background: #ddd6fe; }
.pc-skills-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    min-height: 32px;
}
.pc-skill-tag {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    rgba(124,58,237,.12);
    border:        1.5px solid rgba(124,58,237,.3);
    border-radius: 20px;
    padding:       3px 10px 3px 10px;
    font-size:     12px;
    font-weight:   500;
    color:         #a78bfa;
}
.pc-skill-level {
    font-size: 10px;
    opacity:   .7;
}
.pc-skill-remove {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--pc-muted);
    font-size:   13px;
    line-height: 1;
    padding:     0;
    margin-left: 2px;
    transition:  color .12s;
}
.pc-skill-remove:hover { color: #dc2626; }
.pc-skills-loading,
.pc-skills-hint {
    font-size:  12px;
    color:      var(--pc-muted);
    padding:    4px 0;
}
.pc-skills-form {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    margin-top: 10px;
    align-items: center;
}
.pc-skills-input {
    flex:          1;
    min-width:     120px;
    padding:       6px 10px;
    background:    rgba(255,255,255,.06);
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size:     13px;
    color:         var(--text-primary, #f1f5f9);
    outline:       none;
    transition:    border-color .15s;
}
.pc-skills-input::placeholder { color: var(--text-secondary, #6b7280); }
.pc-skills-input:focus { border-color: var(--pc-accent); }
.pc-skills-select {
    padding:       6px 8px;
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size:     12px;
    background:    rgba(255,255,255,.06);
    color:         var(--text-primary, #f1f5f9);
    cursor:        pointer;
}
.pc-skills-select option { background: #1e1e2e; color: #f1f5f9; }
.pc-skills-submit {
    padding:       6px 14px;
    background:    var(--pc-accent);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s;
}
.pc-skills-submit:hover { background: #6d28d9; }
.pc-skills-cancel {
    padding:       6px 10px;
    background:    none;
    border:        1.5px solid rgba(255,255,255,.14);
    border-radius: 8px;
    font-size:     13px;
    cursor:        pointer;
    color:         var(--pc-muted);
    transition:    border-color .12s;
}
.pc-skills-cancel:hover { border-color: #9ca3af; }

/* ══════════════════════════════════════════════════════════════
   ACHIEVEMENT TOAST
   ══════════════════════════════════════════════════════════════ */
.pc-toast {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    z-index:        9999;
    display:        flex;
    align-items:    center;
    gap:            12px;
    background:     var(--pc-surface);
    border:         1.5px solid #c4b5fd;
    border-radius:  14px;
    padding:        12px 16px;
    box-shadow:     var(--pc-shadow);
    font-size:      13px;
    color:          var(--pc-text);
    max-width:      300px;
    opacity:        0;
    transform:      translateY(12px) scale(.97);
    transition:     opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.pc-toast--in {
    opacity:   1;
    transform: translateY(0) scale(1);
}
.pc-toast-icon {
    font-size: 28px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .pc-drawer {
        width:        calc(100vw - 32px);
        right:        -8px;
    }
    .pc-card-header {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }
    .pc-toast {
        bottom: 16px;
        right:  16px;
        left:   16px;
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   TAB NOTIFICATION DOT (Configurações tab)
   ══════════════════════════════════════════════════════════════ */
.tab-notif-dot {
    position:      absolute;
    top:           4px;
    right:         4px;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #f59e0b;
    border:        2px solid var(--bg-secondary, #18181b);
    animation:     pcDotPulse 2.4s ease-in-out infinite;
    display:       block;          /* overrides hidden attr when visible */
}
@keyframes pcDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    50%       { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}
.tab-insta { position: relative; }

/* ══════════════════════════════════════════════════════════════
   CONFIG-TAB SECTION HEADING EXTRAS
   ══════════════════════════════════════════════════════════════ */
.config-section-title-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.config-pct-badge {
    font-size:     12px;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 999px;
    background:    rgba(124,58,237,.15);
    color:         #a78bfa;
    letter-spacing: .02em;
}
.config-pct-badge--done {
    background: rgba(22,163,74,.15);
    color:      #4ade80;
}

/* ══════════════════════════════════════════════════════════════
   DARK-THEME COMPLETION CARD (inside config tab)
   ══════════════════════════════════════════════════════════════ */
.pc-dark-bar-wrap {
    height:        6px;
    background:    rgba(255,255,255,.08);
    border-radius: 999px;
    overflow:      hidden;
    margin:        12px 0 10px;
}
.pc-dark-bar {
    height:     100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 999px;
    transition: width .5s ease;
    min-width:  4px;
}

/* ── New progress row (replaces pc-dark-bar) ── */
.pc-progress-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      4px 0 14px;
}
.pc-progress-track {
    flex:          1;
    height:        6px;
    background:    rgba(255,255,255,.08);
    border-radius: 999px;
    overflow:      hidden;
}
.pc-progress-fill {
    height:        100%;
    background:    linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 999px;
    transition:    width .6s cubic-bezier(.4,0,.2,1);
    min-width:     4px;
}
.pc-progress-label {
    font-size:   13px;
    font-weight: 700;
    color:       #a78bfa;
    white-space: nowrap;
    min-width:   32px;
    text-align:  right;
}

.pc-dark-hint {
    font-size:   12.5px;
    color:       var(--text-secondary, #9ca3af);
    margin:      0 0 14px;
    line-height: 1.5;
}
.pc-dark-hint strong { color: var(--text-primary, #f1f5f9); }
.pc-dark-ach-row {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    margin-bottom: 14px;
}

/* Checklist — dark variant */
.pc-checklist--dark {
    list-style: none;
    margin:     0;
    padding:    0;
}
.pc-checklist--dark .pc-item {
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    padding:         10px 0;
    border-bottom:   1px solid rgba(255,255,255,.06);
    transition:      opacity .2s;
}
.pc-checklist--dark .pc-item:last-child { border-bottom: none; }
.pc-checklist--dark .pc-item--done { opacity: .5; }

.pc-checklist--dark .pc-item-icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    margin-top:  2px;
}
.pc-checklist--dark .pc-item--done .pc-item-icon { color: #4ade80; }
.pc-checklist--dark .pc-item:not(.pc-item--done) .pc-item-icon { color: #6b7280; }

.pc-checklist--dark .pc-item-body { flex: 1; min-width: 0; }
.pc-checklist--dark .pc-item-label {
    font-size:   13px;
    font-weight: 500;
    color:       var(--text-primary, #f1f5f9);
    display:     block;
}
.pc-checklist--dark .pc-item-desc {
    font-size:   12px;
    color:       var(--text-secondary, #9ca3af);
    display:     block;
    margin-top:  2px;
}

/* CTA button — matches existing config-item style */
.pc-checklist--dark .pc-item-cta {
    flex-shrink:   0;
    font-size:     12px;
    font-weight:   600;
    color:         #a78bfa;
    background:    rgba(124,58,237,.12);
    border:        1.5px solid rgba(124,58,237,.3);
    border-radius: 8px;
    padding:       4px 10px;
    white-space:   nowrap;
    text-decoration: none;
    transition:    background .12s;
    cursor:        pointer;
    align-self:    center;
}
.pc-checklist--dark .pc-item-cta:hover {
    background: rgba(124,58,237,.22);
}

.pc-checklist--dark .pc-item-weight {
    font-size:   11px;
    font-weight: 600;
    color:       var(--text-secondary, #6b7280);
    align-self:  center;
    white-space: nowrap;
    margin-left: 4px;
}

/* ── Skills section (dark) ───────────────────────────────── */
.pc-skills-dark-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   14px;
}
.pc-skills-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    min-height: 28px;
}
.pc-skill-tag {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    rgba(124,58,237,.12);
    border:        1.5px solid rgba(124,58,237,.3);
    border-radius: 20px;
    padding:       4px 10px;
    font-size:     12px;
    font-weight:   500;
    color:         #a78bfa;
}
.pc-skill-level {
    font-size: 10px;
    opacity:   .65;
}
.pc-skill-remove {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #6b7280;
    font-size:   14px;
    line-height: 1;
    padding:     0;
    transition:  color .12s;
}
.pc-skill-remove:hover { color: #f87171; }

.pc-skills-form {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    margin-top:  12px;
    align-items: center;
}
.pc-dark-input {
    flex:          1;
    min-width:     140px;
    padding:       7px 12px;
    background:    var(--bg-tertiary, rgba(255,255,255,.06));
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size:     13px;
    color:         var(--text-primary, #f1f5f9);
    outline:       none;
    transition:    border-color .15s;
}
.pc-dark-input::placeholder { color: var(--text-secondary, #6b7280); }
.pc-dark-input:focus { border-color: #7c3aed; }

.pc-dark-select {
    padding:       7px 10px;
    background:    var(--bg-tertiary, rgba(255,255,255,.06));
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size:     12px;
    color:         var(--text-primary, #f1f5f9);
    cursor:        pointer;
}
.pc-dark-select option { background: #1e1e2e; color: #f1f5f9; }

/* Reuse existing btn classes from conta.css / generic styles */
.btn-primary-sm {
    padding:       7px 16px;
    background:    #7c3aed;
    color:         #fff;
    border:        none;
    border-radius: 8px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s;
}
.btn-primary-sm:hover { background: #6d28d9; }

.btn-ghost-sm {
    padding:       7px 12px;
    background:    none;
    border:        1.5px solid rgba(255,255,255,.14);
    border-radius: 8px;
    font-size:     13px;
    color:         var(--text-secondary, #9ca3af);
    cursor:        pointer;
    transition:    border-color .12s;
}
.btn-ghost-sm:hover { border-color: rgba(255,255,255,.3); }