/* ==========================================================
   ClueCRM UI
   LAYOUT
   Version : 1.0
==========================================================*/

/*=========================================================
  CONTAINER
=========================================================*/

.iv-container{
    width:min(100%, var(--iv-container-width));
    margin:0 auto;
    padding:0 var(--iv-space-6);
}

.iv-container-fluid{
    width:100%;
    padding:0 var(--iv-space-6);
}

/*=========================================================
  APPLICATION SHELL
=========================================================*/

.iv-app{
    display:flex;
    min-height:100vh;
    background:var(--iv-bg);
}

.iv-main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

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

.iv-page{
    flex:1;
    padding:32px;
    overflow:auto;
}

.iv-page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:32px;
    gap:20px;
    padding-bottom:10px;
    border-bottom:1px solid #c3ccd8;
}

.iv-page-title{
    margin:0;
}

.iv-page-subtitle{
    margin-top:6px;
    color:var(--iv-text-secondary);
}

/*=========================================================
  FLEX
=========================================================*/

.iv-flex{
    display:flex;
}

.iv-flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.iv-flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.iv-align-center{
    align-items:center;
}

.iv-justify-center{
    justify-content:center;
}

.iv-gap-sm{
    gap:12px;
}

.iv-gap-md{
    gap:20px;
}

.iv-gap-lg{
    gap:32px;
}

/*=========================================================
  GRID
=========================================================*/

.iv-grid{
    display:grid;
    gap:24px;
}

.iv-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.iv-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.iv-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.iv-grid-auto{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/*=========================================================
  SECTION
=========================================================*/

.iv-section{
    margin-bottom:40px;
}

.iv-section-title{
    margin-bottom:20px;
}

/*=========================================================
  SPACING
=========================================================*/

.iv-mt-0{margin-top:0;}
.iv-mt-1{margin-top:8px;}
.iv-mt-2{margin-top:16px;}
.iv-mt-3{margin-top:24px;}
.iv-mt-4{margin-top:32px;}

.iv-mb-0{margin-bottom:0;}
.iv-mb-1{margin-bottom:8px;}
.iv-mb-2{margin-bottom:16px;}
.iv-mb-3{margin-bottom:24px;}
.iv-mb-4{margin-bottom:32px;}

.iv-p-0{padding:0;}
.iv-p-1{padding:8px;}
.iv-p-2{padding:16px;}
.iv-p-3{padding:24px;}
.iv-p-4{padding:32px;}

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

@media (max-width:1200px){

    .iv-grid-4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:992px){

    .iv-grid-3{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .iv-container,
    .iv-container-fluid{
        padding:0 20px;
    }

    .iv-page{
        padding:20px;
    }

    .iv-page-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .iv-grid-2,
    .iv-grid-3,
    .iv-grid-4{
        grid-template-columns:1fr;
    }

}