/*
    🌐 GLOBAL ROOT VARIABLES
*/

:root {

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* Font Weight */
    --fw-thin: 100;
    --fw-exl: 200; /* extra light */
    --fw-l: 300;   /* light */
    --fw-n: 400;   /* normal */
    --fw-m: 500;   /* medium */
    --fw-sb: 600;  /* semi-bold */
    --fw-b: 700;   /* bold */
    --fw-eb: 800;  /* extra-bold */
    --fw-blk: 900; /* black */

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Gaps */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 2rem;
    --gap-lg2: 3rem;

    /* Colors */
    --color-bg-primary: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    --color-bg-secondary: linear-gradient(180deg, #1E1F24 0%, #2A2B31 100%);
    --color-bg-tertiary: linear-gradient(180deg, #364dcd 0%, #384bd9 100%);
    --color-bg-quaternary: linear-gradient(180deg, #222222 0%, #141414 100%);

    --color-bg-btn-delete: linear-gradient(180deg, #ff0000ba 0%, #cc0000ba 100%);
    --color-bg-btn-create: linear-gradient(180deg, #008000c2 0%, #00a000c2 100%);
    --color-bg-btn-save: linear-gradient(180deg, #008000c2 0%, #00a000c2 100%);

    --color-bg-hover: #c1c1c138;

    --color-bg-screen-modal: rgba(0, 0, 0, 0.393);

    --bg-priority-high: #ff000069;
    --bg-priority-medium: #ffa5008f;
    --bg-priority-low: #00800082;

    --bg-income: #00800082;
    --bg-expense: #ff000069;

    --bg-toast-success: #008000;
    --bg-toast-error: #ff0000;

    --color-active: #008000ff;

    --color-dark: #1a1a1a;
    --color-light: #F8F9FE;
    --color-primary: #BCBDC2;
    --color-secondary: #6c757d;
    --color-tertiary: #515159;
    --color-fourth: #6c757d0d;

    --color-md-close: #cc0000;
    --color-border: #6c757d2b;

    --text-priority-high: #e2e2e2;
    --text-priority-medium: #e2e2e2;
    --text-priority-low: #e2e2e2;

    --color-income: #e2e2e2;
    --color-expense: #e2e2e2;
    --color-warning: linear-gradient(180deg, #cc0000 0%, #a30000 100%);

    --color-marked-order: linear-gradient(180deg, #c1c1c126 0%, #d4d4d426 100%);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

}

/*
 TEXT SIZE
*/

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

/*

TEXT WEIGHT

*/

.fw-thin { font-weight: var(--fw-thin); }
.fw-exl  { font-weight: var(--fw-exl); }
.fw-l    { font-weight: var(--fw-l); }
.fw-n    { font-weight: var(--fw-n); }
.fw-m    { font-weight: var(--fw-m); }
.fw-sb   { font-weight: var(--fw-sb); }
.fw-b    { font-weight: var(--fw-b); }
.fw-eb   { font-weight: var(--fw-eb); }
.fw-blk  { font-weight: var(--fw-blk); }

/*

/*

TEXT ALIGN

*/

.text-center{
    text-align: center;
}

/*

📐 UTILITÁRIOS DE ESPAÇAMENTO

*/

.mt-sm { margin: var(--space-sm); }
.mt-md { margin: var(--space-md); }
.mt-lg { margin: var(--space-lg); }

.pt-xs { padding: var(--space-xs); }
.pt-sm { padding: var(--space-sm); }
.pt-md { padding: var(--space-md); }
.pt-lg { padding: var(--space-lg); }


.mt-top-sm{
    margin-top: var(--space-sm);
}

.mt-top-lg{
    margin-top: var(--space-lg);
}

.pt-bottom-md {
    padding-bottom: var(--space-md);
}

.pt-top-md{
    padding-top: var(--space-md);
}

.pt-left-md{
    padding-left: var(--space-md);
}

.pt-right-md{
    padding-right: var(--space-md);
}


.pt-bottom-sm{
    padding-bottom: var(--space-sm);
}

.pt-left-sm{
    padding-left: var(--space-sm);
}

.pt-top-sm{
    padding-top: var(--space-sm);
}

.pt-right-sm{
    padding-right: var(--space-sm);
}

.pt-btn-primary{
    padding: var(--space-sm) var(--space-md);
}

.pt-input-primary{
    padding: var(--space-sm) var(--space-md);
}

.gap-xs {gap: var(--gap-xs);}
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.gap-lg2 { gap: var(--gap-lg2); }
/*

🌈 CORES DE FUNDO E TEXTO

*/

.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-tertiary {color: var(--color-tertiary);}
.color-active {
    color: var(--color-active);
}

.color-light { color: var(--color-light); }
.color-dark { color: var(--color-dark); }

.bg-primary {
    background: var(--color-bg-primary);
    backdrop-filter: blur(100px);
}

.bg-secondary {
    background: var(--color-bg-secondary);
}

.bg-tertiary {
    background: var(--color-bg-tertiary);
}

.bg-quaternary{
    background: var(--color-bg-quaternary);
}

.badge-high {
    background: var(--bg-priority-high);
    color: var(--text-priority-high);
}

.badge-medium {
    background: var(--bg-priority-medium);
    color: var(--text-priority-medium);
}

.badge-low {
    background: var(--bg-priority-low);
    color: var(--text-priority-low);
}

.bg-btn-delete{
    background: var(--color-bg-btn-delete);
}

.bg-btn-save{
    background: var(--color-bg-btn-save);
}

.bg-btn-create{
    background: var(--color-bg-btn-create);
}

.bg-income {
  background: var(--bg-income);
}

.bg-expense {
  background: var(--bg-expense);
}

.color-income {
  color: var(--color-income);
}

.color-expense {
  color: var(--color-expense);
}

.color-warning{
    color: var(--color-warning);
}

/*

🎯 BORDER RADIUS

*/

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-50p { border-radius: 50%; }

/*

📦 FLEXBOX - DISPLAY FLEX

*/

.d-flex { display: flex; }

.d-grid {display: grid;}

.g-auto-flow-colum {grid-auto-flow: column; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }


/*

Animations

*/

.animation-pulse {
    animation: pulse 3s infinite;
    transform-origin: center;
    display: inline-block;
    will-change: transform;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.2);
    }
}

.marked-primary{
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, #c1c1c126 0%, #e0e0e026 100%);
}

.hover-bg-primary{
    transition: background-color 0.3s ease;
}

.cursor-blocked{
    cursor: not-allowed;
}

.hover-bg-primary:hover{
    background: #24369bc4;
}

.container-focus-scale,
.hover-scale {
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.soft-shake {
    transform-origin: center;
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.1s ease-in-out;
}

.focus-bd-shadow-secondary{
    transition: border 0.3s ease;
}

.hover-md-close{
    transition: color 0.3s ease;
}

.container-focus-scale:focus-within,
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-md-close:hover{
    color: var(--text-priority-high);
}

.focus-bd-shadow-secondary:focus{
    border: 1px var(--color-light) solid;
}

.soft-shake:hover {
    animation: shake 0.3s linear infinite;
}

@keyframes shake {
    0%   { transform: translate(0); }
    25%  { transform: translate(1px, -1px); }
    50%  { transform: translate(-1px, 1px); }
    75%  { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}

.shadow-hover-primary:hover {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    transition: box-shadow 0.3s ease;
}


/*

Outros

*/

.box-shadow-left {
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.15);
}

.bd-shadow-primary{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.bd-shadow-secondary{
    box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 0px 0px -0px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset;
}

.bd-shadow-tertiary {
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) -3px 0px 0px inset;
}

.bd-shadow-quaternary{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3)
    0px 7px 13px -3px, rgba(0, 0, 0, 0.2) -3px 0px 0px inset;
}

.bd-shadow-quintenary{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3)
    0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 3px 0px 0px inset;
}

.bd-primary{
    border: 1px solid var(--color-border);
}

.bd-right{
    border-right: 1px solid var(--color-border);
}

.bd-left{
    border-left: 1px solid var(--color-border);
}

.bd-top{
    border-top: 1px solid var(--color-border);
}
.bd-bottom{
    border-bottom: 1px solid var(--color-border);
}

.img-size-10{
    width: 10px;
}

.img-size-15{
    width: 15px;
}

.img-size-20{
    width: 20px;
}

.img-size-25{
    width: 25px;
}

.img-size-30{
    width: 30px;
}

.img-size-40{
    width: 40px;
}

.img-size-50{
    width: 50px;
}

.img-size-60{
    width: 60px;
}

.img-size-100{
    width: 100px;
}

.w-mx-400{
    max-width: 400px;
}

.w-mx-50{
    max-width: 50px;
}

.none{
    display: none;
}

.w-mx-450 {
    max-width: 450px;
}

.w-mx-389 {
    max-width: 389.3px;
}
.w-mx-280{
    max-width: 280px;
}

.w-mx-200{
 max-width: 200px;
}

.w-mx-120{
    max-width: 120px;
}

.w-full {
    width: 100%;
}

.min-h-full{
    min-height: 100%;
}

.h-full {
    height: 100%;
}

.h-mx-full {
    max-height: 200px;
}

.txt-decoration-none{
    text-decoration: none;
}

.h-30{
    height: 30px;
}

.h-40{
    height: 40px;
}

.h-50{
    height: 50px;
}

.w-50{
    width: 50px;
}

.h-36{
    height: 36px;
}

.h-mn-300{
    min-height: 300px;
}

.w-70{
    width: 70px;
}

.h-400{
    height: 400px;
}

.h-300{
    height: 300px;
}

.h-200{
    height: 200px;
}

.h-240{
    height: 240px;
}

.w-mx-1200{
    max-width: 1200px;
}

.w-mx-1000{
    max-width: 1000px;
}

.w-140{
    width: 140px;
}

.w-150{
    width: 150px;
}

.w-160{
    width: 160px;
}

.w-130{
    height: 130px;
}

.h-130{
    width: 130px;
}

.txt-2-lines {
     max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.overflow-hidden{
    overflow: hidden;
}

.pointer{
    cursor: pointer;
}

.flex-desktop{
    display: flex;
}

.flex-mobile{
    display: none;
}

.flex-direction-mobile{
    flex-direction: row;
}

.fixed{
    position: fixed;
}

.fx-right{
    right: 0px;
}

.fx-bottom{
    bottom: 0px;
}

.grid-flex-300 {
  flex: 1 1 300px;
  max-width: 360px;
  width: 100%;
}

.min-max-65{
    min-height: 65px;
    max-height: 65px;
}

.h-auto{
    height: 'auto';
}

.w-auto{
    width: 'auto';
}

.h-mx-none{
    max-height: none;
}

.h-100-mx-vh{
    max-height: 100vh;
}

.h-mn-157{
    min-height: 157px;
}

.h-mn-55{
    min-height: 55px;
}

.h-55{
    height: 55px;
}

.h-21{
    height: 21px;
}

.h-60p{
    height: 60%;
}

.h-100vh{
    height: 100vh;
}

.h-80p{
    height: 80%;
}

.position-relative{
    position: relative;
}

.position-absolute{
    position: absolute;
}

.z-index-dropdown{
    z-index: 9;
}

.z-index-container{
    z-index: 8;
}

.z-index-modal{
    z-index: 10;
}

.z-index-screen{
    z-index: 11;
}

.bottom-negative-345{
    bottom: -345px;
}

.bottom-negative-60{
    bottom: -60px;
}

.w-mx-600{
    width: 600px;
}

.radius-md-mobile{
    border-radius: var(--space-lg) var(--space-lg) 0px 0px;
}

.txt-align-end{
    text-align: end;
}

.img-size-100p{
    width: 100%;
}

.img-preview-default{
    object-fit: cover;
    height: 130px;
    width: 130px;
}

.img-cover{
    object-fit: cover;
}

#toast-container > .toast-error,
#toast-container > .toast-success {
    border-radius: var(--radius-sm);
}

.flex-grow{
    flex-grow: 1;
}

.flex-shrink{
    flex-shrink: 0;
}

.marked-order{
    background: var(--color-marked-order);
    font-weight: var(--fw-b);
}

.text-align-start{
    text-align: start;
}

.grid-tmp-columns-1{
    grid-template-columns: repeat(1, 1fr);
}

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

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

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

.left-0{
    left: 0px;
}

.bottom-0{
    bottom: 0px;
}

.scroll-auto{
    padding-right: var(--space-sm);
    overflow-y: auto;
}

.text-wrap{
    word-wrap: break-word;
}

@keyframes fadeIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

.search-animation {
  animation: search 4s infinite linear;
  transform-origin: center center;
}

.remove-datetime-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.remove-datetime-icon {
  padding-right: 0;
  text-align: center;
}

@keyframes search {
  0%   { transform: rotate(0deg) translateX(10px) rotate(0deg); }
  10%  { transform: rotate(36deg) translateX(10px) rotate(-36deg); }
  20%  { transform: rotate(72deg) translateX(10px) rotate(-72deg); }
  30%  { transform: rotate(108deg) translateX(10px) rotate(-108deg); }
  40%  { transform: rotate(144deg) translateX(10px) rotate(-144deg); }
  50%  { transform: rotate(180deg) translateX(10px) rotate(-180deg); }
  60%  { transform: rotate(216deg) translateX(10px) rotate(-216deg); }
  70%  { transform: rotate(252deg) translateX(10px) rotate(-252deg); }
  80%  { transform: rotate(288deg) translateX(10px) rotate(-288deg); }
  90%  { transform: rotate(324deg) translateX(10px) rotate(-324deg); }
  100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.2);
  }
}

.pulse-animation {
  animation: pulse 8s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  transform-origin: center;
}

@media screen and (max-width: 800px) {
    .flex-desktop{
      display: none;
    }

    .flex-direction-mobile{
        flex-direction: column;
    }

    .flex-mobile{
        display: flex;
    }

    .scroll-auto{
        padding-right: 0px;
    }

    .scroll-y-mobile{
        overflow-y: auto;
    }

    .w-full-mobile{
        width: 100%;
    }

}


.overflow-x-hidden{
    overflow-x: hidden;
}

.overflow-y-hidden{
    overflow-y: hidden;
}

.object-cover{
    object-fit: cover;
}


.object-position-bottom{
    object-position: center;
}


.text-ellipsis-145 {
    width: 145px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}