: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-200: oklch(92.8% 0.006 264.531);
   --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);
   --color-emerald-500: oklch(69.6% 0.17 162.48);
   --color-emerald-600: oklch(59.6% 0.145 163.225);

   --radius-xl: 0.75rem;

}

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

   &:not(.scrollbar-visible)::-webkit-scrollbar,
   *:not(.scrollbar-visible)::-webkit-scrollbar {
      width: 0px;
      background: transparent;
   }

}

::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: min(90%, 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: 100vh;
   height: 100dvh;
   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:not([type="checkbox"]) {
   padding: 0.4em 0.8em;
   border: 1px solid var(--color-gray-300);
   border-radius: 6px;
   outline: none;
   transition: all 200ms ease-in-out;
   color: var(--color-gray-500);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

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

   }

   &:focus:not([readonly]) {
      border-color: var(--color-blue-500);
      box-shadow: 0 0 0 3px var(--color-indigo-100);
   }

   &:disabled {
      border-color: var(--color-gray-300);
      background: var(--color-gray-100);
      color: var(--color-gray-500);
      cursor: not-allowed;
   }
}

input[type="checkbox"] {
   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-1 {
   .form-group {
      margin-bottom: 1em;
   }

   label {
      margin-bottom: 0.4em;

      span.muted {
         color: var(--color-gray-500);
         font-weight: 500;
         font-size: 0.85rem;
      }
      span.red{
         color: var(--color-red-500);
      }
   }

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



   .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: 0.95em;
   line-height: 1.4;
   padding: 0.55em 1em;
   border-radius: 6px;
   transition: all 200ms ease-in-out;
   border: 1px solid var(--color-gray-500);
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

   &:disabled {
      background-color: var(--color-gray-200) !important;
      border-color: var(--color-gray-300) !important;
      color: var(--color-gray-500) !important;
      cursor: not-allowed;
   }

   &.hidden {
      display: none !important;
   }

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

   &.btn-full {
      width: 100%;
      font-weight: 600;
   }

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

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

   &.btn-lg {
      scale: 1.1;
   }

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

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

      }
   }

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

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

      }
   }

   &.btn-emerald {
      color: var(--color-white);
      background-color: var(--color-emerald-500);
      border-color: transparent;

      &:hover:not(:disabled) {
         background-color: var(--color-emerald-600) !important;
      }
   }

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

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

      }
   }

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

      &:hover:not(:disabled) {
         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:not(:disabled) {
         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:not(:disabled) {
         background-color: var(--color-red-500);
         border-color: transparent;
         color: #fff;
      }
   }

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

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

   &.btn-hov-red:hover:not(:disabled) {
      background-color: var(--color-red-50);
      border-color: var(--color-red-200);
      color: var(--color-red-600);
   }
}

.btn-group {
   display: flex;
   margin-inline: auto;
   max-width: 20rem;
   gap: 0.5rem 1rem;
   flex-wrap: wrap;

   >button {
      flex: 1;
      white-space: nowrap;
   }
   &.right-align{
      margin-inline: auto 0;
   }

}

.spinner {
   --spinner-size: 1.5rem;
   --spinner-border-width: 0.2em;
   --spinner-color: currentcolor;

   display: inline-flex;
   width: var(--spinner-size);
   height: var(--spinner-size);
   align-items: center;
   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));
   }
   &.col-auto-fill {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-w)), 1fr));
   }
}

.table {
   white-space: nowrap;
}

.fade-in {
   animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.skeleton {
   background: #f3f4f6;
   background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
   border-radius: 8px;
   background-size: 200% 100%;
   animation: 1.5s shine linear infinite;
}

@keyframes shine {
   to {
      background-position-x: -200%;
   }
}








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

   }

}

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

}