:root {
  --uf-black: #030303;
  --uf-black-2: #080808;
  --uf-panel: #101010;
  --uf-panel-2: #171717;
  --uf-red: #e50914;
  --uf-red-dark: #610008;
  --uf-red-glow: rgba(229, 9, 20, 0.65);
  --uf-white: #f8fafc;
  --uf-silver: #cbd5e1;
  --uf-muted: #9ca3af;
}

/* Umbrella Fleet Intelligence dark/red/white overlay */
html, body, #root {
  background:
    radial-gradient(circle at 15% 5%, rgba(229, 9, 20, .22), transparent 26%),
    radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .06), transparent 24%),
    linear-gradient(180deg, #050505 0%, #090909 45%, #020202 100%) !important;
  color: var(--uf-white) !important;
}

/* Global readability fixes */
.MuiTypography-root,
.MuiInputBase-input,
.MuiFormLabel-root,
.MuiSvgIcon-root,
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiTableCell-root,
.MuiMenuItem-root,
.MuiButton-root,
.MuiChip-label,
.MuiTab-root,
.MuiBottomNavigationAction-label,
label, span, p {
  color: var(--uf-white) !important;
}

.MuiFormHelperText-root,
.MuiInputLabel-root,
.MuiListItemText-secondary,
.MuiBottomNavigationAction-label {
  color: var(--uf-silver) !important;
}

/* Main surfaces */
.MuiPaper-root,
.MuiDrawer-paper,
.MuiCard-root,
.MuiDialog-paper,
.MuiMenu-paper,
.MuiPopover-paper {
  background:
    linear-gradient(180deg, rgba(26,26,26,.98), rgba(8,8,8,.98)) !important;
  color: var(--uf-white) !important;
  border: 1px solid rgba(229, 9, 20, .38) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

/* Top bars */
.MuiAppBar-root,
.MuiToolbar-root {
  background: linear-gradient(90deg, #000 0%, #350006 48%, #000 100%) !important;
  color: var(--uf-white) !important;
  border-bottom: 1px solid rgba(229, 9, 20, .65) !important;
}

/* Search/input fields */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiSelect-select {
  background: rgba(5,5,5,.94) !important;
  color: var(--uf-white) !important;
  border-radius: 10px !important;
}
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(229, 9, 20, .68) !important;
}
.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline,
.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--uf-red) !important;
  box-shadow: 0 0 18px rgba(229, 9, 20, .25) !important;
}

/* Buttons */
.MuiButton-contained,
.MuiFab-root {
  background: linear-gradient(135deg, var(--uf-red) 0%, #ffffff 115%) !important;
  color: #050505 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 28px rgba(229, 9, 20, .34) !important;
}
.MuiButton-contained .MuiSvgIcon-root,
.MuiFab-root .MuiSvgIcon-root { color: #050505 !important; }
.MuiButton-outlined {
  border-color: var(--uf-red) !important;
  color: var(--uf-white) !important;
}
.MuiIconButton-root:hover,
.MuiButtonBase-root:hover {
  background-color: rgba(229, 9, 20, .16) !important;
}

/* Lists / device cards */
.MuiListItem-root,
.MuiListItemButton-root {
  border-bottom: 1px solid rgba(229, 9, 20, .12) !important;
}
.MuiListItemButton-root:hover,
.MuiMenuItem-root:hover,
.Mui-selected {
  background: linear-gradient(90deg, rgba(229,9,20,.22), rgba(255,255,255,.03)) !important;
}

/* Bottom navigation fix: no white bar, icons readable */
.MuiBottomNavigation-root {
  background: linear-gradient(180deg, #0b0b0b 0%, #020202 100%) !important;
  border-top: 1px solid rgba(229, 9, 20, .85) !important;
  box-shadow: 0 -8px 35px rgba(229, 9, 20, .18) !important;
}
.MuiBottomNavigationAction-root {
  color: var(--uf-silver) !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
}
.MuiBottomNavigationAction-root.Mui-selected {
  color: var(--uf-red) !important;
  background: radial-gradient(circle at 50% 0%, rgba(229,9,20,.38), rgba(229,9,20,.06) 45%, transparent 75%) !important;
}
.MuiBottomNavigationAction-root.Mui-selected .MuiSvgIcon-root,
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
  color: var(--uf-red) !important;
  text-shadow: 0 0 14px rgba(229,9,20,.85) !important;
}

/* Login branding */
form::before {
  content: "UMBRELLA";
  display: block;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 9px;
  margin-bottom: 4px;
  color: var(--uf-red);
  text-shadow: 0 0 24px rgba(229,9,20,.75);
}
form::after {
  content: "FLEET INTELLIGENCE // CONTROL . MONITOR . PROTECT";
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2.5px;
  margin-top: 14px;
  color: var(--uf-silver);
}

/* Optional logo header placeholder on side panels */
.MuiDrawer-paper::before {
  content: "UMBRELLA FLEET INTELLIGENCE";
  white-space: pre;
  display: block;
  padding: 18px 16px 14px;
  color: var(--uf-white);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.25;
  background:
    linear-gradient(90deg, rgba(229,9,20,.32), transparent),
    #030303;
  border-bottom: 1px solid rgba(229,9,20,.75);
  text-shadow: 0 0 16px rgba(229,9,20,.65);
}

/* Links and alerts */
a { color: #fecaca !important; }
.MuiChip-colorError,
.MuiAlert-standardError {
  background: rgba(229,9,20,.18) !important;
  color: #fecaca !important;
  border: 1px solid rgba(229,9,20,.55) !important;
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #050505; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--uf-red), #ffffff);
  border-radius: 8px;
}