/* ATT-Clouds Hotspot Portal | Copyright (c) 2026 ATT-Clouds. All rights reserved. */
/*
|--------------------------------------------------------------------------
| ATT-Clouds responsive density foundation
|--------------------------------------------------------------------------
| Keeps the portal comfortable at browser 100% zoom across common desktop,
| laptop, tablet and phone widths. Visual button and brand styling can evolve
| independently without changing these layout guarantees.
*/

:root{
    --sidebar-width:248px;
    --topbar-height:70px;
    --footer-height:56px;
}

body{
    font-size:14px;
}

.page-content{
    width:100%;
    max-width:1920px;
    margin-inline:auto;
    padding:clamp(16px,1.45vw,24px);
}

.topbar{
    padding-inline:clamp(16px,1.6vw,24px);
}

.page-title{
    font-size:clamp(20px,1.45vw,24px);
}

.page-subtitle{
    font-size:12px;
}

.sidebar-header{
    padding:20px 18px;
}

.sidebar-body{
    padding:18px 12px;
}

.sidebar-section{
    margin-bottom:24px;
}

.sidebar-item{
    min-height:44px;
    padding:10px 12px;
}

.sidebar-footer{
    padding:16px;
}

.sidebar-avatar{
    width:44px;
    height:44px;
    font-size:17px;
}

.sidebar-profile{
    margin-bottom:14px;
}

.card,
.dashboard-card{
    border-radius:16px;
}

.card-header{
    padding:15px 18px;
    border-radius:16px 16px 0 0!important;
}

.card-body{
    padding:18px;
}

.dashboard-card{
    padding:18px;
}

.dashboard-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;
    border-radius:15px;
    font-size:23px;
}

.dashboard-value{
    font-size:clamp(26px,2vw,32px);
}

.form-control,
.form-select{
    min-height:43px;
    padding:9px 13px;
}

.btn{
    min-height:40px;
    padding:8px 14px;
    font-size:.86rem;
}

.btn-sm{
    min-height:34px;
    padding:6px 11px;
    font-size:.78rem;
}

.btn-lg{
    min-height:48px;
    padding:10px 18px;
    font-size:.96rem;
}

.table thead th,
.table tbody td{
    padding:12px 13px;
}

h2{
    font-size:clamp(1.35rem,1.8vw,1.7rem);
}

h3{
    font-size:clamp(1.2rem,1.5vw,1.5rem);
}

.container,
.container-fluid{
    max-width:100%;
}

@media(max-width:1399.98px) and (min-width:1200px){
    :root{
        --sidebar-width:232px;
    }

    .page-content{
        padding:18px;
    }
}

@media(min-width:1200px){
    .sidebar{
        transition:width .28s ease,transform .28s ease;
    }

    .sidebar.collapsed{
        width:82px;
    }

    body.sidebar-collapsed .app-wrapper{
        margin-left:82px;
    }

    body.sidebar-collapsed .topbar,
    body.sidebar-collapsed .footer{
        left:82px;
    }

    html[dir="rtl"] body.sidebar-collapsed .app-wrapper{
        margin-right:82px;
        margin-left:0;
    }

    html[dir="rtl"] body.sidebar-collapsed .topbar,
    html[dir="rtl"] body.sidebar-collapsed .footer{
        right:82px;
        left:0;
    }

    .sidebar.collapsed .sidebar-header{
        padding:17px 13px;
    }

    .sidebar.collapsed .sidebar-brand{
        justify-content:center;
    }

    .sidebar.collapsed .sidebar-brand-text,
    .sidebar.collapsed .sidebar-title,
    .sidebar.collapsed .sidebar-item span,
    .sidebar.collapsed .sidebar-user-info{
        display:none;
    }

    .sidebar.collapsed .sidebar-body{
        padding:18px 10px;
    }

    .sidebar.collapsed .sidebar-item{
        justify-content:center;
        padding-inline:10px;
    }

    .sidebar.collapsed .sidebar-item i{
        width:auto;
        margin:0;
        font-size:19px;
    }

    .sidebar.collapsed .sidebar-footer{
        padding:14px;
    }

    .sidebar.collapsed .sidebar-profile{
        justify-content:center;
    }

    .sidebar.collapsed .sidebar-footer .btn{
        width:52px!important;
        min-width:52px;
        padding-inline:0;
        margin-inline:auto;
        font-size:0;
    }

    .sidebar.collapsed .sidebar-footer .btn i{
        margin:0!important;
        font-size:16px;
    }
}

@media(max-width:1199.98px){
    .sidebar{
        transform:translateX(-100%);
        transition:transform .28s ease;
    }

    .sidebar.show{
        transform:translateX(0);
    }

    html[dir="rtl"] .sidebar{
        transform:translateX(100%);
    }

    html[dir="rtl"] .sidebar.show{
        transform:translateX(0);
    }

    .app-wrapper{
        margin-inline-start:0;
    }

    .topbar,
    .footer{
        inset-inline-start:0;
    }

    .page-content{
        padding:18px;
    }
}

@media(max-width:767.98px){
    :root{
        --topbar-height:62px;
        --footer-height:54px;
    }

    .topbar{
        height:var(--topbar-height);
        padding-inline:12px;
    }

    .app-wrapper{
        padding-top:var(--topbar-height);
    }

    .topbar-heading,
    .topbar-profile,
    .topbar-action{
        display:none;
    }

    .topbar-start,
    .topbar-end{
        gap:8px;
    }

    .sidebar-toggle,
    .language-switcher{
        width:40px;
        height:40px;
        min-height:40px;
        border-radius:12px;
    }

    .page-content{
        padding:12px;
    }

    .card-body{
        padding:15px;
    }

    .card-header{
        padding:13px 15px;
    }

    .display-1,
    .display-2,
    .display-3{
        font-size:2.5rem;
    }

    .page-content .d-flex.justify-content-between.align-items-center,
    .page-content .d-flex.justify-content-between:not(.voucher-resource-heading):not(.voucher-resource-values){
        align-items:flex-start!important;
        flex-wrap:wrap;
        gap:12px;
    }

    .page-content .d-flex.justify-content-between > .btn,
    .page-content .d-flex.justify-content-between > a.btn{
        flex:0 0 auto;
    }

    .table-responsive{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table-responsive > .table{
        min-width:760px;
    }

    .btn{
        width:auto;
        max-width:100%;
    }

    .footer{
        position:static;
        min-height:var(--footer-height);
    }

    .app-wrapper{
        padding-bottom:0;
    }
}

@media(max-width:479.98px){
    .page-content{
        padding:10px;
    }

    .card,
    .dashboard-card{
        border-radius:14px;
    }

    .card-body{
        padding:13px;
    }

    .row{
        --bs-gutter-x:14px;
    }
}

@media(min-width:1921px){
    .page-content{
        max-width:2100px;
    }
}