html, body { height: 100%; }
#root { min-height: 100vh; }

.flag-RED { background-color: #fee2e2; color: #991b1b; font-weight: 600; }
.flag-YELLOW { background-color: #fef9c3; color: #854d0e; font-weight: 600; }
.flag-GREEN { background-color: #dcfce7; color: #166534; font-weight: 600; }
.flag-ACTION { background-color: #fee2e2; color: #991b1b; font-weight: 600; }
.flag-OK { background-color: #dcfce7; color: #166534; font-weight: 600; }
.flag-STOP { background-color: #fee2e2; color: #991b1b; font-weight: 600; }
.flag-NODIST, .flag-NODISTRIBUTION { background-color: #fef9c3; color: #854d0e; font-weight: 600; }
.flag-ELIGIBLE { background-color: #dcfce7; color: #166534; font-weight: 600; }
.flag-LIMITED { background-color: #fef9c3; color: #854d0e; font-weight: 600; }
.flag-ENTERFORECAST { background-color: #e0e7ff; color: #3730a3; font-weight: 600; }

.nav-link.active { background-color: #1e293b; color: white; }
.nav-link:hover { background-color: #334155; color: white; }

table.data-table th { position: sticky; top: 0; background: #f8fafc; z-index: 10; }
table.data-table td, table.data-table th { white-space: nowrap; }

.modal-backdrop { background: rgba(0,0,0,0.5); }

.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.15s ease-in; }