/*
 * Свои стили для веб-интерфейса Traccar на gps.hardsoft.lv.
 * Подключается nginx-ом: sub_filter '</head>' в /etc/nginx/sites-available/gps.hardsoft.lv.vhost.
 * Отключить: убрать эту строку sub_filter (или location = /mustang-ui.css) и перезагрузить nginx.
 *
 * 20.10.2026, Виталий Опалев (через Claude): карточка машины (StatusCard) — не всплывающим окном
 * над картой, а слева, на месте списка машин, как в Navirec. Только на компьютере (≥900 px,
 * брейкпоинт md в Traccar); на телефоне всё как было.
 *
 * Классы стилей Traccar (tss-…) генерируются при сборке и меняются от версии к версии, поэтому
 * опираемся на стабильные имена: react-draggable (обёртка карточки), draggable-header (её заголовок),
 * MuiCard-root / MuiCardContent-root (Material UI). Проверено на Traccar 6.12.2 и 6.16.0 (25.10.2026).
 * Если после обновления Traccar карточка снова всплывает по центру — значит, разметка поменялась,
 * ничего не ломается, просто этот файл перестал действовать.
 */
@media (min-width: 900px) {
  /* внешний блок карточки: в Traccar position:fixed по центру снизу → прижать к левому краю,
     ширина и отступ — как у панели списка (drawerWidthDesktop 360px, margin 12px) */
  div:has(> .react-draggable .draggable-header) {
    left: 12px !important;
    right: auto !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 360px !important;
    transform: none !important;
    z-index: 7 !important; /* выше списка машин (4) и его шапки (6) */
  }

  /* перетаскивание не нужно — место фиксированное.
     20.10.2026: + display:block и width:100% — обёртка react-rnd по умолчанию inline-block
     и сжималась по содержимому (карточка была уже панели, сбоку выглядывал список) */
  div:has(> .react-draggable .draggable-header) > .react-draggable {
    transform: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* сама карточка — на всю высоту панели */
  .react-draggable > .MuiCard-root:has(.draggable-header) {
    width: 100% !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* таблица значений: без ограничения 40vh, прокрутка, если не влезает */
  .MuiCard-root:has(> .draggable-header) > .MuiCardContent-root {
    max-height: none !important;
    flex: 1 1 auto;
    overflow: auto;
  }

  /* заголовок — номер машины крупно, как в Navirec */
  .MuiCard-root:has(> .draggable-header) > .draggable-header {
    cursor: default;
    padding: 12px 8px 8px 16px;
  }
  .MuiCard-root:has(> .draggable-header) > div.draggable-header .MuiTypography-root {
    font-size: 1.2rem;
    font-weight: 600;
    color: inherit;
  }

  /* строки значений покрупнее и с разделителем */
  .MuiCard-root:has(> .draggable-header) .MuiTableRow-root {
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
  }
  .MuiCard-root:has(> .draggable-header) .MuiTableCell-root {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .MuiCard-root:has(> .draggable-header) .MuiTableCell-root .MuiTypography-root {
    font-size: 0.95rem;
  }
}

/* 20.10.2026: окно «Отчёты» поверх карты (создаёт mustang-ui.js). На телефоне — на весь экран. */
.mustang-reports { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center; }
.mustang-reports[hidden] { display: none !important; }
.mustang-reports .mr-win { width: min(1200px, calc(100vw - 48px)); height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: #f4f5f7; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.mustang-reports .mr-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 16px; background: #191a1d; color: #fff; }
.mustang-reports .mr-title { flex: 1; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.mustang-reports .mr-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 18px; text-decoration: none; cursor: pointer; }
.mustang-reports .mr-btn:hover { background: #db1e35; }
.mustang-reports iframe { flex: 1; width: 100%; border: 0; background: #f4f5f7; }
@media (max-width: 899px) {
  .mustang-reports .mr-win { width: 100vw; height: 100vh; border-radius: 0; }
}
@media (prefers-color-scheme: dark) {
  .mustang-reports .mr-win, .mustang-reports iframe { background: #121316; }
}

/* =====================================================================================================
 * 20.10.2026: тема «как mustangapsardze.lv» (макет согласован Валерием: https://claude.ai/artifact/1x5CQX1u3uSM51sU2o1D7E).
 * Палитра основного сайта (по его стилям): красный #DB1E35, почти чёрный #191A1D, тёплый серый #7D7A77,
 * светлый тёплый #EBE9E8; шрифт Arial. Основной/доп. цвет Traccar (colorPrimary/colorSecondary) уже такие же.
 * НЕ меняется (нельзя стилем или вредно): значки машин на карте (рисуются на canvas), цвета статусов
 * в списке («онлайн» зелёный, «офлайн» красный — красный «онлайн» спутался бы с «офлайн»).
 * Селекторы — по стабильным именам Material UI (Mui…), классы tss-… меняются от сборки к сборке.
 * ===================================================================================================== */
:root { --m-red: #db1e35; --m-black: #191a1d; --m-grey: #7d7a77; --m-light: #ebe9e8; --m-soft: #f6f4f3; --m-dark2: #2b2c30; }

/* шрифт сайта */
body, body * { font-family: Arial, Helvetica, sans-serif !important; }

/* шапка списка машин (панель с полем поиска) — тёмная, как шапка сайта */
.MuiToolbar-root:has(> .MuiInputBase-root) { background: var(--m-black); color: #fff; }
.MuiToolbar-root:has(> .MuiInputBase-root) > .MuiIconButton-root,
.MuiToolbar-root:has(> .MuiInputBase-root) .MuiIconButton-root { color: #fff; }
.MuiToolbar-root:has(> .MuiInputBase-root) > .MuiInputBase-root { background: var(--m-dark2); color: #fff; border-radius: 4px; }
.MuiToolbar-root:has(> .MuiInputBase-root) > .MuiInputBase-root .MuiOutlinedInput-notchedOutline { border-color: #3a3b40; }
.MuiToolbar-root:has(> .MuiInputBase-root) > .MuiInputBase-root input::placeholder { color: #bdbab7; opacity: 1; }

/* список машин: выбранная — красная полоса слева, тёплые разделители и второстепенный текст */
.MuiListItemButton-root.Mui-selected { background: var(--m-soft) !important; box-shadow: inset 3px 0 0 var(--m-red); }
.MuiListItemButton-root:hover { background: var(--m-soft); }
.MuiListItemText-secondary { color: var(--m-grey) !important; }
.MuiDivider-root { border-color: var(--m-light) !important; }
.MuiListItemButton-divider, .MuiListItem-divider { border-bottom-color: var(--m-light) !important; }
/* значок машины в списке: светлый круг и тёмная иконка (у Traccar — тёмный круг и белая иконка) */
.MuiListItemAvatar-root .MuiAvatar-root { background: var(--m-light) !important; }
.MuiListItemAvatar-root .MuiAvatar-root img { filter: none !important; }

/* нижнее меню — тёмное, выбранный пункт белый с красной полосой сверху */
.MuiBottomNavigation-root { background: var(--m-black) !important; }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root { color: #bdbab7; }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root.Mui-selected { color: #fff; box-shadow: inset 0 3px 0 var(--m-red); }

/* карточка машины: тёмный заголовок, тёплые разделители, наша ссылка «открыть →» красная */
.MuiCard-root > div.draggable-header { background: var(--m-black); color: #fff; }
/* 25.10.2026: в Traccar 6.16 название обёрнуто в лишний div — поэтому не «>», а любой потомок */
.MuiCard-root > div.draggable-header .MuiTypography-root { color: #fff !important; }
.MuiCard-root > div.draggable-header .MuiIconButton-root { color: #fff; }
.MuiCard-root:has(> .draggable-header) .MuiTableRow-root { border-bottom-color: var(--m-light) !important; }
.MuiCard-root:has(> .draggable-header) .MuiTableCell-root .MuiTypography-root[class*="secondary"],
.MuiCard-root:has(> .draggable-header) td:last-child .MuiTypography-root { color: var(--m-grey); }
.MuiCard-root tr[data-mustang="tl"] td:last-child p { color: var(--m-red) !important; }

/* общие таблицы и рамки Traccar — тёплый светлый вместо холодного */
.MuiTableCell-root { border-bottom-color: var(--m-light); }

/* окно «Сводки» — фон в тон сайту */
.mustang-reports .mr-win, .mustang-reports iframe { background: #f3f1f0; }

/* 21.10.2026 (Валерий): значки нижнего меню в стиле Mustang — наш svg.mi вместо значка Traccar (его прячем) */
.MuiBottomNavigation-root [data-mi-done] > svg.MuiSvgIcon-root { display: none !important; }
.MuiBottomNavigation-root svg.mi { width: 24px; height: 24px; fill: none; stroke: var(--m-red); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.MuiBottomNavigation-root .Mui-selected svg.mi { stroke: #fff; }
.MuiBottomNavigation-root .MuiBottomNavigationAction-root:hover svg.mi { stroke: #fff; }

/* 22.10.2026 (проверка браузером): на телефоне логотип Mustang (вставка nginx перед </body>) наезжал на подпись карты —
   поднимаем выше и делаем меньше */
@media (max-width: 899px) {
  img[src^="/mustang-logo.png"] { bottom: 120px !important; height: 40px !important; }  /* 22.10 b: 96 → 120, всё ещё касался подписи */
}