@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;800;900&display=swap');


/* 2. Apply to everything and override framework defaults */
* {
    font-family: 'Tajawal', sans-serif !important;
}

.tajawal {
    font-family: 'Tajawal', sans-serif !important;
}

/** {*/
/*    font-family: 'Cairo', sans-serif !important;*/
/*}*/
/* 3. Specifically target Vuetify/Vuesax classes if * doesn't work */
/*.v-application,*/
/*.vs-button,*/
/*.vs-navbar,*/
/*.vs-card__title,*/
/*.v-btn__content {*/
/*    font-family: 'Tajawal', sans-serif !important;*/
/*}*/
.deep-purple {
    background-color: #6236FF !important;
}

deep-purple--text {
    color: #6236FF !important;
}

.arab {
    direction: rtl !important;
}

.light--bg {
    background-color: #EEF2F5 !important;
}

.light--bg--lighten {
    background-color: #F4F7F8 !important;
}

.light--bg--lighten-1 {
    background-color: #FFFFFF !important;
}

.black-background {
    background-color: #141417 !important;
}

.black-card {
    background-color: #141417 !important;
}

.my-back {
    background-color: #14141A !important;
    color: #f3f4f6 !important;
}

.my-yellow--text {

    color: #f3f4f6 !important;
}

.my-yellow {
    color: #FFBD20 !important;
}

.my-yellow--svg {
    filter: brightness(0) saturate(100%) invert(87%) sepia(31%) saturate(4074%) hue-rotate(339deg) brightness(105%) contrast(105%);
}

.my-back-light {
    background-color: #1E1E26 !important;
    color: #f3f4f6 !important;
}

.my-back-lighten {
    background-color: #ffffff !important;
    color: #020202 !important;
}




.white--svg {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(77deg) brightness(113%) contrast(101%);
}

.red--svg {
    filter: brightness(0) saturate(100%) invert(38%) sepia(61%) saturate(5389%) hue-rotate(341deg) brightness(82%) contrast(102%);
}

.green--svg {
    filter: invert(98%) sepia(39%) saturate(7356%) hue-rotate(65deg) brightness(80%) contrast(90%);
}

.dark--svg {
    filter: brightness(0) saturate(100%)
}

.card-shadow {
    box-shadow: 0 15px 30px -8px rgba(0, 0, 0, .08) !important;
}

.my-gradient {
    background: linear-gradient(180deg, #2f8af3 0%, #1E4ED8 50%, #0B3CB8 100%) !important;
}

/* Navbar extension transparent */
.my-gradient .v-toolbar__extension,
.v-app-bar .v-toolbar__extension,
.v-toolbar__extension {
    background: transparent !important;
    background-color: transparent !important;
}

.flip {
    transform-style: preserve-3d;
    transition: all 0.8s ease;
}

.flip:hover {
    transform: rotateY(180deg);
}

.simple-text {
    font-family: 'Cairo' !important;
    font-size: 16px !important;
}

.my-border-radius {
    border-radius: 17px !important;
}

.no-bottom-border .v-field--variant-underlined .v-field__underline {
    display: none;
}

/* or more broadly targeting the before pseudo-element in some cases */
.no-bottom-border .v-input__control .v-input__slot::before {
    border-style: none !important;
}

.v-input.v-textarea>.v-input__control>.v-input__slot:before {
    border: none;
}

.no-border .v-input__slot:before,
.no-border .v-input__slot:after {
    border-bottom: none !important;
}

.css-square {
    -webkit-transition: -webkit-transform .1s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}

.css-square:hover {
    transform: rotate(20deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(20deg);
}



.blue--bg {
    background-color: #e9f5ff !important;
}


.vs-alert {
    z-index: 1 !important;
}

/* .v-overlay {
    background-color: rgba(233, 245, 255, 0.39);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

} */


.shadow:before,
.shadow:after {


    background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);

    border-radius: 20px;
    z-index: -1;
    animation: animate 3s ease alternate infinite;
}

.shadow:after {
    filter: blur(20px);
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ==================== Admin Table Pagination ==================== */
/* Dark Mode Styles */
.v-application.theme--dark .admin-pagination-wrapper {
    display: flex;
    justify-content: center;
    background: #1E2129;
    border-radius: 12px;
    margin: 16px;
    padding: 8px 0;
}

.v-application.theme--dark .admin-pagination .v-pagination__item {
    background: transparent !important;
    color: #fff !important;
    font-weight: 500;
    min-width: 36px;
    height: 36px;
    box-shadow: none !important;
}

.v-application.theme--dark .admin-pagination .v-pagination__item--active {
    background: #2196F3 !important;
    color: #fff !important;
}

.v-application.theme--dark .admin-pagination .v-pagination__navigation {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

.v-application.theme--dark .admin-pagination .v-pagination__navigation .v-icon {
    color: #fff !important;
}

/* Light Mode Styles */
.v-application.theme--light .admin-pagination-wrapper {
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    margin: 16px;
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.v-application.theme--light .admin-pagination .v-pagination__item {
    background: transparent !important;
    color: #333 !important;
    font-weight: 500;
    min-width: 36px;
    height: 36px;
    box-shadow: none !important;
}

.v-application.theme--light .admin-pagination .v-pagination__item--active {
    background: #2196F3 !important;
    color: #fff !important;
}

.v-application.theme--light .admin-pagination .v-pagination__navigation {
    background: transparent !important;
    color: #333 !important;
    box-shadow: none !important;
}

.v-application.theme--light .admin-pagination .v-pagination__navigation .v-icon {
    color: #333 !important;
}

/* Admin Data Table Theme Styles */
.v-application.theme--dark .v-data-table {
    background: #1E2129 !important;
}

.v-application.theme--light .v-data-table {
    background: #fff !important;
}

/* Admin Card Theme Styles */
.v-application.theme--dark .v-card {
    background: #1E2129 !important;
}

.v-application.theme--light .v-card {
    background: #fff !important;
}

/* Admin List Theme Styles */
.v-application.theme--dark .v-list {
    background: #1E2129 !important;
}

.v-application.theme--light .v-list {
    background: #fff !important;
}

/* Admin Toolbar Theme Styles */
.v-application.theme--dark .v-toolbar:not(.my-gradient):not(.v-app-bar) {
    background: #1E2129 !important;
}

.v-application.theme--light .v-toolbar:not(.my-gradient):not(.v-app-bar) {
    background: #fff !important;
}

/* Keep my-gradient always with the gradient background */
.my-gradient.v-toolbar,
.my-gradient.v-app-bar,
.v-toolbar.my-gradient,
.v-app-bar.my-gradient {
    background: linear-gradient(180deg, #2f8af3 0%, #1E4ED8 50%, #0B3CB8 100%) !important;
}

/* Admin Sheet Theme Styles */
.v-application.theme--dark .v-sheet:not([class*="lighten"]):not([class*="darken"]):not([color]) {
    background: #1E2129 !important;
}

.v-application.theme--light .v-sheet:not([class*="lighten"]):not([class*="darken"]):not([color]) {
    background: #fff !important;
}

/* Admin Dialog Theme Styles */
.v-application.theme--dark .v-dialog .v-card {
    background: #1E2129 !important;
}

.v-application.theme--light .v-dialog .v-card {
    background: #fff !important;
}

.v-input__slot::before {
    border-style: none !important;
}

/* Navbar Background Image */
.navbar-with-bg {
    position: relative;
    overflow: visible;
}

.navbar-with-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/images/navbar-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

.navbar-with-bg .v-toolbar__content,
.navbar-with-bg .v-toolbar__extension {
    position: relative;
    z-index: 1;
}