@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');@tailwind base;

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


@layer base {
    body {
        @apply bg-primary text-primary;
    }

    table {
        @apply w-full
    }

    table body {
        @apply p-8
    }
    th {
        @apply bg-blue py-2 rounded-sm border-r-2 border-white border-solid text-white text-sm ;
    }

    td {
        @apply bg-white;
    }

    main {
        @apply bg-gradient-to-r from-white  to-blue/20 text-primary min-h-[75vh] py-8 px-16 min-w-full;
    }

    form {
        @apply bg-white rounded-lg shadow-primary p-8 rounded-md mt-8 grid grid-cols-3 caret-blue placeholder-blue;
    }

    input[type='time'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type="time"]::-webkit-calendar-picker-indicator{
        filter: invert(69%) sepia(18%) saturate(637%) hue-rotate(167deg) brightness(88%) contrast(91%);
    }

    input[type='text'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    textarea {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue h-32 !important;
    }

    input[type='file'] {
        @apply text-sm ring-1 ring-blue focus:ring-2 focus:ring-blue text-blue border-primary w-full !important;
    }

    input[type='date'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='datetime-local'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='number'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='email'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='password'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder-blue !important;
    }

    input[type='checkbox'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='radio'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='submit'] {
        @apply w-full !important;
    }

    input[type='file']::file-selector-button {
        @apply bg-blue border-0 text-white cursor-pointer;
    }

    select {
        @apply bg-white rounded-md border-primary border-2 text-primary w-full;
    }

    a {
        @apply text-sm no-underline;
    }

    .disabled {
        @apply pointer-events-none bg-blue/30 opacity-40;
    }

    .text-primary {
        @apply text-blue;
    }

    .bg-primary {
        @apply bg-white;
    }

    .bg-danger {
        @apply bg-pastel-red;
    }

    .errors {
        @apply line-through decoration-pastel-red/30 w-full text-center decoration-2;
    }
}

@layer components {
    .opening {
        @apply bg-dark-green text-white border-green !important
    }

    .opening::-webkit-calendar-picker-indicator{
        filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(0%) hue-rotate(177deg) brightness(110%) contrast(110%) !important;    }

    .border-primary {
        @apply border-blue border-[1px] border-solid rounded-lg;
    }

    .button_to {
        @apply border-0 m-0 p-0 p-2 border-primary border-2 border-solid flex items-center justify-center;
    }

    .button {
        @apply py-2 px-2 rounded-full flex items-center justify-center cursor-pointer shadow-primary !important;
    }

    .button-primary {
        @apply text-white bg-green hover:bg-dark-green hover:no-underline hover:text-white;
    }

    .button-accept {
        @apply text-primary bg-green hover:bg-dark-green hover:no-underline hover:text-primary;
    }

    .button-danger {
        @apply text-white bg-pastel-red/60 hover:bg-dark-red/60 hover:no-underline hover:text-white !important;
    }

    .button-secondary {
        @apply text-white bg-blue hover:bg-pastel-blue hover:no-underline hover:text-white;
    }

    .button-doctor {
        @apply text-primary bg-blue hover:bg-pastel-blue hover:no-underline hover:text-primary;
    }

    .button-normal {
        @apply w-[6rem] !important;
    }

    .button-mini {
        @apply w-[4rem] text-xs !important;
    }

    .button-large {
        @apply w-[10rem];
    }

    .button-calendar {
        @apply bg-blue text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-blue text-[12px] hover:no-underline hover:text-white;
    }

    .button-draft {
        @apply bg-thistle text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-mauve text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-booked {
        @apply bg-green text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-dark-green text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-declined {
        @apply bg-pastel-red text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-red text-[12px] hover:no-underline hover:text-white !important;
    }

    .calendar-link {
        @apply cursor-pointer text-white hover:bg-pastel-blue;
    }

    .calendar-tag {
        @apply bg-primary border-primary p-2 text-primary font-semibold flex items-center justify-center;
    }

    .card-text {
        @apply col-span-5 flex items-start justify-start;
    }
    .card-title {
        @apply col-span-4 font-bold;
    }

    .clinic-card {
        @apply col-span-3 bg-white text-primary font-normal p-4 my-8 rounded-lg h-[35.5rem] hover:bg-blue/10 shadow-primary;
    }

    .clinic-card-phone {
        @apply w-full bg-white text-primary font-normal p-2 my-4 h-[35.5rem] hover:bg-blue/10 shadow-primary border-primary;
    }

    .clinic-show-container {
        @apply  bg-primary  p-4;
    }

    .crew-container {
        @apply  m-4 rounded-lg p-8 shadow-primary bg-white min-h-[75vh];
    }
    .devise-links {
        @apply mt-4 flex flex-col justify-between items-center;
    }

    .devise-links a {
        @apply hover:text-blue;
    }

    .devise-main {
        @apply flex flex-col items-center justify-center;
    }

    .devise-main .form-item {
        @apply col-span-3 flex flex-col items-center justify-center p-2;
    }

    .devise-main form {
        @apply w-[50vh] relative;
    }

    .devise-main .form-action {
        @apply col-span-3 flex flex-col items-center justify-center p-2;
    }

    .devise-main-phone {
        @apply flex flex-col items-center justify-center p-8;
    }

    .devise-main-phone .form-item {
        @apply col-span-3 flex flex-col items-center justify-center p-2 text-2xl;
    }

    .devise-main .form-item label {
        @apply mb-2
    }

    .devise-main .form-item em {
        @apply mb-2
    }

    .devise-main-phone form {
        @apply w-full;
    }

    .devise-main .form-check {
        @apply col-span-3 mt-4;
    }

    .devise-main .form-check input[] {
        @apply ring-dark-red;
    }

    .devise-main-phone .form-check {
        @apply col-span-3 mt-4;
    }

    .devise-main-phone .form-check label {
        @apply mb-4;
    }

    .devise-main-phone .form-action {
        @apply col-span-3 flex flex-col items-center justify-center p-2 mt-8;
    }

    .dropdown {
        @apply bg-white border-primary border-2 border-solid rounded-sm absolute top-16 right-8 p-2 min-w-[15rem] flex flex-col p-2;
    }

    .dropdown a {
        @apply hover:text-primary hover:bg-white m-2 p-2 border-primary rounded-md border-2 border-solid hover:border-primary inline-block;
    }

    .dropdown-item {
        @apply hidden bg-white divide-y divide-white rounded-lg shadow-primary border-primary w-44;
    }

    .dropdown-text {
        @apply text-sm text-primary font-normal block px-4 py-2 hover:bg-blue hover:text-white;
    }

    .form-item {
        @apply col-span-1 flex flex-col items-center justify-center p-2;
    }

    .form-check-boxes {
        @apply w-full h-full border-primary border-2 grid grid-cols-2 gap-0  p-2 !important;
    }

    .form-language {
        @apply w-full h-[2.75rem] border-primary border-2 flex items-center justify-between !important;
    }

    .form-file {
        @apply grid grid-cols-1 p-2;
    }

    .form-file-item {
        @apply bg-white rounded-md border-primary border-2 min-w-full p-2 !important;
    }

    .devise-main .form-check {
        @apply col-span-3 flex flex-col items-center justify-between;
    }

    .devise-main .form-check :first-child {
        @apply p-2;
    }

    .form-check {
        @apply col-span-1 flex flex-col items-center justify-between ;
    }

    .form-action {
        @apply col-span-1 col-start-2  mt-4 flex  flex-col items-center justify-center p-4;
    }

    .holiday-button {
        @apply bg-pastel-red/20 hover:bg-pastel-red/40 hover:text-white text-pastel-red/60
    }

    .icon-tag {
        @apply min-w-[6rem] col-span-1 bg-white flex flex-col p-2 items-center justify-center rounded-lg cursor-pointer text-sm shadow-primary hover:bg-blue hover:text-white
    }

    .navbar {
        @apply mt-[1px] bg-primary h-24 sticky top-0 z-50 text-primary grid grid-cols-12 gap-4 border-blue/30 border-b-2 border-solid py-2 pr-8;
    }
    
    .pagy {
        @apply flex space-x-1 font-normal text-sm;
        a:not(.gap) {
            @apply block rounded-lg py-2 px-4 bg-blue text-white;
            &:hover {
                @apply bg-pastel-blue;
            }
            &:not([href]) { /* disabled links */
                @apply text-white bg-pastel-blue cursor-default;
            }
            &.current {
                @apply text-white bg-pastel-blue;
            }
        }
        /*label {*/
        /*    @apply inline-block whitespace-nowrap bg-pastel-red rounded-lg px-3 py-0.5;*/
        /*    input {*/
        /*        @apply bg-pastel-red border-none rounded-md;*/
        /*    }*/
        /*}*/
    }

    .price-list-card {
        @apply col-span-3 shadow-primary rounded-lg p-6 font-normal hover:bg-blue/10 grid grid-cols-7 gap-2;
    }

    .review-bar {
        @apply w-full bg-light-green rounded h-2.5 me-2;
    }

    .review-progress {
        @apply bg-green h-2.5 rounded;
    }

    .review-tag {
        @apply bg-green text-white text-lg font-semibold inline-flex items-center p-1.5 rounded;
    }

    .shadow-primary {
        @apply shadow-lg shadow-blue/50;
    }

    .small-counter {
        @apply absolute text-white inline-flex items-center justify-center w-6 h-6 text-xs font-bold bg-pastel-red border-2 border-pastel-red rounded-full -top-2 -end-2 !important;
    }


    .spec-tag {
        @apply mb-[2px] flex flex-row items-center shadow-primary justify-center text-[0.7rem] border-primary font-bold  bg-blue text-white border-2 border-solid rounded-md;
    }


    .notice {
        @apply absolute py-2 px-3 bg-green top-12 left-12 text-white font-medium rounded-lg;
    }

    .flag-container {
        @apply grid grid-cols-2 gap-2;
    }

    .flag {
        @apply col-span-1 w-[2rem];
    }

    .icon {
        @apply text-primary hover:text-pastel-blue stroke-2 w-12;
    }
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */