:root {
    /* Primary color palette */
    --primary-color: #3f51b5;
    --primary-light: #757de8;
    --primary-dark: #002984;
    --primary-text: #ffffff;
    /* Secondary color palette */
    --secondary-color: #f50057;
    --secondary-light: #ff5983;
    --secondary-dark: #bb002f;
    --secondary-text: #ffffff;
    /* Background colors */
    --background: #f5f5f5;
    --surface: #ffffff;
    --error: #d32f2f;
    /* Text colors */
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-disabled: rgba(0, 0, 0, 0.38);
    /* Borders and dividers */
    --divider: rgba(0, 0, 0, 0.12);
    --border-radius: 4px;
    --border-radius-lg: 8px;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

/* Base styles */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    margin: 0;
/*    padding: 0;*/
    padding-top:20px;
    line-height: 1.5;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

/* MudBlazor overrides */
.mud-main-content {
    padding: var(--spacing-lg);
    min-height: calc(100vh - 64px);
}

/* AppBar */
.mud-appbar {
    box-shadow: var(--shadow-sm);
    background-color: var(--background) !important;
    color: var(--primary-text) !important;
}

.mud-appbar .mud-icon-button {
        color: var(--primary-text) !important;
    }

/* Buttons */
.mud-button {
    border-radius: var(--border-radius) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.mud-button-contained-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-text) !important;
}

    .mud-button-contained-primary:hover {
        background-color: var(--primary-dark) !important;
        box-shadow: var(--shadow-md) !important;
    }

.mud-button-contained-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text) !important;
}

    .mud-button-contained-secondary:hover {
        background-color: var(--secondary-dark) !important;
        box-shadow: var(--shadow-md) !important;
    }

.mud-button-outlined {
    border: 1px solid var(--divider) !important;
}

    .mud-button-outlined:hover {
        background-color: rgba(0, 0, 0, 0.04) !important;
    }

/* Cards */
.mud-card {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow 0.3s ease !important;
    background-color: var(--surface) !important;
    overflow: hidden;
}

    .mud-card:hover {
        box-shadow: var(--shadow-md) !important;
    }

.mud-card-header {
    padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md) !important;
}

.mud-card-content {
    padding: var(--spacing-md) !important;
}

.mud-card-actions {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md) !important;
}

/* Text fields */
.mud-input {
    background-color: var(--surface) !important;
    border-radius: var(--border-radius) !important;
}

    .mud-input:focus-within {
        box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2) !important;
    }

.mud-input-label {
    color: var(--text-secondary) !important;
}

.mud-input-label-focused {
    color: var(--primary-color) !important;
}

/* Paper/elevation */
.mud-paper {
    background-color: var(--surface) !important;
    border-radius: var(--border-radius) !important;
}

.mud-paper-elevation-1 {
    box-shadow: var(--shadow-sm) !important;
}

.mud-paper-elevation-3 {
    box-shadow: var(--shadow-md) !important;
}

/* Typography */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: var(--spacing-md) !important;
}

.mud-typography-body1 {
    color: var(--text-primary) !important;
}

.mud-typography-body2 {
    color: var(--text-secondary) !important;
}

/* Navigation */
.mud-nav-link {
    border-radius: var(--border-radius) !important;
    margin: var(--spacing-xs) var(--spacing-sm) !important;
}

    .mud-nav-link:hover {
        background-color: rgba(63, 81, 181, 0.04) !important;
    }

    .mud-nav-link.active {
        background-color: rgba(63, 81, 181, 0.08) !important;
        color: var(--primary-color) !important;
        font-weight: 500 !important;
    }

/* Tables */
.mud-table {
    border-radius: var(--border-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    background-color: var(--primary-color) !important;
    color: var(--primary-text) !important;
}

.mud-table-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.mud-table-row:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Dialogs */
.mud-dialog {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--divider) !important;
    padding-bottom: var(--spacing-sm) !important;
}

/* Tabs */
.mud-tabs {
    border-bottom: 1px solid var(--divider) !important;
}

.mud-tab {
    text-transform: none !important;
    font-weight: 500 !important;
    min-height: 48px !important;
}

.mud-tab-active {
    color: var(--primary-color) !important;
}

.mud-tab-slider {
    background-color: var(--primary-color) !important;
}

/* Chips */
.mud-chip {
    border-radius: 16px !important;
    font-size: 0.8125rem !important;
}

/* Progress indicators */
.mud-progress-linear {
    height: 4px !important;
}

.mud-progress-circular {
    color: var(--primary-color) !important;
}

/* Snackbar */
.mud-snackbar {
    border-radius: var(--border-radius) !important;
}

/* Tooltips */
.mud-tooltip {
    font-size: 0.75rem !important;
    background-color: #616161 !important;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .mud-main-content {
        padding: var(--spacing-md);
    }

    .mud-typography-h1 {
        font-size: 2rem !important;
    }

    .mud-typography-h2 {
        font-size: 1.75rem !important;
    }
}

/* Utility classes */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shadow-transition {
    transition: box-shadow 0.3s ease;
}

.rounded-lg {
    border-radius: var(--border-radius-lg) !important;
}

.mt-2 {
    margin-top: var(--spacing-sm) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-md) !important;
}

.p-4 {
    padding: var(--spacing-md) !important;
}