/* =====================================================
                 ONEBUY DASHBOARD
===================================================== */
.onebuy-dashboard{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-color:#8D0B11;
    background-image:url("../images/1B1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:33% center;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#fff;
}
/* ================= HEADER ================= */
.dashboard-header{
    flex:none;
    padding:
        max(15px, env(safe-area-inset-top))
        26px
        8px;
}
.dashboard-profile{
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
    border:none;
    background:transparent;
    color:#fff;
    text-align:left;
}
.dashboard-profile:active{
    transform:none;
}
.dashboard-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;
    background:rgba(141,11,17,.82);
    box-shadow:
        0 0 8px rgba(255,255,255,.28),
        0 3px 10px rgba(0,0,0,.24);
    color:#fff;
    font-size:15px;
    font-weight:500;
}
.dashboard-user-info{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.dashboard-user-info strong{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    text-transform:uppercase;
}
.dashboard-user-info span{
    margin-top:1px;
    color:#fff;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
}
/* ================= SEARCH ================= */
.dashboard-search-row{
    flex:none;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 26px 11px;
}
.dashboard-search-box{
    flex:1;
    min-width:0;
    height:43px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.18);
    border-radius:11px;
    background:#fff;
    box-shadow:none;
}
.dashboard-search-icon{
    flex:none;
    margin-left:10px;
    color:#555;
    font-size:20px;
    line-height:1;
}
.dashboard-search-box #searchBilling{
    width:100%;
    height:100%;
    min-width:0;
    margin:0;
    padding:0 12px 0 8px;
    border:none !important;
    border-radius:0 !important;
    outline:none;
    background:transparent;
    box-shadow:none !important;
    color:#222;
    font-size:16px;
    font-weight:400;
}
.dashboard-search-box #searchBilling:focus{
    border:none !important;
    outline:none;
    box-shadow:none !important;
}
.dashboard-qr-btn{
    width:48px;
    height:43px;
    flex:0 0 48px;
    margin:0;
    padding:8px;
    border:none;
    border-radius:10px;
    background:#fff;
}
.dashboard-qr-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* ================= CONTENT ================= */
.dashboard-content{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:
        0
        26px
        calc(86px + env(safe-area-inset-bottom));
}
.dashboard-home-card{
    width:100%;
    min-height:125px;
    margin:10px auto 0;
    padding:10px;
    border:1px solid #8D0B11;
    border-radius:11px;
    background:#303030;
    overflow:hidden;
}
.dashboard-home-card:first-child{
    margin-top:0;
}
.dashboard-home-card h2{
    margin:0;
    color:#fff;
    font-size:16px;
    font-weight:500;
    line-height:1.3;
}
.dashboard-card-content{
    min-height:85px;
    margin-top:7px;
}
.dashboard-placeholder{
    display:flex;
    width:100%;
    min-height:75px;
    align-items:center;
    justify-content:center;
    color:#999;
    font-size:13px;
    text-align:center;
}
/* ================= CATEGORIES ================= */
.dashboard-category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    align-items:start;
}
.dashboard-category-item{
    width:100%;
    height:auto;
    min-width:0;
    margin:0;
    padding:5px 2px;
    border:none;
    background:transparent;
    color:#fff;
}
.dashboard-category-item img{
    display:block;
    width:62px;
    height:62px;
    margin:0 auto 7px;
    padding:8px;
    object-fit:contain;
    background:#fff;
    border-radius:12px;
    box-shadow:
        0 5px 12px rgba(0,0,0,.28),
        0 1px 3px rgba(0,0,0,.16);
}
.dashboard-category-item span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#fff;
    font-size:10px;
    font-weight:500;
    white-space:nowrap;
}
/* ================= BOTTOM NAV ================= */
.dashboard-bottom-nav{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    height:70px;
    padding:
        7px
        25px
        max(7px, env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    background:rgba(141,11,17,.94);
    border-top:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.dashboard-nav-item{
    width:100%;
    height:56px;
    margin:0;
    padding:6px 3px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:12px;
    background:rgba(174,30,34,.78);
    color:#fff;
    box-shadow:0 3px 9px rgba(0,0,0,.2);
}
.dashboard-nav-item img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:
        brightness(0)
        invert(1);
    opacity:.82;
}
.dashboard-nav-item.active img{
    opacity:1;
}
.dashboard-nav-item span{
    margin-top:5px;
    color:#fff;
    font-size:9px;
    font-weight:700;
}
.dashboard-nav-item.active{
    background:#B32024;
}

/* ================= MOBILE ================= */
@media(max-width:575px){
    .dashboard-header{
        padding-left:26px;
        padding-right:26px;
    }
    .dashboard-search-row{
        padding-left:26px;
        padding-right:26px;
    }
    .dashboard-content{
        padding-left:26px;
        padding-right:26px;
    }
}
@media(max-width:370px){
    .dashboard-header{
        padding-left:18px;
        padding-right:18px;
    }
    .dashboard-search-row{
        padding-left:18px;
        padding-right:18px;
    }
    .dashboard-content{
        padding-left:18px;
        padding-right:18px;
    }
    .dashboard-bottom-nav{
        padding-left:16px;
        padding-right:16px;
        gap:5px;
    }
    .dashboard-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:370px){
    .dashboard-category-item img{
        width:56px;
        height:56px;
        padding:7px;
    }
}
/* ================= DASHBOARD BACKGROUND FIX ================= */
#dashboard{
    background-color:#8D0B11;
    background-image:url("../images/1B1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:33% center;
}