@layer theme,base,components,utilities;@layer theme{@theme default{ --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-family-sans); --default-font-feature-settings: var( --font-family-sans--font-feature-settings ); --default-font-variation-settings: var( --font-family-sans--font-variation-settings ); --default-mono-font-family: var(--font-family-mono); --default-mono-font-feature-settings: var( --font-family-mono--font-feature-settings ); --default-mono-font-variation-settings: var( --font-family-mono--font-variation-settings ); --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --color-black: #000; --color-white: #fff; --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-gray-950: #030712; --color-zinc-50: #fafafa; --color-zinc-100: #f4f4f5; --color-zinc-200: #e4e4e7; --color-zinc-300: #d4d4d8; --color-zinc-400: #a1a1aa; --color-zinc-500: #71717a; --color-zinc-600: #52525b; --color-zinc-700: #3f3f46; --color-zinc-800: #27272a; --color-zinc-900: #18181b; --color-zinc-950: #09090b; --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; --color-neutral-950: #0a0a0a; --color-stone-50: #fafaf9; --color-stone-100: #f5f5f4; --color-stone-200: #e7e5e4; --color-stone-300: #d6d3d1; --color-stone-400: #a8a29e; --color-stone-500: #78716c; --color-stone-600: #57534e; --color-stone-700: #44403c; --color-stone-800: #292524; --color-stone-900: #1c1917; --color-stone-950: #0c0a09; --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-200: #fecaca; --color-red-300: #fca5a5; --color-red-400: #f87171; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-red-800: #991b1b; --color-red-900: #7f1d1d; --color-red-950: #450a0a; --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-200: #fed7aa; --color-orange-300: #fdba74; --color-orange-400: #fb923c; --color-orange-500: #f97316; --color-orange-600: #ea580c; --color-orange-700: #c2410c; --color-orange-800: #9a3412; --color-orange-900: #7c2d12; --color-orange-950: #431407; --color-amber-50: #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-900: #78350f; --color-amber-950: #451a03; --color-yellow-50: #fefce8; --color-yellow-100: #fef9c3; --color-yellow-200: #fef08a; --color-yellow-300: #fde047; --color-yellow-400: #facc15; --color-yellow-500: #eab308; --color-yellow-600: #ca8a04; --color-yellow-700: #a16207; --color-yellow-800: #854d0e; --color-yellow-900: #713f12; --color-yellow-950: #422006; --color-lime-50: #f7fee7; --color-lime-100: #ecfccb; --color-lime-200: #d9f99d; --color-lime-300: #bef264; --color-lime-400: #a3e635; --color-lime-500: #84cc16; --color-lime-600: #65a30d; --color-lime-700: #4d7c0f; --color-lime-800: #3f6212; --color-lime-900: #365314; --color-lime-950: #1a2e05; --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; --color-green-950: #052e16; --color-emerald-50: #ecfdf5; --color-emerald-100: #d1fae5; --color-emerald-200: #a7f3d0; --color-emerald-300: #6ee7b7; --color-emerald-400: #34d399; --color-emerald-500: #10b981; --color-emerald-600: #059669; --color-emerald-700: #047857; --color-emerald-800: #065f46; --color-emerald-900: #064e3b; --color-emerald-950: #022c22; --color-teal-50: #f0fdfa; --color-teal-100: #ccfbf1; --color-teal-200: #99f6e4; --color-teal-300: #5eead4; --color-teal-400: #2dd4bf; --color-teal-500: #14b8a6; --color-teal-600: #0d9488; --color-teal-700: #0f766e; --color-teal-800: #115e59; --color-teal-900: #134e4a; --color-teal-950: #042f2e; --color-cyan-50: #ecfeff; --color-cyan-100: #cffafe; --color-cyan-200: #a5f3fc; --color-cyan-300: #67e8f9; --color-cyan-400: #22d3ee; --color-cyan-500: #06b6d4; --color-cyan-600: #0891b2; --color-cyan-700: #0e7490; --color-cyan-800: #155e75; --color-cyan-900: #164e63; --color-cyan-950: #083344; --color-sky-50: #f0f9ff; --color-sky-100: #e0f2fe; --color-sky-200: #bae6fd; --color-sky-300: #7dd3fc; --color-sky-400: #38bdf8; --color-sky-500: #0ea5e9; --color-sky-600: #0284c7; --color-sky-700: #0369a1; --color-sky-800: #075985; --color-sky-900: #0c4a6e; --color-sky-950: #082f49; --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af; --color-blue-900: #1e3a8a; --color-blue-950: #172554; --color-indigo-50: #eef2ff; --color-indigo-100: #e0e7ff; --color-indigo-200: #c7d2fe; --color-indigo-300: #a5b4fc; --color-indigo-400: #818cf8; --color-indigo-500: #6366f1; --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca; --color-indigo-800: #3730a3; --color-indigo-900: #312e81; --color-indigo-950: #1e1b4b; --color-violet-50: #f5f3ff; --color-violet-100: #ede9fe; --color-violet-200: #ddd6fe; --color-violet-300: #c4b5fd; --color-violet-400: #a78bfa; --color-violet-500: #8b5cf6; --color-violet-600: #7c3aed; --color-violet-700: #6d28d9; --color-violet-800: #5b21b6; --color-violet-900: #4c1d95; --color-violet-950: #2e1065; --color-purple-50: #faf5ff; --color-purple-100: #f3e8ff; --color-purple-200: #e9d5ff; --color-purple-300: #d8b4fe; --color-purple-400: #c084fc; --color-purple-500: #a855f7; --color-purple-600: #9333ea; --color-purple-700: #7e22ce; --color-purple-800: #6b21a8; --color-purple-900: #581c87; --color-purple-950: #3b0764; --color-fuchsia-50: #fdf4ff; --color-fuchsia-100: #fae8ff; --color-fuchsia-200: #f5d0fe; --color-fuchsia-300: #f0abfc; --color-fuchsia-400: #e879f9; --color-fuchsia-500: #d946ef; --color-fuchsia-600: #c026d3; --color-fuchsia-700: #a21caf; --color-fuchsia-800: #86198f; --color-fuchsia-900: #701a75; --color-fuchsia-950: #4a044e; --color-pink-50: #fdf2f8; --color-pink-100: #fce7f3; --color-pink-200: #fbcfe8; --color-pink-300: #f9a8d4; --color-pink-400: #f472b6; --color-pink-500: #ec4899; --color-pink-600: #db2777; --color-pink-700: #be185d; --color-pink-800: #9d174d; --color-pink-900: #831843; --color-pink-950: #500724; --color-rose-50: #fff1f2; --color-rose-100: #ffe4e6; --color-rose-200: #fecdd3; --color-rose-300: #fda4af; --color-rose-400: #fb7185; --color-rose-500: #f43f5e; --color-rose-600: #e11d48; --color-rose-700: #be123c; --color-rose-800: #9f1239; --color-rose-900: #881337; --color-rose-950: #4c0519; --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; --blur: 8px; --blur-sm: 4px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --radius: .25rem; --radius-sm: .125rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-xs: 0 1px rgb(0 0 0 / .05); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --drop-shadow-sm: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-md: 0 4px 3px rgb(0 0 0 / .07), 0 2px 2px rgb(0 0 0 / .06); --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / .04), 0 4px 3px rgb(0 0 0 / .1); --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / .03), 0 8px 5px rgb(0 0 0 / .08); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --drop-shadow-none: 0 0 #0000; --spacing-px: 1px; --spacing-0: 0px; --spacing-0_5: .125rem; --spacing-1: .25rem; --spacing-1_5: .375rem; --spacing-2: .5rem; --spacing-2_5: .625rem; --spacing-3: .75rem; --spacing-3_5: .875rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-9: 2.25rem; --spacing-10: 2.5rem; --spacing-11: 2.75rem; --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-28: 7rem; --spacing-32: 8rem; --spacing-36: 9rem; --spacing-40: 10rem; --spacing-44: 11rem; --spacing-48: 12rem; --spacing-52: 13rem; --spacing-56: 14rem; --spacing-60: 15rem; --spacing-64: 16rem; --spacing-72: 18rem; --spacing-80: 20rem; --spacing-96: 24rem; --width-3xs: 16rem; --width-2xs: 18rem; --width-xs: 20rem; --width-sm: 24rem; --width-md: 28rem; --width-lg: 32rem; --width-xl: 36rem; --width-2xl: 42rem; --width-3xl: 48rem; --width-4xl: 56rem; --width-5xl: 64rem; --width-6xl: 72rem; --width-7xl: 80rem; --width-prose: 65ch; --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-size-xs: .75rem; --font-size-xs--line-height: 1rem; --font-size-sm: .875rem; --font-size-sm--line-height: 1.25rem; --font-size-base: 1rem; --font-size-base--line-height: 1.5rem; --font-size-lg: 1.125rem; --font-size-lg--line-height: 1.75rem; --font-size-xl: 1.25rem; --font-size-xl--line-height: 1.75rem; --font-size-2xl: 1.5rem; --font-size-2xl--line-height: 2rem; --font-size-3xl: 1.875rem; --font-size-3xl--line-height: 2.25rem; --font-size-4xl: 2.25rem; --font-size-4xl--line-height: 2.5rem; --font-size-5xl: 3rem; --font-size-5xl--line-height: 1; --font-size-6xl: 3.75rem; --font-size-6xl--line-height: 1; --font-size-7xl: 4.5rem; --font-size-7xl--line-height: 1; --font-size-8xl: 6rem; --font-size-8xl--line-height: 1; --font-size-9xl: 8rem; --font-size-9xl--line-height: 1; --letter-spacing-tighter: -.05em; --letter-spacing-tight: -.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: .025em; --letter-spacing-wider: .05em; --letter-spacing-widest: .1em; --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --line-height-3: .75rem; --line-height-4: 1rem; --line-height-5: 1.25rem; --line-height-6: 1.5rem; --line-height-7: 1.75rem; --line-height-8: 2rem; --line-height-9: 2.25rem; --line-height-10: 2.5rem; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --transition-timing-function-linear: linear; --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1); --transition-timing-function-out: cubic-bezier(0, 0, .2, 1); --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1); @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var( --default-font-variation-settings, normal );-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var( --default-mono-font-feature-settings, normal );font-variation-settings:var( --default-mono-font-variation-settings, normal );font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:1px solid}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none!important}}@layer utilities{@tailwind utilities;}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:0;background-color:#f8fafc;overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}button,a,input,select,textarea{min-height:44px;min-width:44px}@media (max-width: 768px){html{font-size:16px}body{font-size:14px;line-height:1.4}}html{scroll-behavior:smooth}button,a{-webkit-tap-highlight-color:transparent}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e40af,#3b82f6,#60a5fa);padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.login-card{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #00000040;border:1px solid rgba(255,255,255,.2)}.login-header{text-align:center;margin-bottom:32px}.login-title{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 8px;letter-spacing:-.5px}.login-subtitle{font-size:16px;color:#6b7280;margin:0;font-weight:400}.login-form{display:flex;flex-direction:column;gap:24px}.input-group{display:flex;flex-direction:column}.input-icon{position:absolute;left:16px;color:#6b7280;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}.login-input{width:100%;padding:16px 16px 16px 48px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;background:#f9fafb;transition:all .3s ease;outline:none;color:#374151}.login-input::placeholder{color:#9ca3af;font-weight:400}.login-input:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px #3b82f61a}.password-wrapper{position:relative}.password-toggle{position:absolute;right:16px;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:2}.password-toggle:hover{background:#3b82f61a;transform:scale(1.1)}.password-toggle:focus{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.password-wrapper .login-input{padding-right:48px}.error-message{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;border:1px solid #fecaca;font-size:14px;text-align:center;margin:-8px 0 8px}.login-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;margin-top:8px;box-shadow:0 4px 14px #3b82f663}.login-button:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-2px);box-shadow:0 8px 25px #3b82f680}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:0 4px 14px #3b82f663}@media (max-width: 480px){.login-container{padding:16px}.login-card{padding:32px 24px;border-radius:16px}.login-title{font-size:24px}.login-subtitle{font-size:14px}.login-header{margin-bottom:24px}.login-input{padding:14px 14px 14px 44px;font-size:16px}.input-icon{left:14px}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-card{animation:slideUp .6s ease-out}.login-input:focus,.login-button:focus{outline:2px solid #3b82f6;outline-offset:2px}.login-button:disabled:after{content:"";display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}.dashboard-container{display:flex;min-height:100vh;background-color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.logo{width:40px;height:40px;background:#fff3;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.header{background:#fff;padding:15px 30px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.search-container{position:relative;flex:1;max-width:400px}.search-input{width:100%;padding:10px 40px 10px 15px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;outline:none;transition:border-color .3s ease}.search-input:focus{border-color:#4a90e2}.search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#64748b}.header-actions{display:flex;align-items:center;gap:20px}.language-selector{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:border-color .3s ease}.language-selector:hover{border-color:#4a90e2}.flag{font-size:16px}.dropdown-arrow{font-size:10px;color:#64748b}.settings-icon{font-size:18px;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .3s ease}.settings-icon:hover{background-color:#f1f5f9}.filters-container{background:#fff;padding:20px 30px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:15px}.filter-group{position:relative}.filter-select{padding:8px 30px 8px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;font-size:14px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:120px}.filter-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;color:#64748b;pointer-events:none}.reset-filters{padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;font-size:14px;cursor:pointer;transition:all .3s ease}.reset-filters:hover{border-color:#4a90e2;color:#4a90e2}.export-report{padding:8px 16px;border:none;border-radius:6px;background:#4a90e2;color:#fff;font-size:14px;cursor:pointer;transition:background-color .3s ease;margin-left:auto}.export-report:hover{background:#357abd}.content{flex:1;padding:30px;overflow-y:auto}.page-title{font-size:24px;font-weight:600;color:#1e293b;margin-bottom:30px}.blood-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px}.blood-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #00000014;border:1px solid #f1f5f9;transition:transform .2s ease,box-shadow .2s ease}.blood-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000001f}.blood-card-header{display:flex;align-items:center;gap:12px;margin-bottom:15px}.blood-icon{width:36px;height:36px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}.blood-type{font-size:24px;font-weight:700;color:#1e293b}.units-info{margin-bottom:20px}.total-units{font-size:18px;font-weight:600;color:#1e293b}.status-bars{margin-bottom:15px}.status-item{display:flex;justify-content:space-between;margin-bottom:8px}.status-count{font-size:12px;padding:4px 8px;border-radius:4px;font-weight:500}.status-count.available{background:#dcfce7;color:#16a34a}.status-count.reserved{background:#dbeafe;color:#2563eb}.status-count.near-expiry,.status-count{background:#fef3c7;color:#d97706}.status-count.expired{background:#fee2e2;color:#dc2626}.expiry-info{margin-top:15px;padding-top:15px;border-top:1px solid #f1f5f9}.expiry-label{font-size:12px;color:#64748b;margin-bottom:5px}.expiry-percentage{font-size:16px;font-weight:600;color:#1e293b;margin-bottom:8px}.progress-bar{width:100%;height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4a90e2,#357abd);border-radius:3px;transition:width .3s ease}.loading,.error{display:flex;align-items:center;justify-content:center;height:100vh;font-size:18px;color:#64748b}.error{color:#dc2626}@media (max-width: 768px){.dashboard-container{flex-direction:column}.sidebar{width:100%;height:60px;flex-direction:row;padding:10px 20px;justify-content:space-between;order:-1}.sidebar-header{margin-bottom:0}.sidebar-menu{flex-direction:row;gap:10px;flex:0}.sidebar-footer{margin-top:0}.menu-item{width:35px;height:35px}.main-content{height:calc(100vh - 60px);overflow-y:auto}.header{padding:15px 20px;flex-wrap:wrap;gap:15px}.search-container{order:2;flex:1;max-width:none;min-width:200px}.header-actions{order:1;gap:10px}.filters-container{padding:15px 20px;flex-wrap:wrap;gap:10px}.filter-select{min-width:100px;font-size:13px}.content{padding:20px}.blood-cards-grid{grid-template-columns:1fr;gap:15px}.page-title{font-size:20px}}@media (max-width: 480px){.sidebar{padding:8px 16px;height:50px}.menu-item{width:30px;height:30px}.menu-icon{font-size:14px}.logo{width:30px;height:30px;font-size:16px}.main-content{height:calc(100vh - 50px)}.header{padding:12px 16px;flex-direction:column;align-items:stretch}.search-container{order:1}.header-actions{order:2;justify-content:space-between}.filters-container{padding:12px 16px;gap:8px}.filter-select{min-width:80px;font-size:12px;padding:6px 24px 6px 8px}.export-report,.reset-filters{font-size:12px;padding:6px 12px}.content{padding:16px}.page-title{font-size:18px;margin-bottom:20px}.blood-card{padding:16px}.blood-type{font-size:20px}.total-units{font-size:16px}}.trend-analysis-view{padding:20px;max-width:1200px;margin:0 auto;overflow-x:auto}.trend-analysis-view .chart-header{display:flex;align-items:center;gap:20px;margin-bottom:20px;padding:20px 0}.trend-analysis-view .header-content{flex:1;text-align:center}.trend-analysis-view .header-content h2{margin:0 0 8px;font-size:28px;font-weight:700;color:#1f2937;text-align:center}.trend-analysis-view .header-content p{margin:0;font-size:16px;color:#6b7280;text-align:center;font-weight:400}.trend-analysis-view .back-button{padding:10px 16px;background:#f3f4f6;border:none;border-radius:8px;color:#374151;font-weight:600;cursor:pointer;transition:all .2s;font-size:14px;white-space:nowrap}.trend-analysis-view .back-button:hover{background:#e5e7eb;color:#1f2937}.trend-analysis-view .trends-controls{display:flex;gap:20px;margin:20px 0;padding:15px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.trend-analysis-view .control-group{display:flex;flex-direction:column;gap:8px}.trend-analysis-view .control-group label{font-weight:600;color:#374151;font-size:14px}.trend-analysis-view .control-group select{padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;font-size:14px;color:#374151;cursor:pointer;transition:border-color .2s}.trend-analysis-view .control-group select:hover{border-color:#3b82f6}.trend-analysis-view .control-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chart-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;margin:20px 0;overflow:auto;max-height:80vh}.trend-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:30px}.summary-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0000001a;text-align:center}.summary-card h3{margin:0 0 10px;font-size:14px;color:#666;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:24px;font-weight:700;color:#333}.metric-value.positive{color:#10b981}.metric-value.negative{color:#ef4444}.donation-line{stroke-dasharray:0;filter:drop-shadow(0 2px 4px rgba(16,185,129,.3))}.usage-line{stroke-dasharray:0;filter:drop-shadow(0 2px 4px rgba(239,68,68,.3))}.predictive-view{padding:20px;max-width:1400px;margin:0 auto;background:#f8fafc;min-height:100vh}.predictive-header{display:flex;align-items:center;gap:20px;margin-bottom:20px;padding:20px 0}.predictive-header .header-content h1{margin:0;font-size:32px;font-weight:700;color:#1f2937}.forecast-controls{display:flex;align-items:center;gap:15px;margin-bottom:30px;padding:15px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.forecast-label{font-weight:600;color:#374151;white-space:nowrap}.forecast-buttons{display:flex;gap:8px}.forecast-btn{padding:8px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151;font-weight:500;cursor:pointer;transition:all .2s}.forecast-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.analysis-info{margin-left:auto;text-align:right;font-size:12px;color:#6b7280}.overview-section{margin-bottom:30px}.overview-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}.overview-icon{font-size:24px}.overview-header h2{margin:0;font-size:24px;font-weight:700;color:#1f2937}.overview-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.overview-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.overview-card h3{margin:0 0 10px;font-size:14px;font-weight:600;color:#6b7280;text-transform:uppercase}.status-value{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:5px}.status-subtitle{font-size:14px;color:#6b7280;margin-bottom:5px}.status-detail,.cost-amount{font-size:14px;font-weight:600;color:#dc2626}.overview-card p{margin:5px 0;font-size:14px;color:#6b7280}.stock-status .status-label{font-weight:600;color:#374151}.critical-types,.risk-types,.shortage-types{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.blood-type-tag{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.blood-type-tag.critical{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.blood-type-tag.expiring{background:#fef3c7;color:#d97706;border:1px solid #fed7aa}.blood-type-tag.shortage{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.blood-type-tag.adequate{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}.no-critical,.no-risk,.no-shortage{color:#10b981;font-size:14px;font-style:italic}.order-cost{margin-top:10px}.cost-amount{font-size:18px;font-weight:700;color:#dc2626}.replenishment-section{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.replenishment-section h2{margin:0 0 25px;font-size:24px;font-weight:700;color:#1f2937}.table-container{overflow-x:auto}.replenishment-table{width:100%;border-collapse:collapse;font-size:14px}.replenishment-table th{background:#f9fafb;padding:16px 24px;text-align:left;font-weight:600;color:#1f2937;font-size:14px;border-bottom:2px solid #e5e7eb;white-space:nowrap}.replenishment-table td{padding:16px 24px;border-bottom:1px solid #e5e7eb;vertical-align:top}.replenishment-table tr:hover{background-color:#f9fafb}.blood-type-cell{font-weight:600}.blood-type-badge{background:#f3f4f6;padding:4px 8px;border-radius:6px;font-weight:600;color:#374151}.safety-level{display:flex;flex-direction:column;gap:2px}.safety-value{font-weight:600;color:#374151}.safety-unit{font-size:12px;color:#6b7280}.order-quantity.has-order{color:#dc2626;font-weight:600}.order-quantity.no-order{color:#6b7280}.text-red-600{color:#dc2626!important;font-weight:600}.text-green-600{color:#059669!important;font-weight:600}.text-gray-600{color:#6b7280!important}.justification-cell{max-width:300px;font-size:14px;line-height:1.4;color:#374151}.actions-cell{white-space:nowrap}.action-buttons{display:flex;flex-direction:column;gap:5px}.action-btn{padding:4px 8px;border:1px solid #d1d5db;border-radius:4px;background:#fff;color:#374151;font-size:11px;cursor:pointer;transition:all .2s}.action-btn.create-order{color:#3b82f6;border-color:#3b82f6}.action-btn.create-order:hover{background:#3b82f6;color:#fff}.action-btn.ignore{color:#6b7280}.action-btn.ignore:hover{background:#f3f4f6}.no-action{color:#9ca3af;font-style:italic;font-size:12px}.projected-stock.low{color:#dc2626;font-weight:600}.projected-stock.normal{color:#059669;font-weight:500}.status-badge{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.order_required{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.status-badge.adequate{background:#f0fdf4;color:#059669;border:1px solid #bbf7d0}.summary-statistics{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:30px}.summary-statistics h2{margin:0 0 20px;font-size:24px;font-weight:700;color:#1f2937}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.stat-card{padding:20px;background:#f9fafb;border-radius:8px;text-align:center}.stat-card h3{margin:0 0 10px;font-size:14px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.stat-value{margin:0;font-size:24px;font-weight:700;color:#1f2937}.stat-value.urgent{color:#dc2626}.add-sample-container{display:flex;min-height:100vh;background-color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.add-sample-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #3b82f64d}.add-sample-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.sample-table{width:100%;border-collapse:collapse;font-size:14px}.sample-table th{background:#f8fafc;padding:16px 12px;text-align:left;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.sample-table td{padding:16px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.sample-table tbody tr:hover{background-color:#f8fafc}.record-id{font-family:monospace;color:#3b82f6;font-weight:600;font-size:13px}.age{font-weight:600;color:#1e293b}.gender-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-weight:600;font-size:12px;text-align:center;min-width:50px}.gender-badge.m{background:#dbeafe;color:#1d4ed8}.gender-badge.f{background:#fce7f3;color:#be185d}.gender-badge.other{background:#f3f4f6;color:#374151}.site{color:#64748b;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hemoglobin{color:#475569;font-size:13px}.date,.expiry,.created{color:#64748b;font-size:13px;white-space:nowrap}.form-container{max-width:900px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden}.form-title{font-size:24px;font-weight:700;color:#1f2937;padding:30px 40px 20px;margin:0;border-bottom:1px solid #e5e7eb}.section-title{font-size:18px;font-weight:600;color:#374151;margin:0 0 24px}.add-sample-form{margin:0}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 16px center;background-repeat:no-repeat;background-size:16px;padding-right:48px}.save-btn{padding:14px 32px;background:#3b82f6;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:100px}.save-btn:hover:not(:disabled){background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 15px #3b82f64d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .3s ease-out}.modal-container{background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:900px;max-height:90vh;overflow:hidden;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#f8fafc,#fff)}.modal-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.modal-close-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:#f3f4f6;color:#374151}.modal-content{max-height:calc(90vh - 80px);overflow-y:auto;padding:0}.modal-content .form-section{padding:24px 32px;border-bottom:1px solid #f3f4f6}.modal-actions{display:flex;gap:16px;justify-content:flex-end;padding:24px 32px;background:#f9fafb;border-top:1px solid #e5e7eb}.modal-error-message{background:#fef2f2;color:#dc2626;padding:16px 24px;border-radius:12px;border:1px solid #fecaca;font-size:14px;font-weight:500;margin:0 32px 20px;display:flex;align-items:center;gap:8px}.modal-error-message:before{content:"⚠️";font-size:16px}.modal-success-message{background:#f0fdf4;color:#166534;padding:16px 24px;border-radius:12px;border:1px solid #bbf7d0;font-size:14px;font-weight:500;margin:0 32px 20px;display:flex;align-items:center;gap:8px}.modal-success-message:before{content:"✅";font-size:16px}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#f1f5f9}.modal-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}@media (max-width: 768px){.add-sample-container{flex-direction:column}.sidebar{width:100%;height:60px;flex-direction:row;padding:10px 20px;justify-content:space-between;order:-1}.sidebar-header{margin-bottom:0}.sidebar-menu{flex-direction:row;gap:10px;flex:0}.sidebar-footer{margin-top:0}.menu-item{width:35px;height:35px}.main-content{padding:20px;height:calc(100vh - 60px);overflow-y:auto}.form-container{margin:0;border-radius:12px}.form-title{padding:20px 24px 16px;font-size:20px}.form-section{padding:20px 24px}.form-row{flex-direction:column;gap:16px}.form-group.full-width{flex:1}.csv-upload-container{flex-direction:column;align-items:stretch}.form-actions{padding:20px 24px;flex-direction:column-reverse}.save-btn,.cancel-btn{width:100%}.error-message,.success-message{margin:0 24px 16px}}@media (max-width: 480px){.sidebar{padding:8px 16px;height:50px}.menu-item{width:30px;height:30px}.menu-icon{font-size:14px}.logo{width:30px;height:30px;font-size:16px}.main-content{padding:16px;height:calc(100vh - 50px)}.form-container{border-radius:8px}.form-title{padding:16px 20px 12px;font-size:18px}.form-section{padding:16px 20px}.form-input{padding:12px 16px 12px 44px;font-size:14px}.input-icon{left:14px;font-size:14px}.form-actions{padding:16px 20px}.error-message,.success-message{margin:0 20px 12px;padding:12px 16px;font-size:13px}}@media (max-width: 768px){.header-actions{flex-direction:column;gap:8px;align-items:stretch}.filter-toggle-btn,.add-sample-btn{width:100%;justify-content:center}.filter-row{grid-template-columns:1fr;gap:12px}.filter-actions{flex-direction:column;align-items:stretch}.apply-filters-btn,.clear-filters-btn{width:100%;justify-content:center}.pagination-container{flex-direction:column;gap:16px;align-items:stretch}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-numbers{order:-1;justify-content:center}.format-grid{grid-template-columns:1fr;gap:8px}.csv-format-guide{padding:16px}.guide-title{font-size:15px}.format-example code{font-size:11px;padding:4px 6px}}.blood-usage-container{display:flex;min-height:100vh;background-color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.content-container{flex:1;padding:24px;overflow-y:auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid #e2e8f0}.page-title{font-size:2rem;font-weight:700;color:#1e293b;margin:0}.add-usage-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #3b82f64d}.add-usage-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.table-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;margin-bottom:32px;overflow:hidden}.section-title{font-size:1.5rem;font-weight:600;color:#1e293b;margin:0 0 20px;padding:24px 24px 0}.no-records{padding:60px 24px;text-align:center;color:#64748b;font-size:1.1rem}.table-wrapper{overflow-x:auto}.usage-table{width:100%;border-collapse:collapse;font-size:14px}.usage-table th{background:#f8fafc;padding:16px 12px;text-align:left;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.usage-table td{padding:16px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.usage-table tbody tr:hover{background-color:#f8fafc}.usage-id{font-family:monospace;color:#3b82f6;font-weight:600;font-size:13px}.name{font-weight:600;color:#1e293b}.blood-type-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-weight:600;font-size:12px;text-align:center;min-width:40px}.blood-type-Apos{background:#fef3c7;color:#d97706}.blood-type-Aneg{background:#fce7f3;color:#be185d}.blood-type-Bpos{background:#dbeafe;color:#1d4ed8}.blood-type-Bneg{background:#e0e7ff;color:#6366f1}.blood-type-ABpos{background:#dcfce7;color:#16a34a}.blood-type-ABneg{background:#f0fdf4;color:#059669}.blood-type-Opos{background:#fee2e2;color:#dc2626}.blood-type-Oneg{background:#fef2f2;color:#ef4444}.volume{font-weight:600;color:#059669}.purpose{color:#64748b;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.department{color:#475569;font-size:13px}.location{color:#64748b;font-size:13px}.date,.created{color:#64748b;font-size:13px;white-space:nowrap}.form-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:24px;margin-bottom:24px}.form-title{font-size:1.5rem;font-weight:600;color:#1e293b;margin:0 0 24px}.csv-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:24px;margin-top:24px}.sidebar{width:80px;background:linear-gradient(180deg,#4a90e2,#357abd);display:flex;flex-direction:column;align-items:center;padding:20px 0;box-shadow:2px 0 10px #0000001a}.logo{width:40px;height:40px;background:#fff3;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;cursor:pointer;transition:all .3s ease}.logo:hover{background:#ffffff4d}.sidebar-menu{flex:1;display:flex;flex-direction:column;gap:15px}.menu-item{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#ffffffb3}.menu-item:hover,.menu-item.active{background:#fff3;color:#fff}.menu-item.logout{background:#ffffff1a;margin-top:20px}.menu-item.logout:hover{background:#fff3}.menu-icon{font-size:18px}.main-content{flex:1;padding:40px;overflow-y:auto}.form-container{max-width:1000px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden}.form-title{font-size:26px;font-weight:700;color:#1f2937;padding:30px 40px 20px;margin:0;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#f8fafc,#fff)}.form-section{padding:30px 40px;border-bottom:1px solid #f3f4f6}.form-section:last-child{border-bottom:none}.section-title{font-size:18px;font-weight:600;color:#374151;margin:0 0 24px;display:flex;align-items:center;gap:8px}.section-title:before{content:"";width:4px;height:20px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:2px}.blood-usage-form{margin:0}.form-row{display:flex;gap:20px;margin-bottom:20px}.form-row:last-child{margin-bottom:0}.form-group{flex:1;min-width:0}.form-group.full-width{flex:2}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:16px;color:#9ca3af;font-size:16px;z-index:1;pointer-events:none}.form-input{width:100%;padding:14px 16px 14px 48px;border:2px solid #e5e7eb;border-radius:12px;font-size:15px;background:#fff;transition:all .3s ease;outline:none;color:#374151;font-weight:500}.form-input::placeholder{color:#9ca3af;font-weight:400}.form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a;background:#fff}.form-input:invalid:not(:placeholder-shown){border-color:#ef4444}.form-input:valid:not(:placeholder-shown){border-color:#10b981}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 16px center;background-repeat:no-repeat;background-size:16px;padding-right:48px}.form-select option{background:#fff;color:#374151;padding:8px}.form-textarea{resize:vertical;min-height:80px;font-family:inherit;line-height:1.5}.date-label{position:absolute;right:16px;color:#6b7280;font-size:12px;font-weight:500;pointer-events:none}.file-input{display:none}.file-label{position:absolute;top:0;left:48px;right:0;bottom:0;display:flex;align-items:center;cursor:pointer;color:#9ca3af;font-weight:400;padding:14px 16px}.input-wrapper:has(.file-input) .form-input{cursor:pointer;color:transparent}.input-wrapper:has(.file-input:focus) .form-input{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a}.csv-upload-container{display:flex;gap:16px;align-items:flex-end}.upload-btn{padding:14px 24px;background:#10b981;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:120px}.upload-btn:hover:not(:disabled){background:#059669;transform:translateY(-1px);box-shadow:0 4px 15px #10b9814d}.upload-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.form-actions{display:flex;gap:16px;justify-content:flex-end;padding:30px 40px;background:#f9fafb;border-top:1px solid #e5e7eb}.save-btn{padding:14px 32px;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:140px;box-shadow:0 4px 15px #dc26264d}.save-btn:hover:not(:disabled){background:linear-gradient(135deg,#b91c1c,#991b1b);transform:translateY(-1px);box-shadow:0 6px 20px #dc262666}.save-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.cancel-btn{padding:14px 32px;background:#f3f4f6;color:#374151;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:100px}.cancel-btn:hover{background:#e5e7eb;border-color:#d1d5db;transform:translateY(-1px)}.error-message{background:#fef2f2;color:#dc2626;padding:16px 24px;border-radius:12px;border:1px solid #fecaca;font-size:14px;font-weight:500;margin:0 40px 20px;display:flex;align-items:center;gap:8px}.error-message:before{content:"⚠️";font-size:16px}.success-message{background:#f0fdf4;color:#166534;padding:16px 24px;border-radius:12px;border:1px solid #bbf7d0;font-size:14px;font-weight:500;margin:0 40px 20px;display:flex;align-items:center;gap:8px}.success-message:before{content:"✅";font-size:16px}.form-select[name=urgency_level] option[value=Emergency]{background:#fef2f2;color:#dc2626}.form-select[name=urgency_level] option[value=Urgent]{background:#fef3c7;color:#d97706}.form-select[name=urgency_level] option[value=Routine]{background:#f0fdf4;color:#16a34a}.form-select[name=urgency_level] option[value=Elective]{background:#dbeafe;color:#2563eb}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background:#fff;border-radius:12px;box-shadow:0 25px 50px -12px #00000040,0 0 0 1px #ffffff0d;width:100%;max-width:720px;max-height:90vh;overflow:hidden;animation:modalSlideIn .2s ease-out;border:1px solid #e2e8f0}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;background:#fff}.modal-title{font-size:20px;font-weight:600;color:#0f172a;margin:0;letter-spacing:-.025em}.modal-close-btn{background:none;border:none;color:#64748b;cursor:pointer;padding:6px;border-radius:6px;transition:all .15s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.modal-close-btn:hover{background:#f1f5f9;color:#334155}.modal-close-btn:active{transform:scale(.95)}.modal-content{max-height:calc(90vh - 140px);overflow-y:auto;padding:0;background:#fff}.modal-content .form-section{padding:24px;border-bottom:1px solid #f1f5f9}.modal-content .form-section:last-of-type{border-bottom:none}.modal-content .section-title{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 20px;letter-spacing:-.025em}.modal-content .section-title:before{display:none}.modal-content .form-input{border:1px solid #d1d5db;border-radius:8px;padding:12px 16px 12px 40px;font-size:14px;background:#fff;transition:all .15s ease;color:#374151;font-weight:500}.modal-content .form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f614;background:#fff;outline:none}.modal-content .form-input::placeholder{color:#9ca3af;font-weight:400}.modal-content .input-icon{color:#6b7280;font-size:14px;left:14px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;padding:20px 24px;background:#f8fafc;border-top:1px solid #e2e8f0}.modal-actions .save-btn{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;min-width:120px;box-shadow:0 1px 2px #0000000d}.modal-actions .save-btn:hover:not(:disabled){background:#2563eb;box-shadow:0 4px 8px #3b82f633}.modal-actions .save-btn:disabled{background:#9ca3af;cursor:not-allowed;box-shadow:none}.modal-actions .cancel-btn{background:#fff;color:#374151;border:1px solid #d1d5db;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;min-width:80px}.modal-actions .cancel-btn:hover{background:#f9fafb;border-color:#9ca3af}.modal-error-message{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;border:1px solid #fecaca;font-size:14px;font-weight:500;margin:0 24px 16px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}.modal-error-message:before{content:"⚠";font-size:14px;margin-top:1px;flex-shrink:0}.modal-success-message{background:#f0fdf4;color:#166534;padding:12px 16px;border-radius:8px;border:1px solid #bbf7d0;font-size:14px;font-weight:500;margin:0 24px 16px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}.modal-success-message:before{content:"✓";font-size:14px;margin-top:1px;flex-shrink:0}.modal-content .csv-upload-container{display:flex;gap:12px;align-items:flex-end}.modal-content .upload-btn{background:#10b981;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;white-space:nowrap;min-width:100px;box-shadow:0 1px 2px #0000000d}.modal-content .upload-btn:hover:not(:disabled){background:#059669;box-shadow:0 4px 8px #10b98133}.modal-content .upload-btn:disabled{background:#9ca3af;cursor:not-allowed;box-shadow:none}.modal-content .form-row{display:flex;gap:16px;margin-bottom:16px}.modal-content .form-row:last-child{margin-bottom:0}.modal-content .form-group{flex:1}.modal-content .form-group.full-width{flex:2}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-track{background:#f8fafc}.modal-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.modal-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media (max-width: 768px){.modal-overlay{padding:16px}.modal-container{max-width:100%;max-height:95vh;border-radius:12px}.modal-header{padding:20px 24px}.modal-title{font-size:20px}.modal-content .form-section{padding:20px 24px}.modal-content .form-row{flex-direction:column;gap:16px}.modal-actions{padding:20px 24px;flex-direction:column-reverse}.modal-actions .save-btn,.modal-actions .cancel-btn{width:100%}.modal-error-message,.modal-success-message{margin:0 24px 16px;padding:12px 16px;font-size:13px}}@media (max-width: 480px){.modal-overlay{padding:12px}.modal-container{border-radius:8px}.modal-header{padding:16px 20px}.modal-title{font-size:18px}.modal-content .form-section{padding:16px 20px}.modal-content .form-input,.modal-content .form-textarea{padding:12px 16px 12px 44px;font-size:14px}.modal-content .input-icon{left:14px;font-size:14px}.modal-actions{padding:16px 20px}.modal-error-message,.modal-success-message{margin:0 20px 12px}}@media (max-width: 768px){.blood-usage-container{flex-direction:column}.sidebar{width:100%;height:60px;flex-direction:row;padding:10px 20px;justify-content:space-between;order:-1}.sidebar-header{margin-bottom:0}.sidebar-menu{flex-direction:row;gap:10px;flex:0}.sidebar-footer{margin-top:0}.menu-item{width:35px;height:35px}.main-content{padding:20px;height:calc(100vh - 60px);overflow-y:auto}.form-container{margin:0;border-radius:12px}.form-title{padding:20px 24px 16px;font-size:22px}.form-section{padding:20px 24px}.form-row{flex-direction:column;gap:16px}.form-group.full-width{flex:1}.csv-upload-container{flex-direction:column;align-items:stretch}.form-actions{padding:20px 24px;flex-direction:column-reverse}.save-btn,.cancel-btn{width:100%}.error-message,.success-message{margin:0 24px 16px}}@media (max-width: 480px){.sidebar{padding:8px 16px;height:50px}.menu-item{width:30px;height:30px}.menu-icon{font-size:14px}.logo{width:30px;height:30px;font-size:16px}.main-content{padding:16px;height:calc(100vh - 50px)}.form-container{border-radius:8px}.form-title{padding:16px 20px 12px;font-size:20px}.form-section{padding:16px 20px}.form-input,.form-textarea{padding:12px 16px 12px 44px;font-size:14px}.input-icon{left:14px;font-size:14px}.form-actions{padding:16px 20px}.error-message,.success-message{margin:0 20px 12px;padding:12px 16px;font-size:13px}}.header-actions{display:flex;align-items:center;gap:12px}.filter-toggle-btn{display:flex;align-items:center;gap:8px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.filter-toggle-btn:hover{background:#e2e8f0;color:#334155;border-color:#cbd5e1}.filter-toggle-btn svg{transition:transform .2s ease}.filter-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:24px;box-shadow:0 2px 8px #0000000a;overflow:hidden}.filter-header{background:#f8fafc;padding:16px 20px;border-bottom:1px solid #e2e8f0}.filter-title{margin:0;font-size:16px;font-weight:600;color:#1e293b}.filter-content{padding:20px}.filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px}.filter-row:last-of-type{margin-bottom:20px}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-label{font-size:13px;font-weight:500;color:#475569;margin:0}.filter-input,.filter-select{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#374151;background:#fff;transition:all .2s ease}.filter-input:focus,.filter-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.filter-input::placeholder{color:#9ca3af}.filter-actions{display:flex;gap:12px;justify-content:flex-start;margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f0}.apply-filters-btn{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.apply-filters-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.clear-filters-btn{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.clear-filters-btn:hover{background:#e2e8f0;color:#334155}.pagination-container{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin-top:20px;border-top:1px solid #e2e8f0}.pagination-info{color:#64748b;font-size:14px}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-btn{display:flex;align-items:center;gap:6px;background:#fff;color:#475569;border:1px solid #d1d5db;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.pagination-btn:hover:not(:disabled){background:#f8fafc;border-color:#3b82f6;color:#3b82f6}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-numbers{display:flex;gap:4px;margin:0 8px}.pagination-number{background:#fff;color:#475569;border:1px solid #d1d5db;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:40px}.pagination-number:hover{background:#f8fafc;border-color:#3b82f6;color:#3b82f6}.pagination-number.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.csv-format-guide{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:20px}.guide-title{margin:0 0 8px;font-size:16px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:8px}.guide-description{margin:0 0 16px;color:#64748b;font-size:14px;line-height:1.5}.format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:16px}.format-item{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:4px}.format-item.required{border-left:4px solid #ef4444}.format-item.optional{border-left:4px solid #22c55e}.field-name{font-family:Courier New,monospace;font-weight:600;color:#1e293b;font-size:13px;background:#f1f5f9;padding:2px 6px;border-radius:4px;display:inline-block;width:fit-content}.field-type{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;width:fit-content;padding:2px 6px;border-radius:3px}.format-item.required .field-type{background:#fef2f2;color:#dc2626}.format-item.optional .field-type{background:#f0fdf4;color:#16a34a}.field-description{font-size:12px;color:#64748b;line-height:1.4}.format-example{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:12px;font-size:13px}.format-example strong{color:#374151;display:block;margin-bottom:6px}.format-example code{background:#f1f5f9;color:#1e293b;padding:6px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:12px;display:block;word-break:break-all;border:1px solid #e2e8f0}@media (max-width: 768px){.header-actions{flex-direction:column;gap:8px;align-items:stretch}.filter-toggle-btn,.add-usage-btn{width:100%;justify-content:center}.filter-row{grid-template-columns:1fr;gap:12px}.filter-actions{flex-direction:column;align-items:stretch}.apply-filters-btn,.clear-filters-btn{width:100%;justify-content:center}.pagination-container{flex-direction:column;gap:16px;align-items:stretch}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-numbers{order:-1;justify-content:center}.format-grid{grid-template-columns:1fr;gap:8px}.csv-format-guide{padding:16px}.guide-title{font-size:15px}.format-example code{font-size:11px;padding:4px 6px}}.forecasting-container{display:flex;height:100vh;background-color:#f8fafc;overflow:hidden}.sidebar{width:80px;background:linear-gradient(180deg,#1e40af,#1e3a8a);display:flex;flex-direction:column;align-items:center;padding:20px 0;box-shadow:2px 0 10px #0000001a}.sidebar-header{margin-bottom:30px}.sidebar-header .logo{font-size:24px;background:#fff;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026}.sidebar-menu{display:flex;flex-direction:column;gap:15px;flex:1}.sidebar-footer{margin-top:auto}.menu-item{width:50px;height:50px;border-radius:12px;background:#ffffff1a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#fff}.menu-item:hover{background:#fff3;transform:translateY(-2px)}.menu-item.active{background:#fff;color:#1e40af;box-shadow:0 4px 12px #00000026}.menu-item.logout{background:#ef444433;color:#ef4444}.menu-item.logout:hover{background:#ef44444d}.menu-icon{font-size:20px}.main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;background-color:#f8fafc}.welcome-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}.welcome-header{margin-bottom:40px}.welcome-icon{color:#3b82f6;margin-bottom:16px}.welcome-title{font-size:36px;font-weight:700;color:#1e293b;margin:0 0 16px}.welcome-subtitle{font-size:18px;color:#64748b;margin:0;max-width:600px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;max-width:1200px;width:100%;margin-bottom:40px}.feature-card{background:#fff;border-radius:12px;padding:32px 24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0;transition:all .2s ease;text-align:center;position:relative}.feature-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.feature-card.clickable{cursor:pointer}.feature-card.clickable:hover{border-color:#3b82f6;box-shadow:0 4px 20px #3b82f633}.feature-card.monitoring-card{grid-column:span 2;text-align:left}.click-indicator{position:absolute;bottom:16px;right:16px;font-size:12px;color:#3b82f6;font-weight:500;opacity:0;transition:opacity .2s ease}.feature-card.clickable:hover .click-indicator{opacity:1}.feature-icon{color:#3b82f6;margin-bottom:16px}.feature-card h3{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 12px}.feature-card p{font-size:14px;color:#64748b;margin:0 0 20px;line-height:1.5}.monitoring-view{padding:24px 30px;height:100%;overflow-y:auto}.monitoring-header{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.back-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;font-size:14px;cursor:pointer;transition:all .2s ease}.back-button:hover{background-color:#e2e8f0;color:#1e293b}.monitoring-title{display:flex;align-items:center;gap:12px}.monitoring-title h1{font-size:28px;font-weight:700;color:#1e293b;margin:0}.monitoring-icon{color:#3b82f6}.monitoring-content{max-width:1200px}.blood-volume-chart{background:#fff;border-radius:12px;padding:32px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.chart-header h2{font-size:24px;font-weight:600;color:#1e293b;margin:0}.chart-summary{display:flex;gap:32px;margin-bottom:32px;padding:20px 24px;background-color:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.summary-value.positive{color:#16a34a}.summary-value.negative{color:#dc2626}.chart-bars{position:relative;display:flex;justify-content:space-around;align-items:flex-end;gap:20px;height:600px;width:100%;max-width:1200px;margin:auto;border-left:3px solid #374151;border-bottom:3px solid #374151;padding:40px 60px 80px 100px;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;background-image:repeating-linear-gradient(to top,transparent 0px,transparent 99px,#e5e7eb 99px,#e5e7eb 100px,transparent 100px),repeating-linear-gradient(to right,transparent 0px,transparent 99px,#e5e7eb 99px,#e5e7eb 100px,transparent 100px);background-position:100px 80px,100px 0px;background-size:100% calc(100% - 160px),calc(100% - 160px) 100%;background-repeat:repeat,repeat}.y-axis-title{position:absolute;left:-70px;top:50%;transform:rotate(-90deg) translateY(-50%);font-size:16px;font-weight:600;color:#1f2937;white-space:nowrap;z-index:4}.x-axis-title{text-align:center;margin-top:1.5rem;font-size:16px;font-weight:600;color:#1f2937;z-index:4}.chart-title{text-align:center;margin-bottom:2rem;font-size:20px;font-weight:600;color:#1f2937;z-index:4}.bar-group{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:5}.bar-pair{display:flex;gap:8px;align-items:flex-end}.bar{width:28px;border-radius:6px 6px 0 0;min-height:8px;transition:all .2s ease;cursor:pointer;box-shadow:0 2px 4px #0000001a}.bar:hover{opacity:.8;transform:scaleX(1.1);box-shadow:0 4px 8px #00000026}.bar.donation{background-color:#4a74c9}.bar.usage{background-color:#dd8659}.bar.donation:hover{background-color:#3a5bb8}.bar.usage:hover{background-color:#cc7548}.blood-type-label{margin-top:.5rem;font-size:14px;font-weight:600;color:#374151;text-align:center;white-space:nowrap;position:relative;z-index:5}.monitoring-chart{margin-top:20px}.chart-loading,.chart-error{display:flex;align-items:center;justify-content:center;height:200px;color:#64748b;font-size:14px}.chart-error{flex-direction:column;gap:12px}.retry-btn{padding:8px 16px;background-color:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;transition:background-color .2s ease}.retry-btn:hover{background-color:#2563eb}.blood-volume-chart{border:1px solid #e2e8f0;border-radius:8px;padding:16px;background-color:#f8fafc}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.chart-header h4{font-size:16px;font-weight:600;color:#1e293b;margin:0}.chart-legend{display:flex;justify-content:center;gap:2rem;margin-top:2rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:14px;color:#374151}.legend-box{width:20px;height:20px;border-radius:3px}.legend-donated{background-color:#4a74c9}.legend-used{background-color:#dd8659}.predictive-view{padding:24px 30px;height:100%;overflow-y:auto;max-height:calc(100vh - 60px)}.predictive-header{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.predictive-header .header-content h1{font-size:28px;font-weight:700;color:#1e293b;margin:0}.overview-section{background:#fff;border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.overview-header{display:flex;align-items:center;gap:15px;margin-bottom:25px}.overview-header h2{font-size:24px;font-weight:700;color:#1e293b;margin:0}.overview-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.overview-card{background:#f8fafc;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.overview-card h3{font-size:16px;font-weight:600;color:#374151;margin:0 0 10px}.replenishment-section{background:#fff;border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.replenishment-section h2{font-size:24px;font-weight:700;color:#1e293b;margin:0 0 25px}.table-container{overflow-x:auto;max-height:60vh;overflow-y:auto;border-radius:8px;border:1px solid #e5e7eb}.replenishment-table{width:100%;border-collapse:collapse;background:#fff;min-width:1000px}.replenishment-table th{background:#f8fafc;padding:15px 12px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;font-size:14px;position:sticky;top:0;z-index:10}.replenishment-table td{padding:15px 12px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px}.replenishment-table tr:hover{background:#f9fafb}.blood-type-badge{background:#3b82f6;color:#fff;padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px}.summary-section{background:#fff;border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.summary-section h2{font-size:24px;font-weight:700;color:#1e293b;margin:0 0 25px}.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.stat-item{display:flex;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.stat-label{font-weight:600;color:#64748b;font-size:14px}.stat-value{font-weight:700;color:#1e293b;font-size:14px}.forecast-controls{background:#fff;border-radius:12px;padding:25px;margin-bottom:30px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.forecast-controls h3{font-size:20px;font-weight:600;color:#1e293b;margin:0 0 20px}.trends-controls{display:flex;gap:2rem;margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-size:14px;font-weight:600;color:#374151}.control-group select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;color:#374151}.blood-type-filters{display:flex;gap:.5rem;flex-wrap:wrap}.filter-btn{padding:6px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.filter-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.filter-btn.active{border-color:transparent;box-shadow:0 2px 4px #0000001a}.trends-chart-container{background:#fff;border-radius:12px;padding:2rem;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.line-chart-container{margin:2rem 0;width:100%;height:400px}.line-chart{width:100%;height:100%;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.chart-summary{display:flex;gap:24px;margin-bottom:20px;padding:12px 16px;background-color:#fff;border-radius:6px;border:1px solid #e2e8f0}.summary-item{display:flex;flex-direction:column;gap:4px}.summary-label{font-size:12px;color:#64748b;font-weight:500}.summary-value{font-size:16px;font-weight:600}.summary-value.donated{color:#3b82f6}.summary-value.used{color:#64748b}.chart-bars{display:flex;justify-content:space-between;align-items:end;gap:8px;height:140px;padding:16px 8px 8px;background-color:#fff;border-radius:6px;border:1px solid #e2e8f0}.blood-type-bar{display:flex;flex-direction:column;align-items:center;flex:1}.blood-type-label{font-size:12px;font-weight:600;color:#374151;text-align:center;position:absolute;bottom:-35px;left:50%;transform:translate(-50%);white-space:nowrap;background-color:#fff;padding:4px 6px;z-index:4}.bar-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.bar-group{display:flex;gap:2px;align-items:end;height:100px;margin-bottom:8px}.bar{width:12px;min-height:4px;border-radius:2px 2px 0 0;transition:all .2s ease;cursor:pointer}.bar:hover{opacity:.8;transform:scaleX(1.1)}.bar-values{display:flex;gap:4px;font-size:10px;color:#64748b;text-align:center}.bar-values .value{min-width:20px}.bar-values .value.donated{color:#3b82f6}.bar-values .value.used{color:#64748b}.coming-soon{padding:16px 32px;background:linear-gradient(135deg,#3b82f6,#1e40af);color:#fff;border-radius:25px;font-size:16px;font-weight:500;box-shadow:0 4px 12px #3b82f64d}.coming-soon p{margin:0}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.summary-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0;transition:all .2s ease}.summary-card:hover{box-shadow:0 4px 12px #0000001a}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.summary-header h3{font-size:14px;font-weight:500;color:#64748b;margin:0;text-transform:uppercase;letter-spacing:.5px}.summary-icon{padding:8px;border-radius:8px}.summary-icon.donated{background-color:#dcfce7;color:#16a34a}.summary-icon.used{background-color:#fee2e2;color:#dc2626}.summary-icon.balance{background-color:#dbeafe;color:#2563eb}.summary-icon.average{background-color:#fef3c7;color:#d97706}.summary-value{font-size:28px;font-weight:700;color:#1e293b;margin-bottom:8px}.summary-period{font-size:12px;color:#64748b}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.chart-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.chart-card.full-width{grid-column:1 / -1}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.chart-header h3{font-size:18px;font-weight:600;color:#1e293b;margin:0}.chart-subtitle{font-size:12px;color:#64748b}.chart-legend{display:flex;gap:16px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b}.legend-color{width:12px;height:12px;border-radius:2px}.legend-color.donated{background-color:#3b82f6}.legend-color.used{background-color:#94a3b8}.chart-content{height:300px;position:relative}.bar-chart{display:flex;align-items:end;justify-content:space-around;height:100%;padding:20px 0}.bar-group{display:flex;flex-direction:column;align-items:center;gap:8px}.bar-label{font-size:12px;font-weight:600;color:#1e293b}.bars{display:flex;gap:4px;align-items:end}.bar{width:24px;min-height:8px;border-radius:2px 2px 0 0;transition:all .3s ease;cursor:pointer;box-shadow:0 1px 3px #0000001a}.bar:hover{opacity:.8;transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.bar.donation{background-color:#3b82f6}.bar.usage{background-color:#f97316}.bar.donation:hover{background-color:#2563eb}.bar.usage:hover{background-color:#ea580c}.bar-values{display:flex;gap:8px;font-size:10px;color:#64748b}.line-chart{display:flex;align-items:end;justify-content:space-between;height:100%;padding:20px 0;position:relative}.line-point{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;height:100%}.point-date{font-size:10px;color:#64748b;writing-mode:horizontal-tb;text-align:center}.point-values{position:relative;height:180px;width:20px}.point{position:absolute;width:8px;height:8px;border-radius:50%;cursor:pointer;transition:all .2s ease}.point.donated{background-color:#3b82f6}.point.used{background-color:#94a3b8}.point:hover{transform:scale(1.2)}.optimization-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.optimization-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;transition:all .2s ease}.optimization-card:hover{box-shadow:0 4px 12px #0000001a;border-color:#cbd5e1}.optimization-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.blood-type-badge{padding:6px 12px;border-radius:6px;color:#fff;font-weight:600;font-size:14px}.status-badge{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.status-badge.critical{background-color:#fee2e2;color:#dc2626}.status-badge.low{background-color:#fef3c7;color:#d97706}.status-badge.adequate{background-color:#dcfce7;color:#16a34a}.optimization-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.metric{padding:12px;background-color:#fff;border-radius:6px;border:1px solid #e2e8f0}.metric.highlight{background-color:#fef3c7;border-color:#fbbf24}.metric label{display:block;font-size:10px;font-weight:500;color:#64748b;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.metric .value{font-size:14px;font-weight:600;color:#1e293b}.metric.highlight .value{color:#92400e}.optimization-notes{font-size:12px;color:#64748b;font-style:italic;padding:12px;background-color:#fff;border-radius:6px;border:1px solid #e2e8f0}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#64748b;font-size:16px}.loading-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#dc2626;font-size:16px;text-align:center}.retry-button{margin-top:16px;padding:10px 20px;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.retry-button:hover{background-color:#2563eb}@media (max-width: 1024px){.charts-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr}.feature-card.monitoring-card{grid-column:span 1}.chart-summary{flex-direction:column;gap:16px}.monitoring-header{flex-direction:column;align-items:flex-start;gap:16px}}@media (max-width: 768px){.forecasting-container{flex-direction:column}.sidebar{width:100%;height:60px;flex-direction:row;padding:10px 20px;justify-content:space-between;order:-1}.sidebar-header{margin-bottom:0}.sidebar-header .logo{width:40px;height:40px;font-size:20px}.sidebar-menu{flex-direction:row;gap:10px;flex:0}.sidebar-footer{margin-top:0}.menu-item{width:35px;height:35px}.main-content{height:calc(100vh - 60px);overflow-y:auto}.forecasting-view,.predictive-view,.monitoring-view{padding:16px 20px}.forecasting-header,.predictive-header,.monitoring-header{flex-direction:column;align-items:flex-start;gap:16px}.forecasting-header .header-content h1,.predictive-header .header-content h1,.monitoring-title h1{font-size:24px}.forecast-controls{padding:20px}.control-section{flex-direction:column;align-items:stretch;gap:12px}.forecast-buttons{flex-wrap:wrap;gap:8px}.forecast-btn{min-width:80px;font-size:14px;padding:8px 16px}.forecast-period-info{flex-direction:column;gap:12px}.summary-grid,.overview-cards{grid-template-columns:1fr;gap:16px}.charts-grid{grid-template-columns:1fr}.table-container{overflow-x:auto;max-height:50vh}.replenishment-table,.forecast-table{min-width:600px}.replenishment-table th,.replenishment-table td,.forecast-table th,.forecast-table td{padding:10px 8px;font-size:13px}.chart-content{height:250px}.chart-bars{height:200px;gap:8px;padding:16px 8px}.bar-group{height:120px}.chart-summary{flex-direction:column;gap:12px}.blood-volume-chart{padding:20px}.chart-header h2{font-size:20px}.trends-controls{flex-direction:column;gap:12px}.blood-type-filters{justify-content:flex-start}.insights-grid{grid-template-columns:1fr}}@media (max-width: 480px){.sidebar{padding:8px 16px;height:50px}.menu-item{width:30px;height:30px}.menu-icon{font-size:14px}.sidebar-header .logo{width:30px;height:30px;font-size:16px}.main-content{height:calc(100vh - 50px)}.forecasting-view,.predictive-view,.monitoring-view{padding:12px 16px}.forecasting-header .header-content h1,.predictive-header .header-content h1,.monitoring-title h1{font-size:20px}.forecast-controls{padding:16px}.forecast-btn{min-width:60px;font-size:12px;padding:6px 12px}.summary-card,.overview-card,.chart-card,.insight-card{padding:16px}.card-value,.stats-card-value{font-size:20px}.chart-content{height:200px}.chart-bars{height:150px;padding:12px 4px}.bar{width:8px}.blood-type-label{font-size:10px}.replenishment-table,.forecast-table{min-width:500px}.replenishment-table th,.replenishment-table td,.forecast-table th,.forecast-table td{padding:8px 6px;font-size:12px}.blood-type-badge{width:40px;height:24px;font-size:12px}}.forecasting-view{padding:30px;max-width:100%;overflow-y:auto}.forecasting-header{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e5e7eb}.forecasting-header .header-content h1{font-size:32px;font-weight:700;color:#1f2937;margin:0;display:flex;align-items:center;gap:10px}.forecasting-header .header-content p{color:#6b7280;margin:5px 0 0;font-size:16px}.forecast-controls{background:#fff;border-radius:12px;padding:25px;margin-bottom:30px;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.control-section{display:flex;align-items:center;gap:20px;margin-bottom:20px}.forecast-label{font-weight:600;color:#374151;font-size:16px;min-width:140px}.forecast-buttons{display:flex;gap:12px}.forecast-btn{padding:10px 20px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-weight:500;cursor:pointer;transition:all .2s ease}.forecast-btn:hover{border-color:#3b82f6;color:#3b82f6}.forecast-btn.active{border-color:#3b82f6;background:#3b82f6;color:#fff}.forecast-period-info{display:flex;gap:30px;margin-top:15px}.info-card{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.info-label{font-weight:600;color:#374151}.info-value{color:#6b7280;font-weight:500}.forecasting-content{display:flex;flex-direction:column;gap:30px}.forecast-summary{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.forecast-summary h2{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 25px;display:flex;align-items:center;gap:10px}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.summary-card{display:flex;align-items:center;gap:20px;padding:25px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:12px;border:1px solid #e2e8f0;transition:all .2s ease}.summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0000001a}.card-icon{font-size:32px;min-width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a}.card-content h3{font-size:16px;font-weight:600;color:#374151;margin:0 0 8px}.card-value{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 5px}.card-subtitle{font-size:14px;color:#6b7280;margin:0}.forecast-details{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.forecast-details h2{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 25px;display:flex;align-items:center;gap:10px}.forecast-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e5e7eb}.forecast-table{width:100%;border-collapse:collapse;background:#fff}.forecast-table th{background:#f8fafc;padding:15px 12px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;font-size:14px}.forecast-table td{padding:15px 12px;border-bottom:1px solid #f3f4f6;vertical-align:top}.forecast-table tr:hover{background:#f9fafb}.forecast-table tr.status-order_required{background:#fef2f2}.forecast-table tr.status-adequate{background:#f0fdf4}.forecast-table tr.status-surplus{background:#fefce8}.blood-type-badge{display:inline-flex;align-items:center;justify-content:center;width:50px;height:30px;background:#3b82f6;color:#fff;border-radius:6px;font-weight:600;font-size:14px}.stock-amount,.usage-amount,.donations-amount,.projected-amount{font-weight:600;color:#1f2937}.usage-rate{font-size:12px;color:#6b7280;margin-top:2px}.stock-change{font-size:12px;margin-top:2px;font-weight:500}.stock-change.positive{color:#10b981}.stock-change.negative{color:#ef4444}.order-amount{font-weight:600}.order-amount.has-order{color:#dc2626}.order-amount.no-order{color:#6b7280}.status-badge{padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-align:center}.status-badge.status-order_required{background:#fecaca;color:#dc2626}.status-badge.status-adequate{background:#bbf7d0;color:#059669}.status-badge.status-surplus{background:#fef3c7;color:#d97706}.ai-notes{font-size:13px;color:#6b7280;line-height:1.4;max-width:250px}.ai-insights{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.ai-insights h2{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 25px;display:flex;align-items:center;gap:10px}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.insight-card{padding:25px;border-radius:10px;border:1px solid #e5e7eb}.insight-card h3{font-size:18px;font-weight:600;margin:0 0 15px;display:flex;align-items:center;gap:8px}.insight-card.critical-alert{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fecaca}.insight-card.critical-alert h3{color:#dc2626}.insight-card.procurement-cost{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#bfdbfe}.insight-card.procurement-cost h3{color:#2563eb}.insight-card.status-distribution{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:#bbf7d0}.insight-card.status-distribution h3{color:#059669}.insight-card.forecast-confidence{background:linear-gradient(135deg,#fefce8,#fef3c7);border-color:#fed7aa}.insight-card.forecast-confidence h3{color:#d97706}.cost-breakdown,.status-breakdown{display:flex;flex-direction:column;gap:12px}.cost-item,.status-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.1)}.cost-value{font-weight:700;color:#dc2626}.confidence-score{margin-top:15px;padding-top:15px;border-top:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.confidence-value{font-weight:700;color:#059669;font-size:18px}.status-item.critical span:first-child{color:#dc2626}.status-item.adequate span:first-child{color:#059669}.status-item.surplus span:first-child{color:#d97706}.parameters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0}.parameter-group{background:#fff;padding:15px;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.parameter-group label{font-weight:600;color:#374151;margin-bottom:8px;display:block}.parameter-input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;margin-top:8px}.parameter-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.service-level-buttons,.lead-time-buttons,.order-limit-buttons{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.api-url{background:#f3f4f6;padding:10px;border-radius:6px;font-family:monospace;font-size:12px;color:#374151;margin:8px 0;word-break:break-all;border:1px solid #d1d5db}.parameter-summary{background:#eff6ff;padding:8px 12px;border-radius:6px;font-size:14px;color:#1d4ed8;border:1px solid #bfdbfe}.forecast-controls h3{color:#1f2937;margin-bottom:15px;font-size:18px;font-weight:600}.parameters-row{display:flex;flex-wrap:wrap;gap:15px;align-items:flex-end;background:#fff;padding:15px;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.parameter-group-inline{display:flex;flex-direction:column;min-width:200px}.parameter-group-inline label{font-weight:600;color:#374151;margin-bottom:5px;font-size:12px}.inline-controls{display:flex;gap:5px;align-items:center}.forecast-btn-small{padding:4px 8px;border:1px solid #d1d5db;background:#fff;border-radius:4px;font-size:11px;cursor:pointer;transition:all .2s}.forecast-btn-small:hover{background:#f3f4f6}.forecast-btn-small.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.parameter-input-small{width:50px;padding:4px 6px;border:1px solid #d1d5db;border-radius:4px;font-size:11px}.parameter-input-small:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.analysis-info-compact{margin-top:10px}.parameter-summary{background:#eff6ff;padding:8px 12px;border-radius:6px;font-size:12px;color:#1d4ed8;border:1px solid #bfdbfe;display:flex;gap:15px;flex-wrap:wrap}.analytics-content{padding:24px;max-width:1600px;margin:0 auto;width:100%}@media (min-width: 1440px){.analytics-content{padding:32px 48px}}.analytics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.analytics-title-section h1{font-size:1.875rem;font-weight:700;color:#111827;margin:0}.analytics-title-section p{color:#6b7280;margin-top:4px;margin-bottom:0}.export-button{display:flex;align-items:center;gap:8px;background-color:#2563eb;color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:background-color .2s;font-size:14px}.export-button:hover{background-color:#1d4ed8}.stats-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:32px}@media (min-width: 768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:30px}}@media (min-width: 1440px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:36px}}.stats-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #e5e7eb;padding:28px;min-height:140px;transition:transform .2s ease,box-shadow .2s ease}.stats-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.stats-card-header{display:flex;align-items:center;justify-content:space-between}.stats-card-icon-container{display:flex;align-items:center}.stats-card-icon-wrapper{padding:8px;background-color:#dbeafe;border-radius:8px}.stats-card-icon{color:#2563eb}.stats-card-trend{display:flex;align-items:center;gap:4px;font-size:14px}.trend-up{color:#059669}.trend-down{color:#dc2626}.stats-card-content{margin-top:16px}.stats-card-value{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.stats-card-title{color:#6b7280;font-size:14px;margin-top:4px;margin-bottom:0}.charts-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:32px}@media (min-width: 1024px){.charts-grid{grid-template-columns:repeat(2,1fr);gap:36px}}@media (min-width: 1440px){.charts-grid{grid-template-columns:1.2fr .8fr;gap:40px}}.charts-grid-bottom{display:grid;grid-template-columns:1fr;gap:30px}@media (min-width: 1024px){.charts-grid-bottom{grid-template-columns:repeat(2,1fr);gap:36px}}@media (min-width: 1440px){.charts-grid-bottom{grid-template-columns:.8fr 1.2fr;gap:40px}}.chart-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #e5e7eb;padding:28px;min-height:420px;transition:transform .2s ease,box-shadow .2s ease}.chart-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.chart-card-header{margin-bottom:28px}.chart-card-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.chart-card-description{color:#6b7280;font-size:14px;margin-top:6px;margin-bottom:0}.loading-container{display:flex;align-items:center;justify-content:center;min-height:100vh}.loading-spinner{width:128px;height:128px;border:2px solid #e5e7eb;border-bottom-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{display:flex;align-items:center;justify-content:center;min-height:100vh}.error-content{text-align:center}.error-icon{width:64px;height:64px;color:#ef4444;margin:0 auto 16px}.error-title{font-size:1.5rem;font-weight:700;color:#111827;margin-bottom:8px}.error-message{color:#6b7280;margin-bottom:16px}.retry-button{background-color:#2563eb;color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:background-color .2s}.retry-button:hover{background-color:#1d4ed8}@media (max-width: 768px){.analytics-content{padding:16px}.analytics-header{flex-direction:column;align-items:flex-start;gap:16px}.analytics-title-section h1{font-size:1.5rem}.stats-card{padding:20px;min-height:120px}.chart-card{padding:20px;min-height:300px}.charts-grid,.charts-grid-bottom{grid-template-columns:1fr;gap:20px}}@media (max-width: 480px){.analytics-content{padding:12px}.analytics-title-section h1{font-size:1.25rem}.export-button{font-size:12px;padding:6px 12px}.stats-card{padding:16px;min-height:100px}.stats-card-value{font-size:1.25rem}.chart-card{padding:16px;min-height:250px}.chart-card-title{font-size:1rem}}.professional-sidebar{width:280px;background:linear-gradient(180deg,#1e293b,#334155);display:flex;flex-direction:column;box-shadow:4px 0 24px #0000001f;transition:all .3s ease;position:relative;z-index:100}.professional-sidebar .sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.1);background:#ffffff05}.brand-logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:18px;cursor:pointer;transition:all .3s ease;padding:8px 12px;border-radius:12px;text-decoration:none}.brand-logo:hover{background:#ffffff1a;transform:translateY(-1px)}.brand-logo svg{color:#60a5fa;filter:drop-shadow(0 2px 4px rgba(96,165,250,.3))}.brand-text{color:#fff;font-weight:700;letter-spacing:-.5px}.sidebar-navigation{flex:1;padding:20px 0;overflow-y:auto}.nav-section{padding:0 16px}.nav-item{display:flex;align-items:center;gap:16px;padding:14px 16px;margin-bottom:4px;border-radius:12px;cursor:pointer;transition:all .3s ease;color:#ffffffb3;font-weight:500;font-size:15px;position:relative;overflow:hidden}.nav-item:hover{background:#ffffff14;color:#fff;transform:translate(4px)}.nav-item.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 16px #3b82f64d;transform:translate(4px)}.nav-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#60a5fa;border-radius:0 4px 4px 0}.nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.nav-icon svg{width:20px;height:20px;stroke-width:2}.nav-text{font-size:15px;font-weight:500;white-space:nowrap}.sidebar-footer{padding:20px 16px;border-top:1px solid rgba(255,255,255,.1);background:#0000001a}.logout-item{color:#fff9;margin-bottom:0}.logout-item:hover{background:#ef44441a;color:#fca5a5;border:1px solid rgba(239,68,68,.2)}.header{background:linear-gradient(135deg,#fff,#f8fafc);padding:16px 32px;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 8px #0000000a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-container{position:relative;max-width:480px}.search-input{width:100%;padding:12px 48px 12px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:14px;background:#fff;transition:all .3s ease;box-shadow:0 2px 8px #0000000a}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f61a;outline:none}.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#64748b;font-size:18px}.header-actions{display:flex;align-items:center;gap:24px}.language-selector{display:flex;align-items:center;gap:10px;padding:10px 16px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .3s ease;background:#fff;box-shadow:0 2px 8px #0000000a}.language-selector:hover{border-color:#3b82f6;transform:translateY(-1px);box-shadow:0 4px 12px #00000014}.settings-icon{font-size:20px;cursor:pointer;padding:12px;border-radius:10px;transition:all .3s ease;color:#64748b;background:#fff;box-shadow:0 2px 8px #0000000a;border:2px solid #e2e8f0}.settings-icon:hover{background:#f1f5f9;color:#3b82f6;transform:translateY(-1px);box-shadow:0 4px 12px #00000014}@media (max-width: 1024px){.professional-sidebar{width:80px}.brand-text,.nav-text{display:none}.brand-logo{justify-content:center}.nav-item{justify-content:center;padding:14px 8px}}@media (max-width: 768px){.dashboard-container{flex-direction:column}.professional-sidebar{width:100%;height:70px;flex-direction:row;padding:0;order:-1}.professional-sidebar .sidebar-header{padding:12px 20px;border-bottom:none;border-right:1px solid rgba(255,255,255,.1)}.sidebar-navigation{flex-direction:row;padding:0 20px;overflow-x:auto}.nav-section{display:flex;gap:8px;padding:0}.nav-item{flex-direction:column;gap:4px;padding:8px 12px;min-width:70px;text-align:center}.nav-text{font-size:11px}.sidebar-footer{padding:12px 20px;border-top:none;border-left:1px solid rgba(255,255,255,.1)}.brand-text,.nav-text{display:block}.main-content{height:calc(100vh - 70px)}}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.text-sm{font-size:14px}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-gray-900{color:#111827}.text-gray-600{color:#6b7280}.h-4{height:16px}.w-4{width:16px}.h-6{height:24px}.w-6{width:24px}.h-16{height:64px}.w-16{width:64px}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:16px}.mb-2{margin-bottom:8px}.mt-1{margin-top:4px}.App{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}@media (max-width: 768px){body{overflow-x:hidden}.App{width:100%;max-width:100vw}}