/* Essential MudBlazor Styles */
:root {
    --mud-palette-primary: #009639;
    --mud-palette-primary-rgb: 0, 150, 57;
    --mud-palette-secondary: #F5F5F5;
    --mud-palette-background: #FFFFFF;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-error: #D32F2F;
    --mud-palette-success: #388E3C;
    --mud-palette-warning: #F57C00;
    --mud-palette-text-primary: rgba(0, 0, 0, 0.87);
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.6);
    --mud-palette-divider: rgba(0, 0, 0, 0.12);
    --mud-palette-grey-default: #757575;
    --mud-palette-grey-light: #BDBDBD;
    --mud-palette-grey-dark: #424242;
    --mud-palette-action-default: rgba(0, 0, 0, 0.54);
    --mud-palette-action-disabled: rgba(0, 0, 0, 0.26);
    --mud-palette-action-disabled-background: rgba(0, 0, 0, 0.12);
    --mud-default-borderradius: 4px;
    --mud-paper-elevation: 0px 0px 0px 0px;
    --mud-paper-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
    --mud-paper-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* MudBlazor Component Styles */
.mud-layout-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.mud-appbar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-height: 64px;
    background: linear-gradient(90deg, #009639 0%, #00b74f 100%);
    color: white;
    box-shadow: var(--mud-paper-elevation-1);
    position: relative;
    z-index: 1100;
}

.mud-drawer {
    width: 256px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mud-drawer-header {
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-drawer-open {
    display: flex;
}

.mud-drawer-closed {
    display: none;
}

.mud-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.mud-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02857em;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.mud-icon-button {
    padding: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.mud-text {
    margin: 0;
}

.mud-typography-h4 {
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1.235;
}

.mud-typography-h5 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.334;
}

.mud-typography-h6 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

.mud-spacer {
    flex: 1 1 auto;
}

.mud-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mud-link-primary {
    color: var(--mud-palette-primary);
}

.mud-alert {
    padding: 16px;
    border-radius: var(--mud-default-borderradius);
    margin: 8px 0;
}

.device-card {
    transition: all 0.3s ease-in-out;
    border-left: 4px solid transparent;
    padding: 16px;
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-paper-elevation-1);
    margin-bottom: 16px;
}

.device-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mud-paper-elevation-2) !important;
    border-left-color: var(--mud-palette-primary);
}

/* Loading animation */
.loading-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
}

.loading-progress circle {
    fill: none;
    stroke: #009639;
    stroke-width: 3;
    stroke-dasharray: 250.6;
    stroke-dashoffset: 0;
    animation: progress 1s linear infinite;
    transform-origin: 50px 50px;
}

.loading-progress circle:nth-child(2) {
    stroke: #00b74f;
    transform: rotate(-90deg);
    animation: progress 1s linear infinite reverse;
}

@keyframes progress {
    to {
        stroke-dashoffset: -251;
    }
}

.loading-progress-text {
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-left: -35px;
    margin-top: 50px;
    color: #009639;
    font-weight: 500;
    font-size: 14px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 6px 12px;
    position: fixed;
    right: 0;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        cursor: hand;
    }

.blazor-error-boundary {
    background-color: rgba(255, 205, 86, 0.1);
    border: 1px solid rgba(255, 205, 86, 0.3);
    color: rgba(255, 205, 86, 0.8);
    padding: .5rem;
    margin: 1rem 0;
}

/* Healthcare Color Scheme */
:root {
    --healthcare-green: #009639;
    --healthcare-light-green: #00b74f;
    --healthcare-white: #FFFFFF;
    --healthcare-light-gray: #F5F5F5;
    --healthcare-dark-gray: #757575;
    --alert-red: #D32F2F;
    --alert-orange: #F57C00;
    --success-green: #388E3C;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background: #009639;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00b74f;
}

/* Responsive grid adjustments */
@media (max-width: 600px) {
    .mud-container-maxwidth-xs,
    .mud-container-maxwidth-sm {
        padding: 8px;
    }
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Alert styling */
.mud-alert-error {
    background-color: rgba(211, 47, 47, 0.1);
    border-left: 4px solid #D32F2F;
}

.mud-alert-warning {
    background-color: rgba(245, 124, 0, 0.1);
    border-left: 4px solid #F57C00;
}

.mud-alert-success {
    background-color: rgba(56, 142, 60, 0.1);
    border-left: 4px solid #388E3C;
}

.mud-alert-info {
    background-color: rgba(0, 150, 57, 0.1);
    border-left: 4px solid #009639;
}