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

@layer base
:root {
    font-size: clamp(16px, 2vmax, 20px);
    --vh: 1vh;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

@supports (-webkit-touch-callout: none) {
    .h-mobile-screen {
        height: calc(var(--vh) * 100);
        padding-top: var(--sat);
        padding-bottom: var(--sab);
        padding-left: var(--sal);
        padding-right: var(--sar);
    }
}

/* Ensure content is always visible on mobile */
@media screen and (max-width: 767px) {
    .h-mobile-screen {
        min-height: calc(var(--vh) * 100);
    }
}

@media screen and (display-mode: standalone) {
    #main-footer {
        padding-bottom: 2rem;
    }

    .footer {
        padding-bottom: 2rem;
    }
}

.content-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    position: relative;
    flex: 1 1 0%;
}

i {
    color: inherit;
    font-size: inherit;
}

.dashboard {
    background: linear-gradient(45deg,
    theme('colors.primary.200'),
    theme('colors.accent.200'),
    theme('colors.secondary.200')
    );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

input[type="text"], input[type="number"], input[type="date"], textarea, select {
}

input[type="checkbox"] {
    @apply rounded border-gray-500 text-primary focus:ring-primary h-5 w-5 disabled:text-gray-500;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
    @apply min-h-12
}

h1,
h2,
h3 {
    @apply font-bold text-gray-700;
}

h1 {
    @apply text-2xl;
}

h2 {
    @apply text-xl;
}

h3 {
    @apply text-lg;
}

nav {
    @apply flex justify-between gap-4 relative w-full px-4 p-2 items-center;
}

select {
    @apply h-10
}

/* Style for any element with the 'busy' attribute */
[busy]:not(#modal):not(#show):not(#forms):not(#list):not(#comments) {
    position: relative;
}

#modal:not(:empty) {
    pointer-events: all;
}

[busy] {
    pointer-events: none; /* Prevent interaction with the element when busy */
}

span.loading {
    display: none;
    opacity: 0;
}

/*[busy] span.loading:first-child {*/
/*    display: block;*/
/*    opacity: 1;*/
/*}*/

/*!* Add the blur effect for the background *!*/
/*!*[busy] > span.loading {*!*/
/*[busy] span.loading:first-child:empty {*/
/*    display: block;*/
/*    opacity: 1;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    backdrop-filter: blur(2px); !* The blur effect *!*/
/*    z-index: 20; !* Place it below the spinner *!*/
/*    transition: opacity 0.5s ease-in-out;*/
/*    transition-delay: 0.5s;*/
/*}*/

/*!* Add a pseudo-element for the spinner *!*/
/*[busy] span.loading:first-child:empty::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    width: 40%; !* Scales proportional to the parent element *!*/
/*    height: 40%; !* Match width for a circular spinner *!*/
/*    min-width: 1.25rem; !* Set a minimum size for small elements *!*/
/*    min-height: 1.25rem;*/
/*    max-width: 5rem; !* Set a maximum size for large elements *!*/
/*    max-height: 5rem;*/
/*    transform: translate(-50%, -50%);*/
/*    border: 0.25rem solid rgba(0, 0, 0, 0.2); !* Spinner border (background) *!*/
/*    border-top: 0.5rem solid rgba(0, 0, 0, 0.6); !* Spinner border (foreground) *!*/
/*    border-radius: 50%;*/
/*    animation: spin 1s linear infinite; !* Add spinning animation *!*/
/*    transition-delay: 0.5s;*/
/*    z-index: 40;*/
/*}*/

/* Spinner animation */
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

label {
    @apply font-bold text-lg text-gray-700;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* Everything related to flash styling */
#flash-messages {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 30px;
    width: 100%;
    gap: 6px;
}

.flash {
    position: relative;
    padding: 10px 15px 10px 40px; /* Add space for the icon */
    width: 300px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    z-index: 100;
    animation: slideFlash 1s, fadeOut 0.5s 4s forwards;
    @apply shadow-md;
}

.flash.notice {
    @apply bg-secondary text-white
}

.flash.error {
    background-color: #f56565; /* Red for error */
    color: white;
}

.flash.success {
    background-color: #48bb78; /* Teal for success */
    color: white;
}

.flash.info {
    background-color: #4299e1; /* Blue for informational messages */
    color: white
}

.flash.alert {
    background-color: #fbbf24;
    color: white;
}

