/* ========================================================================
   LAP Frontend Template - Material Design 3 Styles
   ASP.NET Core 8 + Bootstrap 5 + Material Design 3
   ======================================================================== */

/* ========================================================================
   1. CSS Variables - Material Design 3 Color System
   ======================================================================== */
:root {
    /* Material Design 3 - Primary Palette (Cyan) */
    --md-primary-0: #000000;
    --md-primary-10: #001F24;
    --md-primary-20: #003640;
    --md-primary-30: #004F58;
    --md-primary-40: #006874;
    --md-primary-50: #008391;
    --md-primary-60: #00A0B0;
    --md-primary-70: #1EBBF0;
    --md-primary-80: #4DD0FF;
    --md-primary-90: #97E7FF;
    --md-primary-95: #CBF3FF;
    --md-primary-99: #F6FEFF;
    --md-primary-100: #FFFFFF;
    /* Material Design 3 - Secondary Palette (Blue) */
    --md-secondary-10: #0B1D3D;
    --md-secondary-20: #203354;
    --md-secondary-30: #37496C;
    --md-secondary-40: #476CB3;
    --md-secondary-50: #627CA8;
    --md-secondary-60: #7B96C3;
    --md-secondary-70: #96B0DE;
    --md-secondary-80: #B1CBFA;
    --md-secondary-90: #D3E3FF;
    --md-secondary-95: #E9F1FF;
    /* Material Design 3 - Tertiary Palette (Purple) */
    --md-tertiary-40: #764BA2;
    --md-tertiary-80: #D4B5FF;
    /* Material Design 3 - Error Palette */
    --md-error-10: #410002;
    --md-error-40: #BA1A1A;
    --md-error-50: #E73C4E;
    --md-error-80: #FFB4AB;
    --md-error-90: #FFDAD6;
    /* Material Design 3 - Neutral Palette */
    --md-neutral-0: #000000;
    --md-neutral-10: #1A1C1E;
    --md-neutral-20: #2F3033;
    --md-neutral-30: #46474A;
    --md-neutral-40: #5E5E62;
    --md-neutral-50: #76777A;
    --md-neutral-60: #909094;
    --md-neutral-70: #AAAEB2;
    --md-neutral-80: #C6C6CA;
    --md-neutral-90: #E2E2E5;
    --md-neutral-95: #F1F0F4;
    --md-neutral-99: #FDFCFF;
    --md-neutral-100: #FFFFFF;
    /* Material Design 3 - Surface Tones */
    --md-surface-dim: #DED8E1;
    --md-surface: #FEF7FF;
    --md-surface-bright: #FEF7FF;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F8F9FA;
    --md-surface-container: #F3EDF7;
    --md-surface-container-high: #ECE6F0;
    --md-surface-container-highest: #E6E0E9;
    /* Semantic Color Tokens */
    --primary: var(--md-primary-70);
    --on-primary: var(--md-neutral-100);
    --primary-container: var(--md-primary-90);
    --on-primary-container: var(--md-primary-10);
    --secondary: var(--md-secondary-40);
    --on-secondary: var(--md-neutral-100);
    --secondary-container: var(--md-secondary-90);
    --on-secondary-container: var(--md-secondary-10);
    --error: var(--md-error-50);
    --on-error: var(--md-neutral-100);
    --error-container: var(--md-error-90);
    --on-error-container: var(--md-error-10);
    --surface: var(--md-surface);
    --on-surface: var(--md-neutral-10);
    --on-surface-variant: var(--md-neutral-30);
    --surface-variant: var(--md-neutral-90);
    --outline: var(--md-neutral-50);
    --outline-variant: var(--md-neutral-80);
    /* Legacy Bootstrap compatibility */
    --primary-color: var(--primary);
    --primary-hover: var(--md-primary-60);
    --secondary-color: var(--secondary);
    --success-color: #10B981;
    --danger-color: var(--error);
    --warning-color: #F59E0B;
    --info-color: #0EA5E9;
    --text-primary: var(--on-surface);
    --text-secondary: var(--md-neutral-50);
    --text-muted: var(--md-neutral-60);
    --bg-body: var(--md-surface-container-low);
    --bg-white: var(--md-neutral-100);
    --bg-light: var(--md-surface-container);
    --border-color: var(--outline-variant);
    /* Material Design 3 - Shape */
    --md-shape-corner-none: 0px;
    --md-shape-corner-extra-small: 4px;
    --md-shape-corner-small: 8px;
    --md-shape-corner-medium: 12px;
    --md-shape-corner-large: 16px;
    --md-shape-corner-extra-large: 28px;
    --border-radius: var(--md-shape-corner-medium);
    --border-radius-sm: var(--md-shape-corner-small);
    --border-radius-lg: var(--md-shape-corner-large);
    /* Material Design 3 - Elevation (Shadows) */
    --md-elevation-0: none;
    --md-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
    /* Legacy shadow support */
    --shadow-sm: var(--md-elevation-1);
    --shadow-md: var(--md-elevation-2);
    --shadow-lg: var(--md-elevation-4);
    /* Material Design 3 - Motion */
    --md-motion-duration-short1: 50ms;
    --md-motion-duration-short2: 100ms;
    --md-motion-duration-short3: 150ms;
    --md-motion-duration-short4: 200ms;
    --md-motion-duration-medium1: 250ms;
    --md-motion-duration-medium2: 300ms;
    --md-motion-duration-medium3: 350ms;
    --md-motion-duration-medium4: 400ms;
    --md-motion-duration-long1: 450ms;
    --md-motion-duration-long2: 500ms;
    --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --transition-base: all var(--md-motion-duration-medium2) var(--md-motion-easing-standard);
    --transition-fast: all var(--md-motion-duration-short4) var(--md-motion-easing-standard);
    --transition-emphasized: all var(--md-motion-duration-medium4) var(--md-motion-easing-emphasized);
}

