:root {
    /* Primary Colors */
    --primary: #2B8282;
    --primary-rgb: 43, 130, 130;
    --secondary: #003333;
    --secondary-rgb: 0, 51, 51;
    --tertiary: #99CCCC;
    --tertiary-rgb: 153, 204, 204;
    --primary-bg: #80B3C3;
    --primary-hover: #C9D3E0;
    --primary-active: #C9D3E0;
    --primary-dark: #302849;
    --studypay: #165038;
    --studypay-bg: #dde8dc;
    --datasync: #573605;
    --datasync-bg: #f0ebe9;

    /* Text Colors */
    --high-em: #282929;
    --low-em: #535454;
    --disabled: #939393;
    --muted: #535454;

    /* Light/Dark Colors */
    --light: #FEFEFE;
    --dark: #121212;

    /* Surface Colors */
    --surface: #F6F6F3;
    --surface-alt: #F5F5F5;
    --form-bg: #EAEAEA;
    --stroke: #E7E9E9;
    --bg-alt-2: #F5F5F5;

    /* Communication Colors */
    --info: #007B96;
    --info-bg: #E1F1F6;
    --danger: #CF483B;
    --danger-bg: #FCEAE9;
    --success: #4E8241;
    --success-bg: #E3F2E7;
    --warning: #E0A800;
    --warning-text: #9A722A;
    --warning-bg: #F8EED8;

    /* Sizes */
    --block-shadow-radius: 2px;
    --size-tiny: 4px;
    --size-small: 8px;
    --size-med: 12px;
    --size-large: 24px;
    --size-xl: 36px;
    --size-xxl: 48px;
    --size-xxxl: 64px;
    --font-size-base: 16px;
    --icon-size: 16px;
    --opacity: 0.75;
    --radius-smooth-box: 4px;
    --radius-round: 100px;
    --border-width: 2px;

    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
    --border-radius: 8px;
}

/**
 * Global Styles
 */
* {
    font-family: "Montserrat", sans-serif;
}

/* Page overlay styles */
#page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 10000; /* Extremely high z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.2s ease; /* Longer transition */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 123, 255, 0.1);
    border-radius: 50%;
    border-left-color: var(--primary, #0d6efd);
    animation: spin 1s linear infinite;
}

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


.loading-overlay {
    visibility: visible;
}

body.content-loaded > * {
    visibility: visible;
}

/* Component fade-in effect */
.component-container {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.component-loaded {
    opacity: 1;
}

body {
    background-color: var(--surface-alt);
}

.bg-surface {
    background-color: var(--surface-alt);
}

.bg-studypay {
    background-color: var(--studypay-bg);
    color: var(--studypay)
}
.bg-datasync {
    background-color: var(--datasync-bg);
    color: var(--datasync);
}

.btn {
    text-transform: none !important;
}

.card-header {
    color: var(--secondary)
}

.btn-primary {
    --mdb-btn-bg: #004f4f;
    --mdb-btn-color: var(--light);
    --mdb-btn-box-shadow: 0 4px 9px -4px #004f4f;;
    --mdb-btn-hover-bg: #004f4f;;
    --mdb-btn-hover-color: var(--light);
    --mdb-btn-focus-bg: #004f4f;;
    --mdb-btn-focus-color: var(--light);
    --mdb-btn-active-bg: #004f4f;;
    --mdb-btn-active-color: var(--light);
    /*--mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(0, 51, 51, 0.3), 0 4px 18px 0 rgba(0, 51, 51, 0.2);*/
}

.breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item > a {
    color: var(--secondary);
}

.link-card {
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.breadcrumb-item.active {
    color: var(--secondary);
    font-weight: 500;
}