/* ============================================
   TELOS ELEVATION SYSTEM
   Flutter Material Design Harmony for Web
   ============================================

   This CSS module provides Flutter-like elevation and
   surface treatments while maintaining the TELOS brand.

   Synchronized with: mobile/lib/theme/app_theme.dart
   ============================================ */

:root {
    /* TELOS Brand Colors (synced with Flutter AppColors) */
    --telos-primary: #FF00FF;
    --telos-primary-dark: #8B00FF;
    --telos-accent-green: #00FF88;
    --telos-surface: rgba(255, 255, 255, 0.03);
    --telos-surface-elevated: rgba(255, 255, 255, 0.05);
    --telos-border: rgba(255, 255, 255, 0.08);
    --telos-border-elevated: rgba(255, 255, 255, 0.12);

    /* Flutter Material Elevation Opacities (dark theme) */
    /* At 0dp: 0%, 1dp: 5%, 2dp: 7%, 3dp: 8%, 4dp: 9%, 6dp: 11%, 8dp: 12%, 12dp: 14%, 16dp: 15%, 24dp: 16% */
    --elevation-0-overlay: 0;
    --elevation-1-overlay: 0.05;
    --elevation-2-overlay: 0.07;
    --elevation-3-overlay: 0.08;
    --elevation-4-overlay: 0.09;
    --elevation-6-overlay: 0.11;
    --elevation-8-overlay: 0.12;
    --elevation-12-overlay: 0.14;
    --elevation-16-overlay: 0.15;
    --elevation-24-overlay: 0.16;
}

/* ============================================
   FLUTTER-LIKE ELEVATION CLASSES
   Matches Flutter's elevation: X
   ============================================ */

/* Elevation 0 - Flat surface */
.elevation-0 {
    background: var(--telos-surface);
    box-shadow: none;
}

/* Elevation 1 - Subtle lift (Cards, Switches) */
.elevation-1 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-1-overlay)));
    box-shadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12),
        0 1px 3px 0 rgba(0, 0, 0, 0.20);
}

/* Elevation 2 - Contained buttons, Cards on hover */
.elevation-2 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-2-overlay)));
    box-shadow:
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12),
        0 1px 5px 0 rgba(0, 0, 0, 0.20);
}

/* Elevation 3 - Refresh indicator, Search bar */
.elevation-3 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-3-overlay)));
    box-shadow:
        0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 3px 3px -2px rgba(0, 0, 0, 0.12),
        0 1px 8px 0 rgba(0, 0, 0, 0.20);
}

/* Elevation 4 - App Bar, Floating components */
.elevation-4 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-4-overlay)));
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20);
}

/* Elevation 6 - FAB, Snackbar */
.elevation-6 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-6-overlay)));
    box-shadow:
        0 6px 10px 0 rgba(0, 0, 0, 0.14),
        0 1px 18px 0 rgba(0, 0, 0, 0.12),
        0 3px 5px -1px rgba(0, 0, 0, 0.20);
}

/* Elevation 8 - Menus, Drawers, Bottom sheets */
.elevation-8 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-8-overlay)));
    box-shadow:
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12),
        0 5px 5px -3px rgba(0, 0, 0, 0.20);
}

/* Elevation 12 - FAB pressed */
.elevation-12 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-12-overlay)));
    box-shadow:
        0 12px 17px 2px rgba(0, 0, 0, 0.14),
        0 5px 22px 4px rgba(0, 0, 0, 0.12),
        0 7px 8px -4px rgba(0, 0, 0, 0.20);
}

/* Elevation 16 - Modal side sheets */
.elevation-16 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-16-overlay)));
    box-shadow:
        0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12),
        0 8px 10px -5px rgba(0, 0, 0, 0.20);
}

/* Elevation 24 - Dialogs */
.elevation-24 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-24-overlay)));
    box-shadow:
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12),
        0 11px 15px -7px rgba(0, 0, 0, 0.20);
}