/* ========================================================================
   2. Material Symbols Configuration
   ======================================================================== */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ========================================================================
   3. Typography - Material Design 3 Type Scale
   ======================================================================== */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--on-surface);
    background-color: var(--bg-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Design 3 - Display Styles */
.display-large {
    font-size: 57px;
    font-weight: 400;
    line-height: 64px;
    letter-spacing: -0.25px;
}

.display-medium {
    font-size: 45px;
    font-weight: 400;
    line-height: 52px;
    letter-spacing: 0px;
}

.display-small {
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0px;
}

/* Material Design 3 - Headline Styles */
h1, .h1, .headline-large {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0px;
}

h2, .h2, .headline-medium {
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0px;
}

h3, .h3, .headline-small {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
}

/* Material Design 3 - Title Styles */
h4, .h4, .title-large {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
}

h5, .h5, .title-medium {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
}

h6, .h6, .title-small {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

/* Material Design 3 - Body Styles */
.body-large {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.body-medium {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
}

.body-small {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
}

/* Material Design 3 - Label Styles */
.label-large {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.label-medium {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
}

.label-small {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
}

/* Legacy text utilities */
.text-xl {
    font-size: 20px;
    line-height: 28px;
}

.text-lg {
    font-size: 18px;
    line-height: 26px;
}

.text-md {
    font-size: 16px;
    line-height: 24px;
}

.text-base {
    font-size: 14px;
    line-height: 20px;
}

.text-sm {
    font-size: 13px;
    line-height: 18px;
}

.text-xs {
    font-size: 12px;
    line-height: 16px;
}

.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

/* ========================================================================
   4. Material Design 3 - Buttons
   ======================================================================== */
.btn {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    border-radius: var(--md-shape-corner-extra-large);
    padding: 10px 24px;
    height: 40px;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    border: none;
}

/* Filled Button (Primary) */
.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--md-elevation-0);
}

    .btn-primary:hover {
        background-color: var(--md-primary-60);
        box-shadow: var(--md-elevation-1);
        color: var(--on-primary);
    }

    .btn-primary:active {
        box-shadow: var(--md-elevation-0);
    }

    .btn-primary:focus-visible {
        box-shadow: var(--md-elevation-0), 0 0 0 3px rgba(30, 187, 240, 0.3);
        outline: none;
    }

/* Outlined Button */
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--outline);
}

    .btn-outline-primary:hover {
        background-color: rgba(30, 187, 240, 0.08);
        border-color: var(--primary);
        color: var(--primary);
    }

