/* === Missions App Branding Colors === */
:root {
    /* Primary colors from Missions app */
    --color-primary-dark-blue: #1C355E;
    --color-secondary-gold: #F7C94A;
    --color-accent-yellow: #f2bc12;
    --color-white: #fff;
    --color-light-gray: #E5E5E5;
    --color-dark-text: #212121;
    --color-medium-text: #222;

    /* Override Kendo theme variables to match Missions branding */
    --kendo-color-primary: var(--color-primary-dark-blue);
    --kendo-color-secondary: var(--color-secondary-gold);
    --kendo-color-app-primary: var(--color-primary-dark-blue);
    --kendo-color-app-surface: var(--color-white);
    --kendo-color-text: var(--color-dark-text);
    --kendo-color-border: var(--color-light-gray);

    /* Font family - use Montserrat like Missions app */
    --kendo-font-family-sans-serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    margin: 0;
    font-family: var(--kendo-font-family-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-white);
    color: var(--kendo-color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* === Loading Progress Styles === */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1C355E;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.nav-menu {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    background-color: var(--kendo-color-primary);
}

.nav-menu .k-menu-item.k-state-active {
    background-color: var(--kendo-color-secondary);
    border-radius: 10px;
}

a.color-underline {
    color: inherit;
    text-decoration: none;
}

.menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--kendo-spacing-2);
    font-size: var(--kendo-font-size-xl);
    font-weight: var(--kendo-font-weight-medium);
    padding: var(--kendo-spacing-4);
    border-top: 1px solid var(--kendo-color-border);
    border-bottom: 1px solid var(--kendo-color-border);
    width: 100%;
}

.spacer {
    flex-grow: 1;
}

.k-menu-vertical>.k-menu-item>.k-menu-link {
    padding: 0;
}

.page-header {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-4);
    margin: var(--kendo-spacing-1);
}

.page-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.fab-container {
    position: relative;
}

.fab-button {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* === Header Styling === */
.header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--color-primary-dark-blue);
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.02em;
}

/* === Mobile-First Responsive Design === */
@media (max-width: 768px) {
    .page-header {
        margin: var(--kendo-spacing-2);
    }

    .header h1 {
        font-size: 1.25rem;
    }

    .fab-button {
        bottom: 16px;
        right: 16px;
    }
}

/* === Typography Improvements === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kendo-font-family-sans-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
}

label {
    font-weight: 500;
    color: var(--color-medium-text);
}

/* === Button Styling === */
.k-button-solid-primary {
    background-color: var(--color-primary-dark-blue);
    border-color: var(--color-primary-dark-blue);
}

.k-button-solid-primary:hover {
    background-color: #25345D;
    border-color: #25345D;
}

.k-button-solid-secondary {
    background-color: var(--color-secondary-gold);
    border-color: var(--color-secondary-gold);
    color: var(--color-dark-text);
}

.k-button-solid-secondary:hover {
    background-color: var(--color-accent-yellow);
    border-color: var(--color-accent-yellow);
}