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

@import "../../vendor/filament/filament/resources/css/app.css";

* {
    font-family: "Nunito", sans-serif;
}

$primary-250: theme("colors.green.250");
$primary-450: theme("colors.green.450");
$primary-550: theme("colors.green.550");
$primary-650: theme("colors.green.650");
$primary-750: theme("colors.green.750");

.cp-attendance-clock-widget {
    display: contents;
    .filament-tables-container {
        > .filament-tables-table-container
            > table.filament-tables-table
            > thead {
            display: none;
        }
        > .filament-tables-table-container > table {
            @apply divide-y-0;
        }
        > .filament-tables-table-container
            > table.filament-tables-table
            > tbody
            > tr:hover {
            @apply hover:bg-transparent
        }
        > .filament-tables-pagination-container {
            display: none;
        }
        @apply h-full flex justify-center items-center;
    }

    .cp-attendance-clock-btn-wrap {
        .cp-attendance-clock-btn {
            .filament-button-icon {
                margin: 0.25rem 0;
                @apply h-[6rem] w-auto;
            }
            @apply uppercase flex-col;
        }
        @apply flex-auto justify-center;
    }
}

.attendence-calendar {
    > .filament-tables-component {
        > .filament-tables-container {
            @apply h-full shadow-none;
        }
        @apply h-full;
    }
}

.login {
    align-self: center;
    @apply xxs:max-w-[77%] sm:max-w-full
}

.login .filament-forms-text-input-component input {
    @apply rounded-3xl;
}

.login .filament-button {
    @apply rounded-full bg-green-750 hover:bg-green-650 relative right-[25px] min-w-[30%];
}

.login .filament-button:focus {
    outline: 0 ;
    @apply bg-slate-50 ring-offset-0 ring-0 text-white focus:shadow-none;
}

#email {
    @apply w-full p-[15px];
}

.password {
    @apply transition duration-75 rounded-lg  disabled:opacity-70  max-w-full ;
}

.login .filament-forms-text-input-component {
    @apply contents;
}

#password {
    border-top-right-radius: 0 ;
    border-bottom-right-radius: 0 ;
    @apply min-w-[79%] bg-white p-[15px];
}

.password input:focus {
    @apply bg-white shadow-none;
}

#email input:focus {
    @apply bg-white shadow-none;
}

.login-button span {
    @apply px-[9px];
}

#password:focus {
    @apply bg-white shadow-none;
}

#email:focus {
    @apply bg-white shadow-none;
}

.remember{
    margin-left: 5px;
}

.filament-sidebar-nav {
    @apply bg-green-750  dark:bg-gray-800 dark:border-gray-700 dark:from-gray-800 dark:to-gray-800;
}

.filament-sidebar-nav .border-t {
    @apply border-green-750;
}

.filament-sidebar-item {
    @apply text-white;
}

.filament-sidebar-item .inline-flex {
    @apply text-primary-50 bg-primary-700 dark:bg-gray-900 dark:text-white;
}

.filament-sidebar-group svg {
    @apply text-white;
}

.tracking-wider {
    @apply text-sm text-green-750;
}

.filament-brand {
    @apply text-green-750;
}

.dashboard-nav {
    @apply bg-green-650 rounded-r-full py-2 border-green-450 border border-l-0;
}

.active-nav {
    @apply bg-green-650 rounded-r-full border-green-450 border border-l-0 -ml-[2px];
}

.custom-button {
    @apply bg-green-750 text-white ;
}

.custom-button:hover {
    @apply hover:bg-green-650 hover:text-white ;
}

.custom-button:active {
    @apply active:bg-green-650 active:text-white;
}

.custom-button:focus {
    @apply  focus:ring-offset-0 focus:ring-0 focus:text-white focus:bg-green-650 focus:outline-0 focus:shadow-none;
}

.filament-forms-text-input-component input{
    @apply focus:ring-green-550
}

.filament-button.bg-white {
    @apply bg-slate-50 text-black;
}

.filament-button.bg-white:hover {
    @apply bg-slate-50 text-black;
}

.filament-button.bg-white:active {
    @apply bg-slate-50 text-black;
}

.filament-button.bg-white:focus {
    @apply focus:bg-slate-50 focus:ring-offset-0 focus:ring-0 focus:text-black focus:outline-0 focus:shadow-none;
}

.filament-dropdown-list-item:hover {
    @apply   hover:bg-green-750 hover:text-white;
}

.filament-dropdown-list-item:focus {
    @apply focus:bg-green-750 focus:text-white;
}

.clock-btn > button {
    @apply bg-white shadow-none
}

.clock-btn > button:focus {
    @apply focus:outline-0 focus:shadow-none
}

.custom-cl {
    @apply bg-green-350;
}

.custom-cl:checked {
    @apply bg-green-650;
}

.custom-cl:focus {
    @apply focus:bg-green-650;
}

.custom-cl:hover {
    @apply hover:bg-green-650;
}

.filament-tables-search-input input{
    @apply focus:ring-green-550
}

