:root{color-scheme: dark;--md-source-color: #c5162d;--md-sys-color-primary: #e23a3a;--md-sys-color-on-primary: #2b0609;--md-sys-color-primary-container: #7f1414;--md-sys-color-on-primary-container: #ffd9d5;--md-sys-color-secondary: #f06262;--md-sys-color-on-secondary: #3d0909;--md-sys-color-secondary-container: #642020;--md-sys-color-on-secondary-container: #ffdada;--md-sys-color-tertiary: #4dd7ff;--md-sys-color-on-tertiary: #001f2a;--md-sys-color-tertiary-container: #0e3f53;--md-sys-color-on-tertiary-container: #c0f1ff;--md-sys-color-background: #0c0d10;--md-sys-color-on-background: #e9eaee;--md-sys-color-surface: #13151a;--md-sys-color-on-surface: #e6e8ee;--md-sys-color-surface-variant: #2a2e36;--md-sys-color-on-surface-variant: #c7cbd6;--md-sys-color-outline: #6b7280;--md-sys-color-outline-variant: #384152;--md-sys-color-shadow: rgba(0, 0, 0, 0.7);--md-sys-color-scrim: rgba(0, 0, 0, 0.6);--md-sys-color-surface-dim: #101318;--md-sys-color-surface-bright: #1b1f27;--md-sys-color-surface-container-lowest: #080a0d;--md-sys-color-surface-container-low: #161a22;--md-sys-color-surface-container: #1b2029;--md-sys-color-surface-container-high: #202632;--md-sys-color-surface-container-highest: #262e3d;--glass-background: color-mix(in srgb, rgba(27, 31, 39, 0.85) 85%, rgba(226, 58, 58, 0.12) 15%);--glass-border: color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);--glass-shadow: 0 16px 40px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);--md-sys-color-error: #ffb4ab;--md-sys-color-on-error: #690005;--md-sys-color-error-container: #93000a;--md-sys-color-on-error-container: #ffdad6;--md-sys-color-success: #45ff7d;--md-sys-color-on-success: #002110;--md-sys-color-warning: #ffe16b;--md-sys-color-on-warning: #221c00;--md-sys-color-info: #71d3ff;--md-sys-color-on-info: #001f29;--md-sys-typescale-display-large-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-display-large-size: 3.5rem;--md-sys-typescale-display-large-tracking: -0.003em;--md-sys-typescale-display-large-line-height: 1.15;--md-sys-typescale-headline-medium-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-tracking: 0em;--md-sys-typescale-headline-medium-line-height: 1.3;--md-sys-typescale-title-large-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-tracking: 0.001em;--md-sys-typescale-title-large-line-height: 1.35;--md-sys-typescale-title-medium-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-title-medium-size: 1.125rem;--md-sys-typescale-title-medium-tracking: 0.001em;--md-sys-typescale-title-medium-line-height: 1.3;--md-sys-typescale-title-medium-weight: 600;--md-sys-typescale-title-small-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-tracking: 0.001em;--md-sys-typescale-title-small-line-height: 1.3;--md-sys-typescale-title-small-weight: 600;--md-sys-typescale-body-large-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-tracking: 0.01em;--md-sys-typescale-body-large-line-height: 1.5;--md-sys-typescale-body-medium-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-body-medium-size: 0.9375rem;--md-sys-typescale-body-medium-tracking: 0.01em;--md-sys-typescale-body-medium-line-height: 1.5;--md-sys-typescale-body-medium-weight: 400;--md-sys-typescale-body-small-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-body-small-size: 0.875rem;--md-sys-typescale-body-small-tracking: 0.02em;--md-sys-typescale-body-small-line-height: 1.45;--md-sys-typescale-label-medium-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-label-medium-size: 0.875rem;--md-sys-typescale-label-medium-tracking: 0.05em;--md-sys-typescale-label-medium-line-height: 1.35;--md-sys-typescale-label-small-font: "Roboto Flex", "Segoe UI", sans-serif;--md-sys-typescale-label-small-size: 0.75rem;--md-sys-typescale-label-small-tracking: 0.08em;--md-sys-typescale-label-small-line-height: 1.3;--font-family-base: var(--md-sys-typescale-body-large-font);--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--font-family-system: "Roboto Flex", "Segoe UI", sans-serif;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-small: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-large: 1.125rem;--font-size-xl: 1.375rem;--font-size-2xl: 1.75rem;--font-size-3xl: 2.5rem;--line-height-tight: 1.2;--line-height-normal: 1.4;--line-height-relaxed: 1.5;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--letter-spacing-tight: -0.01em;--letter-spacing-normal: 0em;--letter-spacing-wide: 0.06em;--letter-spacing-wider: 0.08em;--letter-spacing-widest: 0.12em;--spacing-0: 0;--spacing-1: 0.25rem;--spacing-2: 0.5rem;--spacing-3: 0.75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-7: 2rem;--spacing-8: 2.5rem;--spacing-9: 3rem;--spacing-10: 4rem;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-end: 28px;--md-sys-shape-corner-large-top: 28px;--md-sys-shape-corner-full: 999px;--border-radius-sm: var(--md-sys-shape-corner-extra-small);--border-radius-base: var(--md-sys-shape-corner-small);--border-radius-lg: var(--md-sys-shape-corner-medium);--card-border-radius: var(--md-sys-shape-corner-large);--border-width-sm: 1px;--border-width-md: 2px;--border-width-lg: 3px;--input-border-width: 1px;--input-border-width-md: 2px;--md-sys-elevation-level0: none;--md-sys-elevation-level1: 0 1px 3px 1px rgba(0, 0, 0, 0.18);--md-sys-elevation-level2: 0 2px 6px 2px rgba(0, 0, 0, 0.22);--md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, 0.26);--md-sys-elevation-level4: 0 6px 12px 4px rgba(0, 0, 0, 0.32);--md-sys-elevation-level5: 0 8px 16px 6px rgba(0, 0, 0, 0.38);--backdrop-blur-sm: blur(6px);--backdrop-blur-md: blur(12px);--backdrop-blur-lg: blur(18px);--md-sys-motion-duration-short1: 120ms;--md-sys-motion-duration-short2: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);--md-sys-motion-easing-decelerated: cubic-bezier(0, 0, 0, 1);--md-sys-motion-easing-accelerated: cubic-bezier(0.3, 0.0, 1, 1);--color-primary-50: color-mix(in srgb, #ffffff 92%, var(--md-sys-color-primary) 8%);--color-primary-100: color-mix(in srgb, #ffffff 85%, var(--md-sys-color-primary) 15%);--color-primary-200: color-mix(in srgb, #ffffff 78%, var(--md-sys-color-primary) 22%);--color-primary-300: color-mix(in srgb, #ffffff 66%, var(--md-sys-color-primary) 34%);--color-primary-400: color-mix(in srgb, #ffffff 50%, var(--md-sys-color-primary) 50%);--color-primary-500: var(--md-sys-color-primary);--color-primary-600: color-mix(in srgb, var(--md-sys-color-primary) 88%, #000000 12%);--color-primary-700: color-mix(in srgb, var(--md-sys-color-primary) 82%, #000000 18%);--color-primary-800: color-mix(in srgb, var(--md-sys-color-primary) 74%, #000000 26%);--color-primary-900: color-mix(in srgb, var(--md-sys-color-primary) 66%, #000000 34%);--color-primary-950: color-mix(in srgb, var(--md-sys-color-primary) 58%, #000000 42%);--color-primary: var(--md-sys-color-primary);--color-primary-hover: color-mix(in srgb, var(--md-sys-color-primary) 85%, #000000 15%);--color-primary-light: color-mix(in srgb, var(--md-sys-color-primary) 70%, #ffffff 30%);--color-primary-dark: color-mix(in srgb, var(--md-sys-color-primary) 80%, #000000 20%);--color-primary-alpha-5: rgba(255, 91, 85, 0.05);--color-primary-alpha-10: rgba(255, 91, 85, 0.1);--color-primary-alpha-20: rgba(255, 91, 85, 0.2);--color-primary-alpha-30: rgba(255, 91, 85, 0.3);--color-primary-alpha-50: rgba(255, 91, 85, 0.5);--color-primary-subtle: rgba(255, 91, 85, 0.08);--color-secondary: var(--md-sys-color-secondary);--color-secondary-hover: color-mix(in srgb, var(--md-sys-color-secondary) 85%, #000000 15%);--color-success: var(--md-sys-color-success);--color-success-hover: #62ffa0;--color-warning: var(--md-sys-color-warning);--color-warning-hover: #ffe788;--color-error: var(--md-sys-color-error-container);--color-error-hover: #ba1a1a;--color-info: var(--md-sys-color-tertiary);--color-info-hover: #6de1ff;--color-background: var(--md-sys-color-surface);--color-surface: var(--md-sys-color-surface-container);--color-surface-elevated: var(--md-sys-color-surface-container-high);--color-surface-elevated-1: var(--md-sys-color-surface-container-low);--color-surface-elevated-2: var(--md-sys-color-surface-container);--color-surface-elevated-3: var(--md-sys-color-surface-container-high);--color-surface-hover: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-primary) 10%);--color-surface-selected: color-mix(in srgb, var(--md-sys-color-surface) 85%, var(--md-sys-color-primary) 15%);--color-text-primary: var(--md-sys-color-on-surface);--color-text-secondary: color-mix(in srgb, var(--md-sys-color-on-surface) 78%, transparent);--color-text-muted: color-mix(in srgb, var(--md-sys-color-on-surface) 60%, transparent);--color-text-disabled: rgba(241, 241, 243, 0.38);--color-text-inverse: var(--md-sys-color-on-primary);--color-border: color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);--color-border-light: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);--color-border-strong: color-mix(in srgb, var(--md-sys-color-on-surface) 26%, transparent);--color-border-hover: color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);--color-neutral-50: #f9f6f6;--color-neutral-100: #f1eaea;--color-neutral-200: #e1d3d3;--color-neutral-300: #cbb2b2;--color-neutral-400: #b48f8f;--color-neutral-500: #9c6f6f;--color-neutral-600: #7f5555;--color-neutral-700: #623d3d;--color-neutral-800: #452828;--color-neutral-900: #2b1818;--color-neutral: var(--color-neutral-500);--shadow-sm: var(--md-sys-elevation-level1);--shadow-md: var(--md-sys-elevation-level3);--shadow-lg: var(--md-sys-elevation-level4);--shadow-glow: 0 0 12px color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);--shadow-glow-primary: 0 0 18px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);--focus-ring-width: 4px;--focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);--focus-ring-strong-color: color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent);--focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);--focus-ring-strong: 0 0 0 var(--focus-ring-width) var(--focus-ring-strong-color);--sidebar-width-min: 11rem;--sidebar-width: 13.5rem;--sidebar-width-max: 18rem;--bottom-nav-height: clamp(var(--spacing-9), 9vh, var(--spacing-10));--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--breakpoint-sm: 600px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1366px;--breakpoint-2xl: 1600px;--transition-fast: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);--transition-normal: var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);--transition-slow: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-decelerated);--transition-all: var(--transition-normal);--z-index-page: 0;--z-index-dropdown: 1000;--z-index-sticky: 1020;--z-index-fixed: 1030;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--z-index-popover: 1060;--z-index-tooltip: 1070;--z-index-fab: 1090;--z-index-toast: 1200;--z-index-wizard: 10000;--app-header-height: clamp(48px, 6vw, 64px);--sidebar-width-collapsed: clamp(var(--spacing-9), 7vw, var(--spacing-10))} :root{--color-background-900: var(--md-sys-color-surface-container-lowest);--color-background-800: var(--md-sys-color-surface-dim);--color-background-700: var(--md-sys-color-surface);--color-background-600: var(--md-sys-color-surface-container-low);--color-primary-500: var(--md-sys-color-primary);--color-primary-400: color-mix(in srgb, var(--md-sys-color-primary) 85%, var(--md-sys-color-on-primary) 15%);--color-primary-700: color-mix(in srgb, var(--md-sys-color-primary) 85%, #000000 15%);--color-primary-100: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-primary) 12%);--color-secondary-500: var(--md-sys-color-secondary);--color-secondary-100: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-secondary) 12%);--color-success-500: var(--md-sys-color-success);--color-success-100: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-success) 10%);--color-success-200: color-mix(in srgb, var(--md-sys-color-surface) 82%, var(--md-sys-color-success) 18%);--color-success-300: color-mix(in srgb, var(--md-sys-color-surface) 75%, var(--md-sys-color-success) 25%);--color-success-600: color-mix(in srgb, var(--md-sys-color-success) 88%, #000000 12%);--color-success-700: color-mix(in srgb, var(--md-sys-color-success) 82%, #000000 18%);--color-success-800: color-mix(in srgb, var(--md-sys-color-success) 75%, #000000 25%);--color-warning-500: var(--md-sys-color-warning);--color-warning-100: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-warning) 10%);--color-warning-300: color-mix(in srgb, var(--md-sys-color-surface) 78%, var(--md-sys-color-warning) 22%);--color-warning-700: color-mix(in srgb, var(--md-sys-color-warning) 80%, #000000 20%);--color-warning-800: color-mix(in srgb, var(--md-sys-color-warning) 72%, #000000 28%);--color-info-500: var(--md-sys-color-tertiary);--color-info-100: color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-tertiary) 12%);--color-info-300: color-mix(in srgb, var(--md-sys-color-surface) 76%, var(--md-sys-color-tertiary) 24%);--color-info-700: color-mix(in srgb, var(--md-sys-color-tertiary) 82%, #000000 18%);--color-info-800: color-mix(in srgb, var(--md-sys-color-tertiary) 74%, #000000 26%);--color-error-500: var(--md-sys-color-error);--color-error-100: var(--md-sys-color-on-error-container);--color-error-300: color-mix(in srgb, var(--md-sys-color-error-container) 66%, var(--md-sys-color-on-error) 34%);--color-error-700: color-mix(in srgb, var(--md-sys-color-error) 82%, #000000 18%);--color-error-800: color-mix(in srgb, var(--md-sys-color-error) 74%, #000000 26%);--color-border-100: var(--color-border-light);--color-border-200: var(--color-border);--border-width-1: var(--border-width-sm);--border-width-2: var(--border-width-md)} :root[data-theme="day"]{color-scheme: light;--md-sys-color-primary: #c5162d;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: #ffd4d8;--md-sys-color-on-primary-container: #3f0a0f;--md-sys-color-secondary: #a91524;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container: #ffd4d8;--md-sys-color-on-secondary-container: #3f0a0f;--md-sys-color-tertiary: #00668a;--md-sys-color-on-tertiary: #ffffff;--md-sys-color-tertiary-container: #c2e8ff;--md-sys-color-on-tertiary-container: #001e2a;--md-sys-color-background: #ffffff;--md-sys-color-on-background: #111827;--md-sys-color-surface: #ffffff;--md-sys-color-on-surface: #111827;--md-sys-color-surface-variant: #f2f4f7;--md-sys-color-on-surface-variant: #384152;--md-sys-color-outline: #cdd5df;--md-sys-color-outline-variant: #e5e7eb;--md-sys-color-shadow: rgba(0, 0, 0, 0.2);--md-sys-color-scrim: rgba(0, 0, 0, 0.18);--md-sys-color-surface-dim: #f5f7fa;--md-sys-color-surface-bright: #ffffff;--md-sys-color-surface-container-lowest: #ffffff;--md-sys-color-surface-container-low: #f8fafc;--md-sys-color-surface-container: #eef2f7;--md-sys-color-surface-container-high: #e7ecf3;--md-sys-color-surface-container-highest: #e1e7ef;--color-background: var(--md-sys-color-surface);--color-surface: var(--md-sys-color-surface-container);--color-surface-elevated: var(--md-sys-color-surface-container-high);--color-text-primary: var(--md-sys-color-on-surface);--color-text-secondary: color-mix(in srgb, var(--md-sys-color-on-surface) 72%, transparent);--color-text-muted: color-mix(in srgb, var(--md-sys-color-on-surface) 58%, transparent);--color-border: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);--color-border-light: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);--color-border-strong: color-mix(in srgb, var(--md-sys-color-on-surface) 28%, transparent);--color-surface-hover: color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary) 8%);--color-surface-selected: color-mix(in srgb, var(--md-sys-color-surface) 85%, var(--md-sys-color-primary) 15%);--color-primary-hover: color-mix(in srgb, var(--md-sys-color-primary) 85%, #000000 15%);--color-secondary-hover: color-mix(in srgb, var(--md-sys-color-secondary) 85%, #000000 15%);--color-success-hover: #27a05a;--color-warning-hover: #ffea8a;--color-error-hover: #c00010;--color-info-hover: #0085b5} :root[data-theme="night"]{color-scheme: dark;--md-sys-color-primary: #ff6b81;--md-sys-color-on-primary: #400010;--md-sys-color-primary-container: #6b1022;--md-sys-color-on-primary-container: #ffd9de;--md-sys-color-secondary: #ff8fa3;--md-sys-color-on-secondary: #400010;--md-sys-color-secondary-container: #5a1422;--md-sys-color-on-secondary-container: #ffd9de;--md-sys-color-tertiary: #4cc2ff;--md-sys-color-on-tertiary: #002b3b;--md-sys-color-tertiary-container: #0f3b52;--md-sys-color-on-tertiary-container: #c3eaff;--md-sys-color-background: #0b1220;--md-sys-color-on-background: #e2e8f0;--md-sys-color-surface: #121c2e;--md-sys-color-on-surface: #e6edff;--md-sys-color-surface-variant: #273247;--md-sys-color-on-surface-variant: #c1cadf;--md-sys-color-outline: #3f4a62;--md-sys-color-outline-variant: #2c3547;--md-sys-color-shadow: rgba(0, 0, 0, 0.7);--md-sys-color-scrim: rgba(3, 7, 18, 0.75);--md-sys-color-surface-dim: #0d1726;--md-sys-color-surface-bright: #1a2538;--md-sys-color-surface-container-lowest: #050b17;--md-sys-color-surface-container-low: #151f31;--md-sys-color-surface-container: #1b2639;--md-sys-color-surface-container-high: #223047;--md-sys-color-surface-container-highest: #283752;--color-background: var(--md-sys-color-surface);--color-surface: var(--md-sys-color-surface-container);--color-surface-elevated: var(--md-sys-color-surface-container-high);--color-text-primary: var(--md-sys-color-on-surface);--color-text-secondary: color-mix(in srgb, var(--md-sys-color-on-surface) 70%, transparent);--color-text-muted: color-mix(in srgb, var(--md-sys-color-on-surface) 50%, transparent);--color-text-disabled: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--color-border: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);--color-border-light: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);--color-border-strong: color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent);--color-surface-hover: color-mix(in srgb, var(--md-sys-color-surface) 80%, var(--md-sys-color-primary) 20%);--color-surface-selected: color-mix(in srgb, var(--md-sys-color-surface) 65%, var(--md-sys-color-primary) 35%);--color-primary-hover: color-mix(in srgb, var(--md-sys-color-primary) 80%, #ffd9de 20%);--color-secondary-hover: color-mix(in srgb, var(--md-sys-color-secondary) 82%, #ffd9de 18%);--color-success-hover: #3dd98b;--color-warning-hover: #ffd86a;--color-error-hover: #ff8892;--color-info-hover: #5ed5ff} @media (prefers-reduced-motion: reduce){:root{--md-sys-motion-duration-short1: 0ms;--md-sys-motion-duration-short2: 0ms;--md-sys-motion-duration-medium1: 0ms;--transition-fast: 0ms;--transition-normal: 0ms;--transition-slow: 0ms} } :root{--primary-color: var(--md-sys-color-primary);--primary-hover: var(--color-primary-hover);--accent-color: var(--md-sys-color-tertiary);--secondary-color: var(--md-sys-color-secondary);--success-color: var(--md-sys-color-success);--warning-color: var(--md-sys-color-warning);--error-color: var(--md-sys-color-error);--info-color: var(--md-sys-color-tertiary);--text-primary: var(--md-sys-color-on-surface);--text-secondary: color-mix(in srgb, var(--md-sys-color-on-surface) 72%, transparent);--text-muted: color-mix(in srgb, var(--md-sys-color-on-surface) 58%, transparent);--border-color: var(--color-border);--border-hover: var(--color-border-hover);--bg-primary: var(--md-sys-color-surface);--bg-secondary: var(--md-sys-color-surface-container);--bg-muted: var(--md-sys-color-surface-variant);--bg-hover: var(--color-surface-hover);--bg-canvas: var(--md-sys-color-background);--elevated-surface: var(--md-sys-color-surface-container-high);--border-radius: var(--border-radius-base);--border-radius-lg: var(--card-border-radius);--border-radius-pill: var(--md-sys-shape-corner-full);--shadow-xs: var(--md-sys-elevation-level1);--shadow-sm: var(--md-sys-elevation-level2);--shadow-md: var(--md-sys-elevation-level3);--shadow-lg: var(--md-sys-elevation-level4);--shadow-glow: var(--shadow-glow-primary);--font-family: var(--font-family-system);--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.35rem;--font-size-2xl: 1.75rem;--spacing-2xs: 0.2rem;--spacing-xs: 0.35rem;--spacing-sm: 0.75rem;--spacing-md: 1.25rem;--spacing-lg: 1.75rem;--spacing-xl: 2.75rem;--layout-max-width: 1280px;--transition-fast: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);--transition-normal: var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);--transition-slow: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-decelerated)} *{margin:0;padding:0;box-sizing:border-box} body{font-family: var(--font-family);font-size: var(--md-sys-typescale-body-medium-size);line-height: var(--md-sys-typescale-body-medium-line-height);color: var(--md-sys-color-on-background);background: var(--md-sys-color-background);min-height: 100vh;overflow-x:hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} button{font-family: inherit;cursor: pointer;border:none;outline:none;transition: all var(--transition-fast)} input, select, textarea{font-family: inherit;font-size: inherit;outline: none} .hidden{display: none !important} .login-screen{position: fixed;inset: 0;background: #ffffff;display: flex;align-items: center;justify-content: center;padding: 2rem 1rem;z-index: 1000} .login-container.modern{background: #ffffff;width: 100%;max-width: 420px;padding: 3rem 2.5rem;border-radius: 16px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border: 1px solid rgba(229, 231, 235, 0.8)} .login-header.modern{text-align: center;margin-bottom: 2.5rem} .login-logo{display: flex;justify-content: center;margin-bottom: 1.5rem} .logo-image{height: 64px;width: auto;object-fit: contain} .login-header.modern h1{color: #111827;font-size: 1.875rem;font-weight: 700;margin: 0 0 0.5rem;letter-spacing: -0.025em} .login-header.modern p{color: #6b7280;font-size: 1rem;font-weight: 400;margin: 0} .login-form.modern .form-group{margin-bottom: 1.5rem} .login-form.modern label{display: block;font-size: 0.875rem;font-weight: 500;margin: 0 0 0.5rem;color: #374151} .login-form.modern input{width: 100%;padding: 0.75rem 1rem;border: 2px solid #e5e7eb;border-radius: 8px;background: #ffffff;font-size: 1rem;line-height: 1.5;color: #111827;transition: all 0.2s ease-in-out} .login-form.modern input::placeholder{color: #9ca3af} .login-form.modern input:focus{outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)} .login-form.modern input:hover:not(:focus){border-color: #d1d5db} .login-footer{margin-top: 2rem;text-align: center;border-top: 1px solid #f3f4f6;padding-top: 1.5rem} .login-footer p{color: #9ca3af;font-size: 0.875rem;margin: 0} #login-error.error-message{margin: 0 0 1rem 0;padding: 0.75rem;font-size: 0.875rem;border-radius: 8px;background: #fef2f2;border: 1px solid #fecaca;color: #dc2626} .login-form.modern input:focus-visible, .btn:focus-visible{outline: 2px solid var(--primary-color);outline-offset: 2px} @media (max-width: 768px){.login-container.modern{padding: 2.5rem 2rem;margin: 1rem} .login-header.modern h1{font-size: 1.625rem} } @media (max-width: 600px){.login-container.modern{padding: 2rem 1.5rem;margin: 1rem;max-width: none;border-radius: 12px} .login-header.modern h1{font-size: 1.5rem} .logo-image{height: 48px} .login-form.modern .form-group{margin-bottom: 1.25rem} } @media (max-width: 480px){.login-screen{padding: 1rem 0.5rem} .login-container.modern{padding: 1.5rem 1rem;margin: 0.5rem;border-radius: 8px} .login-header.modern{margin-bottom: 2rem} .login-header.modern h1{font-size: 1.375rem} .logo-image{height: 40px} } @media (prefers-contrast: high){.login-container.modern{border: 2px solid #000000;box-shadow: none} .login-form.modern input{border: 2px solid #000000} .login-form.modern input:focus{border-color: #000000;box-shadow: 0 0 0 2px #000000} } @media (prefers-reduced-motion: reduce){.login-form.modern input, .btn{transition: none} } .loading-screen{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: var(--bg-primary);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 9999} .loading-spinner{width: 40px;height: 40px;border: 4px solid var(--border-color);border-top: 4px solid var(--primary-color);border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .loading-text{margin-top: var(--spacing-md);color: var(--text-secondary);font-size: var(--font-size-sm)} .app-container{min-height: 100vh;display: flex;flex-direction: column;position: relative} .app-header{position: sticky;top: 0;z-index: 120;background: var(--md-sys-color-surface-container-high);backdrop-filter: var(--backdrop-blur-md);border-bottom: 1px solid var(--color-border-light);box-shadow: var(--md-sys-elevation-level2)} .header-content{width: 100%;max-width: var(--layout-max-width);margin: 0 auto;padding: var(--spacing-sm) var(--spacing-lg);display:flex;align-items:center;justify-content: space-between;gap: var(--spacing-md)} .header-left{display:flex;align-items:center;gap: var(--spacing-md);min-width: 0} .header-right{display:flex;align-items:center;gap: var(--spacing-sm)} .header-right .btn{border-radius: var(--border-radius-pill);padding: 0.45rem 1.05rem;box-shadow: var(--shadow-xs)} .nav-toggle{display: none;background: transparent;border: none;color: var(--text-secondary)} .header-actions{display: flex;align-items: center;gap: var(--spacing-sm);flex-wrap: wrap} .app-title{font-size: var(--font-size-2xl);font-weight: 700;color: var(--text-primary);letter-spacing: -0.01em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .user-info{display: flex;align-items: center;gap: var(--spacing-sm);color: var(--text-secondary);font-size: var(--font-size-sm);font-weight: 500} .app-body{flex: 1;width: 100%;max-width: var(--layout-max-width);margin: var(--spacing-lg) auto var(--spacing-xl);padding: 0 var(--spacing-lg);display: grid;grid-template-columns: 280px 1fr;gap: var(--spacing-lg);align-items: flex-start} .app-navigation{position: sticky;top: calc(var(--spacing-lg) + 72px);align-self: start;background: var(--md-sys-color-surface-container);border: 1px solid var(--color-border-light);border-radius: var(--border-radius-lg);box-shadow: var(--md-sys-elevation-level2);padding: var(--spacing-lg) var(--spacing-md);backdrop-filter: var(--backdrop-blur-md)} .nav-container{display: flex;flex-direction: column;gap: var(--spacing-xs)} .nav-btn{display: flex;align-items: center;gap: var(--spacing-sm);width: 100%;text-align: left;padding: 0.85rem var(--spacing-md);background: transparent;border: none;border-radius: var(--border-radius);color: var(--text-secondary);font-size: var(--font-size-base);font-weight: 600;transition: all var(--transition-fast);min-width: 0;position: relative;overflow: hidden} .nav-btn::after{content: '';position: absolute;inset: 6px;border-radius: calc(var(--border-radius) - 6px);background: transparent;transition: background var(--transition-fast), box-shadow var(--transition-fast);z-index: -1} .nav-btn:hover{color: var(--primary-color)} .nav-btn:hover::after{background: rgba(79, 70, 229, 0.08);box-shadow: var(--shadow-xs)} .nav-btn.active{color: var(--primary-color)} .nav-btn.active::after{background: rgba(79, 70, 229, 0.12);box-shadow: var(--shadow-sm)} .nav-icon{font-size: 1.1rem;width: 1.75rem;text-align: center} .app-main{flex: 1;background: transparent;overflow: hidden} .content-container{height: 100%;padding: var(--spacing-lg);background: var(--md-sys-color-surface-container);border: 1px solid var(--color-border);border-radius: var(--border-radius-lg);box-shadow: var(--md-sys-elevation-level3);backdrop-filter: var(--backdrop-blur-sm);overflow-y: auto} .error-message{color: var(--error-color);font-size: var(--font-size-sm);margin-top: var(--spacing-sm);padding: var(--spacing-sm);background: #fce8e6;border: 1px solid #f9ab00;border-radius: var(--border-radius)} .module-loading, .module-error{text-align: center;padding: var(--spacing-xl)} .module-error{color: var(--error-color)} .module-error h3{margin-bottom: var(--spacing-md)} .module-error p{margin-bottom: var(--spacing-lg);color: var(--text-secondary)} .loading-state{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--spacing-sm);padding: var(--spacing-xl) var(--spacing-lg);color: var(--text-secondary)} .loading-state .spinner{width: 32px;height: 32px;border: 3px solid rgba(148, 163, 184, 0.4);border-top-color: var(--primary-color);border-radius: 50%;animation: spin 0.8s linear infinite} @media (max-width: 768px){.header-content{padding: var(--spacing-sm) var(--spacing-md)} .app-title{font-size: 1.4rem} .app-body{margin: var(--spacing-md) auto var(--spacing-lg);padding: 0 var(--spacing-md)} .content-container{padding: var(--spacing-md);border-radius: var(--border-radius)} .login-container{margin: var(--spacing-sm);padding: var(--spacing-lg)} .notification{margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);min-width: auto;max-width: calc(100vw - 2rem)} } @media (max-width: 1024px){.nav-toggle{display: inline-flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.75);border: 1px solid rgba(148, 163, 184, 0.25);border-radius: var(--border-radius-pill);padding: 0.4rem 0.65rem;font-size: 1.15rem;color: var(--text-primary);box-shadow: var(--shadow-xs)} .nav-toggle:hover{background: rgba(79, 70, 229, 0.12);color: var(--primary-color)} .app-body{grid-template-columns: 1fr;padding: 0 var(--spacing-md)} .app-navigation{position: fixed;top: 0;left: 0;bottom: 0;width: min(320px, 85vw);transform: translateX(-100%);transition: transform var(--transition-normal);border-radius: 0;border: none;box-shadow: var(--shadow-lg);padding: var(--spacing-lg)} .nav-container{padding: 0;gap: var(--spacing-sm)} .nav-btn{font-size: 1.05rem;border-radius: var(--border-radius)} .nav-btn::after{inset: 4px} body.nav-open .app-navigation{transform: translateX(0)} .nav-backdrop{position: fixed;inset: 0;background: rgba(15, 23, 42, 0.38);z-index: 150;display: block} .nav-backdrop[hidden]{display: none} } @media print{.app-header, .app-navigation, .notification-container{display: none} .app-body{flex-direction: column} .app-main{box-shadow: none} } .module-container{max-width: 1200px;margin: 0 auto;padding: var(--spacing-xl) var(--spacing-xl)} .module-header{margin-bottom: var(--spacing-lg);background: var(--bg-primary);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);padding: var(--spacing-lg)} .module-header h2{margin: 0 0 var(--spacing-xs) 0;font-size: var(--font-size-xl);color: var(--text-primary)} .module-header p{margin: 0;color: var(--text-secondary)} .module-content{background: var(--bg-primary);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);padding: var(--spacing-lg)} .placeholder-content{color: var(--text-secondary)} .feature-list ul{padding-left: 1.25rem} .feature-list li{margin-bottom: var(--spacing-xs)} .card{background: var(--bg-primary);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);margin-bottom: var(--spacing-lg)} .card-header{padding: var(--spacing-md) var(--spacing-lg);border-bottom: 1px solid var(--border-color)} .card-body{padding: var(--spacing-lg)} .row{display: grid;grid-template-columns: repeat(12, 1fr);gap: var(--spacing-md)} .col-md-2{grid-column: span 2} .col-md-3{grid-column: span 3} @media (max-width: 768px){.row{grid-template-columns: 1fr} } .table{width: 100%;border-collapse: collapse} .table th, .table td{padding: var(--spacing-sm) var(--spacing-md);border-bottom: 1px solid var(--border-color);text-align: left} .table thead th{background: var(--bg-secondary);font-weight: 600} .table-striped tbody tr:nth-child(even){background: var(--bg-hover)} .table-hover tbody tr:hover{background: var(--bg-hover)} .table-responsive{overflow-x: auto} @media (max-width: 720px){.inventory-module .items-table{border: 0} .inventory-module .items-table thead{display: none} .inventory-module .items-table tbody tr{display: block;background: var(--bg-primary);margin-bottom: var(--spacing-sm);border: 1px solid var(--border-color);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);overflow: hidden} .inventory-module .items-table tbody td{display: grid;grid-template-columns: 40% 1fr;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-md);border: 0;border-bottom: 1px solid var(--border-color)} .inventory-module .items-table tbody td:last-child{border-bottom: 0} .inventory-module .items-table tbody td::before{content: attr(data-label);font-weight: 600;color: var(--text-secondary)} .inventory-module .item-actions{justify-content: flex-start;gap: var(--spacing-sm)} } @media (max-width: 720px){.volunteers-table-container .table{border: 0} .volunteers-table-container .table thead{display: none} .volunteers-table-container .table tbody tr{display: block;background: var(--bg-primary);margin-bottom: var(--spacing-sm);border: 1px solid var(--border-color);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);overflow: hidden} .volunteers-table-container .table tbody td{display: grid;grid-template-columns: 40% 1fr;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-md);border: 0;border-bottom: 1px solid var(--border-color)} .volunteers-table-container .table tbody td:last-child{border-bottom: 0} .volunteers-table-container .table tbody td::before{content: attr(data-label);font-weight: 600;color: var(--text-secondary)} .volunteer-management .action-buttons{justify-content: flex-start;gap: var(--spacing-sm)} } .badge{display: inline-block;padding: 0.25rem 0.5rem;border-radius: 999px;font-size: var(--font-size-sm)} .badge-status{background: var(--bg-secondary);color: var(--text-primary)} .text-muted{color: var(--text-secondary)} .text-center{text-align: center} .py-5{padding-top: 3rem;padding-bottom: 3rem} .mb-3{margin-bottom: 1rem} .stacked-text{display: flex;flex-direction: column;gap: 0.15rem} .text-strong{font-weight: 600;color: var(--text-primary)} .text-subtle{color: var(--text-muted);font-size: var(--font-size-xs);letter-spacing: 0.02em} .qty{font-variant-numeric: tabular-nums;font-weight: 600;color: var(--primary-color)} .receipts-summary{display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: var(--spacing-md);margin-bottom: var(--spacing-lg)} .summary-card{background: rgba(79, 70, 229, 0.08);border: 1px solid rgba(79, 70, 229, 0.15);border-radius: var(--border-radius-lg);padding: var(--spacing-md) var(--spacing-lg);box-shadow: var(--shadow-xs);display: flex;flex-direction: column;gap: var(--spacing-xs)} .summary-label{font-size: var(--font-size-xs);text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted)} .summary-value{font-size: 1.75rem;font-weight: 700;color: var(--text-primary)} .detail-section{margin-bottom: var(--spacing-lg)} .detail-section h4{margin-bottom: var(--spacing-sm);font-size: var(--font-size-lg);color: var(--text-primary)} .detail-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: var(--spacing-md);padding: var(--spacing-md);border: 1px solid rgba(148, 163, 184, 0.16);border-radius: var(--border-radius);background: rgba(248, 250, 252, 0.6)} .volunteer-management .action-buttons{display: flex;flex-wrap: wrap;gap: var(--spacing-xs)} .volunteer-management .roles-list{display: flex;flex-wrap: wrap;gap: var(--spacing-xs)} .volunteer-management .inactive-row{opacity: 0.6} @import url('./components/modal.css');@import url('./modules/inventory.css');@import url('./modules/inventory-operations.css');.skip-link{position: absolute;left: -999px;top: auto;width: 1px;height: 1px;overflow: hidden} .skip-link:focus{position: static;width: auto;height: auto;padding: var(--spacing-sm) var(--spacing-md);background: var(--primary-color);color: #ffffff;border-radius: var(--border-radius);z-index: 10000} .modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 10000;padding: var(--spacing-md)} .modal-dialog{background: var(--bg-primary);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-lg);width: 100%;max-width: 600px;max-height: 90vh;overflow: hidden;display: flex;flex-direction: column} .modal-header{display: flex;align-items: center;justify-content: space-between;padding: var(--spacing-lg);border-bottom: 1px solid var(--border-color)} .modal-header h3{margin: 0;color: var(--text-primary)} .modal-close{background: none;border: none;font-size: 1.5rem;color: var(--text-secondary);cursor: pointer;padding: var(--spacing-xs);border-radius: var(--border-radius);transition: all var(--transition-fast)} .modal-close:hover{background: var(--bg-hover);color: var(--text-primary)} .modal-form{flex: 1;overflow-y: auto;padding: var(--spacing-lg)} .form-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: var(--spacing-lg)} .form-group{display: flex;flex-direction: column} .form-group.span-full{grid-column: 1 / -1} .form-group label{margin-bottom: var(--spacing-xs);font-weight: 500;color: var(--text-primary)} .form-group input, .form-group select, .form-group textarea{padding: var(--spacing-sm) var(--spacing-md);border: 2px solid var(--border-color);border-radius: var(--border-radius);font-size: var(--font-size-base);transition: border-color var(--transition-fast)} .form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color: var(--primary-color);outline: none} .form-group textarea{resize: vertical;min-height: 80px} .checkbox-label{display: flex;align-items: flex-start;gap: var(--spacing-sm);cursor: pointer;flex-direction: row} .checkbox-label input[type="checkbox"]{margin: 0;width: auto} .checkbox-text{font-weight: 500;color: var(--text-primary)} .checkbox-label small{color: var(--text-secondary);font-size: var(--font-size-xs);display: block;margin-top: var(--spacing-xs);margin-left: calc(1rem + var(--spacing-sm))} .modal-footer{padding: var(--spacing-lg);border-top: 1px solid var(--border-color);display: flex;justify-content: flex-end;gap: var(--spacing-md)} @media (max-width: 768px){.modal-overlay{padding: var(--spacing-sm)} .modal-dialog{max-height: 95vh} .form-grid{grid-template-columns: 1fr;gap: var(--spacing-md)} .modal-header, .modal-form, .modal-footer{padding: var(--spacing-md)} .modal-footer{flex-direction: column} .modal-footer button{width: 100%} } @media (min-width: 1200px){.modal-dialog.modal-large .form-grid, .modal-dialog.modal-xlarge .form-grid{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))} } .c-button{display: inline-flex;align-items: center;justify-content: center;gap: var(--spacing-2);padding: var(--spacing-2) var(--spacing-4);border: 1px solid transparent;background: var(--md-sys-color-surface-container-high);color: var(--color-text-primary);font-family: var(--font-family-base);font-size: var(--md-sys-typescale-label-medium-size);font-weight: 600;letter-spacing: var(--md-sys-typescale-label-medium-tracking);line-height: 1;text-decoration: none;cursor: pointer;border-radius: var(--border-radius-base);transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);white-space: nowrap;user-select: none;position: relative;min-height: 40px;box-shadow: var(--md-sys-elevation-level1)} .c-button:hover{background: var(--md-sys-color-surface-container-highest);transform: translateY(-1px);box-shadow: var(--md-sys-elevation-level2)} .c-button:active{transform: translateY(0);box-shadow: none} .c-button:focus-visible{outline: none;box-shadow: var(--focus-ring), var(--md-sys-elevation-level2)} .c-button--primary{background: var(--color-primary);color: var(--md-sys-color-on-primary)} .c-button--primary:hover{background: var(--color-primary-hover)} .c-button--secondary{background: var(--color-secondary);color: var(--md-sys-color-on-secondary, var(--color-text-inverse))} .c-button--secondary:hover{background: var(--color-secondary-hover)} .c-button--success{background: var(--color-success);color: var(--md-sys-color-on-success)} .c-button--success:hover{background: var(--color-success-hover)} .c-button--warning{background: var(--color-warning);color: var(--md-sys-color-on-warning)} .c-button--warning:hover{background: var(--color-warning-hover)} .c-button--error{background: var(--color-error);color: var(--md-sys-color-on-error)} .c-button--error:hover{background: var(--color-error-hover)} .c-button--outline{background: transparent;color: var(--color-primary);border-color: var(--color-primary)} .c-button--outline:hover{background: var(--color-primary);color: var(--md-sys-color-on-primary)} .c-button--ghost{background: transparent;color: var(--color-text-primary);border-color: transparent} .c-button--ghost:hover{background: var(--color-surface-hover);border-color: var(--color-border)} .c-button--link{background: transparent;color: var(--color-primary);border-color: transparent;text-decoration: underline;padding: var(--spacing-1) var(--spacing-2)} .c-button--link:hover{background: transparent;color: var(--color-primary-hover);text-decoration: none;transform: none;box-shadow: none} .c-button--small{padding: var(--spacing-1) var(--spacing-2);font-size: var(--font-size-xs);min-height: 28px} .c-button--large{padding: var(--spacing-3) var(--spacing-4);font-size: var(--font-size-base);min-height: 48px} .c-button--xl{padding: var(--spacing-4) var(--spacing-6);font-size: var(--font-size-large);min-height: 56px} .c-button:disabled, .c-button--disabled{opacity: 0.5;cursor: not-allowed;pointer-events: none} .c-button--loading{position: relative;pointer-events: none} .c-button--loading::after{content: "";position: absolute;width: 16px;height: 16px;border: 2px solid currentColor;border-radius: 50%;border-top-color: transparent;animation: c-spin 1s linear infinite} .c-button--loading .c-button__text{opacity: 0} .c-button--icon-only{padding: var(--spacing-2);min-width: 36px} .c-button--icon-only.c-button--small{padding: var(--spacing-1);min-width: 28px} .c-button--icon-only.c-button--large{padding: var(--spacing-3);min-width: 48px} .c-button__icon{font-size: 1em;line-height: 1} .c-button__icon--left{margin-right: var(--spacing-1)} .c-button__icon--right{margin-left: var(--spacing-1)} @keyframes c-spin{0%{transform: rotate(0deg) } 100%{transform: rotate(360deg) } } .modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;background: var(--md-sys-color-scrim);z-index: 1000;opacity: 0;visibility: hidden;overflow: hidden;transition: opacity var(--transition-normal, 0.2s ease)} .modal-overlay.modal-show, .modal-overlay[style*="display: flex"]{opacity: 1;visibility: visible} .modal-dialog{position: relative;display: flex;flex-direction: column;max-width: 90vw;max-height: 90vh;width: 500px;min-height: 200px;background: var(--color-background);border: 2px solid var(--md-sys-color-outline);border-radius: var(--card-border-radius);box-shadow: 0 10px 40px rgba(0,0,0,0.3);overflow: hidden;transform: scale(0.9) translateY(-20px);transition: transform var(--transition-normal, 0.2s ease)} .modal-overlay.modal-show .modal-dialog, .modal-overlay[style*="display: flex"] .modal-dialog{transform: scale(1) translateY(0)} .modal-header{flex: 0 0 auto;padding: var(--spacing-4);border-bottom: 1px solid var(--color-border);background: var(--color-surface)} .modal-header h3{margin: 0;font-size: var(--font-size-xl);font-weight: var(--font-weight-bold);color: var(--color-text-primary)} .modal-body{flex: 1 1 auto;padding: var(--spacing-4);overflow-y: auto;min-height: 0} .modal-footer{flex: 0 0 auto;padding: var(--spacing-3) var(--spacing-4);border-top: 1px solid var(--color-border);background: var(--color-surface);display: flex;justify-content: flex-end;gap: var(--spacing-2)} .form-modal .modal-dialog{width: 600px;max-width: 90vw} .form-modal .modal-body{padding: var(--spacing-4) var(--spacing-4) var(--spacing-2)} .modal-body form{display: flex;flex-direction: column;gap: var(--spacing-3)} .modal-body .form-group{display: flex;flex-direction: column;gap: var(--spacing-1)} .modal-body .form-group label{font-weight: var(--font-weight-medium);font-size: var(--font-size-small);color: var(--color-text-primary)} .modal-body .form-group label.required::after{content: ' *';color: var(--color-error)} .modal-body .form-group input, .modal-body .form-group select, .modal-body .form-group textarea{padding: var(--spacing-2) var(--spacing-3);border: 1px solid var(--color-border);border-radius: var(--border-radius-base);font-size: var(--font-size-base);background: var(--color-background);color: var(--color-text-primary);transition: border-color var(--transition-fast), box-shadow var(--transition-fast)} .modal-body .form-group input:focus, .modal-body .form-group select:focus, .modal-body .form-group textarea:focus{outline: none;border-color: var(--md-sys-color-primary);box-shadow: var(--focus-ring)} .dialog-modal .modal-dialog{width: 400px;max-width: 90vw} .confirm-dialog .modal-dialog{width: 450px;max-width: 90vw} .modal-close{position: absolute;top: var(--spacing-2);right: var(--spacing-2);width: 32px;height: 32px;border: none;background: none;color: var(--color-text-secondary);font-size: var(--font-size-xl);cursor: pointer;display: flex;align-items: center;justify-content: center;border-radius: var(--border-radius-base);transition: all var(--transition-fast)} .modal-close:hover{background: var(--color-surface-hover);color: var(--color-text-primary)} .modal-close::before{content: '×';font-size: 20px;line-height: 1} @media (max-width: 768px){.modal-dialog{width: 95vw;max-width: 95vw;max-height: 95vh;margin: var(--spacing-2)} .form-modal .modal-dialog{width: 95vw} .modal-header, .modal-body, .modal-footer{padding: var(--spacing-3)} .modal-footer{flex-direction: column-reverse} .modal-footer button{width: 100%} } body.modal-open{overflow: hidden} @media (prefers-contrast: high){.modal-overlay{background: rgba(0,0,0,0.9)} .modal-dialog{border-width: 3px} .modal-body .form-group input:focus, .modal-body .form-group select:focus, .modal-body .form-group textarea:focus{box-shadow: var(--focus-ring-strong)} } @media (prefers-reduced-motion: reduce){.modal-overlay, .modal-dialog, .modal-footer button, .modal-body .form-group input, .modal-body .form-group select, .modal-body .form-group textarea{transition: none} .modal-dialog{transform: none} } .c-enhanced-field{position: relative;margin-bottom: var(--form-field-gap);font-family: var(--font-family-mono)} .c-enhanced-field__control{width: 100%;padding: var(--input-padding-y) var(--input-padding-x);background: var(--color-surface);border: 2px solid var(--color-border);color: var(--color-text-primary);font-family: var(--font-family-mono);font-size: var(--font-size-sm);border-radius: var(--spacing-2);transition: var(--transition-normal);box-sizing: border-box} .c-enhanced-field__control:focus{outline: none;border-color: var(--color-success);box-shadow: 0 0 5px var(--color-success);background: rgba(0,255,0,0.05)} .c-enhanced-field--valid .c-enhanced-field__control{border-color: var(--color-success);background: var(--color-alert-success-alpha)} .c-enhanced-field--invalid .c-enhanced-field__control{border-color: var(--color-error);background: var(--color-alert-danger-alpha)} .c-enhanced-field--loading .c-enhanced-field__control{border-color: var(--color-warning);background: var(--color-alert-warning-alpha);position: relative} .c-enhanced-field--loading::after{content:"";position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--color-warning);border-radius:50%;border-top-color:transparent;animation: fieldSpin 1s linear infinite} .c-standardized-select{position: relative;margin-bottom: var(--spacing-3)} .c-standardized-select select{width:100%;padding: var(--input-padding-y) var(--input-padding-x);background: var(--color-surface);border:2px solid var(--color-border);color: var(--color-text-primary);font-family: var(--font-family-mono);font-size: var(--font-size-sm);border-radius: var(--spacing-2);appearance: none;cursor: pointer;transition: var(--transition-normal)} .c-standardized-select select:focus{outline:none;border-color: var(--color-success);box-shadow: 0 0 3px var(--color-success)} .c-standardized-select::after{content: "▼";position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);color: var(--color-text-secondary);pointer-events:none;font-size: var(--font-size-xs)} .c-other-input{width:100%;margin-top: var(--spacing-3);padding: var(--input-padding-y) var(--input-padding-x);border:1px solid var(--color-border);border-radius: var(--spacing-2);background: var(--color-surface);color: var(--color-text-primary);font-family: var(--font-family-mono);font-size: var(--font-size-sm);transition: var(--transition-normal)} .c-other-input:focus{outline:none;border-color: var(--color-success);box-shadow: 0 0 3px rgba(76,175,80,0.3);background: rgba(0,255,0,0.05)} .c-field{position: relative;margin-bottom: var(--form-field-gap);font-family: var(--font-family-base)} .c-field__label{display:block;margin-bottom: var(--spacing-2);color: var(--color-text-secondary);font-weight: 600;font-size: var(--md-sys-typescale-label-medium-size);letter-spacing: var(--md-sys-typescale-label-medium-tracking);text-transform: uppercase} .c-field__input{width:100%;padding: var(--spacing-4) var(--spacing-4);background: var(--md-sys-color-surface-container);border:1px solid var(--color-border);color: var(--color-text-primary);font-family: var(--font-family-base);font-size: var(--md-sys-typescale-body-medium-size);border-radius: var(--border-radius-lg);transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);box-sizing: border-box} .c-field__input::placeholder{color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);opacity: 1} .c-field__input:focus{outline:none;border-color: var(--md-sys-color-primary);box-shadow: var(--focus-ring);background: var(--md-sys-color-surface-container-highest)} .c-field__input:hover:not(:focus){border-color: var(--color-border-strong);background: var(--md-sys-color-surface-container-high)} .c-field--login{margin-bottom: var(--spacing-5)} .c-field--login .c-field__input{min-height: 52px} .c-field--password{position: relative} .c-field--password .c-field__toggle{position:absolute;top:50%;right: var(--spacing-3);transform:translateY(-50%);background:none;border:none;color: var(--color-neutral-400);cursor:pointer;padding: var(--spacing-1);font-size: var(--font-size-base);transition: var(--transition-fast)} .c-field--checkbox{display:flex;align-items:flex-start;gap: var(--spacing-3);margin-bottom: var(--spacing-4)} .c-field__checkbox-label{display:flex;align-items:center;gap: var(--spacing-2);cursor:pointer;font-size: var(--md-sys-typescale-body-small-size);color: var(--color-text-secondary);line-height: 1.4} .c-field__checkbox{width:20px;height:20px;background: var(--md-sys-color-surface-container);border:2px solid var(--color-border);border-radius: var(--border-radius-sm);cursor:pointer;appearance:none;position:relative;transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast)} .c-field__checkbox:checked{background: var(--md-sys-color-primary);border-color: var(--md-sys-color-primary)} .c-field__checkbox:checked::after{content: '\2713';position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);color: var(--md-sys-color-on-primary);font-size:12px;font-weight:700} .c-field__checkbox:focus{outline:none;box-shadow: var(--focus-ring)} .c-field__checkbox-text{user-select: none} .c-field__message{margin-top: var(--spacing-2);font-size: var(--font-size-xs);line-height: var(--line-height-tight);display:flex;align-items:center;gap: var(--spacing-1)} .c-field__message--error{color: var(--color-error)} @keyframes fieldSpin{from{transform: translateY(-50%) rotate(0deg)} to{transform: translateY(-50%) rotate(360deg)} } @keyframes spin{from{transform: rotate(0deg)} to{transform: rotate(360deg)} } .c-login{min-height:100vh;background: radial-gradient(circle at top right, rgba(255,91,85,0.25), transparent 55%), radial-gradient(circle at bottom left, rgba(77,215,255,0.12), transparent 60%), var(--md-sys-color-background);display:flex;align-items:center;justify-content:center;padding: var(--spacing-8) var(--spacing-4);position:relative} .c-login__card{position:relative;width:min(420px,100%);padding: var(--spacing-8);border-radius: var(--card-border-radius);background: var(--md-sys-color-surface-container-high);box-shadow: var(--md-sys-elevation-level4);border:1px solid var(--color-border);display:flex;flex-direction:column;gap: var(--spacing-6);animation: md-card-in 320ms var(--md-sys-motion-easing-decelerated) both} @keyframes md-card-in{from{opacity:0;transform: translateY(24px) scale(0.98)} to{opacity:1;transform: translateY(0) scale(1)} } .c-login__header{text-align:center;display:grid;gap: var(--spacing-2)} .c-login__logo{font-family: var(--font-family-mono);font-size: var(--md-sys-typescale-title-large-size);letter-spacing: .12em;text-transform: uppercase;color: var(--md-sys-color-tertiary)} .c-login__title{font-family: var(--md-sys-typescale-headline-medium-font);font-size: var(--md-sys-typescale-headline-medium-size);line-height: var(--md-sys-typescale-headline-medium-line-height);color: var(--md-sys-color-on-surface);font-weight:600} .c-login__subtitle{font-size: var(--md-sys-typescale-body-medium-size);color: var(--color-text-secondary);letter-spacing: .12em;text-transform: uppercase} .c-login__form{display:flex;flex-direction:column;gap: var(--spacing-5)} .c-login__status{min-height: 1.5rem;font-size: var(--md-sys-typescale-body-small-size);color: var(--md-sys-color-on-surface-variant);text-align:center} @media (max-width:640px){.c-login{padding: var(--spacing-6) var(--spacing-3)} .c-login__card{padding: var(--spacing-6)} } .c-tab{background: var(--md-sys-color-surface-container);color: var(--color-text-secondary);border: 1px solid transparent;border-bottom: none;padding: var(--spacing-2) var(--spacing-3);cursor: pointer;font-family: var(--font-family-base);font-size: var(--md-sys-typescale-label-medium-size);letter-spacing: var(--md-sys-typescale-label-medium-tracking);transition: all var(--transition-normal);white-space: nowrap;position: relative;min-width: 0;flex-shrink: 0;border-radius: var(--border-radius-base)} .c-tab:hover{background: var(--md-sys-color-surface-container-high);color: var(--color-text-primary)} .c-tab:focus{outline: none;z-index:1;box-shadow: var(--focus-ring)} .c-tab--active, .c-tab[aria-selected="true"], .c-tab.active{background: var(--md-sys-color-surface);color: var(--color-text-primary);font-weight: 600;border-bottom: 3px solid var(--color-primary);z-index:2} .c-tab__icon{font-size: 1em} .c-tab__label{font-size: var(--md-sys-typescale-label-medium-size)} .c-alert{display:flex;align-items:flex-start;gap: var(--spacing-3);padding: var(--spacing-4);border:2px solid var(--color-alert-info);border-radius: var(--spacing-2);background: var(--color-alert-info-alpha);color: var(--color-alert-info);font-family: var(--font-family-mono);font-size: var(--font-size-sm);margin: var(--spacing-2) 0;position: relative;transition: var(--transition-normal)} .c-alert--success{border-color: var(--color-alert-success);background: var(--color-alert-success-alpha);color: var(--color-alert-success)} .c-alert--warning{border-color: var(--color-alert-warning);background: var(--color-alert-warning-alpha);color: var(--color-alert-warning)} .c-alert--danger{border-color: var(--color-alert-danger);background: var(--color-alert-danger-alpha);color: var(--color-alert-danger)} .c-alert__icon{flex-shrink:0;font-size: var(--font-size-lg);line-height:1;margin-top:2px} .c-alert__content{flex:1;min-width:0} .c-alert__title{font-weight: var(--font-weight-bold);font-size: var(--font-size-base);margin: 0 0 var(--spacing-2) 0;text-transform: uppercase;letter-spacing: var(--spacing-1)} .c-alert__message{margin:0;line-height: var(--line-height-relaxed);color: inherit} .c-alert__dismiss{position:absolute;top: var(--spacing-2);right: var(--spacing-2);background:none;border:none;color: inherit;cursor:pointer;font-size: var(--font-size-lg);line-height:1;padding: var(--spacing-1);opacity: .7;transition: var(--transition-fast)} .c-alert__dismiss:hover{opacity:1;transform: scale(1.1)} .c-alert__dismiss::before{content: '×'} .c-toast{position: fixed;top: var(--spacing-5);right: var(--spacing-5);z-index: var(--z-index-tooltip);min-width: 300px;max-width: 500px} .c-toast--bottom-right{top: auto;bottom: var(--spacing-5)} .c-alert-stack{display:flex;flex-direction:column;gap: var(--spacing-3);max-height: 75vh;overflow-y:auto} .c-alert-stack .c-alert{margin: 0} @media (max-width: 640px){.c-toast{left: var(--spacing-3);right: var(--spacing-3);min-width:auto} .c-alert{padding: var(--spacing-3)} } .c-badge{display:inline-flex;align-items:center;gap: var(--spacing-2);padding: var(--spacing-1) var(--spacing-2);border-radius: var(--border-radius-small);font-size: var(--font-size-small);font-weight: var(--font-weight-medium);line-height:1;white-space: nowrap} .c-badge--success{background: var(--color-success-alpha-10);color: var(--color-success);border: 1px solid var(--color-success-alpha-30)} .c-badge--warning{background: var(--color-warning-alpha-10);color: var(--color-warning);border: 1px solid var(--color-warning-alpha-30)} .c-badge--error{background: var(--color-error-alpha-10);color: var(--color-error);border: 1px solid var(--color-error-alpha-30)} .c-badge--primary{background: var(--color-primary-alpha-10);color: var(--color-primary);border: 1px solid var(--color-primary-alpha-30)} .c-badge--secondary{background: var(--color-border);color: var(--color-text-inverse);border: 1px solid var(--color-border)} .c-badge--status{font-size: 10px;padding: var(--spacing-1) 5px;border: 1px solid;border-radius: var(--border-radius-sm)} .c-badge--small{padding: 1px var(--spacing-2);font-size: var(--font-size-xs)} .c-badge--large{padding: var(--spacing-2) var(--spacing-3);font-size: var(--font-size-base)} .c-list-item{border: 1px solid var(--color-border);padding: var(--spacing-3);margin-bottom: var(--spacing-2);cursor: pointer;transition: var(--transition-normal);background: var(--color-background);border-radius: var(--border-radius-base)} .c-list-item:hover{border-color: var(--color-border-hover);background: var(--color-surface-hover);transform: translateY(-1px);box-shadow: var(--shadow-sm)} .c-list-item__header{display:flex;justify-content:space-between;align-items:center;margin-bottom: var(--spacing-2)} .c-list-item__title{font-weight: var(--font-weight-medium);color: var(--color-text-primary);font-size: var(--font-size-base);margin:0} .c-list-item__subtitle{font-size: var(--font-size-small);color: var(--color-text-secondary);margin:0} .c-list-item__actions{display:flex;gap: var(--spacing-1);align-items:center} .c-list-view{display:flex;flex-direction:column;gap: var(--spacing-4);background: var(--color-background);color: var(--color-text-primary);border-radius: var(--border-radius-lg);border: var(--border-width-sm) solid var(--color-border);padding: var(--spacing-5)} .c-list-view__header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap: var(--spacing-3);padding-bottom: var(--spacing-3);border-bottom: var(--border-width-sm) solid var(--color-border)} .c-list-view__title{font-size: var(--font-size-xl);font-weight: var(--font-weight-semibold);letter-spacing: var(--letter-spacing-wide);color: var(--color-primary-500);text-transform: uppercase} .c-list-view__items{display:flex;flex-direction:column;gap: var(--spacing-3);background: var(--color-surface);border: var(--border-width-sm) solid var(--color-border);border-radius: var(--border-radius-md);padding: var(--spacing-4)} .c-dashboard{display:grid;grid-template-columns: 1fr;gap: var(--spacing-4);padding: var(--spacing-4);background: var(--color-background)} .c-dashboard-panel{background: var(--glass-background);border: 1px solid var(--glass-border);border-radius: var(--spacing-2);padding: var(--spacing-5);color: var(--color-text-primary);position: relative;backdrop-filter: var(--backdrop-blur-sm);box-shadow: var(--glass-shadow);transition: all var(--transition-normal)} .c-dashboard-panel:hover{transform: translateY(-2px);box-shadow: var(--glass-shadow), 0 8px 25px rgba(255,0,0,0.15)} .c-dashboard-panel__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom: var(--spacing-4);padding: var(--spacing-4) var(--spacing-4);border-bottom: 1px solid var(--color-border-light);background: var(--color-surface-elevated-1)} .c-dashboard-panel__title{font-size: var(--font-size-lg);font-weight: var(--font-weight-bold);text-transform: uppercase;margin:0} .c-dashboard-panel__content{display:flex;flex-direction:column;gap: var(--spacing-4)} .inventory-module{max-width: var(--layout-max-width);margin: 0 auto;padding: var(--spacing-lg);display: flex;flex-direction: column;gap: var(--spacing-lg)} .receipts-module{max-width: var(--layout-max-width);margin: 0 auto;padding: var(--spacing-lg);display: flex;flex-direction: column;gap: var(--spacing-lg)} .inventory-module .module-header, .receipts-module .module-header{display: flex;justify-content: space-between;align-items: center;padding: var(--spacing-lg);background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(14, 165, 233, 0.08));border: 1px solid rgba(79, 70, 229, 0.16);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);backdrop-filter: blur(18px)} .inventory-module .module-header h2, .receipts-module .module-header h2{margin: 0;color: var(--text-primary);font-size: 1.65rem;letter-spacing: -0.01em} .inventory-module .header-actions, .receipts-module .header-actions{display: flex;align-items: center;gap: var(--spacing-sm);flex-wrap: wrap} .inventory-module .operation-buttons{display: flex;gap: var(--spacing-sm);flex-wrap: wrap} .inventory-module .module-filters, .receipts-module .module-filters{padding: var(--spacing-lg);background: color-mix(in srgb, var(--color-surface) 88%, var(--color-background) 12%);border: 1px solid var(--color-border);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);backdrop-filter: blur(18px)} .inventory-module .filter-row, .receipts-module .filter-row{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: var(--spacing-md);align-items: end} .inventory-module .filter-group label, .receipts-module .filter-group label{display: block;margin-bottom: var(--spacing-xs);font-weight: 600;color: var(--text-secondary);letter-spacing: 0.02em} .inventory-module .filter-group input, .inventory-module .filter-group select, .receipts-module .filter-group input, .receipts-module .filter-group select{width: 100%;padding: 0.65rem var(--spacing-md);border: 1px solid var(--color-border);border-radius: var(--border-radius);font-size: var(--font-size-sm);background: color-mix(in srgb, var(--color-background) 75%, var(--color-surface));transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text-primary) 10%, transparent)} .inventory-module .filter-group input:focus, .inventory-module .filter-group select:focus, .receipts-module .filter-group input:focus, .receipts-module .filter-group select:focus{border-color: var(--primary-color);box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent);outline: none} .inventory-module .module-content, .receipts-module .module-content{background: var(--color-surface-elevated);border: 1px solid var(--color-border);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-md);overflow: hidden} .inventory-module .items-table-container, .receipts-module .items-table-container{overflow-x: auto} .inventory-module .items-table, .receipts-module .items-table{width: 100%;border-collapse: separate;border-spacing: 0} .inventory-module .items-table thead th, .receipts-module .items-table thead th{background: linear-gradient( 135deg, color-mix(in srgb, var(--color-surface) 70%, var(--md-sys-color-primary) 30%), color-mix(in srgb, var(--color-surface) 74%, var(--md-sys-color-tertiary) 26%) );padding: var(--spacing-md);text-align: left;font-weight: 600;color: var(--text-primary);border-bottom: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);white-space: nowrap;letter-spacing: 0.02em} .inventory-module .items-table tbody td, .receipts-module .items-table tbody td{padding: var(--spacing-md);border-bottom: 1px solid var(--color-border-light);vertical-align: middle;background: var(--color-surface)} .inventory-module .items-table tbody tr, .receipts-module .items-table tbody tr{transition: background var(--transition-fast), transform var(--transition-fast)} .inventory-module .items-table tbody tr:hover, .receipts-module .items-table tbody tr:hover{background: var(--color-surface-hover);transform: translateY(-1px)} .inventory-module .stock-low{color: var(--error-color);font-weight: 600} .inventory-module .stock-ok{color: var(--success-color);font-weight: 500} .inventory-module .status-active{color: var(--success-color);font-weight: 500} .inventory-module .status-inactive{color: var(--text-muted)} .inventory-module .item-actions{display: flex;gap: var(--spacing-xs);flex-wrap: wrap} .inventory-module .no-items{text-align: center;padding: var(--spacing-xl) var(--spacing-lg);color: var(--text-secondary)} .inventory-module .no-items-icon{font-size: 4rem;margin-bottom: var(--spacing-lg)} .inventory-module .no-items h3{margin-bottom: var(--spacing-sm);color: var(--text-primary)} .inventory-module .items-summary{padding: var(--spacing-md) var(--spacing-lg);background: color-mix(in srgb, var(--color-surface) 82%, var(--md-sys-color-primary) 18%);border-top: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);font-size: var(--font-size-sm);color: var(--text-secondary)} .module-tabs{display: inline-flex;gap: 0;padding: var(--spacing-2xs);border-radius: var(--border-radius-pill);background: color-mix(in srgb, var(--color-surface) 85%, var(--md-sys-color-primary) 15%);margin-bottom: var(--spacing-md);box-shadow: var(--shadow-xs)} .module-tabs .tab-btn{background: transparent;color: var(--text-secondary);padding: 0.4rem 1.1rem;border: none;font-weight: 600;border-radius: var(--border-radius-pill);transition: all var(--transition-fast)} .module-tabs .tab-btn:hover{color: var(--primary-color);background: var(--color-surface-hover)} .module-tabs .tab-btn.active{background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));color: var(--md-sys-color-on-primary);box-shadow: var(--shadow-xs)} .tab-content{margin-top: var(--spacing-md)} @media (max-width: 768px){.inventory-module, .receipts-module{padding: var(--spacing-md)} .inventory-module .module-header, .receipts-module .module-header{flex-direction: column;align-items: flex-start;gap: var(--spacing-sm);text-align: left} .inventory-module .header-actions, .receipts-module .header-actions{width: 100%;justify-content: flex-start} .inventory-module .operation-buttons{justify-content: flex-start} .inventory-module .filter-row, .receipts-module .filter-row{grid-template-columns: 1fr} .inventory-module .items-table, .receipts-module .items-table{font-size: var(--font-size-sm)} .inventory-module .items-table th, .inventory-module .items-table td, .receipts-module .items-table th, .receipts-module .items-table td{padding: var(--spacing-sm)} } .modal-large{max-width: 960px;max-height: 90vh} .modal-xlarge{width: min(1120px, 96vw);max-width: min(1120px, 96vw);max-height: 90vh} .modal-body{max-height: 70vh;overflow-y: auto;padding: var(--spacing-lg)} .detail-section{margin-bottom: var(--spacing-lg)} .detail-section h4{margin-bottom: var(--spacing-sm);color: var(--text-primary)} .organization-input-group{display: grid;grid-template-columns: 1fr auto;gap: var(--spacing-sm);align-items: center} .detail-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: var(--spacing-md);margin-bottom: var(--spacing-md)} .detail-table{width: 100%;border-collapse: collapse;font-size: var(--font-size-sm)} .detail-table th, .detail-table td{padding: var(--spacing-sm) var(--spacing-md);text-align: left;border-bottom: 1px solid rgba(226, 232, 240, 0.8)} .detail-table th{background: rgba(79, 70, 229, 0.08);font-weight: 600;letter-spacing: 0.02em} .bulk-items-controls{display: flex;gap: var(--spacing-sm);align-items: center} .bulk-items-table{margin-top: var(--spacing-sm);border: 1px solid var(--border-color);border-radius: var(--border-radius);overflow-x: auto;overflow-y: hidden;background: var(--bg-primary)} .bulk-items-header{display: grid;grid-template-columns: 2fr 0.8fr 0.9fr 1.2fr 1fr 1fr 1.6fr 0.6fr;gap: var(--spacing-sm);align-items: center;padding: var(--spacing-sm) var(--spacing-md);background: var(--bg-secondary);border-bottom: 1px solid var(--border-color);font-weight: 600;color: var(--text-primary)} #bulk-items-list{display: flex;flex-direction: column} .bulk-item-row{display: grid;grid-template-columns: 2fr 0.8fr 0.9fr 1.2fr 1fr 1fr 1.6fr 0.6fr;gap: var(--spacing-sm);align-items: center;padding: var(--spacing-sm) var(--spacing-md);border-bottom: 1px solid var(--border-color)} .bulk-item-row:last-child{border-bottom: none} .bulk-item-field select, .bulk-item-field input, .bulk-item-field textarea{width: 100%} .bulk-item-field textarea{min-height: 36px} .bulk-item-field.actions{display: flex;gap: var(--spacing-xs);justify-content: center} @media (min-width: 681px){.bulk-items-header, .bulk-item-row{min-width: 960px} } @media (max-width: 900px){.bulk-items-header{grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr 1fr 1fr 1.2fr 0.6fr} .bulk-item-row{grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr 1fr 1fr 1.2fr 0.6fr} } @media (max-width: 680px){.bulk-items-header{display: none} .bulk-item-row{display: grid;grid-template-columns: 1fr;gap: var(--spacing-sm);border-bottom: 1px solid var(--border-color)} .bulk-item-field{display: grid;grid-template-columns: 120px 1fr;align-items: center;gap: var(--spacing-sm)} .bulk-item-field::before{content: attr(data-label);color: var(--text-secondary);font-size: var(--font-size-sm)} .bulk-item-field.actions{grid-template-columns: 1fr;justify-content: flex-end;display: flex} } @media (max-width: 768px){.modal-large{max-width: 95vw;margin: var(--spacing-sm)} .modal-xlarge{width: 95vw;max-width: 95vw;margin: var(--spacing-sm)} .detail-grid{grid-template-columns: 1fr} } @media (max-width: 520px){.organization-input-group{grid-template-columns: 1fr} }