html,
body,
#root,
.root {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
background: #02070d;
}
/* =========================================
IBGPS LOGIN — FINAL STRUCTURE
========================================= */
body:has(input[name="email"]) {
overflow: hidden !important;
}
/* REAL Traccar login root */
body:has(input[name="email"]) main {
position: fixed !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
background:
#02070d
url("/ibgps-login-master.png")
center center / cover no-repeat !important;
}
/* =========================================
KILL TRACCAR LEFT SIDEBAR COMPLETELY
========================================= */
body:has(input[name="email"]) main > div:first-child {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
visibility: hidden !important;
}
/* =========================================
RIGHT SIDE / PAPER
========================================= */
body:has(input[name="email"]) main > .MuiPaper-root {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================================
REAL LOGIN CARD
========================================= */
body:has(input[name="email"]) form {
position: absolute !important;
top: 50% !important;
right: 5.2vw !important;
transform: translateY(-50%) !important;
box-sizing: border-box !important;
width: 31vw !important;
max-width: 500px !important;
min-width: 410px !important;
padding:
112px
34px
34px
34px !important;
margin: 0 !important;
border:
1px solid rgba(50, 161, 232, .55) !important;
border-radius: 24px !important;
background:
linear-gradient(
145deg,
rgba(2, 19, 33, .97),
rgba(1, 10, 20, .97)
) !important;
box-shadow:
0 35px 90px rgba(0,0,0,.60),
0 0 28px rgba(38,145,220,.15),
inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
z-index: 20 !important;
}
/* Welcome title */
body:has(input[name="email"]) form::before {
content: "Welcome to IBGPS";
position: absolute;
top: 34px;
left: 34px;
color: #ffffff;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 28px;
line-height: 1;
font-weight: 700;
letter-spacing: -.02em;
}
/* Subtitle */
body:has(input[name="email"]) form::after {
content: "Sign in to your account";
position: absolute;
top: 72px;
left: 34px;
color: #8eb7d6;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 16px;
font-weight: 400;
}
/* =========================================
LANGUAGE + QR OPTIONS
First child inside real form
========================================= */
body:has(input[name="email"]) form > div:first-child {
position: absolute !important;
top: 25px !important;
right: 25px !important;
display: flex !important;
gap: 8px !important;
z-index: 30 !important;
}
body:has(input[name="email"])
form > div:first-child
.MuiInputBase-root {
min-width: 130px !important;
height: 46px !important;
border-radius: 12px !important;
background:
rgba(1,12,23,.92) !important;
}
/* =========================================
FORM CONTAINER
========================================= */
body:has(input[name="email"]) form > div:nth-child(2) {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* =========================================
INPUTS
========================================= */
body:has(input[name="email"]) .MuiFormControl-root {
width: 100% !important;
}
body:has(input[name="email"]) .MuiOutlinedInput-root {
min-height: 58px !important;
border-radius: 12px !important;
background:
rgba(1, 11, 21, .94) !important;
color: #edf7ff !important;
box-shadow:
inset 0 0 0 1px rgba(40,130,190,.06),
0 8px 22px rgba(0,0,0,.16) !important;
}
body:has(input[name="email"])
.MuiOutlinedInput-notchedOutline {
border:
1px solid rgba(70,157,216,.42) !important;
}
body:has(input[name="email"])
.MuiOutlinedInput-root:hover
.MuiOutlinedInput-notchedOutline {
border-color:
rgba(74,177,242,.70) !important;
}
body:has(input[name="email"])
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border:
1px solid #299ee8 !important;
box-shadow:
0 0 14px rgba(41,158,232,.20) !important;
}
body:has(input[name="email"]) input {
color: #edf7ff !important;
font-size: 16px !important;
}
body:has(input[name="email"]) label {
color: #9fc2dd !important;
}
body:has(input[name="email"]) .MuiSvgIcon-root {
color: #dbefff !important;
}
/* =========================================
LOGIN BUTTON
========================================= */
body:has(input[name="email"]) button[type="submit"] {
width: 100% !important;
min-height: 58px !important;
margin-top: 4px !important;
border: none !important;
border-radius: 12px !important;
background:
linear-gradient(
90deg,
#f36c09 0%,
#ff7c12 48%,
#ff9828 100%
) !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: .15em !important;
box-shadow:
0 0 26px rgba(255,116,12,.38),
0 10px 28px rgba(0,0,0,.32) !important;
transition:
filter .2s ease,
box-shadow .2s ease !important;
}
body:has(input[name="email"]) button[type="submit"]:hover {
filter: brightness(1.08);
box-shadow:
0 0 34px rgba(255,116,12,.55),
0 14px 34px rgba(0,0,0,.36) !important;
}
/* =========================================
REGISTER / RESET LINKS
========================================= */
body:has(input[name="email"])
form > div:nth-child(2) > div:last-child {
margin-top: 2px !important;
justify-content: flex-end !important;
}
body:has(input[name="email"]) a {
color: #2ea9f0 !important;
}
/* =========================================
MOBILE / TABLET
========================================= */
@media (max-width: 1100px) {
body:has(input[name="email"]) form {
right: 4vw !important;
width: 40vw !important;
min-width: 390px !important;
}
}
@media (max-width: 760px) {
body:has(input[name="email"]) main {
background-position: 42% center !important;
}
body:has(input[name="email"]) form {
top: 50% !important;
left: 50% !important;
right: auto !important;
transform:
translate(-50%, -50%) !important;
width:
calc(100vw - 32px) !important;
min-width: 0 !important;
max-width:
440px !important;
padding:
105px 24px 26px 24px !important;
border-radius:
20px !important;
}
body:has(input[name="email"]) form::before {
left: 24px;
}
body:has(input[name="email"]) form::after {
left: 24px;
}
}
/* =========================================
PRINT
========================================= */
@media print {
* {
height: auto !important;
overflow: visible !important;
}
}
/* =========================================
IBGPS LOGIN — QR / LANGUAGE FIX
========================================= */
body:has(input[name="email"]) form > div:first-child {
top: 26px !important;
right: 24px !important;
left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
width: auto !important;
max-width: 190px !important;
}
/* QR button */
body:has(input[name="email"])
form > div:first-child
.MuiIconButton-root {
position: relative !important;
width: 46px !important;
height: 46px !important;
padding: 10px !important;
border: 1px solid rgba(70,157,216,.38) !important;
border-radius: 12px !important;
background: rgba(1,12,23,.92) !important;
color: #dbefff !important;
flex: 0 0 46px !important;
}
/* Language selector */
body:has(input[name="email"])
form > div:first-child
.MuiInputBase-root {
min-width: 135px !important;
height: 46px !important;
margin: 0 !important;
border-radius: 12px !important;
background: rgba(1,12,23,.92) !important;
}
/* leave enough room for QR + language */
body:has(input[name="email"]) form::before {
max-width: calc(100% - 235px) !important;
white-space: nowrap !important;
}
/* =========================================
IBGPS LOGIN — HEADER FINAL ALIGNMENT
========================================= */
/* Title gets full width */
body:has(input[name="email"]) form::before {
left: 34px !important;
right: 210px !important;
max-width: none !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* Options sit higher/right, outside title line */
body:has(input[name="email"]) form > div:first-child {
top: 18px !important;
right: 22px !important;
left: auto !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
max-width: none !important;
}
/* QR compact */
body:has(input[name="email"])
form > div:first-child
.MuiIconButton-root {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 8px !important;
flex: 0 0 40px !important;
}
/* language compact */
body:has(input[name="email"])
form > div:first-child
.MuiInputBase-root {
min-width: 128px !important;
height: 40px !important;
}
/* move title/subtitle slightly down to create a clean header row */
body:has(input[name="email"]) form::before {
top: 39px !important;
}
body:has(input[name="email"]) form::after {
top: 78px !important;
}
/* =========================================
IBGPS LOGIN — TWO-LINE TITLE
========================================= */
/* Remove previous single-line title */
body:has(input[name="email"]) form::before {
content: "Welcome to\A IBGPS" !important;
top: 31px !important;
left: 34px !important;
right: auto !important;
width: 180px !important;
max-width: 180px !important;
white-space: pre-line !important;
overflow: visible !important;
color: #ffffff !important;
font-size: 22px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
/* Make IBGPS line orange */
body:has(input[name="email"]) form {
--ibgps-orange: #ff7b18;
}
/* Move subtitle down under the 2-line heading */
body:has(input[name="email"]) form::after {
content: "Sign in to your account" !important;
top: 91px !important;
left: 34px !important;
color: #8eb7d6 !important;
font-size: 15px !important;
}
/* Push actual fields down a little */
body:has(input[name="email"]) form {
padding-top: 128px !important;
}
/* Keep QR + language safely on the right */
body:has(input[name="email"]) form > div:first-child {
top: 22px !important;
right: 24px !important;
left: auto !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
max-width: none !important;
}
/* =========================================
TRACCAR APP ROOT RESTORE
Required for map/layout rendering
========================================= */
.root {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Login remains full-screen despite restored app root */
body:has(input[name="email"]) .root {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* =========================================================
IBGPS APP UI V1
Scope: authenticated Traccar application only
Login page intentionally excluded
========================================================= */
body:not(:has(input[name="email"])) {
background:
radial-gradient(circle at 82% 0%, rgba(25,122,255,.07), transparent 34%),
#030812 !important;
color: #e9f4ff !important;
}
/* ---- APP ROOT: DO NOT REMOVE - map requires flex layout ---- */
body:not(:has(input[name="email"])) .root {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
background: #030812 !important;
}
/* ---- MUI generic surfaces ---- */
body:not(:has(input[name="email"])) .MuiPaper-root {
background-color: rgba(6, 15, 27, .96);
color: #eaf5ff;
}
body:not(:has(input[name="email"])) .MuiDivider-root {
border-color: rgba(108, 166, 214, .14) !important;
}
/* ---- LEFT DEVICE SIDEBAR ---- */
body:not(:has(input[name="email"])) main > div:first-child {
background:
linear-gradient(180deg, rgba(8,18,32,.995), rgba(3,9,17,.995)) !important;
border-right: 1px solid rgba(61,151,255,.18) !important;
box-shadow:
14px 0 34px rgba(0,0,0,.20),
inset -1px 0 0 rgba(255,139,36,.03) !important;
}
/* subtle top glow */
body:not(:has(input[name="email"])) main > div:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(59,145,255,.95) 28%,
rgba(64,163,255,.55) 55%,
rgba(255,139,37,.85) 88%,
transparent 100%
);
pointer-events: none;
z-index: 10;
}
/* ---- SEARCH FIELD ---- */
body:not(:has(input[name="email"])) input[placeholder*="Search"] {
color: #eaf5ff !important;
}
body:not(:has(input[name="email"])) input[placeholder*="Search"]::placeholder {
color: rgba(169,199,223,.62) !important;
opacity: 1 !important;
}
body:not(:has(input[name="email"])) .MuiInputBase-root:has(input[placeholder*="Search"]) {
background: rgba(14,29,47,.88) !important;
border: 1px solid rgba(80,156,222,.20) !important;
border-radius: 13px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 22px rgba(0,0,0,.12) !important;
}
body:not(:has(input[name="email"])) .MuiInputBase-root:has(input[placeholder*="Search"]):focus-within {
border-color: rgba(56,151,255,.70) !important;
box-shadow:
0 0 0 3px rgba(31,125,255,.09),
0 8px 24px rgba(0,0,0,.16) !important;
}
/* ---- DEVICE LIST ---- */
body:not(:has(input[name="email"])) .MuiListItem-root,
body:not(:has(input[name="email"])) .MuiListItemButton-root {
transition:
background-color .16s ease,
border-color .16s ease,
transform .16s ease !important;
}
body:not(:has(input[name="email"])) .MuiListItemButton-root:hover {
background: rgba(27,91,145,.16) !important;
}
body:not(:has(input[name="email"])) .MuiListItemButton-root.Mui-selected {
background:
linear-gradient(
90deg,
rgba(31,117,213,.22),
rgba(15,49,83,.10)
) !important;
border-left: 3px solid #2f8fff !important;
}
/* primary labels */
body:not(:has(input[name="email"])) .MuiListItemText-primary {
color: #edf7ff !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
}
body:not(:has(input[name="email"])) .MuiListItemText-secondary {
color: #7898b2 !important;
}
/* ---- ICON BUTTONS ---- */
body:not(:has(input[name="email"])) .MuiIconButton-root {
color: #8bb6d8;
transition:
color .16s ease,
background-color .16s ease,
transform .16s ease !important;
}
body:not(:has(input[name="email"])) .MuiIconButton-root:hover {
color: #d9efff;
background: rgba(48,137,223,.13) !important;
}
/* ---- PRIMARY ACTIONS ---- */
body:not(:has(input[name="email"])) .MuiButton-containedPrimary,
body:not(:has(input[name="email"])) button.MuiButton-contained {
background:
linear-gradient(135deg, #ff9a35 0%, #e86b14 100%) !important;
color: #06101a !important;
font-weight: 800 !important;
border-radius: 11px !important;
box-shadow:
0 7px 20px rgba(232,107,20,.24) !important;
}
body:not(:has(input[name="email"])) .MuiButton-containedPrimary:hover,
body:not(:has(input[name="email"])) button.MuiButton-contained:hover {
background:
linear-gradient(135deg, #ffac55 0%, #f27a20 100%) !important;
}
/* ---- BOTTOM NAVIGATION ---- */
body:not(:has(input[name="email"])) .MuiBottomNavigation-root {
background:
rgba(4,12,22,.985) !important;
border-top: 1px solid rgba(74,146,205,.16) !important;
box-shadow:
0 -12px 30px rgba(0,0,0,.18) !important;
}
body:not(:has(input[name="email"])) .MuiBottomNavigationAction-root {
color: #708ba2 !important;
min-width: 60px !important;
}
body:not(:has(input[name="email"])) .MuiBottomNavigationAction-root.Mui-selected {
color: #45a0ff !important;
}
body:not(:has(input[name="email"])) .MuiBottomNavigationAction-label {
font-weight: 650 !important;
letter-spacing: .01em !important;
}
/* ---- MENUS / POPOVERS / DIALOGS ---- */
body:not(:has(input[name="email"])) .MuiPopover-paper,
body:not(:has(input[name="email"])) .MuiMenu-paper,
body:not(:has(input[name="email"])) .MuiDialog-paper {
background:
linear-gradient(
180deg,
rgba(8,20,35,.985),
rgba(4,12,22,.985)
) !important;
border: 1px solid rgba(91,165,224,.18) !important;
border-radius: 16px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* ---- INPUTS ---- */
body:not(:has(input[name="email"])) .MuiOutlinedInput-root {
color: #e9f5ff !important;
background: rgba(11,25,41,.72);
border-radius: 11px !important;
}
body:not(:has(input[name="email"])) .MuiOutlinedInput-notchedOutline {
border-color: rgba(104,163,210,.24) !important;
}
body:not(:has(input[name="email"])) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
border-color: rgba(80,156,224,.48) !important;
}
body:not(:has(input[name="email"])) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: #358fef !important;
border-width: 1px !important;
}
body:not(:has(input[name="email"])) .MuiInputLabel-root {
color: #7fa2bd !important;
}
body:not(:has(input[name="email"])) .MuiInputLabel-root.Mui-focused {
color: #51a5f7 !important;
}
/* ---- TABS ---- */
body:not(:has(input[name="email"])) .MuiTab-root {
color: #7795ad !important;
font-weight: 650 !important;
}
body:not(:has(input[name="email"])) .MuiTab-root.Mui-selected {
color: #51a5f7 !important;
}
body:not(:has(input[name="email"])) .MuiTabs-indicator {
background: linear-gradient(90deg,#3193ff,#ff8d2c) !important;
height: 3px !important;
border-radius: 3px 3px 0 0 !important;
}
/* ---- CARDS ---- */
body:not(:has(input[name="email"])) .MuiCard-root {
background:
linear-gradient(
180deg,
rgba(10,24,41,.94),
rgba(5,14,25,.96)
) !important;
border: 1px solid rgba(92,160,214,.15) !important;
border-radius: 15px !important;
box-shadow:
0 14px 35px rgba(0,0,0,.17) !important;
}
/* ---- STATUS COLORS ---- */
body:not(:has(input[name="email"])) .MuiChip-colorSuccess {
background: rgba(40,189,128,.14) !important;
color: #67e2ae !important;
}
body:not(:has(input[name="email"])) .MuiChip-colorWarning {
background: rgba(255,151,42,.14) !important;
color: #ffad59 !important;
}
body:not(:has(input[name="email"])) .MuiChip-colorError {
background: rgba(255,83,83,.12) !important;
color: #ff7777 !important;
}
/* ---- SCROLLBARS ---- */
body:not(:has(input[name="email"])) * {
scrollbar-width: thin;
scrollbar-color: #264866 #07101b;
}
body:not(:has(input[name="email"])) *::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body:not(:has(input[name="email"])) *::-webkit-scrollbar-track {
background: #07101b;
}
body:not(:has(input[name="email"])) *::-webkit-scrollbar-thumb {
background: #264866;
border-radius: 999px;
border: 2px solid #07101b;
}
body:not(:has(input[name="email"])) *::-webkit-scrollbar-thumb:hover {
background: #356589;
}
/* ---- MAP ITSELF MUST REMAIN UNTOUCHED ---- */
body:not(:has(input[name="email"])) .maplibregl-map,
body:not(:has(input[name="email"])) .mapboxgl-map {
filter: none !important;
}
/* ---- MAP CONTROLS ---- */
body:not(:has(input[name="email"])) .maplibregl-ctrl-group,
body:not(:has(input[name="email"])) .mapboxgl-ctrl-group {
background: rgba(7,18,31,.94) !important;
border: 1px solid rgba(86,151,204,.18) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
body:not(:has(input[name="email"])) .maplibregl-ctrl-group button,
body:not(:has(input[name="email"])) .mapboxgl-ctrl-group button {
background-color: transparent !important;
}
/* ---- MAP POPUP ---- */
body:not(:has(input[name="email"])) .maplibregl-popup-content,
body:not(:has(input[name="email"])) .mapboxgl-popup-content {
background:
linear-gradient(
180deg,
rgba(8,20,35,.98),
rgba(4,12,22,.98)
) !important;
color: #eaf5ff !important;
border: 1px solid rgba(91,165,224,.20) !important;
border-radius: 14px !important;
box-shadow: 0 20px 55px rgba(0,0,0,.42) !important;
}
body:not(:has(input[name="email"])) .maplibregl-popup-tip,
body:not(:has(input[name="email"])) .mapboxgl-popup-tip {
border-top-color: #071321 !important;
border-bottom-color: #071321 !important;
}
/* ---- TYPOGRAPHY ---- */
body:not(:has(input[name="email"])) {
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* =========================================================
IBGPS SIDEBAR BRAND HEADER
Authenticated app only
IMPORTANT: no map/root modifications
========================================================= */
body:not(:has(input[name="email"])) main > div:first-child {
position: relative !important;
padding-top: 86px !important;
box-sizing: border-box !important;
}
/* Premium IBGPS header */
body:not(:has(input[name="email"])) main > div:first-child::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 85px;
background:
url("/ibgps-logo.png") 22px center / 178px auto no-repeat,
radial-gradient(
circle at 20% 45%,
rgba(46,139,255,.12),
transparent 45%
),
linear-gradient(
180deg,
rgba(5,15,27,.995),
rgba(4,12,22,.995)
);
border-bottom: 1px solid rgba(73,151,216,.18);
box-shadow:
inset 0 -1px 0 rgba(255,137,39,.035),
0 8px 28px rgba(0,0,0,.20);
pointer-events: none;
z-index: 20;
}
/* Blue -> orange accent line underneath brand */
body:not(:has(input[name="email"])) main > div:first-child::before {
content: "";
position: absolute;
top: 83px !important;
left: 0;
right: 0;
height: 2px !important;
background:
linear-gradient(
90deg,
transparent 0%,
#2e91ff 18%,
rgba(67,165,255,.72) 54%,
#f68b2b 87%,
transparent 100%
) !important;
box-shadow:
0 0 14px rgba(49,145,255,.20),
0 0 12px rgba(246,139,43,.10);
pointer-events: none;
z-index: 21;
}
/* =========================================================
VEHICLE LIST — IBGPS CARDS
========================================================= */
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemButton-root {
margin: 8px 11px !important;
width: calc(100% - 22px) !important;
border-radius: 14px !important;
border:
1px solid rgba(85,151,205,.10) !important;
background:
linear-gradient(
135deg,
rgba(13,29,48,.68),
rgba(6,17,29,.54)
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018) !important;
}
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemButton-root:hover {
background:
linear-gradient(
135deg,
rgba(20,48,78,.82),
rgba(8,25,42,.74)
) !important;
border-color:
rgba(58,145,220,.26) !important;
transform: translateY(-1px);
}
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemButton-root.Mui-selected {
background:
linear-gradient(
100deg,
rgba(27,100,172,.28),
rgba(12,34,57,.72)
) !important;
border:
1px solid rgba(54,145,231,.40) !important;
box-shadow:
inset 3px 0 0 #3094ff,
0 8px 22px rgba(0,0,0,.13) !important;
}
/* circular vehicle/device icons */
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemIcon-root {
min-width: 52px !important;
}
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemIcon-root > * {
border-radius: 50%;
}
/* Vehicle title */
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemText-primary {
font-size: 15px !important;
font-weight: 720 !important;
color: #f1f8ff !important;
}
/* status / secondary */
body:not(:has(input[name="email"]))
main > div:first-child .MuiListItemText-secondary {
margin-top: 3px !important;
font-size: 13px !important;
font-weight: 550 !important;
}
/* =========================================================
SIDEBAR TOOLBAR
========================================================= */
body:not(:has(input[name="email"]))
main > div:first-child .MuiIconButton-root {
border-radius: 11px !important;
}
body:not(:has(input[name="email"]))
main > div:first-child .MuiIconButton-root:hover {
background:
rgba(38,119,191,.16) !important;
color:
#57aaff !important;
}
/* =========================================================
BOTTOM NAV — PREMIUM IBGPS
========================================================= */
body:not(:has(input[name="email"])) .MuiBottomNavigation-root {
height: 65px !important;
background:
linear-gradient(
180deg,
rgba(4,13,23,.995),
rgba(2,8,15,.995)
) !important;
border-top:
1px solid rgba(71,144,201,.16) !important;
}
body:not(:has(input[name="email"]))
.MuiBottomNavigationAction-root {
position: relative;
padding-top: 8px !important;
}
body:not(:has(input[name="email"]))
.MuiBottomNavigationAction-root.Mui-selected {
color: #4ca4ff !important;
}
body:not(:has(input[name="email"]))
.MuiBottomNavigationAction-root.Mui-selected::before {
content: "";
position: absolute;
top: 0;
left: 28%;
right: 28%;
height: 2px;
background:
linear-gradient(
90deg,
transparent,
#3e9cff,
#f18a2d,
transparent
);
border-radius: 999px;
box-shadow:
0 0 8px rgba(64,156,255,.38);
}
/* =========================================================
MAP CONTROLS — IBGPS GLASS
Map rendering itself stays untouched
========================================================= */
body:not(:has(input[name="email"]))
.maplibregl-ctrl-group,
body:not(:has(input[name="email"]))
.mapboxgl-ctrl-group {
overflow: hidden;
border-radius: 11px !important;
background:
rgba(5,16,28,.91) !important;
border:
1px solid rgba(83,156,216,.20) !important;
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
box-shadow:
0 9px 26px rgba(0,0,0,.24) !important;
}
/* =========================================================
KEEP MAP FUNCTIONAL
DO NOT REMOVE
========================================================= */
.root {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}