/* Text Button */
.btn-link {
    background-color: transparent;
    color: var(--primary);
    padding: 10px 12px;
}

    .btn-link:hover {
        background-color: rgba(30, 187, 240, 0.08);
        color: var(--primary);
        text-decoration: none;
    }

/* Elevated Button */
.btn-elevated {
    background-color: var(--md-surface-container-low);
    color: var(--primary);
    box-shadow: var(--md-elevation-1);
}

    .btn-elevated:hover {
        background-color: var(--md-surface-container);
        box-shadow: var(--md-elevation-2);
    }

/* FAB (Floating Action Button) */
.btn-fab {
    width: 56px;
    height: 56px;
    border-radius: var(--md-shape-corner-large);
    padding: 0;
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    box-shadow: var(--md-elevation-3);
}

    .btn-fab:hover {
        box-shadow: var(--md-elevation-4);
    }

    .btn-fab.btn-fab-small {
        width: 40px;
        height: 40px;
    }

    .btn-fab.btn-fab-large {
        width: 96px;
        height: 96px;
    }

/* Icon Button */
.btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--on-surface-variant);
}

    .btn-icon:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

/* ========================================================================
   5. Material Design 3 - Form Controls
   ======================================================================== */
.form-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: var(--on-surface-variant);
}

.form-control,
.form-select {
    border: 1px solid var(--outline);
    border-radius: var(--md-shape-corner-extra-small);
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--on-surface);
    background-color: var(--md-surface-container);
    transition: var(--transition-fast);
    height: 45px;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        border-width: 2px;
        padding: 11px 15px; /* Compensate for border width increase */
        box-shadow: none;
        outline: none;
        background-color: var(--md-surface-container);
    }

    .form-control::placeholder {
        color: var(--on-surface-variant);
        opacity: 0.6;
    }

/* Filled Text Field Style */
.form-control-filled {
    background-color: var(--md-surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--on-surface-variant);
    border-radius: var(--md-shape-corner-extra-small) var(--md-shape-corner-extra-small) 0 0;
    padding: 16px 16px 8px 16px;
}

    .form-control-filled:focus {
        border-bottom: 2px solid var(--primary);
        padding-bottom: 7px;
    }

/* Form validation states */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--error);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-color);
}

.invalid-feedback,
.valid-feedback {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.4px;
}

.invalid-feedback {
    color: var(--error);
}

.valid-feedback {
    color: var(--success-color);
}

/* ========================================================================
   6. Material Design 3 - Cards
   ======================================================================== */
.card {
    background-color: var(--md-surface-container-low);
    border-radius: var(--md-shape-corner-medium);
    box-shadow: var(--md-elevation-0);
    border: 1px solid var(--outline-variant);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: var(--transition-base);
}

.card-elevated {
    background-color: var(--md-surface-container-low);
    box-shadow: var(--md-elevation-1);
    border: none;
}

.card-filled {
    background-color: var(--md-surface-container-highest);
    box-shadow: none;
    border: none;
}

.card-outlined {
    background-color: var(--surface);
    border: 1px solid var(--outline-variant);
    box-shadow: none;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--outline-variant);
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--outline-variant);
    padding: 16px 20px;
}

/* Interactive Cards */
.card-hover {
    transition: var(--transition-emphasized);
    cursor: pointer;
}

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

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

/* ========================================================================
   7. Material Design 3 - Navigation
   ======================================================================== */
.navbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    padding: 0.75rem 0;
    box-shadow: var(--md-elevation-0);
}

