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

@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');

/* Autocomplete dropdown styling */
.suggestion-item {
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.suggestion-item:hover {
  background-color: #f0f9ff;
  color: #1e40af;
}

.suggestion-item:last-child {
  border-bottom: none;
}

@layer components {

    .vollkorn {
        font-family: "Vollkorn", serif !important;
    }

    .badge {
        @apply px-2 inline-flex text-xs leading-6 font-semibold rounded-lg transform hover:shadow-lg hover:scale-125
    }
    
    .label {
        @apply text-xs tracking-wider text-gray-400;
    }

    .task_button {
        @apply px-2 py-1 text-xs tracking-tight rounded-lg border;
    }

    .center-container {
        @apply flex overflow-y-auto flex-col flex-auto pb-20 h-full;
    }

    .button {
        @apply inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-300 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500;
    }

    .form-button {
        @apply flex p-2 h-full text-xs font-medium bg-gray-200 rounded-md border hover:bg-gray-300;
    }

    header {
        @apply flex flex-none justify-between items-center p-4 space-x-4 h-20 border-b;

        input,
        select {
            --tw-border-opacity: 0;
            border: none;

            &:focus {
                outline: none;
                box-shadow: none;
                --tw-ring-shadow: none;
            }
        }

        select option {
            @apply text-gray-400
        }
        .ss-single-selected { border:0!important; }
    }

    input[type=checkbox] {
        @apply text-indigo-300 ring-indigo-300
    }

    input[type=text],
    input[type=number],
    input[type=date],
    input[type=email],
    input[type=password],
    input[type=multiple],
    select,
    textarea,
    .ss-single-selected, .ss-multi-selected {
        @apply placeholder-opacity-30 rounded ring-offset-transparent focus:outline-none focus:ring-indigo-300 focus:border-indigo-300;
        font-size: 0.75rem !important;
        width: 100%;
        min-height: 1.88rem;
        border-color: inherit;
    }

    input[type=submit] {
    font-style: inherit;
    cursor: pointer;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Flash notification styles */
    .flash-notification {
        @apply opacity-100 transition-all duration-300 ease-in-out transform translate-y-0;
        animation: slideInFromBottom 0.3s ease-out;
    }

    .flash-notification.fade-out {
        @apply opacity-0 transform -translate-y-2;
    }

    .flash-notification.hidden {
        @apply opacity-0 transform -translate-y-2 pointer-events-none;
    }

    @keyframes slideInFromBottom {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
}
/*
 * Fortsettelse SCSS


*/
/* line 10, app/assets/stylesheets/custom.scss */
.transition-opacity {
  transition: opacity 0.3s ease;
}

/* line 14, app/assets/stylesheets/custom.scss */
.turbo-progress-bar {
  background-color: #818cf8;
}

/* line 18, app/assets/stylesheets/custom.scss */
body {
  height: 100vh;
}

/* line 22, app/assets/stylesheets/custom.scss */
body, p, ol, ul, td {
  font-family: inherit;
}

/* line 26, app/assets/stylesheets/custom.scss */
.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
}

/* line 32, app/assets/stylesheets/custom.scss */
#mons {
  font-weight: 500;
  font-family: "Vollkorn", serif !important;
}

/* line 38, app/assets/stylesheets/custom.scss */
#changes .tracked-changes div:last-child .badge {
  background-color: #d1fae4;
  color: #0d733c;
}

/* line 44, app/assets/stylesheets/custom.scss */
#changes .tracked-changes div:nth-last-child(2) .badge {
  text-decoration: line-through;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(1) .badge {
  background-color: #c7d2fd;
  color: #041b74;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(2) .badge {
  background-color: #d1fae4;
  color: #0d733c;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(3) .badge {
  background-color: #fef3c7;
  color: #776002;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(4) .badge {
  background-color: #fde2e1;
  color: #890e09;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(5) .badge {
  background-color: #C7C3B5;
  color: #1c1a15;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(6) .badge {
  background-color: #8CF6FA;
  color: #023638;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(7) .badge {
  background-color: #E67F7C;
  color: #130404;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(8) .badge {
  background-color: #93CFAF;
  color: #07100b;
}

/* line 63, app/assets/stylesheets/custom.scss */
.statistics div:nth-of-type(9) .badge {
  background-color: #FFA6D5;
  color: #5a002f;
}

/* line 70, app/assets/stylesheets/custom.scss */
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  transform: translate(0) scale(1);
  visibility: visible;
}

/* line 76, app/assets/stylesheets/custom.scss */
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  transform: translate(0) scale(1);
  visibility: visible;
}

/* line 82, app/assets/stylesheets/custom.scss */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* line 86, app/assets/stylesheets/custom.scss */
.simple-calendar table {
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #dddddd;
  border-collapse: collapse;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

/* line 97, app/assets/stylesheets/custom.scss */
.simple-calendar .calendar-heading {
  padding: 1rem;
}

/* line 101, app/assets/stylesheets/custom.scss */
.simple-calendar tr {
  border-collapse: collapse;
}

/* line 105, app/assets/stylesheets/custom.scss */
.simple-calendar th {
  padding: 10px;
  border-bottom: 2px solid #dddddd;
  border-collapse: collapse;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 0px none #333333;
  box-sizing: border-box;
  text-align: left;
}

/* line 116, app/assets/stylesheets/custom.scss */
.simple-calendar td {
  padding: 10px;
  vertical-align: top;
  width: 14%;
  min-width: 100px;
  border: 1px solid #ddd;
  border-top-color: #dddddd;
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: #dddddd;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: #dddddd;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #dddddd;
  border-left-style: solid;
  border-left-width: 1px;
}

/* line 137, app/assets/stylesheets/custom.scss */
.simple-calendar .calendar-heading nav {
  display: inline-block;
}

/* line 141, app/assets/stylesheets/custom.scss */
.simple-calendar .day {
  height: 80px;
}

/* line 159, app/assets/stylesheets/custom.scss */
.simple-calendar .today {
  background: #95c18b7f;
}

/* line 169, app/assets/stylesheets/custom.scss */
.simple-calendar .prev-month {
  background: #f3f4f6;
}

/* line 173, app/assets/stylesheets/custom.scss */
.simple-calendar .next-month {
  background: #f3f4f6;
}

/* line 182, app/assets/stylesheets/custom.scss */
.ss-single-selected,
.ss-multi-selected {
  font-size: 0.75rem !important;
  width: 100%;
  min-height: 2.6rem !important;
  border-color: inherit !important;
  padding: 5px 10px !important;
}

/* line 191, app/assets/stylesheets/custom.scss */
.ss-content {
  font-size: 0.75rem !important;
}

/* line 195, app/assets/stylesheets/custom.scss */
.ss-value {
  background: #818cf8 !important;
}

/* line 198, app/assets/stylesheets/custom.scss */
.ss-option:hover {
  background: #818cf8 !important;
}

@keyframes highlight-update {
  0% {
    background-color: #f9fafb;
    /* grey-50 - very light grey */
  }
  50% {
    background-color: #f3f4f6;
    /* grey-100 - light grey */
  }
  100% {
    background-color: transparent;
  }
}

/* line 215, app/assets/stylesheets/custom.scss */
.project-updated {
  animation: highlight-update 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* line 221, app/assets/stylesheets/custom.scss */
  .project-updated {
    animation: none;
    background-color: #f9fafb;
    transition: background-color 0.5s ease-out;
  }
}