/* ════════════════════════════════════════════════════════════════════════════
   N! Board — theme.css
   Sistema de temas Light / Dark (override manual) + perfil de usuário
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Tema forçado pelo usuário (sobrescreve prefers-color-scheme) ─────────── */

/* Modo Light explícito */
html[data-nb-theme="light"] {
    --nb-bg:        #F4F5F7;
    --nb-surface:   #FFFFFF;
    --nb-surface-2: #F8F9FA;
    --nb-border:    #E2E8F0;
    --nb-border-2:  #CBD5E1;
    --nb-text:      #1A202C;
    --nb-text-2:    #4A5568;
    --nb-text-3:    #718096;

    --nb-todo-bg:      #EFF6FF; --nb-todo-border:  #BFDBFE; --nb-todo-text:  #1D4ED8;
    --nb-doing-bg:     #FFF7ED; --nb-doing-border: #FED7AA; --nb-doing-text: #C2410C;
    --nb-review-bg:    #FDF4FF; --nb-review-border:#E9D5FF; --nb-review-text:#7E22CE;
    --nb-done-bg:      #F0FDF4; --nb-done-border:  #BBF7D0; --nb-done-text:  #15803D;
}

/* Modo Dark explícito */
html[data-nb-theme="dark"] {
    --nb-bg:        #0F1117;
    --nb-surface:   #1A1D27;
    --nb-surface-2: #22263A;
    --nb-border:    #2D3148;
    --nb-border-2:  #3A3F60;
    --nb-text:      #E2E8F0;
    --nb-text-2:    #94A3B8;
    --nb-text-3:    #64748B;

    --nb-todo-bg:      #1e2a3a; --nb-todo-border: #2d4a7a; --nb-todo-text: #93C5FD;
    --nb-doing-bg:     #2a1f0f; --nb-doing-border:#7c4a1e; --nb-doing-text:#FBB680;
    --nb-review-bg:    #21102e; --nb-review-border:#6b2d9e; --nb-review-text:#D8B4FE;
    --nb-done-bg:      #0d2016; --nb-done-border: #166534; --nb-done-text: #86EFAC;
}

/* ─── Toggle de Tema na Navbar ─────────────────────────────────────────────── */
.nb-theme-toggle {
    display: flex; align-items: center; gap: 4px;
    background: var(--nb-surface-2);
    border: 1px solid var(--nb-border);
    border-radius: 20px;
    padding: 3px;
}
.nb-theme-btn {
    width: 30px; height: 26px; border: none; background: transparent;
    border-radius: 16px; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
    color: var(--nb-text-2);
}
.nb-theme-btn:hover { background: var(--nb-border); }
.nb-theme-btn--active {
    background: var(--nb-surface) !important;
    color: var(--nb-brand);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ─── Página de Perfil ─────────────────────────────────────────────────────── */
.nb-profile-card {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-lg);
    padding: 28px 32px;
    box-shadow: var(--nb-shadow-sm);
}

.nb-profile-avatar-section {
    display: flex; align-items: center; gap: 24px;
    margin-bottom: 16px;
}

/* Avatar grande com overlay de edição */
.nb-avatar-wrap {
    position: relative; flex-shrink: 0;
    width: 100px; height: 100px;
}
.nb-avatar-lg {
    width: 100px; height: 100px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--nb-brand-light);
}
.nb-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; cursor: pointer;
    opacity: 0; transition: opacity .2s;
}
.nb-avatar-wrap:hover .nb-avatar-overlay { opacity: 1; }
.nb-avatar-overlay-icon { font-size: 20px; }
.nb-avatar-overlay-text {
    font-size: 11px; font-weight: 700; color: white;
    text-transform: uppercase; letter-spacing: .05em;
}

.nb-profile-info { display: flex; flex-direction: column; gap: 6px; }
.nb-profile-name  { font-size: 20px; font-weight: 700; }
.nb-profile-email { font-size: 14px; color: var(--nb-text-3); }