/* ============================================
   TELOS NEON ELEVATION (Brand Enhancement)
   Adds fuchsia glow to Material elevation
   ============================================ */

.elevation-neon-1 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-1-overlay)));
    box-shadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12),
        0 1px 3px 0 rgba(0, 0, 0, 0.20),
        0 0 8px rgba(255, 0, 255, 0.05);
}

.elevation-neon-2 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-2-overlay)));
    box-shadow:
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12),
        0 1px 5px 0 rgba(0, 0, 0, 0.20),
        0 0 12px rgba(255, 0, 255, 0.08);
}

.elevation-neon-4 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-4-overlay)));
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20),
        0 0 20px rgba(255, 0, 255, 0.1);
}

.elevation-neon-8 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-8-overlay)));
    box-shadow:
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12),
        0 5px 5px -3px rgba(0, 0, 0, 0.20),
        0 0 30px rgba(255, 0, 255, 0.12);
}

.elevation-neon-16 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-16-overlay)));
    box-shadow:
        0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12),
        0 8px 10px -5px rgba(0, 0, 0, 0.20),
        0 0 40px rgba(255, 0, 255, 0.15);
}

.elevation-neon-24 {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-24-overlay)));
    box-shadow:
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12),
        0 11px 15px -7px rgba(0, 0, 0, 0.20),
        0 0 60px rgba(255, 0, 255, 0.18);
}

/* ============================================
   FLUTTER-LIKE SURFACE COMPONENTS
   ============================================ */

/* Card - Matches Flutter Card widget */
.flutter-card {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-1-overlay)));
    border-radius: 12px;
    border: 1px solid var(--telos-border);
    box-shadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12),
        0 1px 3px 0 rgba(0, 0, 0, 0.20);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.flutter-card:hover {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-4-overlay)));
    border-color: var(--telos-border-elevated);
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20),
        0 0 20px rgba(255, 0, 255, 0.08);
    transform: translateY(-2px);
}

/* AppBar - Matches Flutter AppBar */
.flutter-appbar {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-4-overlay)));
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--telos-border);
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20);
}

/* Bottom Sheet - Matches Flutter BottomSheet */
.flutter-bottomsheet {
    background: rgba(255, 255, 255, calc(0.03 + var(--elevation-8-overlay)));
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border: 1px solid var(--telos-border-elevated);
    border-bottom: none;
    box-shadow:
        0 -8px 10px 1px rgba(0, 0, 0, 0.14),
        0 -3px 14px 2px rgba(0, 0, 0, 0.12),
        0 -5px 5px -3px rgba(0, 0, 0, 0.20);
}

/* Dialog - Matches Flutter AlertDialog */
.flutter-dialog {
    background: rgba(20, 20, 25, 0.98);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border-radius: 28px;
    border: 1px solid var(--telos-border-elevated);
    box-shadow:
        0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12),
        0 11px 15px -7px rgba(0, 0, 0, 0.20),
        0 0 60px rgba(255, 0, 255, 0.1);
}

/* FAB - Matches Flutter FloatingActionButton */
.flutter-fab {
    background: linear-gradient(135deg, var(--telos-primary) 0%, var(--telos-primary-dark) 100%);
    border-radius: 16px;
    border: none;
    box-shadow:
        0 6px 10px 0 rgba(0, 0, 0, 0.14),
        0 1px 18px 0 rgba(0, 0, 0, 0.12),
        0 3px 5px -1px rgba(0, 0, 0, 0.20),
        0 0 20px rgba(255, 0, 255, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.flutter-fab:hover {
    transform: scale(1.05);
    box-shadow:
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12),
        0 5px 5px -3px rgba(0, 0, 0, 0.20),
        0 0 30px rgba(255, 0, 255, 0.4);
}

.flutter-fab:active {
    transform: scale(0.98);
    box-shadow:
        0 12px 17px 2px rgba(0, 0, 0, 0.14),
        0 5px 22px 4px rgba(0, 0, 0, 0.12),
        0 7px 8px -4px rgba(0, 0, 0, 0.20),
        0 0 40px rgba(255, 0, 255, 0.5);
}

/* ============================================
   FLUTTER-LIKE BUTTONS
   ============================================ */

/* Elevated Button - Primary */
.btn-elevated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--telos-primary) 0%, var(--telos-primary-dark) 100%);
    color: #000;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow:
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12),
        0 1px 5px 0 rgba(0, 0, 0, 0.20),
        0 0 15px rgba(255, 0, 255, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-elevated:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20),
        0 0 25px rgba(255, 0, 255, 0.4);
}