.flash::before {
    content: ""; /* Default - can override for specific types */
    font-family: "Font Awesome 5 Free"; /* Ensure FontAwesome is loaded */
    font-weight: 900; /* Use FontAwesome's solid font style */
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: white;
}

/* Specific Flash Types with Icons */
.flash.notice::before {
    content: "\f00c"; /* FontAwesome check icon (success) */
}

.flash.alert::before {
    content: "\f071"; /* FontAwesome exclamation-triangle icon (error) */
}

.flash.success::before {
    content: "\f058"; /* FontAwesome check-circle icon (success) */
}

.flash.info::before {
    content: "\f05a"; /* FontAwesome info-circle icon (info) */
}

/* Slide-in animation for showing flash messages */
@keyframes slideFlash {
    0% {
        transform: translateY(-50px); /* Start above the viewport */
    }
    100% {
        transform: translateY(0); /* Final position */
    }
}

/* Slide element into view from the bottom */
.slideDown {
    animation: slideDown 500ms ease-in-out forwards;
}

@keyframes slideDown {
    0% {
        transform: translateY(0); /* Start fully below the view */
    }
    100% {
        transform: translateY(100%); /* End in its original position */
    }
}

/* Slide element out of view downward */
.slideUp {
    animation: slideUp 500ms ease-in-out forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%); /* start out of view */
    }
    100% {
        transform: translateY(0);
    }
}

/* Optional: Fade-out animation (if you want it to slide out as well) */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Optional: Add a class for removal animations */
.flash.fade-out {
    animation: fadeOut 1s ease-in forwards;
    animation-delay: 4s;
}

