:root {
   --nav-width: 300px;
   --header-height: 6rem;

   --color-green-500: #00c951;
   --color-green-700: oklch(52.7% 0.154 150.069);
   --color-indigo-500: oklch(58.5% 0.233 277.117);
   --color-indigo-600: oklch(51.1% 0.262 276.966);
   --color-indigo-700: oklch(45.7% 0.24 277.023);
   --color-indigo-800: oklch(39.8% 0.195 277.366);
   --color-red-500: oklch(63.7% 0.237 25.331);
   --color-red-600: oklch(57.7% 0.245 27.325);
   --color-red-700: oklch(50.5% 0.213 27.518);
   --color-yellow-400: oklch(85.2% 0.199 91.936);
   --color-yellow-500: oklch(79.5% 0.184 86.047);
   --color-gray-100: #f6f3f4;
   --color-gray-300: #d1d5dc;
   --color-gray-500: #6a7282;
   --color-blue-500: oklch(62.3% 0.214 259.815);
   --color-blue-600: oklch(54.6% 0.245 262.881);
   --color-blue-700: oklch(48.8% 0.243 264.376);

   --radius-xl: 0.75rem;

}

body {
   font-family: 'Inter', sans-serif;
   scroll-behavior: smooth;

   &::-webkit-scrollbar,
   *::-webkit-scrollbar {
      display: none;
   }

}

::file-selector-button {
   background-color: var(--color-gray-300);
   margin: -0.4rem -0.8rem;
   margin-right: 0.8rem;
   padding: 0px;

}

.h-min-all {
   min-height: calc(100dvh - var(--header-height));
}


button {
   cursor: pointer;

   &:disabled,
   &.cursor-not-allowed {
      cursor: not-allowed;
   }
}

.alertContainer {
   max-width: 600px;
   margin: 0 auto;
   position: fixed;
   inset: var(--header-height) 0 auto;
   z-index: 999;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}




#sidebar {
   height: 100dvh;
   height: 100vh;
   overflow-y: scroll;
   position: fixed;
   display: flex;
   flex-direction: column;
   z-index: 999;

   .navLink {
      border-radius: var(--radius-lg);
      transition: all 150ms ease-in-out;

      a {
         display: flex;
         align-items: center;
         gap: 0.8em;
         padding: calc(var(--spacing) * 3);
         color: var(--color-gray-700);

         i {
            font-size: 1.2em;
         }
      }


      &:hover {
         background-color: var(--color-gray-100);
      }

      &.active {
         --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
         font-weight: 600;
         background-color: var(--color-indigo-50);

         a {
            color: var(--color-indigo-600);

            i {
               font-weight: normal;
            }
         }
      }
   }
}


#bg-overlay {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background-color: rgb(0 0 0 / 25%);
   z-index: 998;
   left: -100%;
   transition: all 300ms ease-in-out;
}

.badge {
   color: var(--color-white);
   font-weight: 500;
   font-size: 0.8em;
   line-height: var(--tw-leading, var(--text-xs--line-height));
   padding-block: calc(var(--spacing) * 1);
   padding-inline: calc(var(--spacing) * 3);
   background-color: var(--color-red-500);
   border-radius: calc(infinity * 1px);
   margin-left: auto;
}

.unread_count {
   display: none;
}

.box {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   border-radius: 8px !important;
   border: none;
   transition: transform 0.2s;

}



label {
   color: var(--color-gray-700);
   font-weight: 600;
   font-size: 0.9em;
   display: inline-block;
}

textarea,
select,
input {
   padding: 0.4em 0.8em;
   border: 1px solid var(--color-gray-300);
   border-radius: 6px;
   outline: none;
   transition: all 100ms ease-in-out;
   color: var(--color-gray-500);

   &::placeholder {
      color: var(--color-gray-500);

   }

   &:focus:not([readonly]) {
      border-color: var(--color-blue-500);
   }
}

input[type="checkbox" i] {
   width: 1em;
   height: 1em;
   margin-top: .25em;
   vertical-align: top;
}

input[type="file"]::file-selector-button {
   margin: -0.4em -0.8em;
   margin-right: 0.8em;
   padding: 0.4em 0.8em;
   background-color: var(--color-gray-300);
   color: var(--color-gray-700);
   cursor: pointer;
}

form.form-1 {
   .form-group {
      margin-bottom: 1em;
   }

   label {
      margin-bottom: 0.4em;
   }

   textarea,
   select,
   input:not([type="checkbox"]) {
      width: 100%;
      min-width: 15rem;
   }



   .row {
      display: flex;
      flex-wrap: wrap;

      >* {
         flex-shrink: 0;
         width: 100%;
         max-width: 100%;
      }

      .col {
         flex: 1 0 0;
      }
   }


}

