/* ==========================================================
   MAMA TERESA SCHOOLS ERP
   Layout Styles
========================================================== */

/* ==========================================================
   Base Layout
========================================================== */

html,
body{
    font-family:'Montserrat',sans-serif;
    font-weight:500;
}

body{

    background:
        linear-gradient(
            180deg,
            rgba(26,36,86,.08),
            rgba(244,247,251,0) 280px
        ),

        var(--smis-bg);

    color:var(--smis-text);

    font-size:.95rem;

}

/* ==========================================================
   Navbar
========================================================== */

.navbar-smis{

    background-color:var(--color-primary);

    border-bottom:3px solid var(--color-secondary);

    box-shadow:0 10px 30px rgba(15,23,42,.18);

}

.navbar-smis .navbar-brand,
.navbar-smis .nav-link{

    color:var(--color-navbar-text)!important;

}

.navbar-smis .nav-link:hover{

    color:var(--color-navbar-hover-text)!important;

}

.navbar-smis .navbar-control{color:var(--color-navbar-text);border-color:color-mix(in srgb,var(--color-navbar-text) 55%,transparent);background:transparent}
.navbar-smis .navbar-control:hover,.navbar-smis .navbar-control:focus-visible,.navbar-smis .navbar-control.show{color:var(--color-navbar-hover-text);border-color:var(--color-navbar-hover);background:var(--color-navbar-hover)}
.navbar-smis .text-white-50{color:color-mix(in srgb,var(--color-navbar-text) 68%,transparent)!important}
.navbar-brand-copy{min-width:0;max-width:min(30vw,270px);line-height:1.15}.navbar-brand-copy span,.navbar-brand-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navbar-smis .dropdown-item.active,.navbar-smis .dropdown-item:active{color:var(--color-primary-text);background:var(--color-primary)}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

    background:

        linear-gradient(
            180deg,
            color-mix(in srgb,var(--color-sidebar-text) 8%,transparent),
            transparent
        ),

        var(--color-primary);

    min-height:calc(100vh - 56px);

    box-shadow:14px 0 34px rgba(15,23,42,.12);

}

.sidebar .nav-link{

    color:var(--color-sidebar-text);

    padding:.62rem .85rem;

    margin-bottom:.1rem;

    border-radius:var(--smis-radius);

    display:flex;

    align-items:center;

    gap:.55rem;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;

    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;

}

.sidebar .nav-link:hover,
.sidebar .nav-link.active{

    background:var(--color-sidebar-hover);

    color:var(--color-sidebar-hover-text);

    transform:translateX(2px);

}

.sidebar hr{

    opacity:.18;

}

/* ==========================================================
   Main Layout
========================================================== */

main{

    min-width:0;

}

.page-shell{

    max-width:1440px;

}

/* ==========================================================
   Brand Mark
========================================================== */

.brand-mark{

    width:34px;

    height:34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-secondary);

    color:var(--color-primary);

    font-weight:800;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:991.98px){

    .app-frame{

        flex-direction:column;

    }

    .sidebar{

        width:100%!important;

        min-height:auto;

    }

}

.sidebar .text-white-50{color:color-mix(in srgb,var(--color-sidebar-text) 68%,transparent)!important}
.sidebar .sidebar-close{color:var(--color-sidebar-text);border-color:color-mix(in srgb,var(--color-sidebar-text) 45%,transparent)}
.sidebar .sidebar-close:hover,.sidebar .sidebar-close:focus-visible{color:var(--color-sidebar-hover-text);background:var(--color-sidebar-hover)}

.sidebar .nav-link i{flex:0 0 auto}.sidebar .nav-link span,.sidebar .nav-group-toggle>span{min-width:0;overflow-wrap:anywhere}.sidebar .nav-chevron{margin-left:auto;flex:0 0 auto}
html,body{max-width:100%;overflow-x:hidden}main,.page-shell,.container,.container-fluid,.row>*{min-width:0}
.page-header h1,.welcome-banner h1{font-size:var(--tems-page-title)!important}.card-header h2,.section-title{font-size:var(--tems-section-title)!important}.card-title,.card-header{font-size:var(--tems-card-title)}.form-text,.helper-text,small{font-size:var(--tems-helper)}

.skip-link{position:fixed;top:-100px;left:1rem;z-index:1100;background:#fff;color:#111;padding:.75rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}.app-frame{min-height:calc(100vh - 60px)}.sidebar{width:280px;flex:0 0 280px}.sidebar .offcanvas-body{height:calc(100vh - 60px);overflow-y:auto;position:sticky;top:60px}.sidebar .nav-group-toggle{border:0;background:transparent;text-align:left}.sidebar .nav-child{padding-left:2.35rem;font-size:.9rem}.sidebar .nav-chevron{font-size:.75rem;transition:transform .2s}.sidebar .nav-group-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}.global-search{width:min(44vw,560px)}#searchResults{display:none;z-index:1080;max-height:70vh;border:0}#searchResults.show{display:block}.search-group-title{padding:.55rem .9rem;background:var(--smis-surface-soft);font-size:.72rem;font-weight:800;text-transform:uppercase;color:var(--smis-muted)}.search-result{display:flex;gap:.75rem;align-items:center;padding:.7rem .9rem;color:inherit;text-decoration:none;border-bottom:1px solid var(--smis-border)}.search-result:hover,.search-result:focus{background:var(--smis-surface-soft)}.search-result small{display:block;color:var(--smis-muted)}.search-state{padding:1.25rem;text-align:center;display:grid;gap:.35rem;place-items:center}.search-shortcut{font-size:.7rem;color:var(--smis-muted)}.mobile-search-panel{background:var(--color-navbar);position:sticky;top:59px;z-index:1025}.page-shell{width:100%}
@media(max-width:991.98px){.sidebar{width:280px!important}.sidebar .offcanvas-body{height:100%;position:static}.app-frame{flex-direction:row}main{width:100%}}
@media(max-width:575.98px){main{padding:.85rem!important}.navbar-brand img{width:30px;height:30px}.page-actions{width:100%}.page-actions>.btn{flex:1}.table-responsive{font-size:.85rem}}