.attendance-calender-item {
    display: flex;
    justify-content: center;
    align-items: center;
    @apply p-0
}

.filament-button.bg-primary-600 {
    @apply bg-green-750 text-white;
}

.filament-button.bg-primary-600:hover {
    @apply hover:bg-green-650 hover:text-white;
}

.filament-button.bg-primary-600:active {
    @apply active:bg-green-650 active:text-white;
}

.filament-button.bg-primary-600 :focus {
    @apply focus:bg-green-650 focus:ring-offset-0 focus:ring-0 focus:text-white focus:outline-0 focus:shadow-none;
}

.filament-tables-component {
    .filament-tables-container {
        border-color: $primary-250;
    }
}

.filament-tables-table-container {
    @apply border-green-250;
}

.filament-tables-pagination-container {
    @apply border-green-250;
}

.filament-tables-row {
    @apply border-green-250;
}

.filament-tables-row:hover {
    @apply hover:bg-[#f0fffa] hover:transition hover:delay-75 hover:duration-200 hover:ease-out hover:shadow-lg;
}

.filament-tables-table {
    @apply border-green-250;
}

.filament-tables-table tbody {
    @apply border-green-250;
}

.attendanceClock:hover {
    @apply transition delay-150 duration-300 ease-in-out shadow-2xl;
}

.btn-cmn:hover {
    @apply hover:bg-green-750
}


.hover-effect {
    background-image: linear-gradient(
        to right,
        $primary-750,
        $primary-750 50%,
    );
    background-size: 200% 100%;
    background-position: -100%;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.hover-effect:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0.5px;
    transition: all 0.3s ease-in-out;
}

.hover-effect:hover {
    background-position: 0;
}

.hover-effect:hover::before {
    width: 100%;
}

.filament-forms-tabs-component-header{
    @apply bg-emerald-50 ;
}

.filament-sidebar-nav ul {
    @apply pl-0
}

.filament-sidebar-group p{
    @apply text-white text-[16px]
}



.filament-sidebar-item a{
    @apply  bg-transparent pr-[18px]
}

.filament-sidebar-item a:hover{
    @apply hover:bg-transparent
}

.filament-sidebar-item a:focus{
    @apply focus:bg-transparent
}

.filament-sidebar-item a:active{
    @apply active:bg-transparent
}

.filament-sidebar-item{
    padding-left: 32px;
    border-left: 0px;
    border-color: $primary-750;

}

.filament-sidebar-item:hover{
    background:  $primary-650;
    @apply hover:rounded-tr-[40px] hover:rounded-br-[40px]
}

.filament-sidebar-item:focus{
    background:  $primary-650;
    @apply rounded-tr-[40px] rounded-br-[40px]
}

.filament-sidebar-item {
    --clr: #fff;
    --outline: 2px solid #54b999;
    color: var(--clr);
    margin-left: -2px;
    transition: outline-width 200ms ease, outline-offset 200ms ease;
    padding-top: 3px;
    padding-bottom: 3px;
}

.filament-sidebar-item:hover,
.filament-sidebar-item:focus {
    outline: var(--outline);
    outline-width: 2px;
    outline-offset: -2px;
    margin-left: -2px;
}

.filament-sidebar-item-active {
    @apply bg-green-650 rounded-r-full border-green-450 border border-l-0 -ml-[2px];
}

.filament-sidebar-header{
    border-bottom: 0px;
    justify-content: normal ;
    @apply bg-green-750 h-[6rem]
}

.filament-sidebar-header::before{
    background-image: none;
}

.filament-sidebar-header div {
    height: 74px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    @apply bg-gradient-to-r from-green-650 to-green-750 pr-0
}
.filament-sidebar-header div button svg{
    color: #fff;
    height: 32px;
    width: 32px;
}

.filament-sidebar-header div a{
    height: 100%;
    width: 100%;
    @apply ml-0
}

.filament-sidebar-header div a div{
    color: #fff;
    background-image: url('../../public/assets/topBarIcon.svg');
    height: inherit;
    width: inherit;
    background-repeat: round;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.filament-sidebar-group button {
    margin-left: 10px;
}

.filament-sidebar-close-button svg path{
    display: none;
}

.filament-sidebar-close-button svg {
    background-image: url('../../public/assets/openMenu.svg');
}

.filament-sidebar-close-button{
    padding-left: 15px;
    padding-right: 5px;
    width: 85%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: $primary-650;
    @apply py-[35px]
}

.filament-sidebar-close-button:hover{
    @apply hover:bg-green-650
}

.filament-sidebar-close-button:focus{
    @apply focus:bg-green-650
}

.filament-sidebar-nav ul li:first-child{
    .filament-sidebar-item span{
        text-transform: uppercase;
    }
}

.filament-sidebar-nav ul li{
    .filament-sidebar-item span{
        font-size: 16px;
        font-weight: 600;
    }
}

.filament-sidebar-group button p{
    font-weight: 800;
}

.filament-sidebar-nav > ul > li:not(.filament-sidebar-group){
    display: none;
}
