:root {
    /* Font Sizes */
    --font-xxs: 0.625rem; /* 10px */
    --font-xs: 0.75rem; /* 12px */
    --font-sm: 0.875rem; /* 14px */
    --font-base: 1rem; /* 16px */
    --font-md: 1.125rem; /* 18px */
    --font-lg: 1.25rem; /* 20px */
    --font-xl: 1.5rem; /* 24px */
    --font-2xl: 2rem; /* 32px */
    /* Spacing - for margin, padding */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 0.75rem; /* 12px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    /* Component Sizes */
    --header-height: 3.5rem; /* 56px */
    --input-height: 2.5rem; /* 30px */
    --button-height: 2.5rem; /* 40px */
    /* Colors */
    --app-brightblue: #1784FF;
    --app-red: #FF3E40;
    --app-orange: #FF8484;
    --app-green: #00a561;
    --app-liteblue: #73b6ff;
    --app-liteblue-old: #5DA6F8;
    --text-darkest: #373737;
    --text-darker: #262626;
    --text-dark: #424242;
    --text-light: slategray;
    /* Gradients */
    --app-Gradian-ThickOrangeLeft: linear-gradient(to left, White 90%, var(--app-orange) 90%);
    --app-Gradian-ThickOrangeRight: linear-gradient(to right, White 90%, var(--app-orange) 90%);
    --app-Gradian-ThickBlueLeft: linear-gradient(to left, White 90%, var(--app-brightblue) 90%);
    --app-Gradian-ThickBlueRight: linear-gradient(to right, White 90%, var(--app-brightblue) 90%);
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;
    --header-height: 48px;
    --footer-height: 50px;
}

/* Base Styles */
body {
    font-family: var(--body-font);
    margin: 0;
    height: 100vh;
    font-size: var(--font-base);
    line-height: var(--line-height-normal);

}

.main {
    height: calc(100vh - 5.625rem); /* 90px */

}

/* Typography Reset */
h1, h2, h3, h4, h5, p {
    margin: 0 !important;
    padding: 0 !important;
}

.gs-bold-darkest-text {
    font-weight: 600;
    white-space: normal;
    flex: 1;
    overflow-wrap: break-word;
    color: var(--text-darkest) !important;
}

.scrollable-horizontal {
    overflow-x: auto;
    white-space: nowrap;
}


.fluent-typography {
    color: var(--text-light) !important; /* Use !important to override FluentUI styles */
}

/* FluentUI Button Overrides */
::deep .fluent-button-appearance-accent,
::deep fluent-button,
::deep .btn {
    width: 100% !important;
    padding: var(--space-lg) !important;
    border-radius: 20px !important; /* Keep px for visual detail */
    font-size: var(--font-xl) !important;
    transition: opacity 0.3s ease !important;
}

    ::deep fluent-button::part(content) {
        font-size: inherit !important;
    }

    ::deep fluent-button::part(control):hover {
        opacity: 0.9 !important;
    }

    ::deep fluent-button[disabled]::part(control) {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }


::deep .fluent-messagebar-provider {
    width: 95% !important;
}


