/* ===== topbar.css ===== */
.topbar{
    position:sticky;
    top:0;
    z-index: 9999;
    min-height:var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:14px;
    margin:-22px -22px 18px;
    padding:8px 22px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.10);
    border-radius:0;
    background:
        linear-gradient(180deg, rgba(7,9,14,.82), rgba(10,14,21,.90) 60%, rgba(7,9,14,.96)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    backdrop-filter:blur(16px);
    transition:background var(--transition), border-color var(--transition);
}

.topbar.is-scrolled{
    background:rgba(7,9,14,.94);
    border-bottom-color:rgba(255,255,255,.12);
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.topbar-left{ flex:1 1 auto; overflow:hidden; }
.page-heading{ min-width:0; overflow:hidden; }

.page-heading h1{
    margin:0 0 4px;
    font-size:clamp(20px, 2vw, 28px);
    line-height:1.08;
    letter-spacing:-.02em;
}

.page-heading p{
    margin:0;
    color:var(--text-soft);
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.icon-btn{
    position:relative;
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.05);
    color:var(--text);
    transition:background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
}

.icon-btn:hover{
    background:rgba(255,255,255,.10);
    border-color:var(--stroke-strong);
    transform:translateY(-1px);
}

.icon-btn svg{ width:20px; height:20px; }
.mobile-menu-btn,
.mobile-close{ display:none; }

.search-box{
    position:relative;
    width:min(420px, 34vw);
    min-width:200px;
}

.search-box input{
    min-height:48px;
    padding:0 16px 0 44px;
    border-radius:16px;
}

.search-box svg{
    position:absolute;
    top:50%;
    left:14px;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    color:var(--text-muted);
    pointer-events:none;
}

.notify-dot{
    position:absolute;
    top:10px;
    right:11px;
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--brand-pink);
    box-shadow:0 0 0 4px rgba(13,30,48,.18);
}


.topbar-church-name{
    min-width:0;
    max-width:clamp(120px, 24vw, 340px);
    display:inline-block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-soft);
    font-size:13px;
    font-weight:800;
    line-height:1;
}

.theme-switch{ display:inline-flex; align-items:center; cursor:pointer; flex:0 0 auto; }
.theme-switch input{ position:absolute; opacity:0; pointer-events:none; }
.theme-switch-ui{
    position:relative;
    width:48px;
    height:28px;
    display:inline-flex;
    align-items:center;
    padding:3px;
    border-radius:999px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:background var(--transition), border-color var(--transition);
}
.theme-switch-ball{
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--soft-pink), var(--soft-blue));
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transform:translateX(0);
    transition:transform var(--transition);
}
.theme-switch input:checked + .theme-switch-ui .theme-switch-ball{ transform:translateX(20px); }

.profile-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:50px;
    padding:4px 8px 4px 4px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
    transition:background var(--transition), border-color var(--transition);
    cursor:pointer;
}
.profile-btn:hover{ background:rgba(255,255,255,.09); border-color:var(--stroke-strong); }
.profile-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:16px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
}
.profile-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.profile-copy strong,
.profile-copy span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.profile-copy strong{ font-size:14px; line-height:1.1; }
.profile-copy span{ font-size:12px; color:var(--text-muted); }

.logout-btn{
    flex:0 0 auto;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:8px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.05);
    color:var(--text);
    transition:all var(--transition);
}

.logout-btn:hover{
    background:rgba(255,255,255,.10);
    border-color:var(--stroke-strong);
    transform:translateY(-1px);
}

.logout-btn svg{
    width:16px;
    height:16px;
}
/* =========================
   MODULE TOPBAR NAV
========================= */
.topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:0 1 auto;
}


.topbar > .module-top-nav{
    order:3;
    flex:0 0 100%;
    width:100%;
    margin-top:4px;
}

.module-top-nav{
    display:flex;
    gap:10px;
    padding:9px;
    margin-bottom:0;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
}

.module-top-nav-item{
    appearance:none;
    border:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    line-height:1;
    color:var(--text-soft);
    text-decoration:none;
    background:transparent;
    transition:background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.module-top-nav-item:hover{
    background:rgba(255,255,255,.08);
    color:var(--text);
    transform:translateY(-1px);
}

.module-top-nav-item.is-active,
.module-top-nav-item.active{
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.24);
}

.module-top-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    flex:0 0 8px;
}
.module-top-dot.success{ background:#00d084; }
.module-top-dot.warning{ background:#ffb020; }
.module-top-dot.danger{ background:#ff4d4f; }
.module-top-dot.neutral{ background:#7b8794; }
.module-top-dot.pending{ background:#3b82f6; }
.module-top-dot.review{ background:#8b5cf6; }
.module-top-dot.pink{ background:rgba(226,28,142,.9); }
.module-top-nav-item.is-active .module-top-dot,
.module-top-nav-item.active .module-top-dot{ background:#fff; }

body.light .module-top-nav{
    border-color:rgba(20,30,60,.08);
    background:rgba(20,30,60,.03);
}
body.light .module-top-nav-item:hover{
    background:rgba(20,30,60,.06);
}

@media(max-width:768px){
    .module-top-nav{ flex-wrap:wrap; }
}

/* UI global: logout y switch de tema */
.logout-btn{
    border-color:rgba(248,113,113,.28);
    background:rgba(239,68,68,.10);
    color:#fecaca;
}
.logout-btn:hover{
    background:rgba(239,68,68,.18);
    border-color:rgba(248,113,113,.46);
    color:#fff;
    box-shadow:0 10px 20px rgba(127,29,29,.20);
}
.topbar{margin-bottom:0;}
.icon-btn .theme-ico,
.logout-btn .theme-ico{font-size:20px;}

@media(max-width:768px){
    .topbar{
        gap:8px;
        padding:8px 12px;
        margin-left:-12px;
        margin-right:-12px;
    }
    .topbar-left{ gap:8px; }
    .page-heading h1{ font-size:18px; }
    .topbar-church-name{ max-width:22vw; font-size:12px; }
    .theme-switch-ui{ width:44px; height:26px; }
    .theme-switch-ball{ width:18px; height:18px; }
    .theme-switch input:checked + .theme-switch-ui .theme-switch-ball{ transform:translateX(18px); }
}
@media(max-width:480px){
    .topbar-church-name{ max-width:18vw; }
    .logout-btn{ width:28px; height:28px; }
}