/* Material Design 3 - Global Styles for All Layouts */

:root {
    /* Material Design 3 Color System */
    
    /* Admin - Deep Blue Material */
    --md-admin-primary: #1565C0;
    --md-admin-primary-variant: #0D47A1;
    --md-admin-secondary: #00897B;
    --md-admin-surface: #FFFFFF;
    --md-admin-background: #F5F5F5;
    --md-admin-on-primary: #FFFFFF;
    --md-admin-on-surface: #1C1B1F;
    
    /* BeoWorld - Blue & Gold Material */
    --md-beoworld-primary: #3181A8;
    --md-beoworld-secondary: #DEB256;
    --md-beoworld-tertiary: #BE8A33;
    --md-beoworld-surface: #FFFFFF;
    --md-beoworld-background: #F2EFEC;
    --md-beoworld-on-primary: #FFFFFF;
    
    /* Multicare - Material Blue (iOS style) */
    --md-multicare-primary: #007aff;
    --md-multicare-primary-variant: #0051d5;
    --md-multicare-secondary: #0062cc;
    --md-multicare-surface: #FFFFFF;
    --md-multicare-background: #FAFAFA;
    --md-multicare-on-primary: #FFFFFF;
    
    /* Multiserve - Material Teal */
    --md-multiserve-primary: #00897B;
    --md-multiserve-primary-variant: #00695C;
    --md-multiserve-secondary: #26A69A;
    --md-multiserve-surface: #FFFFFF;
    --md-multiserve-background: #F5F5F5;
    --md-multiserve-on-primary: #FFFFFF;
    
    /* Typography */
    --md-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --md-font-heading: 'Roboto', sans-serif;
    
    /* Elevation Shadows (Material Design) */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
    --md-elevation-4: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);
    --md-elevation-6: 0 20px 40px rgba(0,0,0,0.2);
    
    /* Border Radius */
    --md-radius-sm: 4px;
    --md-radius-md: 8px;
    --md-radius-lg: 12px;
    --md-radius-xl: 16px;
    --md-radius-full: 28px;
    
    /* Transitions */
    --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --md-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --md-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Material Design Base */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--md-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Design Buttons */
.md-button {
    font-family: var(--md-font-family);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.0892857143em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: var(--md-radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--md-transition-normal);
    box-shadow: var(--md-elevation-2);
}

.md-button:hover {
    box-shadow: var(--md-elevation-4);
    transform: translateY(-2px);
}

.md-button:active {
    box-shadow: var(--md-elevation-1);
    transform: translateY(0);
}

.md-button-filled {
    background: var(--md-primary, #1976D2);
    color: var(--md-on-primary, white);
}

.md-button-outlined {
    background: transparent;
    border: 1px solid var(--md-primary, #1976D2);
    color: var(--md-primary, #1976D2);
    box-shadow: none;
}

.md-button-text {
    background: transparent;
    box-shadow: none;
    color: var(--md-primary, #1976D2);
}

/* Material Design Cards */
.md-card {
    background: var(--md-surface, white);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-elevation-1);
    transition: box-shadow var(--md-transition-normal);
    overflow: hidden;
}

.md-card:hover {
    box-shadow: var(--md-elevation-3);
}

.md-card-elevated {
    box-shadow: var(--md-elevation-2);
}

.md-card-elevated:hover {
    box-shadow: var(--md-elevation-4);
}

/* Material Design Navigation */
.md-navbar {
    background: var(--md-surface, white);
    box-shadow: var(--md-elevation-1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.md-nav-item {
    position: relative;
    padding: 12px 16px;
    color: var(--md-on-surface, #1C1B1F);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--md-radius-full);
    transition: all var(--md-transition-fast);
}

.md-nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.md-nav-item.active {
    background: var(--md-primary, #1976D2);
    color: var(--md-on-primary, white);
}

/* Material Design Lists */
.md-list-item {
    padding: 12px 16px;
    border-radius: var(--md-radius-md);
    transition: background var(--md-transition-fast);
}

.md-list-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.md-list-item.active {
    background: rgba(var(--md-primary-rgb, 25, 118, 210), 0.12);
    color: var(--md-primary, #1976D2);
}

/* Material Design Text Fields */
.md-text-field {
    position: relative;
    margin: 8px 0;
}

.md-text-field input,
.md-text-field textarea {
    font-family: var(--md-font-family);
    width: 100%;
    padding: 16px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--md-radius-sm);
    font-size: 1rem;
    transition: all var(--md-transition-fast);
    background: transparent;
}

.md-text-field input:focus,
.md-text-field textarea:focus {
    outline: none;
    border-color: var(--md-primary, #1976D2);
    border-width: 2px;
    padding: 15px 11px;
}

/* Material Design Chips */
.md-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--md-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.08);
    transition: all var(--md-transition-fast);
}

.md-chip:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Material Design FAB (Floating Action Button) */
.md-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--md-primary, #1976D2);
    color: var(--md-on-primary, white);
    border: none;
    box-shadow: var(--md-elevation-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--md-transition-normal);
}

.md-fab:hover {
    box-shadow: var(--md-elevation-6);
    transform: scale(1.05);
}

/* Material Design Ripple Effect */
.md-ripple {
    position: relative;
    overflow: hidden;
}

.md-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.md-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Typography */
.md-headline-large {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0;
}

.md-headline-medium {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
}

.md-title-large {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.75rem;
}

.md-body-large {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: 0.03125em;
}

.md-label-large {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.00714286em;
}

/* Utility Classes */
.md-surface {
    background: var(--md-surface, white);
}

.md-elevation-0 { box-shadow: none; }
.md-elevation-1 { box-shadow: var(--md-elevation-1); }
.md-elevation-2 { box-shadow: var(--md-elevation-2); }
.md-elevation-3 { box-shadow: var(--md-elevation-3); }
.md-elevation-4 { box-shadow: var(--md-elevation-4); }
.md-elevation-6 { box-shadow: var(--md-elevation-6); }

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus Visible */
*:focus-visible {
    outline: 2px solid var(--md-primary, #1976D2);
    outline-offset: 2px;
}