/*==========================================================
FTN PLATFORM
Utilities
Version 1.0
==========================================================*/


/*==========================================================
LAYOUT
==========================================================*/

.container{

width:min(100%,var(--content-width));

margin-inline:auto;

}

.container-wide{

width:min(100%,var(--dashboard-width));

margin-inline:auto;

}

.full-width{

width:100%;

}

.full-height{

height:100%;

}

.min-vh{

min-height:100vh;

}


/*==========================================================
DISPLAY
==========================================================*/

.flex{

display:flex;

}

.inline-flex{

display:inline-flex;

}

.grid{

display:grid;

}

.block{

display:block;

}

.inline-block{

display:inline-block;

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}


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

.flex-row{

flex-direction:row;

}

.flex-column{

flex-direction:column;

}

.flex-wrap{

flex-wrap:wrap;

}

.items-center{

align-items:center;

}

.items-start{

align-items:flex-start;

}

.items-end{

align-items:flex-end;

}

.justify-center{

justify-content:center;

}

.justify-between{

justify-content:space-between;

}

.justify-around{

justify-content:space-around;

}

.justify-end{

justify-content:flex-end;

}

.flex-1{

flex:1;

}


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

.grid-2{

display:grid;

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

gap:24px;

}

.grid-3{

display:grid;

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

gap:24px;

}

.grid-4{

display:grid;

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

gap:24px;

}

.auto-grid{

display:grid;

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

gap:24px;

}


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

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-7{margin-top:var(--space-7);}
.mt-8{margin-top:var(--space-8);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}
.mb-6{margin-bottom:var(--space-6);}
.mb-7{margin-bottom:var(--space-7);}
.mb-8{margin-bottom:var(--space-8);}

.ml-auto{

margin-left:auto;

}

.mr-auto{

margin-right:auto;

}

.mx-auto{

margin-inline:auto;

}

.p-0{padding:0;}
.p-1{padding:var(--space-1);}
.p-2{padding:var(--space-2);}
.p-3{padding:var(--space-3);}
.p-4{padding:var(--space-4);}
.p-5{padding:var(--space-5);}
.p-6{padding:var(--space-6);}
.p-7{padding:var(--space-7);}
.p-8{padding:var(--space-8);}


/*==========================================================
TEXT
==========================================================*/

.text-left{

text-align:left;

}

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.text-primary{

color:var(--text-primary);

}

.text-secondary{

color:var(--text-secondary);

}

.text-muted{

color:var(--text-muted);

}

.text-danger{

color:var(--ftn-danger);

}

.text-success{

color:var(--ftn-success);

}

.text-warning{

color:var(--ftn-warning);

}

.text-info{

color:var(--ftn-info);

}

.uppercase{

text-transform:uppercase;

}

.bold{

font-weight:700;

}

.extra-bold{

font-weight:800;

}


/*==========================================================
BACKGROUND
==========================================================*/

.bg-surface-1{

background:var(--surface-1);

}

.bg-surface-2{

background:var(--surface-2);

}

.bg-surface-3{

background:var(--surface-3);

}

.bg-red{

background:var(--ftn-red);

color:white;

}

.bg-glass{

background:var(--glass-light);

backdrop-filter:blur(10px);

}


/*==========================================================
BORDER
==========================================================*/

.rounded{

border-radius:var(--radius-md);

}

.rounded-lg{

border-radius:var(--radius-lg);

}

.rounded-xl{

border-radius:var(--radius-xl);

}

.shadow{

box-shadow:var(--shadow-md);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.border{

border:1px solid var(--border-medium);

}

.border-light{

border:1px solid var(--border-light);

}


/*==========================================================
CURSOR
==========================================================*/

.pointer{

cursor:pointer;

}


/*==========================================================
OVERFLOW
==========================================================*/

.overflow-hidden{

overflow:hidden;

}

.overflow-auto{

overflow:auto;

}


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

@media(max-width:992px){

.grid-4{

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

}

.grid-3{

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

}

}

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.flex-row{

flex-direction:column;

}

.hide-mobile{

display:none !important;

}

}

@media(min-width:769px){

.hide-desktop{

display:none !important;

}

}