/* ISP360_COMMERCIAL_MAIN_UI_UNIFY_V1 */

/*
 * Commercial accounts use the exact same application shell
 * as the MAIN ISP360 panel.
 *
 * This file only normalizes the legacy Portal / Hierarchy
 * content area. Sidebar, branding, RBAC and Login-As come
 * from the shared MAIN files.
 */


/* =========================================================
   APP SHELL
   ========================================================= */

body.isp360-commercial-unified{
    margin:0;
    background:#f3f6fa;
    color:#14263a;
}

body.isp360-commercial-unified .cp-shell,
body.isp360-commercial-unified .layout{
    display:block !important;
    min-height:100vh !important;
}

body.isp360-commercial-unified .main{
    min-height:100vh;
}

body.isp360-commercial-unified .cp-main{
    flex:none !important;
    width:auto !important;
}


/* Hide all old commercial header/navigation systems.
   Shared MAIN sidebar is authoritative. */

body.isp360-commercial-unified .cp-topbar,
body.isp360-commercial-unified .topbar{
    display:none !important;
}


/* =========================================================
   PORTAL
   ========================================================= */

body.isp360-commercial-unified .cp-main{
    padding:28px !important;
}

body.isp360-commercial-unified .cp-hero{
    margin-top:0;
}


/* =========================================================
   HIERARCHY - MAIN ISP360 LOOK
   ========================================================= */

body.isp360-commercial-unified .main > .title-row{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin:0 0 20px;
    padding:30px 34px;

    border-radius:20px;

    background:
        linear-gradient(
            125deg,
            #10263b 0%,
            #12344b 70%,
            #123e55 100%
        );

    color:#fff;

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

body.isp360-commercial-unified
.main > .title-row::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-80px;
    top:-160px;
    border-radius:50%;
    border:1px solid rgba(45,212,191,.22);
}

body.isp360-commercial-unified
.main > .title-row h1{
    position:relative;
    z-index:1;
    margin:0;
    color:#fff !important;
    font-size:32px;
    line-height:1.1;
    letter-spacing:-.035em;
}

body.isp360-commercial-unified
.main > .title-row .subtitle{
    position:relative;
    z-index:1;
    margin-top:9px;
    color:#c6d8e7 !important;
    font-size:14px;
}

body.isp360-commercial-unified
.main > .title-row .refresh{
    position:relative;
    z-index:1;

    min-height:46px;

    border:0 !important;
    border-radius:11px !important;

    padding:10px 18px !important;

    background:#fff !important;
    color:#12344b !important;

    font-weight:800 !important;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.12);
}


/* =========================================================
   HIERARCHY ACTION BUTTONS
   ========================================================= */

body.isp360-commercial-unified
.main #addDealerBtn,

body.isp360-commercial-unified
.main #addSubDealerBtn,

body.isp360-commercial-unified
.main #addFranchiseBtn,

body.isp360-commercial-unified
.main button.btn,

body.isp360-commercial-unified
.main .primary-btn{
    border:0 !important;
    border-radius:10px !important;
    min-height:42px;
    padding:10px 15px !important;
    font-weight:800 !important;
}


/* =========================================================
   KPI CARDS - SAME VISUAL LANGUAGE AS MAIN
   ========================================================= */

body.isp360-commercial-unified
.main > .cards{
    display:grid !important;
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;
    margin:0 0 20px !important;
}

body.isp360-commercial-unified
.main > .cards > .card{
    position:relative;
    overflow:hidden;

    min-height:145px;

    padding:24px !important;

    border:0 !important;
    border-radius:17px !important;

    color:#fff !important;

    box-shadow:
        0 12px 28px
        rgba(15,23,42,.09);
}

body.isp360-commercial-unified
.main > .cards > .card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-55px;
    bottom:-85px;
    border-radius:50%;
    border:22px solid rgba(255,255,255,.07);
}

body.isp360-commercial-unified
.main > .cards > .card:nth-child(1){
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        ) !important;
}

body.isp360-commercial-unified
.main > .cards > .card:nth-child(2){
    background:
        linear-gradient(
            135deg,
            #0f766e,
            #14b8a6
        ) !important;
}

body.isp360-commercial-unified
.main > .cards > .card:nth-child(3){
    background:
        linear-gradient(
            135deg,
            #6d4fc2,
            #8b6bd1
        ) !important;
}

body.isp360-commercial-unified
.main > .cards > .card:nth-child(4){
    background:
        linear-gradient(
            135deg,
            #172554,
            #2563eb
        ) !important;
}

body.isp360-commercial-unified
.main > .cards .card-label{
    position:relative;
    z-index:1;
    color:#fff !important;
    opacity:.88;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.12em;
    text-transform:uppercase;
}

body.isp360-commercial-unified
.main > .cards .card-value{
    position:relative;
    z-index:1;

    margin-top:15px;

    color:#fff !important;
    font-size:34px !important;
    font-weight:900 !important;
    letter-spacing:-.035em;
}


/* =========================================================
   CONTENT PANELS / TREE
   ========================================================= */

body.isp360-commercial-unified
.main .tree-main,

body.isp360-commercial-unified
.main .tree-card,

body.isp360-commercial-unified
.main .panel,

body.isp360-commercial-unified
.main .box{
    border:
        1px solid
        #dfe7f0 !important;

    border-radius:18px !important;

    background:#fff !important;

    box-shadow:
        0 8px 26px
        rgba(15,23,42,.045) !important;
}

body.isp360-commercial-unified
.main .tree-head,

body.isp360-commercial-unified
.main .panel-head{
    border-bottom:
        1px solid
        #edf2f7 !important;
}

body.isp360-commercial-unified
.main .node,

body.isp360-commercial-unified
.main .tree-node{
    border:
        1px solid
        #e2e8f0 !important;

    border-radius:13px !important;

    background:#fff !important;
}


/* =========================================================
   TABLES / FORMS / MODALS
   ========================================================= */

body.isp360-commercial-unified
.main table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

body.isp360-commercial-unified
.main th{
    background:#f8fafc;
    color:#64748b;
    font-size:11px;
    font-weight:800;
}

body.isp360-commercial-unified
.main th,

body.isp360-commercial-unified
.main td{
    padding:12px 11px;
    border-bottom:
        1px solid
        #edf2f7;
}

body.isp360-commercial-unified
input,

body.isp360-commercial-unified
select,

body.isp360-commercial-unified
textarea{
    border:
        1px solid
        #cbd5e1;

    border-radius:9px;
}


/* =========================================================
   REMOVE LEGACY EMPTY SPACE
   ========================================================= */

body.isp360-commercial-unified
.main{
    padding-top:28px !important;
}


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

@media(max-width:1100px){

    body.isp360-commercial-unified
    .main > .cards{
        grid-template-columns:
            repeat(2,1fr) !important;
    }
}


@media(max-width:700px){

    body.isp360-commercial-unified
    .main{
        padding:16px !important;
    }

    body.isp360-commercial-unified
    .main > .title-row{
        align-items:flex-start;
        flex-direction:column;
        padding:22px;
    }

    body.isp360-commercial-unified
    .main > .cards{
        grid-template-columns:
            1fr 1fr !important;
        gap:9px !important;
    }

    body.isp360-commercial-unified
    .main > .cards > .card{
        min-height:120px;
        padding:17px !important;
    }
}