/* app.css */

.row {
    justify-content: center;
}

.main-content {
    padding: 20px;
    transition: margin 0.3s;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.app-brand-centered {
    display: inline-block;
    text-align: center;
    width: auto; 
}

header .container-fluid {
    gap: 0.5rem;
    position: relative;
}


header .btn {
    z-index: 2000;
}

/* Layout: mobile first */
@media (max-width: 767.98px) {
    .main-content { padding: 12px; }
    .app-brand-centered { font-size: 1rem; position: static; transform: none; display: inline-block; width: auto; }
}

/* Desktop */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .main-content { padding: 16px; }
    .app-brand-centered { font-size: 1.25rem; position: absolute; left: 50%; transform: translateX(-50%); }
}


.app-brand-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    pointer-events: none; 
}


.main-content > .container, .main-content > .container-fluid {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
}


.main-inner {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
}


.center-wrapper {
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    padding: 12px 0;
}

.center-wrapper .row {
    width: 100%;
    max-width: 1240px; 
    margin: 0; 
}

.center-wrapper .col-12 { display: block; }


.sidebar-nav .nav-link i { width: 1.2rem; text-align: center; }