@tailwind base;
@tailwind components;
@tailwind utilities;

/* Components */
/* @import 'vue-select/dist/vue-select.css'; */
/* @import 'buttons'; */
/* @import 'form'; */
/* @import 'checkbox';
@import 'radio';
@import 'nprogress';
@import 'animate'; */

@layer base {
  :root {
    --vs-selected-bg: #f9fafb;
  }
}

/* v-modal */
body.modal-open {
  overflow: hidden;
}
/*.titlebar {
    -webkit-user-select: none;
    -webkit-app-region: drag;
}
.titlebar a,
.titlebar button,
.titlebar .no-drag {
    -webkit-app-region: no-drag;
}*/
#app {
  @apply flex items-center justify-center w-full min-h-screen;
}
input {
  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-300 focus:ring-gray-300 sm:text-sm;
}
input:focus:not('.vs__search') {
  @apply focus:outline-none focus:border focus:ring-2 focus:ring-gray-300 focus:border-gray-300;
}
input[type='date'] {
  @apply w-full rounded-md border border-gray-300 focus:outline-none focus:border focus:ring-2 focus:ring-gray-300 focus:border-gray-300;
}
.input-error {
  @apply border-red-500 !important;
}
.btn-gray {
  @apply inline-flex items-center rounded-md border border-transparent bg-gray-700 px-4 py-2 text-sm font-medium text-white fill-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-300;
}
.form-error {
  @apply text-sm text-red-500 mt-1;
}
.error .vs__dropdown-toggle {
  @apply border-red-500;
}
.vs__search {
  @apply my-0 py-[2px] !important;
}
.v-select .vs__dropdown-toggle {
  @apply shadow-sm rounded-md;
}
.bg-gradient-gray {
  @apply bg-gradient-to-br from-gray-700 to-gray-800;
}
.bg-green-to-teal {
  @apply bg-gradient-to-br from-green-500 to-teal-600;
}
.bg-blue-to-teal {
  @apply bg-gradient-to-br from-blue-500 to-blue-800;
}
.bg-blue-to-purple {
  @apply bg-gradient-to-br from-blue-500 to-purple-600;
}
.bg-red-to-orange {
  @apply bg-gradient-to-br from-red-500 to-orange-600;
}
.bg-mono-circle {
  @apply bg-gradient-to-br from-gray-700 to-gray-900;
}
.bg-month-chart {
  @apply bg-gradient-to-tr from-gray-700 to-gray-900;
}
.bg-year-chart {
  @apply bg-gradient-to-tr from-blue-700 to-blue-900;
}
.v--modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}
.v--modal {
  @apply font-sans bg-transparent !important;
}
.v--modal:not(.vue-dialog) {
  @apply fixed left-0 top-0 bottom-0 right-0 h-full w-full flex items-center content-center justify-around !important;
}
.v--modal.vue-dialog {
  @apply bg-gray-100 !important;
}
.dialog-content .dialog-c-title {
  @apply font-extrabold text-lg;
}
.dialog-content .dialog-c-text {
  @apply leading-normal;
}
.print-only {
  display: none;
}

@media print {
  html,
  body {
    width: auto !important;
    height: auto !important;
  }

  * {
    @apply static bg-white shadow-none !important;
  }
  .h-screen,
  .min-h-screen {
    @apply h-full min-h-full !important;
  }
  body.modal-open {
    @apply invisible !important;
  }
  body.modal-open #page-contents {
    @apply hidden !important;
  }
  body.modal-open .h-screen,
  body.modal-open .min-h-screen {
    @apply h-auto !important;
  }
  .np {
    @apply hidden !important;
  }
  .print {
    @apply relative z-50 bg-white visible block w-full h-full min-h-full overflow-visible !important;
  }
  .print table {
    @apply whitespace-normal overflow-visible !important;
  }
  .print table thead,
  .print table tfoot {
    @apply table-row-group !important;
  }
  .print table:not(.all) tr td:last-child {
    @apply hidden;
  }
  body.modal-open #modals-container {
    @apply absolute top-0 bg-white h-full min-h-full max-h-full w-full overflow-visible !important;
  }
  body.modal-open .modal,
  body.modal-open .v--modal-overlay,
  body.modal-open .v--modal {
    @apply static block visible bg-white h-full min-h-full max-h-full w-full overflow-x-hidden overflow-y-hidden overflow-visible !important;
  }
  body.modal-open .modal .print {
    page-break-inside: auto !important;
    /* page-break-after: always !important; */
    @apply relative z-50 bg-white visible block w-full h-full min-h-full overflow-visible !important;
  }
  .print-only {
    display: block;
  }
  ::-webkit-scrollbar {
    @apply w-0 h-0 hidden !important;
  }

  /*@page :first {
        margin-top: 6cm;
    }*/
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.2s ease-in;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

/*// Index //*/
.min-w-225 {
  min-width: 225px;
}
.min-w-600 {
  min-width: 600px;
}
.border-o2 {
  border-color: rgba(255, 255, 255, 0.2);
}

.no-drop .vs__actions {
  display: none;
}

/*// Page //*/
.menu-list li:last-child a {
  border-bottom: 0 !important;
}

/*.scrolling-touch {
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch !important;
}

::-webkit-scrollbar {
    display: none;
}*/

::-webkit-scrollbar-track {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.4);
}

.main-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0);
}
.main-scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0);
}
.modal-scroll::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.7);
}
.scroll-on-light::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.3);
}
.scroll-on-dark::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.4);
}

.table tr:last-child td {
  @apply border-0 !important;
}

[dir='rtl'] .rtl\:rotate {
  @apply transform rotate-180;
}

.v-select .vs__dropdown-toggle {
  @apply px-1 py-1.5 mt-1 h-auto leading-none;
}
.v-select .vs__dropdown-toggle .vs__selected-options {
  @apply p-0 h-auto leading-none;
}
.v-select .vs__actions {
  @apply hidden;
}
.v-select .vs__dropdown-menu {
  @apply shadow-none;
}
.v-select .vs__dropdown-toggle {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}