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

/* -------------------------------- new css -------------------------------- */

[class^="-icon"],
[class*="-icon"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 24px !important;
    width: 24px !important;
    background-size: 24px 24px;
}
.calendar-icon {
    background-image: url("./calendar-icon.svg");
}

.business-icon {
    background-image: url("./business.svg");
}
.menu-item.active .calendar-icon,
.menu-item:hover .calendar-icon {
    background-image: url("./calendar-active-icon.svg");
}

.calendar-menu-icon {
    background-image: url("./calendar-menu-icon.svg");
}

.menu-item.active .calendar-menu-icon,
.menu-item:hover .calendar-menu-icon {
    background-image: url("./calendar-menu-active-icon.svg");
}

.school-icon {
    background-color: #030712;
    background-image: url("./school-icon.svg");
}

.menu-item.active .school-icon,
.menu-item:hover .school-icon {
    background-image: url("./school-active-icon.svg");
}

.program-icon {
    background-image: url("./program-icon.svg");
}

.menu-item.active .program-icon,
.menu-item:hover .program-icon {
    background-image: url("./program-active-icon.svg");
}

.assessment-icon {
    background-image: url("./assessment-icon.svg");
}

.menu-item.active .assessment-icon,
.menu-item:hover .assessment-icon {
    background-image: url("./assessment-active-icon.svg");
}

.cloudschool-icon {
    background-image: url("./crm-icon.png");
}

.moodle-icon {
    background-image: url("./moodle.svg");
}

.menu-item.active .cloudschool-icon,
.menu-item:hover .cloudschool-icon {
    background-image: url("./crm-active-icon.png");
}

.teacher-icon {
    background-image: url("./teacher-icon.svg");
}

.class-icon {
    background-image: url("./info.svg");
}

.menu-item.active .teacher-icon,
.menu-item:hover .teacher-icon {
    background-image: url("./teacher-active-icon.svg");
}

.students-icon {
    background-image: url("./students-icon.svg");
}
.spinner-container.full-page {
    background-color: hsla(0, 0%, 100%, 0.7);
    height: 100%;
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* The circle (outer ring) */
.spinner-container .meter {
    position: relative;
    width: 48px;
    height: 48px;
    border: 6px solid #0e90d9;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    overflow: visible;
}

/* Rotating hand (centered perfectly) */
.spinner-container .meter::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%; /* bottom of bar sits exactly at circle center */
    width: 6px;
    height: 14px; /* length of the hand */
    margin-left: -3px; /* half of width to center horizontally */
    border-radius: 3px;
    background-color: #0e90d9;
    transform-origin: 50% 100%; /* pivot around bottom center */
    transform: rotate(0deg);
    animation: meter-spin 0.9s linear infinite;
}

/* Keyframes for rotation */
@keyframes meter-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility: stop motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .spinner-container .meter::before {
        animation: none;
    }
}