/* --- Branding Colors --- */
:root {
    --primary: #000080; /* Navy Blue */
    --accent: #dfff00;  /* Lime Yellow */
}

/* Header Background */
.MuiAppBar-root {
    background-color: var(--primary) !important;
    color: var(--accent) !important;
}

/* --- Login Watermark --- */
/* This places your logo under the login fields */
form::after {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    margin: 20px auto;
    background: url('/logo.svg') no-repeat center;
    background-size: contain;
    opacity: 0.3; /* Watermark effect */
}

/* --- Device List & Pop-up Styling --- */
/* Enhancing the visibility of data in the pop-up */
.MuiTooltip-tooltip {
    background-color: var(--primary) !important;
    color: white !important;
    border: 1px solid var(--accent);
}

/* Highlight specific data rows in the info window */
.MuiListItem-root {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Change icon colors in the device list to match branding */
.MuiListItemIcon-root {
    color: var(--primary) !important;
}