@layer components {
    .row-frame {
    }

    .row-item {
        @apply flex w-full;
    }

    /* Default turbo frame error class */
    .turbo-frame-error {
        display: none;
    }

    .field_with_errors {
        @apply !border-red-500;
        @apply !text-red-500;

        label {
            @apply !text-red-500;
        }

        input {
            @apply !border-red-500;
            @apply !text-black;
        }
    }

    .break-word {
        word-break: break-word;
    }

    .toggle-lg {
        @apply col-start-1 col-span-2 relative p-1 w-[72px] h-10 bg-gray-400 rounded-full
        peer-focus:ring-4 peer-focus:ring-primary peer-checked:after:translate-x-full
        peer-checked:bg-primary
        rtl:peer-checked:after:-translate-x-full
        peer-checked:after:border-white
        after:content-['']
        after:absolute after:top-1
        after:start-1
        after:bg-white
        after:border-gray-300
        after:border
        after:rounded-full
        after:h-8
        after:w-8
        after:transition-all;
    }

    .checkbox-container {
        @apply min-h-0 overflow-y-auto border-2 border-gray-300 rounded-lg bg-white w-full mt-[-1px];

        .checkbox-header {
            @apply flex items-center gap-4 bg-primary px-4 py-2 sticky top-0;
        }

        .checkbox-header-gray {
            @apply flex items-center gap-4 bg-gray-300 text-black px-4 py-2 sticky top-0;
        }

        .checkbox-row {
            @apply flex items-center gap-4 px-4 py-2 border-b border-gray-300;
        }
    }

    .bg-fade {
        @apply bg-gradient-to-br from-background from-40% to-primary-200 to-90%;
    }

    /* Show frame slides in from the right. The list frame will then become blurry */
    /* Remove content of the show frame will make it slide out and return to not displayed */
    /*turbo-frame#comments,*/
    turbo-frame#show,
    turbo-frame#forms {
        position: absolute;
        top: 0;
        left: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 5;
    }

    /* Add this specifically to comments because there were constant safari repainting issues with it and i assumed
    no longer transforming it would help, and it does but i'm not sure that's correct */
    turbo-frame#comments {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
        pointer-events: none;
    }

    turbo-frame#comments:not(:empty) {
        pointer-events: auto;
        /* above show frame */
        z-index: 10;
    }

    /*turbo-frame#comments:not(:empty),*/
    turbo-frame#show:not(:empty),
    turbo-frame#forms:not(:empty) {
        transform: translateX(-100%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
    }

    turbo_frame#forms:has(#modal:not(:empty)) {
        pointer-events: none;
    }

    .slide-out {
        animation: slideOutX 0.2s forwards; /* Animates the sliding motion */
    }

    @keyframes slideOutX {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(100%); /* Moves out to the right */
        }
    }

    #nav-menu {
        transform: translateX(-100%); /* Menu starts off-screen by default */
        transition: transform 0.3s ease-in-out; /* Ensures smooth sliding */
    }

    #nav-menu.slide-in {
        transform: translateX(0); /* Slides the menu into the viewport */
    }

    /*turbo-frame#main {*/
    /*    @apply relative grow overflow-y-auto;*/
    /*    overflow-x: hidden;*/
    /*}*/
    /* the #list disappears when items are being shown */
    /*turbo-frame#list {*/
    /*    opacity: 1;*/
    /*    transition: opacity 0.1s ease-in-out;*/
    /*}*/
    /*turbo-frame#main:has(#show:not(:empty)) #list {*/
    /*    pointer-events: none;*/
    /*    opacity: 0.3;*/
    /*}*/
    /*turbo-frame#main:has(#modal:not(:empty)) #forms {*/
    /*    pointer-events: none;*/
    /*    filter: blur(1px);*/
    /*}*/
    /*turbo-frame#main:has(#modal:not(:empty)) #list {*/
    /*    pointer-events: none;*/
    /*    opacity: 0.3;*/
    /*}*/
    /* the google map takes a second to load, so we fade it in */
    #gmap {
        opacity: 1;

        &.loading {
            opacity: 0;
        }

        transition: opacity 0.1s ease-in-out;
    }

    #gmap.loading::before {
        content: "Loading...";
        position: absolute;
        display: flex;
        opacity: 1;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(211, 207, 207, 0.5);
        z-index: 20;
    }

    details > summary {
        list-style: none;
    }

    details > summary::marker,
    details > summary::-webkit-details-marker {
        display: none;
    }

    details > summary svg {
        @apply transition-transform duration-200 transform rotate-0;
    }

    details[open] > summary svg {
        @apply transform rotate-90;
    }

    .user-avatar {
        @apply flex items-center justify-center h-[2rem] w-[2rem] font-bold text-lg rounded-full flex-shrink-0;
    }

    .circle-icon {
        @apply flex items-center justify-center border-2 border-primary text-primary h-8 w-8 rounded-full flex-shrink-0;
    }

    /* some kind of status */
    .badge {
        @apply flex items-center justify-center h-12 font-semibold px-4 gap-2 text-base font-medium rounded-md
    }

    .badge-accepted {
        @apply bg-accept text-white border-accept;
    }

    .badge-declined {
        @apply bg-error text-white border-error;
    }

    .badge-green {
        @apply bg-accept text-white;
    }

    .badge-blue {
        @apply bg-blue-500 text-white;
    }

    .badge-red {
        @apply bg-error text-white;
    }

    /* Button styles */
    .btn-link {
        @apply h-8 border rounded-xl text-secondary active:text-white active:bg-gray-300 bg-white border-secondary px-2;
        @apply touch-manipulation select-none;
        min-height: 44px; /* Minimum touch target size */
    }

    .btn {
        @apply flex min-h-[2.5rem] min-w-[2.5rem] px-2 justify-center items-center border rounded-xl shadow-md text-base font-medium gap-2 whitespace-nowrap;
        @apply touch-manipulation select-none active:scale-95 transition-transform duration-100;
        min-height: 44px; /* Minimum touch target size */

        &.disabled,
        &:disabled {
            @apply bg-gray-500 text-white border-gray-500 pointer-events-none;
        }
    }

    .btn-short {
        @apply px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap;
        @apply touch-manipulation select-none active:scale-95 transition-transform duration-100;
        min-height: 44px; /* Minimum touch target size */
    }

    .btn-icon {
        @apply flex max-h-[2.5rem] max-w-[2.5rem] aspect-square p-2 justify-center items-center border rounded-lg shadow-md text-2xl font-bold whitespace-nowrap;
        @apply touch-manipulation select-none active:scale-95 transition-all duration-100;
        @apply active:text-gray-500;
        min-height: 44px; /* Minimum touch target size */
        min-width: 44px; /* Minimum touch target size */

        > i {
            font-size: inherit;
        }

        &.nude {
            @apply rounded-none border-none bg-transparent shadow-none;
        }
    }

    .btn-primary {
        @apply border-primary bg-primary text-white;

        &:active {
            @apply bg-primary-700 border-primary-700;
        }
    }

    .btn-primary-outline {
        @apply text-primary bg-white border-primary active:bg-primary-500 border-2;
    }

    .btn-secondary-outline {
        @apply text-secondary bg-white border-secondary border-2;

        &:active {
            @apply bg-secondary-300 text-white border-secondary-300;
        }

    }

    .btn-secondary {
        @apply border-secondary-300 bg-secondary-300 text-gray-700;

        &:active {
            @apply bg-secondary-700 text-white border-secondary-700;
        }
    }

    .btn-green {
        @apply border-green-500 bg-green-500 text-white;

        :active {
            @apply bg-green-700 text-white border-green-700;
        }
    }

    .btn-red {
        @apply border-red-500 bg-red-500 text-white;

        :active {
            @apply bg-red-700 text-white border-red-700;
        }
    }

    .btn-accept {
        @apply border-accept bg-accept active:bg-accept text-white;

        &:active {
            @apply bg-primary text-white;
        }
    }

    .btn-decline {
        @apply border-secondary bg-secondary active:bg-secondary-700 text-white;
    }

    /* Consider removing */
    .btn-pending {
        @apply text-status-pending font-semibold border-2 border-status-pending bg-white disabled:bg-disabled;

        &:hover,
        :active {
            @apply bg-status-pending-700 text-white border-status-pending-700;
        }

        &.active {
            @apply bg-status-pending-700 text-white border-status-pending-700;

            &:hover,
            :active {
                @apply bg-status-pending border-status-pending-500 text-white;
            }
        }
    }

    .btn-accepted {
        @apply text-accept border-2 border-accept bg-white disabled:bg-disabled;

        &:hover,
        :active {
            @apply text-white bg-accept;
        }

        &.active {
            @apply bg-accept text-white;

            &:hover,
            :active {
                @apply bg-accept-500 border-accept-500 border-accept;
            }
        }
    }

    .btn-owned {
        @apply text-status-owned border-2 border-status-owned bg-white disabled:bg-disabled;

        &:hover,
        :active {
            @apply bg-status-owned-700 border-status-owned-700 text-white;
        }

        &.active {
            @apply bg-status-owned-700 text-white border-status-owned-700;

            &:hover,
            :active {
                @apply bg-status-owned-500 border-status-owned-500 border-status-owned-700;
            }
        }
    }

    .btn-toolbar {
        @apply bg-white text-black border-2 shadow-none border-black active:bg-gray-500 active:text-white;

        &:hover,
        &:active {
            @apply bg-gray-500 border-gray-500 text-white;
        }

        &.active {
            @apply bg-gray-500 border-gray-500 text-white hover:text-black hover:bg-white;
        }
    }

    .btn-toolbar-outline {
        @apply bg-white border-gray-700 text-gray-700 bg-white shadow-none;

        &.active,
        &:active {
            @apply bg-primary text-white;
        }
    }

    .details-btn {
        @apply relative border rounded-lg w-full;
    }

    /* google places adr format address */
    details.place-container {
        @apply flex flex-col open:gap-4 relative rounded-lg border bg-white text-black w-full;
    }

    details.place-container.place-selected {
        @apply border-primary bg-primary text-white;

        #google-places-search {
            @apply hidden
        }
    }

    details.child-checked {
        @apply bg-primary text-white;
    }

    .place-result {
        @apply p-2 bg-white text-black hover:bg-blue-200
    }

    .place-name {
        @apply text-black font-bold
    }

    .place-address {
        @apply text-gray-500 text-sm
    }

    /* a card for list views */
    .card {
        @apply p-4 rounded-lg shadow-lg bg-white border border-2 border-gray-300;
        @apply grid grid-cols-4 gap-2 col-end-auto;
    }

    .card {
        @apply p-4 rounded-lg shadow-lg bg-white border border-2 border-gray-300;
        @apply flex flex-col gap-2 justify-start;

    }

    .card-info {
        @apply col-start-1 col-span-3 row-start-2 row-span-1 flex gap-2 self-center items-center
    }

    .card-time {
        @apply col-start-4 col-span-1 row-start-1 row-span-1 flex flex-col items-center self-center justify-self-end;
        @apply group-[.full]:row-start-2 group-[.full]:col-start-1 group-[.full]:col-span-4;
        @apply group-[.full]:justify-self-center;
    }

    .card-time-hours {
        @apply row-start-2 row-span-1 col-start-1 col-span-4 self-center justify-self-center;
    }

    .card-time-date {
        @apply row-start-3 row-span-1 col-start-1 col-span-4 self-center justify-self-center;
    }

    .card-user-count {
        @apply col-start-4 col-span-1 row-start-2 row-span-1 self-center justify-self-end
    }

    .card-users {
        @apply col-start-1 col-span-4 row-start-5;
    }

    .card-location {
        @apply row-start-2 row-span-1 col-start-1 col-span-4 flex justify-between self-center;
        @apply group-[.full]:row-start-4;
    }

    /* scrollbar */
    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollbar-hidden::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .scrollbar-hidden {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    /* first visible item of list should have top padding */
    .list:not(:empty):first-child {
    }

    /*.list turbo-frame:not([hidden]):last-of-type {*/
    /*    @apply pb-4;*/
    /*}*/
    .empty-view:only-child {
        @apply block;
    }

    /* google map container dimensions and also used for skeleton */
    .map-size {
        @apply h-80 w-full
    }

    /* default grid layout, usually nested */
    .d-grid {
        @apply grid grid-cols-4 gap-4 auto-rows-min;
    }

    /* the responsive grid layout */
    .r-grid {
        @apply grid grid-cols-4 gap-4;
        @apply sm:grid-cols-8;
        @apply md:grid-cols-12;
    }

    /* grid layout for card lists with time markers */
    .t-grid {
        @apply grid grid-cols-6 gap-2;
    }

    /* notificaiton bell icon styling */
    .notifications-granted {
        @apply text-green-500;
    }

    .notifications-denied {
        @apply text-black;
    }

    .notifications-pending {
        @apply text-yellow-500;
    }

    .field-container {
        @apply bg-white/80 rounded-lg p-4;
    }

    .field-label {
        @apply text-gray-500 text-base font-normal block;
    }

    .field-input {
        @apply w-full bg-transparent border-0 border-b-2 border-gray-300 focus:border-primary focus:ring-0 placeholder:text-gray-500;
    }

    .field-textarea {
        @apply w-full bg-transparent border-0 border-b-2 border-gray-300 focus:border-primary focus:ring-0 placeholder:text-gray-500 min-h-[100px];
    }

    .nav-active {
        @apply bg-secondary text-white border-transparent;
    }

    .nav-inactive {
        @apply bg-transparent text-black border-black;
    }

    .tour {
        &:has(.dashboard-tour) {
            /* causes issues on iOS*/
            /*&::before {*/
            /*    content: "";*/
            /*    position: fixed;*/
            /*    pointer-events: auto;*/
            /*    isolation: isolate; !* Create new stacking context *!*/
            /*    top: 0;*/
            /*    left: 0;*/
            /*    width: 100%;*/
            /*    height: 100%;*/
            /*    z-index: 30;*/
            /*    @apply bg-black/50;*/
            /*}*/
            #dashboard-scroll {
                overflow-y: visible;
                overflow-x: clip;
            }
        }
        .dashboard-tour {
            position: relative;
            z-index: 50;
            pointer-events: none;
            .tour-step {
                pointer-events: auto;
                opacity: 0;
                min-width: 150px;
                min-height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                z-index: inherit;
                animation: appear 0.2s ease-out forwards;
                animation-delay: 0.1s;
                transform-origin: center;
                transform: translateZ(0); /* Force GPU acceleration */
            }
        }
    }

    @keyframes fade-overlay {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 0.5;
        }
    }
}