/* Button Variants */
.gs-button-blue {
    background-color: var(--app-brightblue) !important;
    color: white !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.gs-button-red {
    background-color: var(--app-red) !important;
    color: white !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.gs-button-orange {
    background-color: var(--app-orange) !important;
    color: white !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.gs-button-liteblue {
    background-color: var(--app-liteblue) !important;
    color: white !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

/* Fixed Position Elements */
.gs-liteblue-cir {
    position: fixed;
    top: -30px;
    left: -70px;
    width: 15.625rem; /* 250px */
    height: 15.625rem; /* 250px */
    z-index: -1;
}

.gs-orange-cir {
    transition: transform 1s ease-in-out;
    position: fixed;
    top: 24.375rem; /* 390px */
    left: 14.375rem; /* 230px */
    width: 15.625rem; /* 250px */
    height: 15.625rem; /* 250px */
    z-index: -1;
    transition: transform 1s ease-in-out;
}

.gs-orange-cir {

}

.scale-animation {
    animation: scale-down 1s forwards;
}

@keyframes scale-down {
    from {
        transform: scale(5);
    }

    to {
        transform: scale(1);
    }
}

.scale-reverse-animation {
    animation: scale-up 1s forwards;
}

@keyframes scale-up {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(5);
    }
}

/* Layout Containers */
.gs-outermost-centered {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.gs-maxwidth-pad20 {
    max-width: 900px;
    width: 95% !important;
    padding: var(--space-sm);
    align-items: stretch !important;
}

.gs-maxwidth-pad10 {
    max-width: 900px;
    width: 95% !important;
    padding: var(--space-xs);
    align-items: stretch !important;

}

.list-view-container {
    min-width: auto; 
    max-width: 1400px;
    padding: var(--space-xs);
    align-items: stretch !important;
    height: 85vh;
}

/* Card Components */
.gs-popup-fixedheight-card {
    background-color: White;
    border-radius: 20px; /* Keep px for visual detail */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

.gs-popup-gradient-card {
    max-width: 900px; /* Keep px for layout constraint */
    background: linear-gradient(to bottom, white 80%, #7EBBFF 100%);
    border-radius: 20px; /* Keep px for visual detail */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
    margin-top: var(--space-md);
    justify-content: space-between;
    padding: var(--space-md);
}

.custom-accordion-card {
    background: linear-gradient(to bottom, white 80%, #7EBBFF 100%);
    border-radius: 20px; /* Keep px for visual detail */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 1;
    margin: var(--space-md) 0;
    padding: 0 !important;
}

.custom-accordion {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border-radius: 20px; /* Keep px for visual detail */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.custom-accordion-item {
    border: none;
    outline: none;
    background-color: var(--app-orange);
}

::deep .fluent-accordion-item {
    width: 100%;
}

::deep .fluent-accordion-header {
    width: 100%;
    cursor: pointer;
}

/* Logo */
.gs-app-logo {
    max-height: 4.37rem; /* 70px */
    max-width: 5.625rem; /* 90px */
    margin-bottom: 1rem;
}

/* Title */
.gs-app-title {
    margin-top: -1rem;
   height: 5rem; /* 70px */
   width: 17rem;    /* 180px */

}

/* Form Elements */
.gs-textinput-container {
    margin: 0;
    width: 100%;
    position: relative;
}

    .gs-textinput-container label {
        position: absolute;
        top: 50%;
        right: 7px; /* Keep px for precise positioning */
        transform: translateY(-50%);
        transition: 0.9s;
        font-size: var(--font-xxs);
        pointer-events: none;
        color: transparent;
        padding: 0 var(--space-xxs);
    }

    .gs-textinput-container input::placeholder {
        color: #ababab;
        font-size: var(--font-sm);
    }

    .gs-textinput-container input {
        width: 100%;
        height: var(--input-height);
        font-size: var(--font-sm);
        color: var(--text-dark);
        padding: 0 0 0 var(--space-xs);
        border: none;
        border-radius: 10px; /* Keep px for visual detail */
        background-color: #ebf3ff;
    }


        .gs-textinput-container input:focus {
            border: none;
            outline: none;
            color: black;
            background-color: #b5d2ff;
        }
            /* Hide placeholder when input is focused */
            .gs-textinput-container input:focus::placeholder {
                color: transparent;
            }

            /* Hide placeholder when input is focused */
            .gs-textinput-container input:focus ~ label {
                background: white;
            }

            .gs-textinput-container input:focus ~ label,
            .gs-textinput-container input:not(:placeholder-shown) ~ label {
                top: 0;
                background: transparent;
                font-size: var(--font-xxs);
                color: royalblue;
            }

        .gs-textinput-container input:disabled {
            background-color: #eeeeee; /* Light gray background */
            color: #000000; /* Darker gray text */
            cursor: not-allowed; /* Shows the "forbidden" cursor */
            opacity: 0.7; /* Makes it slightly transparent */
        }

            /* If you want to change the label color for disabled inputs */
            .gs-textinput-container input:disabled + label {
                color: #888;
            }

/* Dropdown Styles */
.gs-fluent-dropdown::part(control) {
    font-size: var(--font-sm);
    border-radius: 10px !important; /* Keep px for visual detail */
}

.custom-dropdown::part(root) {
    font-size: var(--font-sm);
    margin-bottom: var(--space-xs);
}

.custom-dropdown::part(control) {
    border-radius: 10px;
    padding: var(--space-sm);
}

.custom-dropdown::part(label) {
    font-size: var(--font-xs);
    color: royalblue;
    margin-bottom: var(--space-xxs);
    margin-left: var(--space-xs);
}

.custom-dropdown::part(listbox) {
    border-radius: 10px;
    margin-top: var(--space-xxs);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.custom-dropdown::part(option) {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
}

    .custom-dropdown::part(option):hover {
        background-color: #EBF4FF;
    }


/* Text Alignment */
.gs-text-right {
    text-align: right;
}

.gs-text-center {
    text-align: center;
}


.scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* For iOS momentum scrolling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Edge/IE */
}

    /* Chrome, Safari, Opera */
    .scroll-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .scroll-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }




/* Box Components */
.gs-2field-box {
    background: white;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    gap: var(--space-xxs);
    padding: var(--space-xs);
    height: 4rem; 
    border-radius: 10px; /* Keep px for visual detail */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.gs-kpi-box-blue {
    background: linear-gradient(to right, white 90%, #3491F8 90%);
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    gap: var(--space-xs);
    padding: var(--space-md);
    height: 4rem;
    border-radius: 10px; /* Keep px for visual detail */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.gs-kpi-box-orange {
    background: var(--app-Gradian-ThickOrange);
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    gap: var(--space-xs);
    padding: var(--space-md);
    height: 4rem;
    border-radius: 10px; /* Keep px for visual detail */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}


/* User Card Styles */
.gs-user-card {
    flex: 0 0 auto;
    padding: var(--space-sm) !important;
    opacity: 0.8;
    background: linear-gradient(to right, White 97%, var(--app-brightblue) 97%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

.gs-bolder {
    font-weight: 700;
}


fluent-tabs::part(activeIndicator) {
    width: 100%;
    height: 4px; /* Adjust the height to make the line thicker */
    background-color: var(--app-brightblue); /* Change the color as needed */
}


/* Style the tab list container */
fluent-tabs::part(tablist) {
    padding: 0px; /* Add padding */
    width: 80%;
}


/* Sticky Button Container */
.gs-sticky-button-container {
    position: sticky;
    bottom: 10px;
    z-index: 100;
    padding: 0 var(--space-md);
    margin-top: auto;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}


/* Link Styles */
a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Content Spacing */
.content {
    padding-top: var(--space-lg);
}

/* Focus States */
h1:focus {
    outline: none;
}

/* Validation Styles */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: var(--space-sm) var(--space-lg);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: var(--space-md);
        top: var(--space-xs);
    }

/* Error Boundary */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,[your-existing-svg-data]) no-repeat 1rem/1.8rem, #b32121;
    padding: var(--space-md) var(--space-md) var(--space-md) 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* Safe Area Handling */
.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column,
    .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}

/* Tab Bar */
.tab-bar {
    border-radius: 0 !important;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar {
    height: 4px; 
}

::-webkit-scrollbar-track {
    background: transparent; /* Match the preferred track background */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Match the preferred thumb color */
    border-radius: 4px; /* Match the preferred border radius */
}

/* For Firefox */
* {
    scrollbar-width: auto; /* Match the preferred thin scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Match the preferred colors */
}


/* Media Queries */
@media (max-width: 640.98px) {

    .header .header-gutters {
        margin: 0 !important;
    }

    .top-row {
        justify-content: space-between;
    }

        .top-row ::deep a,
        .top-row ::deep .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 15.625rem; /* 250px */
        height: 100vh;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth ::deep a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row,
    article {
        padding-left: var(--space-xl) !important;
        padding-right: var(--space-lg) !important;
    }
}

@media (max-width: 1024px) {
    /* For webkit browsers like Chrome, Safari, newer versions of Edge */
    ::-webkit-scrollbar {
        width: 2px !important; /* Very thin scrollbar */
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1) !important; /* Nearly invisible thumb */
        border-radius: 20px !important;
    }

    /* For Firefox */
    * {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.1) transparent !important;
    }
}