/*
 * Mesael Fleet — replaces Traccar's own /styles.css (served from web.override), which index.html loads on every page.
 * The first block is Traccar's original file (6.16), kept as it is. The Mesael block below it only restyles; it does
 * not move anything. It targets MUI's stable class names (MuiDrawer-paper, MuiListItemButton-root, Mui-selected…),
 * never the generated muiltr-xxxx ones, so it survives Traccar upgrades. After an upgrade, compare the original block
 * with the new release's web/styles.css.
 */

/* ---- Traccar original ---- */

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

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

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

/* ---- Mesael ---- */

:root {
  /* The same values as mesaelERP's src/app/globals.css. */
  --m-ink: #14181f;
  --m-ink-2: #3d4756;
  --m-icon: #8590a0;
  --m-line: #dde4ec;
  --m-line-2: #eef2f7;
  --m-surface: #ffffff;
  --m-brand: #b35f00;
  --m-brand-tint: #fff4e5;
  --m-content-ink: #1f2430;
  --m-content-border: #e5e7eb;
  --m-content-muted-bg: #f9fafb;
  --m-content-brand-line: #f9c9a8;
  --m-red: #b3261e;
  --m-red-tint: #fbeae9;
}

/* Side menus (Settings, Reports): white panel with a hairline edge, like mesaelERP's sidebar. */
.MuiDrawer-paper {
  background: var(--m-surface);
  border-right: 1px solid var(--m-line);
}

.MuiDrawer-paper .MuiDivider-root {
  border-color: var(--m-line-2);
}

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

/* Each item a rounded capsule: grey type and icon, a light grey hover. */
.MuiDrawer-paper .MuiListItemButton-root {
  border-radius: 999px;
  margin-bottom: 4px;
  border-left: 4px solid transparent;
  color: var(--m-ink-2);
  transition: background 0.15s ease, color 0.15s ease;
}

.MuiDrawer-paper .MuiListItemButton-root .MuiListItemText-primary {
  font-weight: 600;
}

.MuiDrawer-paper .MuiListItemButton-root .MuiListItemIcon-root {
  color: var(--m-icon);
}

.MuiDrawer-paper .MuiListItemButton-root:hover {
  background: var(--m-line-2);
  color: var(--m-ink);
}

.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root {
  color: var(--m-ink-2);
}

/* The page you are on: cream fill, a thick brand edge on the left, brand type and icon. */
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected:hover {
  background: var(--m-brand-tint);
  border-left-color: var(--m-brand);
  color: var(--m-brand);
  box-shadow: 0 1px 2px rgba(179, 95, 0, 0.06);
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
  font-weight: 700;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root {
  color: var(--m-brand);
}

/* Buttons, colour only. The main action stays Mesael orange (colorPrimary); an outlined button such as Cancel is
   white with a grey edge and dark type, as mesaelERP's secondary buttons are. */
.MuiButton-outlined.MuiButton-colorPrimary {
  background: var(--m-surface);
  border-color: var(--m-content-border);
  color: var(--m-content-ink);
}

.MuiButton-outlined.MuiButton-colorPrimary:hover {
  background: var(--m-content-muted-bg);
  border-color: var(--m-content-brand-line);
}

.MuiButton-outlined.MuiButton-colorError {
  background: var(--m-surface);
  border-color: var(--m-red);
  color: var(--m-red);
}

.MuiButton-outlined.MuiButton-colorError:hover {
  background: var(--m-red-tint);
}