@layer utilities {
    @keyframes pulse-subtle {
        0% {
            opacity: 1;
            background: linear-gradient(to right, rgb(254 249 195), rgb(251 191 36));
        }
        50% {
            opacity: 0.9;
            background: linear-gradient(to right, rgb(252 211 77), rgb(245 158 11));
        }
        100% {
            opacity: 1;
            background: linear-gradient(to right, rgb(254 249 195), rgb(251 191 36));
        }
    }

    .animate-pulse-subtle {
        background: linear-gradient(-45deg,
        theme('colors.yellow.700'),
        theme('colors.yellow.300'),
        theme('colors.yellow.700')
        );
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }

    .animate-yellow-text {
        background: linear-gradient(-45deg,
        theme('colors.green.700'),
        theme('colors.green.300'),
        theme('colors.green.700')
        );
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ease-in-container {
        animation: appear 0.3s ease-out forwards;
        transform-origin: top;

        &:empty {
            animation: disappear 0.3s ease-out forwards;
            transform-origin: top;
        }
    }

    @keyframes appear {
        0% {
            opacity: 0;
            transform: scaleY(0);
        }
        100% {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    @keyframes disappear {
        0% {
            opacity: 1;
            transform: scaleY(1);
        }
        100% {
            opacity: 0;
            transform: scaleY(0);
            display: none;
        }
    }

}