.nb-avatar-actions {
    display: flex; align-items: center; gap: 14px; margin-top: 4px;
}
.nb-avatar-hint { font-size: 12px; color: var(--nb-text-3); }

.nb-avatar-feedback {
    margin-top: 10px;
}

/* ─── Seções do perfil ─────────────────────────────────────────────────────── */
.nb-profile-section-title {
    font-size: 16px; font-weight: 700; margin: 0 0 4px;
}
.nb-profile-section-desc {
    font-size: 13px; color: var(--nb-text-3); margin: 0 0 20px;
}

/* ─── Theme Picker ─────────────────────────────────────────────────────────── */
.nb-theme-picker {
    display: flex; gap: 14px; flex-wrap: wrap;
}
.nb-theme-option {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: none; border: 2px solid var(--nb-border);
    border-radius: var(--nb-radius-lg); padding: 12px;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
    font-size: 13px; font-weight: 600; color: var(--nb-text-2);
    min-width: 110px;
}
.nb-theme-option:hover {
    border-color: var(--nb-brand); color: var(--nb-text);
}
.nb-theme-option--active {
    border-color: var(--nb-brand) !important;
    color: var(--nb-brand) !important;
    box-shadow: 0 0 0 3px rgba(108,99,255,.15);
}

/* Mini-preview do tema */
.nb-theme-preview {
    width: 100px; height: 68px; border-radius: 6px;
    overflow: hidden; position: relative;
    border: 1px solid var(--nb-border);
}
.nb-theme-preview--light { background: #F4F5F7; }
.nb-theme-preview--dark  { background: #0F1117; }
.nb-theme-preview--system {
    display: flex; background: #F4F5F7;
}

.nb-tp-navbar {
    height: 14px;
    margin: 6px 6px 4px;
    border-radius: 3px;
}
.nb-theme-preview--light .nb-tp-navbar  { background: #FFFFFF; }
.nb-theme-preview--dark  .nb-tp-navbar  { background: #1A1D27; }

.nb-tp-content {
    display: flex; gap: 4px; padding: 0 6px;
}
.nb-tp-card {
    flex: 1; height: 36px; border-radius: 3px;
}
.nb-theme-preview--light .nb-tp-card  { background: #FFFFFF; }
.nb-theme-preview--light .nb-tp-card--2 { background: #E2E8F0; }
.nb-theme-preview--dark  .nb-tp-card  { background: #1A1D27; }
.nb-theme-preview--dark  .nb-tp-card--2 { background: #22263A; }

/* Sistema: split */
.nb-tp-half { flex: 1; display: flex; flex-direction: column; }
.nb-tp-half--light { background: #F4F5F7; }
.nb-tp-half--dark  { background: #0F1117; }
.nb-tp-half--light .nb-tp-navbar { background: #FFFFFF; }
.nb-tp-half--dark  .nb-tp-navbar { background: #1A1D27; }

/* ─── Formulário de senha ──────────────────────────────────────────────────── */
.nb-password-form {
    display: flex; flex-direction: column; gap: 18px;
    max-width: 440px;
}

/* Barra de força */
.nb-strength-wrap {
    display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.nb-strength-bar {
    flex: 1; height: 5px; background: var(--nb-border);
    border-radius: 3px; overflow: hidden;
}
.nb-strength-fill {
    height: 100%; border-radius: 3px;
    transition: width .3s, background .3s;
}
.nb-strength-label {
    font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* Hint de confirmação */
.nb-match-hint { font-size: 12px; font-weight: 600; margin-top: 4px; display: block; }

/* ─── Feedback inline ──────────────────────────────────────────────────────── */
.nb-inline-feedback {
    padding: 10px 14px; border-radius: var(--nb-radius-sm);
    font-size: 13px; font-weight: 500;
}
.nb-inline-feedback--success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.nb-inline-feedback--error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.nb-inline-feedback--info    { background: var(--nb-brand-light); color: var(--nb-brand); border: 1px solid #AFA9EC; }