.btn-elevated:active {
    transform: translateY(0);
    box-shadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12),
        0 1px 3px 0 rgba(0, 0, 0, 0.20),
        0 0 10px rgba(255, 0, 255, 0.2);
}

/* Tonal Button - Secondary */
.btn-tonal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(255, 0, 255, 0.12);
    color: var(--telos-primary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tonal:hover {
    background: rgba(255, 0, 255, 0.18);
}

.btn-tonal:active {
    background: rgba(255, 0, 255, 0.24);
}

/* Outlined Button */
.btn-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 23px;
    background: transparent;
    color: var(--telos-primary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: 1px solid var(--telos-primary);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outlined:hover {
    background: rgba(255, 0, 255, 0.08);
    border-color: var(--telos-primary);
}

.btn-outlined:active {
    background: rgba(255, 0, 255, 0.12);
}

/* Text Button */
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: transparent;
    color: var(--telos-primary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-text:hover {
    background: rgba(255, 0, 255, 0.08);
}

.btn-text:active {
    background: rgba(255, 0, 255, 0.12);
}

/* ============================================
   ENTERPRISE AMBER BUTTONS
   ============================================ */

/* Elevated Button - Amber (Enterprise) */
.btn-elevated-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #000;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow:
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12),
        0 1px 5px 0 rgba(0, 0, 0, 0.20),
        0 0 15px rgba(245, 158, 11, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-elevated-amber:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.20),
        0 0 25px rgba(245, 158, 11, 0.35);
}

.btn-elevated-amber:active {
    transform: translateY(0);
    box-shadow:
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12),
        0 1px 3px 0 rgba(0, 0, 0, 0.20),
        0 0 10px rgba(245, 158, 11, 0.2);
}

/* Tonal Button - Amber */
.btn-tonal-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tonal-amber:hover {
    background: rgba(245, 158, 11, 0.18);
}

.btn-tonal-amber:active {
    background: rgba(245, 158, 11, 0.24);
}

/* ============================================
   FLUTTER-LIKE INPUT FIELDS
   ============================================ */

.flutter-input {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--telos-border);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.flutter-input:focus {
    outline: none;
    border-color: var(--telos-primary);
    box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.flutter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   FLUTTER-LIKE CHIPS
   ============================================ */

.flutter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--telos-border);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.flutter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}

.flutter-chip.selected {
    background: rgba(255, 0, 255, 0.2);
    border-color: rgba(255, 0, 255, 0.3);
    color: var(--telos-primary);
}

/* ============================================
   FLUTTER-LIKE LIST TILES
   ============================================ */

.flutter-list-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: transparent;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.flutter-list-tile:hover {
    background: rgba(255, 255, 255, 0.05);
}

.flutter-list-tile:active {
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   ANIMATIONS - Flutter-like Motion
   ============================================ */

/* Standard curve (Material easing) */
.motion-standard {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Decelerate (entering) */
.motion-decelerate {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Accelerate (exiting) */
.motion-accelerate {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* Sharp (quick changes) */
.motion-sharp {
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
    .flutter-dialog {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }

    .flutter-bottomsheet {
        border-radius: 24px 24px 0 0;
    }
}

/* ============================================
   REDUCED MOTION - Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}