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

@layer base {
    :root {
        --primary-color: #FDB814;
        --primary-color-dark: #f3ce76;
        --secondary-color: #2e434e;
        --primary-text-color: #2e434e;
        --secondary-text-color: #c0c0c0;
        --tetiary-color: #c0c0c0;
        --app-bg: whitesmoke;
        --icon-green: green;
        --table-bg: #d7dbde;

        /*wizard fix*/
        svg {
            display: unset;
            vertical-align: unset;
        }
      
    }

    .header {
        background: #ebebeb !important;
    }

   
    .sidebar {
        background-color: var(--primary-color);
    }

    .search {
        @apply border-[--secondary-color] text-[--secondary-color] py-2 pl-4 pr-16 text-2xl rounded-xl hover:contrast-50
    }

    .underline {
       text-decoration:underline !important;
    }
    .btn-1 {
        @apply text-[--primary-color] border-0 bg-gray-200 w-[25px] h-[25px] hover:bg-gray-100
    }

    .btn {
        @apply rounded px-4 py-1
    }

    .btn-outline-primary {
        @apply border-[var(--primary-color)] text-[var(--primary-color)] hover:bg-[--primary-color] hover:text-[--primary-text-color] transition
    }

    .btn-primary {
        @apply bg-[--primary-color] text-[--primary-text-color] hover:contrast-150 transition hover:scale-105 border-0
    }

    .btn-outline-secondary {
        @apply border-[--secondary-color] text-[--secondary-color] hover:bg-[--secondary-color] hover:text-[--secondary-text-color] transition
    }

    .btn-secondary {
        @apply bg-[--secondary-color] text-[--secondary-text-color] hover:contrast-150 transition hover:scale-105 border-0 disabled:bg-gray-200 disabled:contrast-100
    }

    .btn-outline-edit {
        @apply border-green-500 text-green-500 hover:bg-green-500 hover:text-white transition
    }

    .btn-edit {
        @apply bg-green-500 text-white hover:contrast-150 transition hover:scale-105 border-0
    }

    .btn-outline-delete {
        @apply border-red-500 text-red-500 hover:bg-red-500 hover:text-white transition
    }

    .btn-delete {
        @apply bg-red-500 text-white hover:contrast-150 transition hover:scale-105 border-0
    }

    .btn-disabled {
        @apply bg-gray-400 text-white border-0
    }

    .btn-lg {
        @apply text-xl
    }
    
    .custom-grid{
    }



th.custom-grid {
    /*border-left: 1px solid #ccc;*/
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: rgb(247 247 247) !important;
    /*& :first-child{*/
    /*    border-left: 1px solid #FDB814;*/
    /*}*/
}

.custom-grid > tbody > tr {
    /*@apply odd:bg-red-500 even:bg-gray-100 !important;*/
    & td

{
    border-radius: 0px;
    padding: 20px !important;
    font-size: x-small;
    /*border-right: 1px solid #e0e0e0;*/
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    /*background-color: #faf6f6;*/
}


& td:first-child {
    border-left: 1px solid white;
}

}

.custom-grid-1 {
}



th.custom-grid-1 {
    border-left: 1px solid #ccc;
     background-color: rgb(247 247 247) !important;
    /*& :first-child{*/
    /*    border-left: 1px solid #FDB814;*/
    /*}*/
}

td.custom-cell-1 {
    border-radius: 0px;
    padding: 20px !important;
    font-size: x-small;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
}
.custom-cell-checkbox{

}
td.custom-cell-checkbox {

   
    height:100% !important;
}
    /*td.custom-cell {*/
    /*    border-radius: 0px;*/
    /*    padding: 10px;*/
    /*    font-size: x-small;*/
    /*    border-right: 1px solid #e0e0e0;*/
    /*    display:flex;*/
    /*    align-items:center;*/
    /*    !*background-color: #ece8e8;*!*/
    /*}*/
    /*table.custom-cell {*/
    /*    & tr {*/
    /*        @apply odd:bg-red-500 even:bg-gray-100;*/
    /*    }*/
    /*}*/


    .card-select {
        box-shadow: none !important;
    }
    

    .outline {
        outline-width: 0
    }


    .form-width {
        width: 70%;
    }

    @media (max-width: 768px) {
        .form-width {
            width: 100%; 
        }
    }


}
.fluent-input-label {
    font-size: small !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
}

fluent-tab[aria-selected="true"] {
    font-weight: 600;
    font-size:large;
    z-index: 1;
    color: #333333; 
    background-color: #f5f5f5; 
    border-bottom: 2px solid #666666;
}

.w-4 {
    width: 0.95rem
}
.h-4 {
    height: 0.95rem
}

.w-5 {
    width: 1.35rem
}

.h-5 {
    height: 1.35rem
}

/* Container sets a shared control height for Fluent + icon */
.search-group {
    --control-height: 40px; /* pick your height */
    align-items: stretch; /* make flex children stretch vertically */
}

    /* Make the Fluent text field use the shared height */
    .search-group fluent-text-field {
        height: var(--control-height);
    }

.search-icon-wrapper {
    background-color: var(--neutral-layer-2);
    width: 40px;
    height: 100%;
    border-radius: 10px 0 0 10px; /* top-left, top-right, bottom-right, bottom-left */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid var(--neutral-stroke-1-rest);
}

    .search-icon-wrapper i {
        color: #4b5563; /* text-gray-600 */
    }

/* fluent wizard fix*/
/*svg {*/
/*    display: unset;*/
/*    vertical-align: unset;*/
/*}*/