.navbar-brand {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    padding: 8px 12px;
    border-radius: var(--md-shape-corner-extra-large);
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--on-surface-variant);
}

    .nav-link:hover {
        background-color: rgba(30, 187, 240, 0.08);
        color: var(--primary);
    }

    .nav-link.active {
        background-color: var(--secondary-container);
        color: var(--on-secondary-container);
        position: relative;
    }

/* ========================================================================
   8. Material Design 3 - Tables
   ======================================================================== */
.table {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--on-surface);
}

    .table thead th {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.5px;
        color: var(--on-surface-variant);
        background-color: var(--md-surface-container);
        border-bottom: 1px solid var(--outline-variant);
        padding: 16px;
    }

    .table tbody td {
        padding: 16px;
        border-bottom: 1px solid var(--outline-variant);
    }

.table-hover tbody tr {
    transition: var(--transition-fast);
}

    .table-hover tbody tr:hover {
        background-color: rgba(30, 187, 240, 0.04);
    }

/* ========================================================================
   9. Material Design 3 - Chips
   ======================================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--md-shape-corner-small);
    background-color: var(--md-surface-container-low);
    border: 1px solid var(--outline);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--on-surface-variant);
    transition: var(--transition-fast);
}

    .chip:hover {
        background-color: var(--md-surface-container);
    }

.chip-filled {
    background-color: var(--secondary-container);
    border: none;
    color: var(--on-secondary-container);
}

/* ========================================================================
   10. Material Design 3 - Badges
   ======================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--md-shape-corner-extra-large);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
}

    .badge.bg-primary {
        background-color: var(--primary);
        color: var(--on-primary);
    }

/* ========================================================================
   11. Material Design 3 - Utilities
   ======================================================================== */
.elevation-0 {
    box-shadow: var(--md-elevation-0);
}

.elevation-1 {
    box-shadow: var(--md-elevation-1);
}

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

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

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

.elevation-5 {
    box-shadow: var(--md-elevation-5);
}

/* Legacy shadow utilities */
.shadow-sm {
    box-shadow: var(--md-elevation-1);
}

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

.shadow-lg {
    box-shadow: var(--md-elevation-4);
}

/* Surface tints */
.surface {
    background-color: var(--surface);
}

.surface-container {
    background-color: var(--md-surface-container);
}

.surface-container-high {
    background-color: var(--md-surface-container-high);
}

.surface-container-highest {
    background-color: var(--md-surface-container-highest);
}

/* Text colors */
.text-on-surface {
    color: var(--on-surface);
}

.text-on-surface-variant {
    color: var(--on-surface-variant);
}

.text-primary-color {
    color: var(--primary);
}

/* ========================================================================
   12. Material Design 3 - Accessibility
   ======================================================================== */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--md-shape-corner-extra-small);
}

button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 187, 240, 0.3);
}

/* ========================================================================
   13. Material Design 3 - Animations
   ======================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in-up {
    animation: fadeInUp var(--md-motion-duration-long2) var(--md-motion-easing-emphasized-decelerate);
}

.fade-in {
    animation: fadeIn var(--md-motion-duration-medium2) var(--md-motion-easing-standard);
}

/* Ripple effect container */
.ripple {
    position: relative;
    overflow: hidden;
}

    .ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width var(--md-motion-duration-long1) var(--md-motion-easing-standard), height var(--md-motion-duration-long1) var(--md-motion-easing-standard);
    }

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

/* ========================================================================
   14. Footer
   ======================================================================== */
.footer {
    margin-top: -1.5rem;
    padding: 1.5rem 0;
    background-color: var(--md-surface-container);
    /*border-top: 1px solid var(--outline-variant);*/
}

/* ========================================================================
   15. Responsive Design
   ======================================================================== */
@media (min-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1rem;
    }

    h1, .h1, .headline-large {
        font-size: 28px;
        line-height: 36px;
    }

    h2, .h2, .headline-medium {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ========================================================================
   16. Dark Mode Support (Optional)
   ======================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors would go here */
        /* Not implemented by default */
    }
}