/* =========================================================
   HOSTVISION APP LAYOUT
   app-clean.css
   CLEAN STRUCTURE VERSION
========================================================= */



/* =========================================================
   APP WRAPPER
========================================================= */

.hv-app{

    display:flex;

    min-height:100vh;

    background:#f5f7fb;

}

.hv-main{

    flex:1;

    min-width:0;

    margin-left:270px;

}

.hv-content{

    padding:42px 46px 70px;

}



/* =========================================================
   SIDEBAR
========================================================= */

.hv-sidebar{

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    width:270px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #5a26c9 0%,
        #4c1fb0 100%
    );

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

    z-index:9999;

}

.hv-sidebar::before{

    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.12),
        transparent 70%
    );

}

.hv-logo{

    position:relative;

    z-index:2;

    padding:28px 24px 38px;

}

.hv-logo img{

    max-width:170px;

}

.hv-nav{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:0 18px;

}

.hv-nav-label{

    padding:0 14px;

    margin:20px 0 10px;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:rgba(255,255,255,.45);

}

.hv-nav-item{

    display:flex;

    align-items:center;

    gap:14px;

    height:50px;

    padding:0 16px;

    border-radius:14px;

    color:rgba(255,255,255,.82);

    font-size:14px;

    font-weight:500;

}

.hv-nav-item:hover{

    background:rgba(255,255,255,.10);

    color:#fff;

    transform:translateX(2px);

}

.hv-nav-item.active{

    background:rgba(255,255,255,.16);

    color:#fff;

    box-shadow:
    0 10px 25px rgba(255,255,255,.08);

}



/* =========================================================
   TOPBAR
========================================================= */

.hv-topbar{

    position:sticky;

    top:0;

    z-index:500;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 46px;

    background:
    rgba(255,255,255,.58);

    backdrop-filter:blur(14px);

    border-bottom:
    1px solid rgba(15,23,42,.05);

}

.hv-topbar-title h1{

    font-size:28px;

    font-weight:800;

    letter-spacing:-1px;

}

.hv-topbar-right{

    display:flex;

    align-items:center;

    gap:16px;

}



/* =========================================================
   USER MENU
========================================================= */

.hv-user{

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 12px;

    border-radius:18px;

}

.hv-user:hover{

    background:
    rgba(255,255,255,.65);

}

.hv-user-avatar{

    width:40px;
    height:40px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-size:13px;

    font-weight:700;

}

.hv-user-dropdown{

    position:absolute;

    top:65px;
    right:0;

    width:220px;

    padding:10px;

    border-radius:22px;

    background:#fff;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

}

.hv-user-dropdown.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.hv-user-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:14px;

    color:#0f172a;

}

.hv-user-dropdown a:hover{

    background:#f8fafc;

}



/* =========================================================
   HERO
========================================================= */

.hv-hero-v2{

    position:relative;

    overflow:hidden;

    padding:40px;

    margin-bottom:40px;

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.82),
        rgba(255,255,255,.58)
    );

    border:
    1px solid rgba(15,23,42,.05);

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

}

.hv-hero-v2::before{

    content:'';

    position:absolute;

    right:-120px;
    top:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(37,99,235,.14),
        transparent 70%
    );

}

.hv-hero-v2 h1{

    font-size:42px;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:18px;

}

.hv-hero-v2 p{

    max-width:620px;

}

.hv-hero-v2-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

}



/* =========================================================
   PAGE SECTIONS
========================================================= */

.hv-section{

    margin-bottom:42px;

}

.hv-section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    margin-bottom:24px;

}

.hv-section-title{

    font-size:28px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1px;

}

.hv-section-description{

    margin-top:10px;

}



/* =========================================================
   DASHBOARD GRIDS
========================================================= */

.hv-stats-layout,
.hv-analytics-grid,
.hv-actions-grid,
.hv-services-grid,
.hv-invoices-grid,
.hv-insights-grid,
.hv-infra-grid{

    display:grid;

    gap:24px;

    margin-bottom:42px;

}

.hv-stats-layout{

    grid-template-columns:
    repeat(3,1fr);

}

.hv-analytics-grid{

    grid-template-columns:
    1fr 1fr;

}

.hv-actions-grid{

    grid-template-columns:
    repeat(4,1fr);

}

.hv-services-grid,
.hv-invoices-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

}

.hv-insights-grid{

    grid-template-columns:
    1.2fr .9fr .9fr;

}

.hv-infra-grid{

    grid-template-columns:
    repeat(4,1fr);

}



/* =========================================================
   PAGE LAYOUT HELPERS
========================================================= */

.hv-page-grid{

    display:grid;

    grid-template-columns:
    1fr 380px;

    gap:30px;

    align-items:start;

}

.hv-page-main{

    min-width:0;

}

.hv-page-sidebar{

    position:sticky;

    top:110px;

}



/* =========================================================
   QUICK ACTIONS
========================================================= */

.hv-quick-actions{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.hv-quick-action{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:54px;

    padding:0 20px;

    border-radius:18px;

    background:
    rgba(255,255,255,.72);

    border:
    1px solid rgba(15,23,42,.05);

    font-size:14px;

    font-weight:600;

}

.hv-quick-action:hover{

    transform:translateY(-2px);

}



/* =========================================================
   COMMAND PALETTE
========================================================= */

.hv-command-trigger{

    display:flex;

    align-items:center;

    gap:12px;

    height:44px;

    padding:0 16px;

    border-radius:14px;

    background:
    rgba(255,255,255,.72);

    border:
    1px solid rgba(15,23,42,.05);

    color:#64748b;

    cursor:pointer;

}

.hv-command-palette{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding-top:120px;

    background:
    rgba(15,23,42,.28);

    backdrop-filter:blur(12px);

    z-index:999999;

    opacity:0;

    visibility:hidden;

}

.hv-command-palette.active{

    opacity:1;

    visibility:visible;

}

.hv-command-box{

    width:100%;

    max-width:680px;

    overflow:hidden;

    border-radius:28px;

    background:
    rgba(255,255,255,.92);

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

}



/* =========================================================
   PAGE STATES
========================================================= */

.hv-empty-page{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:420px;

}



/* =========================================================
   ANIMATIONS
========================================================= */

.hv-fade-in{

    animation:hvFade .35s ease;

}

@keyframes hvFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* =========================================================
   RESPONSIVE HELPERS
========================================================= */

.hv-mobile-toggle{

    display:none;

}