/* ============================================================
   WEBMANGA — Profile page light mode improvements
   ============================================================ */

/* ── Profile header: blue gradient background ──────────────── */
.element .element-header.profile .background:before {
    background-image: radial-gradient(at 10% 30%, #3a6bd4 0, #0d1c3d 100%);
}

/* element-subtitle labels (Miembro desde, etc.) */
.element-header.profile .element-subtitle {
    color: rgba(255,255,255,.55) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: .65rem;
    margin-bottom: .2rem;
}

/* badge-transparent pills in the header */
.element-header.profile .badge-transparent {
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #e8effe;
}

/* ── Profile header-bar: blue tinted bar ───────────────────── */
.element-header.profile .element-header-bar {
    background-color: rgba(15,35,100,.82) !important;
    border-top: 1px solid rgba(100,150,255,.25);
}

/* All tab links in profile bar */
.element-header.profile .element-header-bar-element {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: border-color .25s, background-color .25s;
}

.element-header.profile .element-header-bar-element:hover {
    background-color: rgba(255,255,255,.07);
    text-decoration: none;
    color: #fff;
}

/* Active tab: bright blue underline */
.element-header.profile .element-header-bar-element.active {
    border-bottom-color: #5b9cf6;
    background-color: rgba(91,156,246,.1);
}

.element-header.profile .element-header-bar-element.active
.element-header-bar-element-icon {
    color: #5b9cf6 !important;
}

.element-header.profile .element-header-bar-element.active
.element-header-bar-element-number {
    color: #5b9cf6;
}

/* Icons default color */
.element-header.profile .element-header-bar-element
.element-header-bar-element-icon {
    color: rgba(255,255,255,.65);
}

/* Numbers */
.element-header.profile .element-header-bar-element
.element-header-bar-element-number {
    color: #fff;
}

/* Labels */
.element-header.profile .element-header-bar-element
.element-header-bar-element-title {
    color: rgba(200,218,255,.7) !important;
}

/* ── Profile body background ───────────────────────────────── */
.element-body {
    background-color: #f0f4ff;
}

/* ── Section headings inside profile body ──────────────────── */
.element-body h2 {
    color: #1e4fc2;
    border-bottom: 2px solid #d0d9f0;
    padding-bottom: .4rem;
    margin-bottom: 1rem;
}

/* ── Secondary nav tabs (Biblioteca / Mis listas / Ajustes) ── */
#profileSecondaryTabs {
    border-bottom: 2px solid #1e4fc2;
}

#profileSecondaryTabs .nav-link {
    color: #5a6880;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .6rem 1.2rem;
    transition: color .2s, border-color .2s;
    background: transparent;
}

#profileSecondaryTabs .nav-link:hover {
    color: #1e4fc2;
    border-bottom-color: #7ca4e8;
    background: transparent;
}

#profileSecondaryTabs .nav-link.active {
    color: #1e4fc2;
    font-weight: 700;
    border-bottom: 3px solid #1e4fc2;
    background: transparent;
}

#profileSecondaryTabs .nav-link .badge {
    background-color: #1e4fc2;
}

/* ── Cards inside profile settings ─────────────────────────── */
.element-body .card {
    border-top: 3px solid #1e4fc2;
    box-shadow: 0 2px 6px rgba(30,79,194,.08);
}

.element-body .card-header {
    background-color: #e8effe;
    color: #1e4fc2;
    font-weight: 600;
    border-bottom-color: #d0d9f0;
}

.element-body .card-header h5,
.element-body .card-header .mb-0 {
    color: #1e4fc2;
}

/* Danger card keeps red */
.element-body .card.border-danger { border-top: 3px solid #dc3545; }
.element-body .card.border-danger .card-header { background-color: #dc3545; color: #fff; }
.element-body .card.border-danger .card-header h5 { color: #fff; }

/* ── Profile avatar placeholder ─────────────────────────────── */
.profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.6);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.profile-avatar-placeholder {
    width: 120px;
    height: 120px;
    background-color: rgba(255,255,255,.15);
    border: 4px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    margin: 0 auto;
}

/* ── Manga grid inside profile tabs ─────────────────────────── */
.element-body .element a:hover .thumbnail-title {
    background-color: rgba(30,79,194,.75);
}

/* ── Chapter list (if shown in profile) ─────────────────────── */
.element-body .list-chapters .chapter-item {
    border-left: 3px solid transparent;
    transition: border-color .15s, background-color .15s;
}

.element-body .list-chapters .chapter-item:hover {
    border-left-color: #1e4fc2;
    background-color: #e8effe;
}

.element-body .list-chapters .chapter-number { color: #1e4fc2; }

/* ── Form focus inside profile settings ─────────────────────── */
.element-body .form-control:focus {
    border-color: #7ca4e8;
    box-shadow: 0 0 0 .2rem rgba(30,79,194,.18);
}

/* ── Badges in profile body ─────────────────────────────────── */
.element-body .badge-secondary {
    background-color: #1e4fc2;
}

/* ── Alert flash ────────────────────────────────────────────── */
.element-body .alert-success {
    background-color: #e6f4ea;
    border-color: #a8d5b0;
    color: #1e6b2e;
}

/* ── Staff cards ─────────────────────────────────────────────── */
.staff-card {
    background: #fff;
    border-radius: 6px;
    padding: .75rem .5rem;
    border: 1px solid #d0d9f0;
    transition: box-shadow .2s, border-color .2s;
}

.staff-card:hover {
    border-color: #7ca4e8;
    box-shadow: 0 2px 8px rgba(30,79,194,.15);
}

.staff-name {
    color: #1e4fc2;
    font-weight: 600;
    font-size: .9rem;
}

/* ── Dark mode: undo profile overrides ──────────────────────── */
body.dark-mode .element-body { background-color: #222; }
body.dark-mode .element-body h2 { color: #7ca4e8; border-bottom-color: #333; }

body.dark-mode #profileSecondaryTabs { border-bottom-color: #444; }
body.dark-mode #profileSecondaryTabs .nav-link { color: #888; }
body.dark-mode #profileSecondaryTabs .nav-link:hover { color: #ccc; border-bottom-color: #666; }
body.dark-mode #profileSecondaryTabs .nav-link.active { color: #7ca4e8; border-bottom-color: #7ca4e8; }
body.dark-mode #profileSecondaryTabs .nav-link .badge { background-color: #2957ba; }

body.dark-mode .element-body .card { background-color: transparent; border-top-color: #444; box-shadow: none; }
body.dark-mode .element-body .card-header { background-color: #1f1f1f; color: #ccc; border-bottom-color: #333; }
body.dark-mode .element-body .card-header h5,
body.dark-mode .element-body .card-header .mb-0 { color: #ccc; }

body.dark-mode .element-body .card.border-danger .card-header { background-color: #dc3545; color: #fff; }
body.dark-mode .element-body .card.border-danger .card-header h5 { color: #fff; }

body.dark-mode .element-body .list-chapters .chapter-item:hover { background-color: #333; border-left-color: #7ca4e8; }
body.dark-mode .element-body .list-chapters .chapter-number { color: #7ca4e8; }

body.dark-mode .element-body .badge-secondary { background-color: #2957ba; }

body.dark-mode .staff-card { background: #2a2a2a; border-color: #444; }
body.dark-mode .staff-card:hover { border-color: #7ca4e8; }
body.dark-mode .staff-name { color: #7ca4e8; }