.btn {
   font-weight: 500;
   font-size: 1.15em;
   line-height: 1.4;
   padding: 0.4em 1em;
   border-radius: 6px;
   transition: all 200ms ease-in-out;
   border: 1px solid var(--color-gray-500);
   cursor: pointer;
   display: inline-block;
   scale: 0.9;

   &.hidden {
      display: none !important;
   }

   &:hover {
      background-color: var(--color-gray-100);
   }

   &.btn-full {
      width: 100%;
      scale: 1;
   }

   &.btn-xs {
      scale: 0.7;
      font-size: 1.25em;
   }

   &.btn-sm {
      padding: 0.25em 0.8em;
      scale: 0.8;
   }

   &.btn-lg {
      scale: 1.1;
   }

   &.btn-indigo {
      color: var(--color-white);
      background-color: var(--color-indigo-600);
      border-color: transparent;

      &:hover {
         background-color: var(--color-indigo-700) !important;

      }
   }

   &.btn-red {
      color: var(--color-white);
      background-color: var(--color-red-600);
      border-color: transparent;


      &:hover {
         background-color: var(--color-red-700) !important;

      }
   }

   &.btn-yellow {
      color: var(--color-white);
      background-color: var(--color-yellow-400);
      border-color: transparent;


      &:hover {
         background-color: var(--color-yellow-500) !important;

      }
   }

   &.btn-outline-indigo {
      color: var(--color-indigo-600);
      border-color: var(--color-indigo-600);

      &:hover {
         background-color: var(--color-indigo-600);
         border-color: transparent;
         color: #fff;
      }
   }

   &.btn-outline-yellow {
      color: var(--color-yellow-400);
      border-color: var(--color-yellow-400);

      &:hover {
         background-color: var(--color-yellow-400);
         border-color: transparent;
         color: #fff;
      }
   }

   &.btn-outline-red {
      color: var(--color-red-500);
      border-color: var(--color-red-500);

      &:hover {
         background-color: var(--color-red-500);
         border-color: transparent;
         color: #fff;
      }
   }
}

.spinner {
   --spinner-size: 2rem;
   --spinner-border-width: 0.2em;
   /* --spinner-color: var(--color-gray-700); */
   --spinner-color: currentcolor;

   display: inline-block;
   width: var(--spinner-size);
   height: var(--spinner-size);
   vertical-align: -0.125em;
   border: var(--spinner-border-width) solid var(--spinner-color);
   border-right-color: transparent;
   border-radius: 50%;
   animation: spinner-rotate 0.75s linear infinite;
}

@keyframes spinner-rotate {
   to {
      transform: rotate(360deg);
   }
}


.modal {
   background-color: rgb(75 86 102 / 63%);
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   overflow-y: hidden;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;

   &.hidden {
      display: none !important;
   }

   .modal-wrapper {
      position: relative;
      background-color: var(--color-white);
      margin-inline: auto;
      max-height: 90%;
      display: flex;
      flex-direction: column;
   }

   .modal-header {
      padding: 0.75rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;


      .modal-title {
         color: var(--color-gray-700);
         font-weight: 700;
         font-size: 1.25em;
         line-height: 1.4;
      }

      button.modal-close {
         color: var(--color-gray-500);
         font-weight: 600;
         font-size: 1.25em;
         cursor: pointer;
         transition: all 300ms ease-in-out;

         &:hover {
            color: var(--color-gray-700);
         }
      }
   }

   .modal-body {
      padding: 1rem 1.5rem;
      overflow-y: auto;
      flex-grow: 1;
   }

   .modal-footer {
      padding: 0.75rem 1.25rem;
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;

      button {
         font-weight: 600;
         font-size: 1em;
         cursor: pointer;
         transition: all 300ms ease-in-out;
         padding: 0.4em 1em;
         border-radius: 6px;

         &.modal-close {
            background-color: var(--color-gray-500);
            color: #fff;
            border: 1px solid transparent;

            &:hover {
               background-color: transparent;
               color: var(--color-gray-500);
               border-color: var(--color-gray-500);
            }
         }
      }
   }
}


.drop-zone-container {
   .drop-zone {
      border: 2px dashed #6c757d;
      border-radius: 10px;
      padding: 40px 30px;
      text-align: center;
      cursor: pointer;
      transition: background 0.2s ease-in-out;

      &:hover {
         background: #ece8e8ff;
      }

      &.dragover {
         background: #e9ecef;
      }
   }

   .file-list {
      margin-top: 15px;

      li {
         list-style: none;
         margin: 5px 0;
         padding: 5px 10px;
         background: #f1f1f1ff;
         border-radius: 5px;
         font-size: 0.9rem;
      }
   }
}

.d-grid{
   display: grid;
   --col-w: 20rem;
   &.col-auto-fit{
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-w)), 1fr));

   }
}









@media (min-width: 1440px) {
   .modal .modal-body {
      padding: 2rem 2.5rem;

   }

}

@media (max-width: 768px) {
   .grid-container {
      gap: 1.5rem !important;
   }

}