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

:root {
    --base-background-color: #fafafa;
    --surface-background-color: white;
    --surface-box-shadow: none;
    --tooltip-background-color: white;
    --surface-border-radius: 8px;
    --surface-border: 1px solid #ddd;
    --general-transition: all 0.3s ease;
    --page-padding: 1rem;
    --button-hover-transition: background-color 0.3s ease, transform 0.2s ease;
    --button-transform-scale: scale(1.00);
    --menu-item-hover: #f3e8ff;
    --input-transition: border-color 0.3s ease, box-shadow 0.3s ease;
    --input-box-shadow: 0 0 0 2px rgba(103, 0, 138, 0.1);
    --primary-color: #67008a;
    --primary-hover-color: #4d0066;
    --secondary-hover-color: #E3E3E3;
    --chart-hover-color: #fafafa;
    --chart-skeleton-content-color: #e0e0e0;
    --delete-button-color: #ff4d4d;
    --delete-button-hover-color: #cc3333;
    --header-height: 78px;
    --header-height-576px: 60px;
    --header-height-320px: 50px;
    --font-primary-color: #111;
    --font-secondary-color: #444;
    --font-detail-color: #777;
    --border-primary-color: #e5e7eb;
    --heatmap-stop-middle-color: #B14FFF;
    --heatmap-stop-last-color: #67008A;
    --rowodd-background-color: #f7f1f8;
    --sidebar-background-color: white;
    --checkBox-border-color: #BDBDBD;
    --checkBox-border-color-hover: #9E9E9E;
}


[data-theme="dark"] {
    --base-background-color: #121212;
    --surface-background-color: #212121;
    --sidebar-background-color: #282828;
    --tooltip-background-color: #212121;
    --chart-skeleton-content-color: #2c2c2c;
    --primary-color: #67008a;
    --primary-hover-color: #5a0476;
    --delete-button-color: #ce2a2a;
    --delete-button-hover-color: #aa2424;
    --font-primary-color: #EEE;
    --font-secondary-color: #BBB;
    --font-detail-color: #888;
    --menu-item-hover: #67008a47;
    --border-primary-color: #4D5259;
    --heatmap-stop-middle-color: #67008A;
    --heatmap-stop-last-color: #B14FFF;
    --rowodd-background-color: #6E467B;
    --secondary-hover-color: rgba(64, 64, 64, 0.4);
    --chart-hover-color: rgb(28, 28, 28);
    --checkBox-border-color: #757575;

    /* Webkit (Chrome, Edge, Safari) */
    ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        /* Lower opacity */
    }

    /* Firefox */
    * {
        scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
    }

    /* Target the actual calendar picker button */
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(0.4);
        cursor: pointer;
    }


    /* For Firefox */
    input[type="datetime-local"]::-moz-calendar-picker-indicator {
        filter: invert(0.2);
    }

    /* For Edge */
    input[type="datetime-local"]::-ms-calendar-picker-indicator {
        filter: invert(0.2);
    }
}



button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

button:disabled::Before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
    /* Adjust spinner position */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

input {
    transition: var(--input-transition);
}

input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--input-box-shadow);
}


input::placeholder {
    color: #aaa;
}