/* Copied from Traccar 6.16.0 web/styles.css.
   On an upgrade, compare this file with the new release and keep the Tabae block.
   This file has to live in the override folder next to logo.svg. A copy edited
   somewhere else is not served. Hard-refresh after a change; Traccar caches it.

   Colors match tabae.io:
   ink #272727, peach #EFC79B, surface #FAF7F3, line #E6DFD6, on-dark #F5F1EC. */

@import url("fonts.css");

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #FAF7F3 !important;
  color: #272727;
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

body,
.MuiTypography-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiFormLabel-root,
.MuiListItemText-primary,
.MuiBottomNavigationAction-label,
.MuiChip-label,
.MuiTableCell-root {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif !important;
}

/* Login. The desktop brand panel is black, so the inverted logo (sand) is the
   one that belongs there. The form sits on the cream surface. */
main {
  background: #FAF7F3;
}

main > div:first-child {
  background: #272727 !important;
}

main > div:last-child {
  background: transparent !important;
  box-shadow: none !important;
}

main form {
  background: #ffffff;
  border: 1px solid #E6DFD6;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(39, 39, 39, 0.08);
}

/* Peach is the accent. Ink stays the text color, including on a peach button. */
.MuiButton-contained:not(.MuiButton-containedError) {
  background-color: #EFC79B !important;
  color: #272727 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none;
  font-weight: 600;
}

.MuiButton-contained:not(.MuiButton-containedError):hover {
  background-color: #E6B888 !important;
}

.MuiButton-contained.Mui-disabled {
  background-color: #E6DFD6 !important;
  color: #6B655E !important;
}

.MuiButton-outlined {
  border-color: #E6DFD6 !important;
  color: #272727 !important;
  border-radius: 10px !important;
  text-transform: none;
}

.MuiButton-outlined:hover {
  border-color: #272727 !important;
  background-color: #F6E6D3 !important;
}

.MuiOutlinedInput-root {
  border-radius: 10px !important;
  background: #ffffff;
}

.MuiOutlinedInput-notchedOutline {
  border-color: #E6DFD6 !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #272727 !important;
}

.MuiPaper-root:not(.MuiDrawer-paper):not(:has(> .MuiBottomNavigation-root)) {
  border-radius: 16px;
}

/* Phone bottom bar and the map footer. Selected mark is sand. The rest is the
   warm white used on the dark rail at tabae.io. */
.MuiPaper-root:has(> .MuiBottomNavigation-root),
.MuiBottomNavigation-root {
  background-color: #272727 !important;
  border-radius: 0 !important;
}

.MuiBottomNavigationAction-root {
  color: #F5F1EC !important;
}

.MuiBottomNavigationAction-root .MuiSvgIcon-root,
.MuiBottomNavigationAction-root .MuiBottomNavigationAction-label {
  color: inherit !important;
}

.MuiBottomNavigationAction-root.Mui-selected,
.MuiBottomNavigationAction-root.Mui-selected .MuiSvgIcon-root,
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
  color: #EFC79B !important;
}

/* Reports and Settings rail. The selected row is a sand pill with black type,
   the same treatment as the live map on tabae.io. */
.MuiDrawer-paper {
  background-color: #272727 !important;
  color: #F5F1EC !important;
  border-radius: 0 !important;
}

.MuiDrawer-paper .MuiToolbar-root,
.MuiDrawer-paper .MuiIconButton-root,
.MuiDrawer-paper .MuiListItemButton-root,
.MuiDrawer-paper .MuiListItemIcon-root,
.MuiDrawer-paper .MuiSvgIcon-root,
.MuiDrawer-paper .MuiTypography-root {
  color: #F5F1EC !important;
}

.MuiDrawer-paper .MuiToolbar-root .MuiTypography-root {
  color: #EFC79B !important;
}

.MuiDrawer-paper .MuiList-root {
  padding: 8px;
}

.MuiDrawer-paper .MuiListItemButton-root {
  border-radius: 12px;
  margin: 2px 8px;
  width: auto;
}

.MuiDrawer-paper .MuiListItemButton-root:hover {
  background-color: rgba(245, 241, 236, 0.08) !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiSvgIcon-root,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiTypography-root {
  background-color: #EFC79B !important;
  color: #272727 !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected:hover {
  background-color: #E6B888 !important;
}

.MuiDrawer-paper .MuiDivider-root {
  border-color: rgba(245, 241, 236, 0.16);
}

.MuiDrawer-root + div {
  background-color: #FAF7F3;
}

/* Section header on a phone. The black bar is the bottom navigation, not this. */
.MuiAppBar-root {
  background-color: #FAF7F3 !important;
  color: #272727 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #E6DFD6;
}

.MuiAppBar-root .MuiIconButton-root,
.MuiAppBar-root .MuiSvgIcon-root,
.MuiAppBar-root .MuiTypography-root {
  color: #272727 !important;
}

/* Below 1200px Traccar already draws the logo inside the form.
   Hide the empty sidebar strip so it is not a second column. */
@media (max-width: 1199.95px) {
  main > div:first-child {
    display: none;
  }
}