/* ==================== TOPBAR ==================== */
.topbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 60px;
    background: #222;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    gap: 1vh 2vw;
    box-sizing: border-box;
}

.logo-box {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-shrink: 0;
}

.logo-box .logo {
    height: 40px;
    width: auto;
}

.logo-box .brand-name {
    font-weight: bold;
    font-size: 18px;
    color: #f4f4f3;
}

/* Optional center text */
.topbar-center {
    flex:1;
    text-align:center;
    font-weight:bold;
    font-size:1.2rem;
    color:#f2f2f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==================== ACTION BUTTONS ==================== */
.actions {
    display:flex;
    align-items:center;
    gap:1vw;
}

.actions button {
    padding:.5em 1em;
    font-size:.95rem;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:.2s;
    border:none;
}

/* Button variants */
.btn-dashboard { background:#10b981; color:#111; }
.btn-dashboard:hover { background:#059669; color:#fff; }

.btn-logout { background:#ef4444; color:#fff; }
.btn-logout:hover { background:#b91c1c; color:#fff; }

.btn-account, .btn-notes, .btn-register, .btn-home {
    background:#3b82f6; color:#fff;
}
.btn-account:hover, .btn-notes:hover, .btn-register:hover, .btn-home:hover {
    background:#2563eb; color:#fff;
}

.btn-login {
    background:#22c55e; color:#fff;
}
.btn-login:hover { background:#16a34a; }

/* ==================== LIGHT MODE ==================== */
body.lightmode { background-color:#f3f4f6; color:#111; }
body.lightmode .page-wrapper,
body.lightmode .card,
body.lightmode table,
body.lightmode .modal-box,
body.lightmode input,
body.lightmode textarea,
body.lightmode select {
    background-color:#fff; color:#111; border:1px solid #d1d5db;
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem 0;
        padding: 10px 15px;
        height: auto;
    }
    .actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px;
    }
    .topbar-center {
        text-align: left;
        width: 100%;
        font-size: 1rem;
        margin: 5px 0;
    }
}