/* App styles on top of Bootstrap 5.3. Keep small; prefer Bootstrap utilities. */

/* Georgian-capable font (OFL, vendor/fonts). unicode-range: only Georgian text downloads it;
   Latin text keeps the system font. */
@font-face {
  font-family: "Noto Sans Georgian";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/fonts/noto-sans-georgian-georgian-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

/* Calm palette for both colour modes (Bootstrap 5.3 colour modes: <html data-bs-theme>). */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Georgian", "Helvetica Neue", Arial, sans-serif;
  --app-bg: #f3f5f8;
  --app-primary: #3a6fd8;
  --app-primary-hover: #315fbb;
  --app-primary-rgb: 58, 111, 216;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-border-color: #e3e7ed;
  --app-shadow: 0 1px 2px rgba(24, 39, 75, .06), 0 2px 8px rgba(24, 39, 75, .05);
}
[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #15181c;
  --app-primary: #5b8def;
  --app-primary-hover: #74a0f2;
  --app-primary-rgb: 91, 141, 239;
  --bs-body-bg: #1c2026;
  --bs-body-bg-rgb: 28, 32, 38;
  --bs-body-color: #dde2e8;
  --bs-tertiary-bg: #22272e;
  --bs-secondary-bg: #2a3038;
  --bs-border-color: #2f353d;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --app-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
body { background: var(--app-bg); }
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--app-primary); }
.list-group { --bs-list-group-active-bg: var(--app-primary); --bs-list-group-active-border-color: var(--app-primary); }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--app-primary-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .2);
}
.card { --bs-card-border-radius: .75rem; --bs-card-inner-border-radius: .75rem; }
.card.shadow-sm { box-shadow: var(--app-shadow) !important; }
.card-footer { --bs-card-cap-bg: transparent; }
.table { --bs-table-bg: transparent; }
.app-navbar { padding-top: max(.5rem, env(safe-area-inset-top)); }
.app-navbar .navbar-brand { font-weight: 600; font-size: 1.05rem; }
.app-navbar .nav-link.active { color: var(--app-primary); }

.unknown-register .form-control { flex: 1 1 10rem; width: auto; }

.font-monospace-sm {
  font-family: var(--bs-font-monospace);
  font-size: .8125rem;
}

/* Device status colours (moving / stopped / offline) */
:root {
  --status-moving: #2f9e6e;
  --status-stopped: #3d7bd9;
  --status-offline: #8a919a;
}
.status-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: none;
  background: var(--status-offline);
}
.status-dot.status-moving { background: var(--status-moving); }
.status-dot.status-stopped { background: var(--status-stopped); }

/* Live map page: navbar on top, device list beside a full-height map */
.map-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.map-main { flex: 1 1 auto; display: flex; min-height: 0; }
.map-area { position: relative; flex: 1 1 auto; min-width: 0; }
#map { position: absolute; inset: 0; }
.map-list-toggle { position: absolute; left: .75rem; bottom: 1.5rem; z-index: 1000; }
@media (min-width: 992px) {
  .map-sidebar { width: 18rem; flex: none; overflow-y: auto; }
}

/* Map in dark mode: OSM has no dark style, so its tiles are darkened (CARTO Dark Matter is used when
   configured). Leaflet controls follow the theme. */
[data-bs-theme="dark"] .tiles-darken {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5);
}
[data-bs-theme="dark"] .leaflet-container { background: #262a30; }
[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-control-layers {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .leaflet-bar a:hover { background-color: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: var(--bs-secondary-bg); color: #6c757d; }
[data-bs-theme="dark"] .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); }
[data-bs-theme="dark"] .leaflet-control-attribution {
  background: rgba(28, 32, 38, .8);
  color: #aab2bc;
}
[data-bs-theme="dark"] .leaflet-control-attribution a { color: #9dbbf5; }
[data-bs-theme="dark"] .dev-body { background: #2a3038; }
[data-bs-theme="dark"] .dev-label { background: rgba(34, 39, 46, .92); color: #e6eaee; }
.map-list-toggle { border: 1px solid var(--bs-border-color); }

/* Map markers: rotate only the inner body (Leaflet positions the icon root with transform) */
.dev-marker { background: none; border: 0; }
.dev-body {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--status-offline);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  color: var(--status-offline);
  font-size: 1rem;
  transition: transform .3s;
}
.dev-body.status-moving { border-color: var(--status-moving); color: var(--status-moving); }
.dev-body.status-stopped { border-color: var(--status-stopped); color: var(--status-stopped); }
.dev-label {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .05rem .4rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .92);
  color: #212529;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Two-factor setup: the QR code keeps its white background in dark mode (scanners need contrast). */
.totp-qr svg { display: block; width: 200px; height: 200px; }