@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
:root {
  --login-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --login-glass-surface: rgba(255, 255, 255, 0.22);
  --login-surface-strong: rgba(255, 255, 255, 0.92);

  --login-text: rgba(15, 23, 42, 0.92);
  --login-muted: rgba(15, 23, 42, 0.62);

  --login-border: rgba(15, 23, 42, 0.10);
  --login-border-soft: rgba(15, 23, 42, 0.06);

  --login-primary: #003366;
  --login-secondary: #0066cc;
  --login-accent: #fb8018;

  --login-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --login-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --login-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --login-radius: 14px;
  --login-radius-lg: 18px;
  --login-blur: blur(14px);
  --login-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

.login-page {
  height: 100dvh;

  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position: relative;
  overflow: hidden;
}

.login-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}

/* video background */
.login-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.login-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.02);
}

.login-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.64), rgba(2, 6, 23, 0.46)),
    radial-gradient(900px at 12% 18%, rgba(0, 102, 204, 0.22), transparent 55%),
    radial-gradient(900px at 86% 82%, rgba(249, 115, 22, 0.14), transparent 55%);
}


/* main */
.login-main {
  z-index: 2;

  height: 100dvh;
  display: grid;
  place-items: center;
}

/* status */
.login-status {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px;

  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login-status.is-idle {
  color: #003366;
}

.login-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.92);
  animation: login-spin 800ms linear infinite;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-card {
  position: relative;

  width: min(520px, 100%);
  overflow: hidden;

  border-radius: var(--login-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--login-glass-surface);
  box-shadow: var(--login-shadow-lg);
  backdrop-filter: var(--login-blur);
  -webkit-backdrop-filter: var(--login-blur);
}

/* form */
.login-form {
  padding: 16px;
}

.login-form-head {
  padding: 6px 4px 16px;
}

.login-form-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.94);
}

.login-form-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.login-field {
  padding: 8px 12px;

  border-radius: 12px;
  box-shadow: var(--login-shadow);
}

.login-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.login-input {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  padding: 0 12px;

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: var(--login-shadow-sm);
  outline: none;

  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.login-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.login-input:focus {
  border-color: rgb(0, 116, 204);
  /* box-shadow: var(--login-focus); */
}

.login-input:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.login-hint {
  margin-top: 4px;

  font-size: 11px;
  font-weight: 200;
  color: #ffffff9e;
  text-align: end;
  letter-spacing: 0.06em;
}

/* actions */
.login-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  box-shadow: var(--login-shadow-sm);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.16);
  border-color: rgba(0, 102, 204, 0.28);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.login-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.login-btn-primary {
  border: none;
  background: linear-gradient(135deg, var(--login-primary), var(--login-secondary));
  /* background: linear-gradient(135deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96)); */
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.28);
}

.login-btn-primary>span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.login-link {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
}

.login-link:hover {
  text-decoration: underline;
}

.login-footnote {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}

/* mobile */
@media (max-width: 520px) {
  .login-main {
    padding: 12px;
  }

  .login-form {
    padding: 14px;
  }
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
      flex: 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=ReactToastify.css.map */:root {
  --reset-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.10), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.14), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.12), transparent 60%);

  --reset-glass-surface: rgba(255, 255, 255, 0.22);
  --reset-surface-strong: rgba(255, 255, 255, 0.92);

  --reset-text: rgba(15, 23, 42, 0.92);
  --reset-muted: rgba(15, 23, 42, 0.62);

  --reset-border: rgba(15, 23, 42, 0.10);
  --reset-border-soft: rgba(15, 23, 42, 0.06);

  --reset-primary: #003366;
  --reset-secondary: #0066cc;
  --reset-accent: #fb8018;

  --reset-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --reset-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --reset-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --reset-radius: 14px;
  --reset-radius-lg: 18px;
  --reset-blur: blur(14px);
  --reset-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* { box-sizing: border-box; }

.reset-page {
  min-height: 100dvh;
  overflow: hidden;

  background: var(--reset-bg);
  color: var(--reset-text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  display: flex;
  flex-direction: column;
}

/* header */
.reset-header {
  flex: 0 0 66px;
  height: 66px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));
  border-bottom: 1px solid rgba(249, 115, 22, 0.60);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.reset-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reset-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}

.reset-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.reset-header-title-main {
  color: rgba(255, 255, 255, .95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
}

.reset-header-title-sub {
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* main */
.reset-main {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.reset-card {
  width: min(560px, 100%);
  overflow: hidden;

  border-radius: var(--reset-radius-lg);
  border: 1px solid var(--reset-border);
  background: var(--reset-glass-surface);
  box-shadow: var(--reset-shadow-lg);
  backdrop-filter: var(--reset-blur);
  -webkit-backdrop-filter: var(--reset-blur);
}

.reset-card-topbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--reset-border-soft);
  /* background: rgba(255, 255, 255, .55); */

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reset-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, .72);
  color: rgba(15, 23, 42, .70);
  font-size: 12px;
}

.reset-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.10);
  color: rgba(15, 23, 42, 0.78);
  font-size: 12px;
}

.reset-status.is-idle {
  border-color: rgba(34, 197, 94, 0.30);
  background: rgba(34, 197, 94, 0.10);
}

.reset-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(0, 51, 102, 0.22);
  border-top-color: rgba(0, 51, 102, 0.92);
  animation: reset-spin 800ms linear infinite;
}

@keyframes reset-spin {
  to { transform: rotate(360deg); }
}

/* form */
.reset-form {
  padding: 16px;
}

.reset-form-head {
  padding: 6px 4px 12px;
}

.reset-form-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(15, 23, 42, .90);
}

.reset-form-sub {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15, 23, 42, .62);
}

.reset-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.reset-field {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* background: rgba(255, 255, 255, .70); */
  box-shadow: var(--reset-shadow-sm);
  min-width: 0;
}

.reset-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .62);
}

.reset-input {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  padding: 0 12px;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .80);
  box-shadow: var(--reset-shadow-sm);
  outline: none;

  font-size: 14px;
  color: rgba(15, 23, 42, .86);
}

.reset-input:focus {
  border-color: rgba(0, 102, 204, 0.35);
  box-shadow: var(--reset-focus);
}

.reset-input:disabled {
  opacity: .75;
  cursor: not-allowed;
}

.reset-hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
}

/* actions */
.reset-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* buttons */
.reset-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
  color: rgba(15, 23, 42, 0.82);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  box-shadow: var(--reset-shadow-sm);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.reset-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.reset-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.reset-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.reset-btn-primary {
  border: none;
  color: rgba(255, 255, 255, .95);
  background: linear-gradient(135deg, var(--reset-primary), var(--reset-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.reset-btn-ghost {
  background: rgba(255, 255, 255, .50);
  border-color: rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .70);
}

.reset-btn > span {
  font-size: 13px;
  font-weight: 600;
}

.reset-footnote {

  margin-top: 12px;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.60);
  text-align: center;
}

/* mobile */
@media (max-width: 520px) {
  .reset-main { padding: 12px; }
  .reset-form { padding: 14px; }
}
/* LiveMap.css */
.livemap-main-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

.map-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.lm-img-trucktronix-logo {
  position: fixed;
  top: 2px;
  left: 2px;
  /* z-index: 10; */
  /* Make sure the image view appears above the map */
  width: 150px;
  height: auto;
}

/* ===========================
   MB SEARCH INPUT (Glassmorphism)
   =========================== */

.lm-div-search-container {
  position: fixed;
  top: 220px;
  left: 10px;
  z-index: 200;
  /* Higher than search results */

  width: 42px;
  height: 42px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;

  /* Glass Effect */
  background: var(--mb-glass-surface);
  backdrop-filter: var(--mb-blur);
  -webkit-backdrop-filter: var(--mb-blur);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--mb-shadow);

  display: flex;
  align-items: center;
  transition: all 800ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.lm-div-search-container:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.3);
}

/* Expanded State */
.lm-div-search-container.focused {
  width: 400px;
  top: 10px;
  left: calc(50% - 200px);
  /* border-color: var(--mb-secondary); */
  background: rgba(255, 255, 255, 0.45);
}

.livemap-search-input {
  width: 100%;
  height: 100%;
  padding: 0 45px 0 16px;
  border: none;
  outline: none;
  background: transparent;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--mb-text);
}

.livemap-search-input::placeholder {
  color: var(--mb-muted);
  letter-spacing: 0.05em;
  font-weight: 400;
}

/* Icons */
.livemap-btn-search {
  width: 42px;
  height: 42px;
  pointer-events: none;
  position: absolute;
  right: 0;

  color: var(--mb-btn-primary);
  font-size: 1rem;
  border: none;
  background: none;

  display: grid;
  place-items: center;
}

.livemap-btn-search i {
  -webkit-text-stroke: 0.1px;
}

.livemap-btn-search-clear {
  position: absolute;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #e74c3c;
  /* Matches your mb-close hover color */
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.livemap-btn-search-clear:hover {
  background: rgba(231, 76, 60, 0.1);
  transform: rotate(90deg);
}

/* ===========================
   SEARCH RESULTS (Glassmorphism Theme)
   =========================== */

.livemap-search-results {
  position: fixed;
  top: 66px;
  /* Adjusted for a small gap from search bar */
  left: calc(50% - 200px);
  z-index: 1190;

  width: 400px;
  max-height: min(500px, calc(100vh - 100px));
  overflow-y: auto;

  /* Glassmorphism Core */
  background: var(--mb-glass-surface);
  backdrop-filter: var(--mb-blur);
  -webkit-backdrop-filter: var(--mb-blur);

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--mb-shadow);

  padding: 8px;
  font-family: "Poppins", system-ui, sans-serif;
  scrollbar-width: none;
}

.livemap-search-results::-webkit-scrollbar {
  display: none;
}

.livemap-result-item {
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--mb-border);
}

.livemap-result-item:last-child {
  border-bottom: none;
}

.livemap-result-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(4px);
}

.livemap-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.livemap-result-distance {
  flex: 0 0 auto;
  width: 70px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mb-secondary);
  letter-spacing: 0.5px;
}

.livemap-result-icon {
  font-size: 14px;
  color: var(--mb-primary);
  opacity: 0.8;
}

.livemap-result-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--mb-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livemap-result-address {
  font-size: 12px;
  color: var(--mb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* end of SEARCH ADDRESS */



/* RECENTER to bounding box button */
/* ===========================
   MAP ACTION CONTROLS
   =========================== */

.livemap-div-right-bar {
  position: fixed;
  left: auto;
  top: 0;
  bottom: 0;
  right: 0;

  display: flex;
  flex-direction: column;

  /* pointer-events: none; todo ujj check this*/
}

.mb-map-controls {
  position: fixed;
  /* Positioned below the search bar */
  top: 275px;
  left: 10px;
  z-index: 200;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.livemap-btn-control {
  width: 42px;
  height: 42px;
  cursor: pointer;

  color: var(--mb-btn-primary);
  font-size: 1rem;

  /* Glassmorphism */
  background: var(--mb-glass-surface);
  backdrop-filter: var(--mb-blur);
  -webkit-backdrop-filter: var(--mb-blur);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  box-shadow: var(--mb-shadow);

  display: grid;
  place-items: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.livemap-btn-control:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  color: var(--mb-btn-secondary);
  /* border-color: var(--mb-secondary); */
}

/* Specific icon stroke adjustment for thinner Bootstrap icons */
.livemap-btn-control i {
  -webkit-text-stroke: 0.1px;
}

/* Tooltip behavior or button-specific resets */
button.livemap-btn-control {
  padding: 0;
  outline: none;
}

/* end of RECENTER to bounding box button */



.button-div-btn-outer-rim {
  border-radius: 0.5rem;
  scale: 0.98;
  width: 100%;
  height: 100%;

  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
}

.button-div-btn-inner-rim {
  border-radius: 0.5rem;
  width: 100%;
  height: 100%;

  scale: 0.97;
  box-shadow:
    2px -2px 2px -1px rgb(108, 115, 129, 0.8),
    -3px 3px 4px 1px rgb(0, 0, 0, 0.5),
    inset -2px 2px 2px 0 rgb(108, 115, 129, 0.2),
    inset 2px -2px 2px 0px rgb(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;

  color: white;
}

.button-div-btn-inner-rim > i {
  color: white;
}

.button-div-btn-inner-rim:hover > i {
  color: #f18d11;
}

/* 
* Marker box details
*
*/
.marker-details-container {
  width: 230px;
  position: fixed;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(44, 65, 86, 1);
  /* transform: scaleY(0.3) translateY(-230px);
  opacity: 0;
  transition: all 0.5s ease; */
}

.marker-details-container.active {
  /* transform: scaleY(1) translateY(0);
  opacity: 1; */
}

.marker-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0f2a3d;
  padding: 5px 10px;
  color: white;
  font-size: 14px;
  cursor: move;
}

.marker-details-header > i {
  font-size: 1.2rem;
}

.marker-details-header > span {
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 300;
  padding-top: 2px;
}

.marker-details-body {
  background-color: white;
  /* White background */
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.marker-details-body > span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: center;
}

.marker-details-vehicle {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.marker-details-vehicle .marker-details-image {
  width: 80px;
  height: 80px;
  border: 3px solid rgb(23, 65, 137);
  box-shadow: 0 4px 8px rgba(23, 65, 137, 0.5);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-start-end-radius: 20px;
  border-end-start-radius: 20px;
}

.marker-details-vehicle .marker-details-image img {
  object-fit: contain;
  height: 80px;
  padding: 4px;
}

.marker-details-vehicle img {
  height: 100px;
  object-fit: contain;
}

.marker-details-foot {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-details-foot > span {
  font-size: 11px;
  margin-top: 10px;
  font-weight: 500;
}

.marker-details-foot .marker-status-rectangle {
  background-color: #daebfb;
  width: 200px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(44, 65, 86, 0.5);
}

.marker-details-foot .marker-status-rectangle-text {
  font-size: 11px;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  padding-top: 1px;
  letter-spacing: 0.5px;
}

.marker-details-foot
  .marker-status-rectangle-text
  .marker-status-circle.online {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-content: center;
  margin-right: 3px;
  margin-bottom: 1px;
  background-color: #3a5f0b;

  transition: all 0.3s ease;
}

.marker-details-foot
  .marker-status-rectangle-text
  .marker-status-circle.paused {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-content: center;
  margin-right: 3px;
  margin-bottom: 1px;
  /* background-color: #fa7f00; */
  background-color: #ec2d01;

  transition: all 0.3s ease;
}

.marker-details-foot
  .marker-status-rectangle-text
  .marker-status-circle.offline {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-content: center;
  margin-right: 3px;
  margin-bottom: 1px;
  /* background-color: #ec2d01; */
  background-color: #a6a6a6;

  transition: all 0.3s ease;
}

/* vehicle track settings options css */
.vehicle-track-settings-container {
  position: fixed;
  top: 0;
  right: 300px;
  height: 80px;
  width: 400px;
  padding: 4px;
  background: #daebfb;
  border-bottom-left-radius: 10px;
  box-shadow: -5px 0px 15px 0px rgba(0, 0, 0, 0.2);
  /* Add a shadow for a card-like appearance */

  /* for animation */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.vehicle-track-settings-container.active {
  transform: translateY(0);
  opacity: 1;
}

.vehicle-track-settings-container .white-line {
  width: 150px;
  height: 1px;
  background-color: rgb(103, 177, 195);
  margin-top: 2px;
  box-shadow: 0px 0px 20px 6px #a8d6e2;
}

.vehicle-track-settings-container .vehicle-track-settings-checkbox {
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.vehicle-track-settings-container .vehicle-track-settings-checkbox input {
  margin-top: 2px;
  margin-left: 6px;
}

.vehicle-track-settings-container .vehicle-track-settings-checkbox span {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
}

/* Add this to your LiveMap.css or create a new CSS file */

/* Account Modal */
.account-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.user-profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-details {
  margin-bottom: 15px;
}

.user-details h3 {
  margin-bottom: 5px;
}

.user-details p {
  color: #555;
}

.account-modal button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}

.account-modal button:hover {
  background-color: #0056b3;
}

.account-modal button:last-child {
  margin-right: 0;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 30px;
  color: #555;
}

.close-modal span {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

/* ===========================
   GEO FENCE MODAL FOR CONTROLS
   =========================== */
.crosshair-cursor {
  cursor: crosshair;
}

.geoFenceAdvancedModal {
  position: fixed;
  left: calc(50% - 180px);
  top: 10px;

  width: 350px;
  z-index: 200;

  transform: translateY(-100%) scale(0.8);
  /* transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.geoFenceAdvancedModal.visible {
  transform: translateY(0%) scale(1);
}

.geoFenceListModal {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) scale(0) translateY(-100%);

  /* Responsive sizing */
  width: 95%;
  max-width: 500px;
  z-index: 200;

  /* Allows clicks to pass through container until visible */
  pointer-events: none;

  /* transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.geoFenceListModal.visible {
  transform: translateX(-50%) translateY(0%) scale(1);
  pointer-events: all;
}

/* CSS for smaller screens */
@media (max-width: 720px) {
  .lm-div-search-container.focused {
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
  }

  .livemap-search-results {
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
  }

  .livemap-result-address {
    margin-top: 4px;
  }

  .floating-menus-div-container {
    width: 50px;
    left: 0%;
    margin-left: 5px;
    margin-bottom: 40px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0px;
  }

  .geoFenceAdvancedModal {
    width: 100%;
  }

  .geoFenceListModal {
    width: 100%;
  }

  .livemap-div-right-bar {
    top: auto;
    left: 0px;
    bottom: 65px;
  }
}

/* CSS for larger screens */
@media (min-width: 768px) {
}
/* ============================
   Floating Menu Dock (Theme)
   - No layout shift
   - Desktop tooltip
   - Mobile swipe dock
   - Safe-area aware
   ============================ */

:root {
    --floatingmenu-primary: #003366;
    --floatingmenu-secondary: #0066cc;
    --floatingmenu-accent: #fb8018;

    --floatingmenu-text: rgba(15, 23, 42, 0.92);
    --floatingmenu-muted: rgba(15, 23, 42, 0.62);

    --floatingmenu-border: rgba(15, 23, 42, 0.10);
    --floatingmenu-border-soft: rgba(15, 23, 42, 0.06);

    --floatingmenu-surface: rgba(255, 255, 255, 0.72);
    --floatingmenu-surface-strong: rgba(255, 255, 255, 0.92);

    --floatingmenu-shadow: 0 2px 4px rgba(2, 6, 23, 0.18);
    --floatingmenu-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.10);

    --floatingmenu-radius: 999px;
    --floatingmenu-radius-item: 18px;

    --floatingmenu-blur: blur(14px);
    --floatingmenu-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* {
    box-sizing: border-box;
}

/* visually hide scrollbar but keep scrolling */
.floatingmenu-noscrollbar {
    -ms-overflow-style: none;
    /* IE / Edge */
    scrollbar-width: none;
    /* Firefox */
}

.floatingmenu-noscrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* Dock container */
.floatingmenu-dock {
    width: min(500px, calc(100vw - 18px));
    width: auto;
    z-index: 999;

    position: fixed;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));

    /* allow map gestures around edges */
    pointer-events: none;
    transform: translateX(-50%);
}

.floatingmenu-dock-inner {
    pointer-events: auto;
    padding: 6px 20px;

    border-radius: 18px;
    /* border: 1px solid var(--floatingmenu-border); */
    /* background: var(--floatingmenu-surface); */
    box-shadow: var(--floatingmenu-shadow);
    backdrop-filter: var(--floatingmenu-blur);
    -webkit-backdrop-filter: var(--floatingmenu-blur);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;

    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* scrollbars */
.floatingmenu-dock-inner::-webkit-scrollbar {
    height: 3px;
}

.floatingmenu-dock-inner::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    /* not red */
    border-radius: 999px;
}

.floatingmenu-div-btn {
    width: 44px;
    height: 44px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Each item */
.floatingmenu-btn {
    width: 100%;
    height: 100%;

    cursor: pointer;
    position: relative;
    appearance: none;

    /* border: 1px solid rgba(15, 23, 42, 0.10); */
    /* box-shadow: var(--floatingmenu-shadow-sm); */

    border: none;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    box-shadow: 0 2px 2px rgba(44, 65, 86, 0.25);

    display: grid;
    place-items: center;

    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.floatingmenu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.14);
    border-color: rgba(0, 102, 204, 0.22);
}

.floatingmenu-btn:active {
    transform: translateY(0) scale(0.98);
}

.floatingmenu-btn:focus-visible {
    outline: none;
    box-shadow: var(--floatingmenu-focus);
}

/* icon */
.floatingmenu-icon {
    font-size: 1.2rem;
    color: #003366eb;
    -webkit-text-stroke: 0.25px;
    text-stroke: 0.25px;

    transition: color 140ms ease, transform 140ms ease;
}

.floatingmenu-btn:hover .floatingmenu-icon,
.floatingmenu-btn:focus-visible .floatingmenu-icon {
    color: #0066ccb8;
    transform: scale(1.05);
}

/* Active state */
.floatingmenu-btn.is-active {
    /* color: rgba(249, 115, 22, 0.55); */
    /* box-shadow: 4px 6px 4px #0066ccb8; */
    /* background: rgba(255, 255, 0, 0.78); */
}

.floatingmenu-btn.is-active .floatingmenu-icon {
    color: rgba(249, 115, 22, 0.98);
}

/* Badge */
.floatingmenu-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;

    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;

    color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.70);
    /* background: linear-gradient(135deg, var(--floatingmenu-accent), #ff9a3d); */
    background: #f98018f2;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.16);
}

/* Desktop tooltip (no layout shift) */
.floatingmenu-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;

    color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(135deg, var(--floatingmenu-primary), var(--floatingmenu-secondary));
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);

    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.floatingmenu-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: inherit;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 6px 10px rgba(2, 6, 23, 0.12));
}

.floatingmenu-btn:hover .floatingmenu-tooltip,
.floatingmenu-btn:focus-visible .floatingmenu-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile label (hidden on desktop) */
.floatingmenu-label {
    display: none;
}

/* MOBILE: horizontal swipe dock with always-visible labels */
@media (max-width: 720px) {
    .floatingmenu-dock {
        width: 100vw;
        bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    }

    .floatingmenu-dock-inner {
        background: none;
        border: none;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 10px;
        padding: 8px 14px 4px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .floatingmenu-div-btn {
        width: 72px;
        height: auto;
    }

    .floatingmenu-dock-inner::-webkit-scrollbar {
        height: 60px;
    }

    .floatingmenu-btn {
        width: 36px;
        height: 36px;

        /* scroll-snap-align: start; */
    }

    .floatingmenu-icon {
        font-size: 1rem;
    }

    /* tooltip off on mobile */
    .floatingmenu-tooltip {
        display: none;
    }

    /* label visible on mobile */
    .floatingmenu-label {
        display: block;
        font-size: 11px;
        font-weight: 500;
        color: rgba(15, 23, 42, 0.68);
        line-height: 1.1;
        text-align: center;

        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .floatingmenu-btn.is-active .floatingmenu-label {
        color: rgba(0, 51, 102, 0.92);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .floatingmenu-btn,
    .floatingmenu-icon,
    .floatingmenu-tooltip {
        transition: none !important;
    }
}:root {
  --am-surface: rgba(255, 255, 255, 0.72);
  --am-surface-strong: rgba(255, 255, 255, 0.92);

  --am-text: rgba(15, 23, 42, 0.92);
  --am-muted: rgba(15, 23, 42, 0.62);

  --am-border: rgba(15, 23, 42, 0.10);
  --am-border-soft: rgba(15, 23, 42, 0.06);

  --am-primary: #003366;
  --am-secondary: #0066cc;
  --am-accent: #fb8018;

  --am-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --am-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --am-radius: 14px;
  --am-radius-lg: 18px;
  --am-blur: blur(14px);
  --am-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

/* Backdrop */
.am-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: start center;
  padding: 60px 18px 18px;

  background: rgba(2, 6, 23, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  animation: amFadeIn 600ms ease-out both;
}

@keyframes amFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal */
.am-modal {
  position: relative;
  width: min(380px, calc(100vw - 36px));
  overflow: hidden;

  border-radius: var(--am-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);

  background: var(--am-surface);
  box-shadow: var(--am-shadow-lg);
  backdrop-filter: var(--am-blur);
  -webkit-backdrop-filter: var(--am-blur);

  animation: amPop 400ms ease-out both;
  transform-origin: top right;
}

@keyframes amPop {
  from {
    transform: translateY(-100%) scale(0.98);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.am-modal.isClosing {
  animation: amHide 400ms ease-in forwards;
}

@keyframes amHide {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: translateY(-100%) scale(0.98);
    opacity: 0;
  }
}

/* Close button */
.am-close {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 36px;
  height: 36px;
  cursor: pointer;

  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.60);
  color: rgba(15, 23, 42, 0.78);

  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.08);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.am-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.am-close:active {
  transform: translateY(0) scale(0.98);
}

.am-close:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}

/* Top content */
.am-top {
  padding: 18px 16px 14px;

  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 8px;
  align-items: center;
}

.am-avatar-wrap {
  display: grid;
  place-items: center;
}

.am-avatar {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  object-fit: cover;

  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
}

.am-meta {
  min-width: 0;
  /* background-color: yellow; */
}

.am-name {
  margin-left: 4px;

  font-size: 15px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.88);
  line-height: 1.2;
}

.am-email {
  margin-top: 4px;
  margin-left: 4px;

  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-chip {
  margin-bottom: 6px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.72);

  color: rgba(15, 23, 42, 0.70);
  font-size: 12px;
  max-width: 100%;
}

.am-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider */
.am-divider {
  height: 1px;
  background: var(--am-border-soft);
}

/* Loading */
.am-loading {
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 10px;
}

.am-loading-text {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
}

/* Actions */
.am-actions {
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.am-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  cursor: pointer;

  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
  color: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.08);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.am-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.am-btn:active {
  transform: translateY(0) scale(0.985);
}

.am-btn:focus-visible {
  outline: none;
  box-shadow: var(--am-focus);
}

.am-btn-primary {
  border: none;
  color: rgba(255, 255, 255, .95);
  background: linear-gradient(135deg, var(--am-primary), var(--am-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.am-btn-ghost {
  background: rgba(255, 255, 255, .50);
  border-color: rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .72);
}:root {
  --map-vc-glass-surface: rgba(255, 255, 255, 0.62);
  --map-vc-text: rgba(15, 23, 42, 0.92);
  --map-vc-muted: rgba(15, 23, 42, 0.62);
  --map-vc-border: rgba(15, 23, 42, 0.08);
  --map-vc-primary: #003366;
  --map-vc-secondary: #0066cc;
  --map-vc-selected: #b1c7e5;

  --map-vc-btn-primary: #194775;
  --map-vc-btn-secondary: #0066cc;

  --map-vc-blur: blur(14px);
  --map-vc-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);

  /* Status Colors */
  --clr-online: #10b981;
  --clr-paused: #f59e0b;
  --clr-offline: #64748b;

  --safety-red: #e11d48;
  --active-green: #10b981;
}

/* wrapper */
.map-vc-container {
  width: 100%;

  padding: 5px;
}

/* MarkerBox-like glass card */
.map-vc-card {
  width: 100%;
  overflow: hidden;
  cursor: pointer;

  color: var(--map-vc-text);
  font-family: "Poppins", system-ui, sans-serif;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);

  background: var(--map-vc-glass-surface);
  box-shadow: 0 2px 4px rgba(44, 65, 86, 1);
  backdrop-filter: var(--map-vc-blur);
  -webkit-backdrop-filter: var(--map-vc-blur);

  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 400ms ease,
    transform 400ms ease;
}

.map-vc-card.isVisible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Header */
.map-vc-header {
  position: relative;
  padding: 6px 12px;
  border-bottom: 1px solid var(--map-vc-border);
  /* background: rgba(45, 66, 95, 0.04); */

  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: end;
}

.map-vc-avatar-container {
  position: relative;
}

.map-vc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;

  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.map-vc-status-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;

  font-size: 10px;
  color: white;
  border-radius: 50%;
  border: 2px solid white;

  display: grid;
  place-items: center;
}

.map-vc-status-badge.online {
  background: var(--clr-online);
}

.map-vc-status-badge.paused {
  background: var(--clr-paused);
}

.map-vc-status-badge.offline {
  background: var(--clr-offline);
}

.map-vc-meta {
  display: flex;
  flex-direction: column;
}

.map-vc-rego {
  color: #0066ccb8;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.map-vc-name {
  color: #003366f2;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 550;
  letter-spacing: 1px;
}

/* Toggle */
.map-vc-switch-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
}

.map-vc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.map-vc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.map-vc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  transition: 0.2s;
}

.map-vc-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
}

.map-vc-switch input:checked + .map-vc-slider {
  background: linear-gradient(
    135deg,
    var(--map-vc-primary),
    var(--map-vc-secondary)
  );
}

.map-vc-switch input:checked + .map-vc-slider:before {
  transform: translate(20px, -50%);
}

/* Body */
.map-vc-body {
  padding: 10px;
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Telemetry Section */
.map-vc-telemetry-section {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
}

.map-vc-axle-grid {
  flex: 1;

  display: grid;
  /* 🔑 force fill */
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  align-items: center;
  gap: 10px;
}

.map-vc-axle-cell {
  height: 40px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-vc-axle-id {
  letter-spacing: 0.08em;
  color: var(--map-vc-muted);

  font-size: 10px;
  font-weight: 600;
}

.map-vc-axle-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.map-vc-total-master {
  width: 130px;

  text-align: right;
  padding: 4px 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);

  border-radius: 8px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.map-vc-delta {
  display: flex;
  align-items: center;

  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
}

.map-vc-total-title {
  /* width: 60px; */

  font-size: 10px;
  font-weight: 600;
  color: var(--map-vc-muted);
  display: block;
}

.map-vc-total-delta-val {
  flex: 1;
}

.map-vc-delta.inc .map-vc-total-delta-val {
  color: #16a34a;
  /* background: #f0fdf4; */
}

.map-vc-delta.dec .map-vc-total-delta-val {
  color: var(--safety-red);
  /* background: #fef2f2; */
}

.map-vc-total-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.map-vc-total-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--map-vc-text);
}

.map-vc-total-unit {
  font-weight: 600;
  font-size: 12px;
  color: var(--map-vc-muted);
}

/* Intelligence Grid (PTO, TARP, BIN, LOAD) */
.map-vc-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.map-vc-sensor-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  opacity: 0.5;
  transition: 0.2s;
}

.map-vc-sensor-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
}

.map-vc-sensor-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--map-vc-text);
}

.map-vc-sensor-box.active {
  opacity: 1;
  border-color: var(--clr-paused);
  background: #f0fdf4;
}

.map-vc-sensor-box.active .map-vc-sensor-dot {
  background: var(--clr-paused);
  box-shadow: 0 0 8px var(--clr-paused);
}

.map-vc-sensor-box.active .map-vc-sensor-name {
  color: var(--map-vc-muted);
}

/* CRITICAL STATE: BIN UP WHILE MOVING */
.map-vc-sensor-box.critical {
  border-color: var(--safety-red);
  background: #fff1f2;
  animation: critPulse 1s infinite alternate;
}

.map-vc-sensor-box.critical .map-vc-sensor-dot {
  background: var(--safety-red);
  box-shadow: 0 0 10px var(--safety-red);
}

.map-vc-sensor-box.critical .map-vc-sensor-name {
  color: var(--safety-red);
}

@keyframes critPulse {
  from {
    border-color: var(--safety-red);
  }

  to {
    border-color: #f8e323ff;
  }
}

/* Operator pod + actions */
.map-vc-op-pod {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);

  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.map-vc-op-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.85);
}

.map-vc-op-sub {
  font-size: 11px;
  color: var(--map-vc-muted);
  letter-spacing: 0.06em;
}

.map-vc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.map-vc-btn {
  height: 40px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;

  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: all 0.2s;
}

.map-vc-btn-primary {
  background: linear-gradient(
    135deg,
    var(--map-vc-primary),
    var(--map-vc-secondary)
  );
  color: white;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 51, 102, 0.15);
}

.map-vc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

.map-vc-btn-ghost {
  background: white;
  color: var(--map-vc-text);
  border: 1px solid var(--map-vc-border);
}

.map-vc-btn-ghost:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

/* Location row (MarkerBox-ish) */
.map-vc-location {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);

  display: flex;
  align-items: center;
  gap: 12px;
}

.map-vc-location.geo-alert {
  outline: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow:
    0 2px 4px rgba(44, 65, 86, 1),
    0 0 0 6px rgba(245, 158, 11, 0.12);

  animation: vcPulse 2s infinite;
}

@keyframes vcPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(182, 118, 8, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(98, 63, 4, 0);
  }
}

.map-vc-loc-icon {
  color: var(--map-vc-secondary);
  font-size: 16px;
}

.map-vc-address {
  flex: 1;

  font-size: 12.5px;
  color: var(--map-vc-text);
  line-height: 1.4;
}

/* Footer */
.map-vc-footer {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--map-vc-border);
}

.map-vc-footer-logo {
  height: 16px;
  filter: grayscale(1);
  opacity: 0.5;
}

.map-vc-timestamp {
  font-size: 10px;
  color: var(--map-vc-muted);
  display: flex;
  gap: 5px;
  align-items: center;
}

@media (max-width: 720px) {
  .map-vc-card {
    width: calc(100% - 0px);
    height: 100%;
  }

  .map-vc-intelligence-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* =========================
   VehicleListCard (Theme-matched)
   Keeps existing classnames ONLY
   ========================= */

:root {
  --vls-surface: rgba(255, 255, 255, 0.72);
  --vls-surface-strong: rgba(255, 255, 255, 0.90);
  --vls-border: rgba(15, 23, 42, 0.10);
  --vls-border-soft: rgba(15, 23, 42, 0.06);

  --vls-text: rgba(15, 23, 42, 0.92);
  --vls-muted: rgba(15, 23, 42, 0.62);

  --vls-primary: #003366;
  --vls-secondary: #0066cc;
  --vls-accent: #fb8018;

  --vls-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --vls-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);
  --vls-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);

  --vls-radius: 14px;
  --vls-radius-sm: 12px;

  --vls-blur: blur(14px);
  --vls-focus: 0 0 0 3px rgba(0, 102, 204, 0.24);
}

/* =========================
   Panel shell (right slide-in)
   ========================= */
.vehicle-card-section {
  flex: 1;
  z-index: 999;

  /* position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px; */


  background: transparent;
  /* Add a shadow for a glass-like appearance */
  box-shadow: -2px -2px 5px 0px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;

  /* slide animation */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 260ms ease, opacity 200ms ease, width 260ms ease;

  /* IMPORTANT: scrolling is handled by .vehiclelistcard-scroll */
  overflow: hidden;
}

.vehicle-card-section.visible {
  width: 330px;
  /* slightly nicer than 300 */
  transform: translateX(0);
  opacity: 1;
}

.vehicle-card-section.gone {
  width: 0;
  transform: translateX(100%);
  opacity: 0;
}

/* =========================
   Header row
   ========================= */
.vehicle-card-section-header {
  width: 100%;
  height: 52px;
  flex: 0 0 auto;

  border-radius: var(--vls-radius);
  background: var(--vls-surface-strong);
  border: 1px solid var(--vls-border-soft);
  box-shadow: var(--vls-shadow-sm);
  backdrop-filter: var(--vls-blur);
  -webkit-backdrop-filter: var(--vls-blur);

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
}

/* you had an unused inner wrapper; keep harmless */
.vehicle-card-section-header-inner {
  display: none;
}

/* Search input */
.vehicle-card-section-header>input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);

  font-size: 13px;
  color: var(--vls-text);
  outline: none;

  box-shadow: var(--vls-shadow-sm);
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.vehicle-card-section-header>input:focus {
  border-color: rgba(0, 102, 204, 0.40);
  box-shadow: var(--vls-focus);
  background: rgba(255, 255, 255, 0.88);
}

/* Header buttons */
.vehiclelistcard-div-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--vls-shadow-sm);

  color: rgba(15, 23, 42, 0.64);
  display: grid;
  place-items: center;

  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease, border-color 140ms ease;
}

.vehiclelistcard-div-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
  color: var(--vls-accent);
}

.vehiclelistcard-div-btn:active {
  transform: translateY(0) scale(0.98);
}

/* =========================
   Scroll area (cards)
   ========================= */
.vehiclelistcard-scroll {
  width: 100%;
  padding: 2px 2px 6px;

  flex: 1;
  min-height: 0;
  /* CRITICAL for scrolling inside flex parent */
  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(85, 113, 138, 0.85) rgba(241, 241, 241, 0.85);
}

.vehiclelistcard-scroll::-webkit-scrollbar {
  width: 10px;
}

.vehiclelistcard-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(85, 113, 138, 0.85);
  border-radius: 999px;
}

.vehiclelistcard-scroll::-webkit-scrollbar-track {
  background-color: rgba(241, 241, 241, 0.85);
  border-radius: 999px;
}

/* No-data card */
.vehiclelistcard-div-nodata {
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 12px;

  border-radius: var(--vls-radius);
  background: rgba(255, 255, 255, 0.70);
  border: 1px dashed rgba(15, 23, 42, 0.18);
  color: rgba(15, 23, 42, 0.62);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.vehiclelistcard-div-nodata>span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Loader bar */
.vehiclelistcard-div-nodata-loader {
  height: 4px;
  width: 100%;
  border-radius: 999px;

  --c: no-repeat linear-gradient(90deg, rgba(251, 128, 24, 0.95), rgba(251, 128, 24, 0.95));
  background: var(--c), var(--c), rgba(184, 218, 252, 0.90);
  background-size: 60% 100%;
  animation: vlsLoad 1400ms infinite;
}

@keyframes vlsLoad {
  0% {
    background-position: -150% 0, -150% 0;
  }

  66% {
    background-position: 250% 0, -150% 0;
  }

  100% {
    background-position: 250% 0, 250% 0;
  }
}

/* =========================
   Mobile: make list horizontal swipe
   ========================= */
@media (max-width: 720px) {
  .vehicle-card-section {
    top: auto;
    left: 0;
    right: 0;

    transform: translateY(120%);

    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), width 0ms;
  }

  .vehicle-card-section.visible {
    width: 100%;
    min-height: 0px;
    max-height: 285px;
    bottom: 65px;

    /* slide UP into place */
    transform: translateY(0);
  }

  .vehicle-card-section.gone {
    width: 100%;
    transform: translateY(120%);
  }

  /* Keep header fixed height */
  .vehicle-card-section-header {
    height: 54px;
  }

  /* Horizontal swipe rail */
  .vehiclelistcard-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;

    scrollbar-width: none;
  }

  .vehiclelistcard-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Make cards snap + size nicely */
  .vehiclelistcard-scroll .map-vc-container {
    flex: 0 0 86%;
    max-width: 420px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vehicle-card-section {
    transition: none !important;
  }

  .vehiclelistcard-div-nodata-loader {
    animation: none !important;
  }
}:root {
    --mb-glass-surface: rgba(255, 255, 255, 0.22);
    --mb-text: rgba(15, 23, 42, 0.92);
    --mb-muted: rgba(15, 23, 42, 0.62);
    --mb-border: rgba(15, 23, 42, 0.08);

    --mb-primary: #003366;
    --mb-secondary: #0066cc;
    --mb-selected: #b1c7e5;

    --mb-tertiary: #b7d3f0;
    --mb-orange: #f97316;
    --mb-orange-dark: #ea580c;
    --mb-success: #10b981;
    --mb-warning: #f59e0b;
    --mb-alert-dark: #de0937ff;
    --mb-alert: #e11d48;

    --mb-danger: #E57373;
    --mb-danger-light: #E57373af;

    --mb-btn-primary: #194775;
    --mb-btn-secondary: #0066cc;

    --mb-blur: blur(14px);
    --mb-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);

    /* Status Colors */
    --clr-online: #10b981;
    --clr-paused: #f59e0b;
    --clr-offline: #64748b;
}

.mb-card {
    position: fixed;
    width: 320px;
    overflow: hidden;

    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);

    background: var(--mb-glass-surface);
    box-shadow: 0 2px 4px rgba(44, 65, 86, 1);
    backdrop-filter: var(--mb-blur);
    -webkit-backdrop-filter: var(--mb-blur);

    color: var(--mb-text);
    font-family: 'Poppins', system-ui, sans-serif;
    z-index: 1000;

    opacity: 0;
    transform: translateY(200px) scale(0.9);
    transition: opacity 400ms ease, transform 400ms ease;
}

.mb-card.isVisible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mb-card.isClosing {
    animation: mbHide 400ms ease-in forwards;
}

@keyframes mbHide {
    to {
        transform: scale(0.9) translateY(100%);
        opacity: 0;
    }
}

.mb-close {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 10px;
    right: 10px;

    cursor: pointer;
    color: var(--mb-muted);

    background: none;
    border: none;

    display: grid;
    place-items: center;

    transition: all 0.6s ease;
}

.mb-close:hover {
    color: #e74c3c;
    scale: 1.25;

    transform: rotate(180deg);
}

/* Header */
.mb-header {
    padding: 12px 16px;
    cursor: grab;

    border-bottom: 1px solid var(--mb-border);
    background: rgba(45, 66, 95, 0.04);

    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    align-items: center;
}

.mb-avatar-container {
    position: relative;
}

.mb-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;

    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mb-status-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid white;
    font-size: 10px;
    color: white;
}

.mb-status-badge.online {
    background: var(--clr-online);
}

.mb-status-badge.paused {
    background: var(--clr-paused);
}

.mb-status-badge.offline {
    background: var(--clr-offline);
}

.mb-meta {
    display: flex;
    flex-direction: column;
}

.mb-rego {
    color: #0066ccb8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

.mb-name {
    color: #003366f2;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 550;
    letter-spacing: 1px;
}

/* end of header */

/* Body */
.mb-body {
    padding: 12px;
}

.mb-address {
    padding: 12px;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-address-icon {
    color: var(--mb-secondary);
    font-size: 16px;
}

.mb-address-text {
    font-size: 12px;
    color: var(--mb-text);
    line-height: 1.4;
}

.mb-address-text,
.mb-alert-text {
    /* Ensure the text doesn't overflow the card */
    word-break: break-word;
}

.mb-status-info {
    margin-top: 4px;

    display: flex;
    align-items: center;
    gap: 8px;
}


.mb-status-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--mb-muted);
    display: block;
    letter-spacing: 0.5px;
}

.mb-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

.mb-pulse-dot.online {
    background: var(--clr-online);
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    animation: mbPulse 2s infinite;
}

.mb-pulse-dot.paused {
    background: var(--clr-paused);
}

.mb-pulse-dot.offline {
    background: var(--clr-offline);
}

@keyframes mbPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.mb-status-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.text-online {
    color: var(--clr-online);
}

.text-paused {
    color: var(--clr-paused);
}

.text-offline {
    color: var(--clr-offline);
}

/* Base Styles */
.mb-alert {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.mb-alert-text {
    display: flex;
    flex-direction: column;
}

/* 🔴 Critical Type */
.mb-alert[data-type="critical"] {
    background: rgba(225, 255, 255, 0.08);
    border-color: rgba(225, 29, 72, 0.2);
}

.mb-alert[data-type="critical"] .mb-alert-icon,
.mb-alert[data-type="critical"] .mb-alert-text>span:first-child {
    color: var(--mb-alert);
}

/* 🟠 Warn Type */
.mb-alert[data-type="warn"] {
    background: rgba(225, 255, 255, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

.mb-alert[data-type="warn"] .mb-alert-icon,
.mb-alert[data-type="warn"] .mb-alert-text>span:first-child {
    color: var(--mb-orange-dark);
}

/* 🔵 Info Type */
.mb-alert[data-type="info"] {
    background: rgba(0, 102, 204, 0.08);
    border-color: rgba(0, 102, 204, 0.2);
}

.mb-alert[data-type="info"] .mb-alert-icon,
.mb-alert[data-type="info"] .mb-alert-text>span:first-child {
    color: var(--mb-secondary);
}

/* Shared Text Styles */
.mb-alert-text>span:first-child {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mb-alert-text>span:last-child {
    font-size: 13px;
    color: #334155;
    /* Neutral slate for readability */
}

/* Actions */
.mb-actions {
    display: none;
}

.mb-btn {
    height: 40px;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.08em;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: all 0.2s;
}

.mb-btn-primary {
    background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
    color: white;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.15);
}

.mb-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

.mb-btn-ghost {
    background: white;
    color: var(--mb-text);
    border: 1px solid var(--mb-border);
}

.mb-btn-ghost:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 51, 102, 0.25);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

/* Footer */
.mb-footer {
    background: rgba(0, 0, 0, 0.02);
    color: var(--mb-secondary);

    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    border-top: 1px solid var(--mb-border);
}

.mb-footer-logo {
    height: 16px;
    filter: grayscale(1);
    opacity: 0.5;
}

.mb-timestamp {
    font-size: 10px;
    color: var(--mb-muted);
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Drag Overlay */
.mb-drag-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: grabbing;
}

@media (max-width: 720px) {
    .mb-card {
        width: calc(100% - 20px);
    }

    .mb-address {
        margin-bottom: 16px;
    }

    .mb-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}:root {
  --gfd-bg: rgba(255, 255, 255, 0.7);
  --gfd-primary: #0f172a;
  --gfd-accent: #3b82f6;
  --gfd-danger: #ef4444;
  --gfd-text-main: #1e293b;
  --gfd-text-muted: #64748b;
  --gfd-border: rgba(0, 0, 0, 0.08);
  --gfd-blur: blur(12px);
  --gfd-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gfd-card {
  width: 340px;
  position: fixed;
  top: 20px;
  left: calc(50% - 180px);
  
  z-index: 1000;
  background: var(--gfd-bg);
  backdrop-filter: var(--gfd-blur);
  -webkit-backdrop-filter: var(--gfd-blur);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--gfd-shadow);
  font-family: 'Inter', system-ui, sans-serif;
  transform: translateX(120%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gfd-card.visible {
  transform: translateX(0);
}

/* Header & Actions */
.gfd-header {
  padding: 10px 20px 5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--gfd-border);
}

.gfd-subtitle {
  font-size: 10px;
  font-weight: 800;
  color: var(--gfd-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}

.gfd-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gfd-primary);
  margin: 0;
}

.gfd-id-tag {
  font-size: 14px;
  color: var(--gfd-primary);
  font-weight: 500;
}

.gfd-actions {
  display: flex;
  gap: 8px;
}

.gfd-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  color: var(--gfd-text-muted);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gfd-action-btn.delete:hover {
  background: var(--gfd-danger);
  color: white;
}

.gfd-action-btn.close:hover {
  background: var(--gfd-primary);
  color: white;
}

/* Body & Sections */
.gfd-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gfd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.gfd-count-tag {
  background: var(--gfd-primary);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Stats Grid */
.gfd-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gfd-stat-card {
  background: rgba(255,255,255,0.4);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.5);
}

.gfd-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gfd-text-muted);
  text-transform: uppercase;
}

.gfd-value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gfd-primary);
  margin-top: 4px;
}

.gfd-badge {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gfd-accent);
  margin-top: 4px;
}

/* Color Preview */
.gfd-color-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.gfd-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--gfd-border);
}

.gfd-color-hex {
  font-size: 10px;
  font-family: monospace;
  color: var(--gfd-text-muted);
}

/* Vehicle Chips */
.gfd-vehicles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 100px;
  overflow-y: auto;
  padding: 4px;
}

.gfd-vehicle-chip {
  background: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gfd-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gfd-border);
  transition: transform 0.2s;
}

.gfd-vehicle-chip:hover {
  transform: translateY(-2px);
  border-color: var(--gfd-accent);
}

.gfd-vehicle-chip i {
  color: var(--gfd-accent);
}

/* Alert Box */
.gfd-alert-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  transition: all 0.3s;
}

.gfd-alert-box.active {
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}

.gfd-alert-box.inactive {
  background: rgba(100, 116, 139, 0.08);
  color: var(--gfd-text-muted);
}

.gfd-alert-icon {
  font-size: 18px;
}

.gfd-alert-text {
  display: flex;
  flex-direction: column;
}

.gfd-alert-text strong {
  font-size: 12px;
}

.gfd-alert-text span {
  font-size: 11px;
  opacity: 0.8;
}

/* Coordinates */
.gfd-coords-list {
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}

.gfd-coord-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
  margin-bottom: 4px;
}

.gfd-coord-index {
  font-size: 10px;
  font-weight: 800;
  color: var(--gfd-text-muted);
  width: 15px;
}

.gfd-coord-val {
  flex: 1;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gfd-primary);
}

.gfd-coord-icon {
  font-size: 12px;
  color: var(--gfd-text-muted);
  opacity: 0.5;
}

.gfd-empty-state {
  font-size: 12px;
  color: var(--gfd-text-muted);
  font-style: italic;
  padding: 10px;
  text-align: center;
  width: 100%;
}

/* Scrollbar styling */
.custom-scroll::-webkit-scrollbar {
  width: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}/* GeoFenceSettings.css */

.gfs-container {
  /* Self-contained Variables matching MarkerBox */
  --gfs-glass: rgba(255, 255, 255, 0.22);
  --gfs-blur: blur(14px);
  --gfs-shadow: 0 10px 26px rgba(2, 6, 23, 0.15);
  --gfs-primary: #003366;
  --gfs-secondary: #0066cc;
  --gfs-success: #10b981;
  --gfs-danger: #e11d48;
  --gfs-border: rgba(15, 23, 42, 0.08);

  width: 300px;
  z-index: 20;

  position: fixed;
  left: calc(50% - 150px);
  top: 0;
  padding: 12px 16px;

  background: var(--gfs-glass);
  backdrop-filter: var(--gfs-blur);
  -webkit-backdrop-filter: var(--gfs-blur);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: var(--gfs-shadow);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  font-family: "Poppins", system-ui, sans-serif;

  /* Animation setup */
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

/* Visible state */
.gfs-container.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Optional: Add a subtle overshoot for smooth feel */
.gfs-container.visible {
  animation: gfs-overshoot 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gfs-overshoot {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(0);
  }
}

.gfs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gfs-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gfs-main-icon {
  color: var(--gfs-secondary);
  font-size: 1.1rem;
}

.gfs-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gfs-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.gfs-button-row {
  display: flex;
  gap: 10px;
}

.gfs-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--gfs-border);
  background: white;
  color: #64748b;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.gfs-btn i {
  font-size: 1.1rem;
}

.gfs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Glassy Active selection state */
.gfs-btn-active {
  background: rgba(0, 102, 204, 0.12);
  color: var(--gfs-secondary);
  animation: geofencesettings-soft-glow 2s infinite ease-in-out;
}

.gfs-btn-success {
  background: rgba(16, 185, 129, 0.05);
  color: var(--gfs-success);
}

.gfs-btn-danger {
  background: rgba(225, 29, 72, 0.05);
  color: var(--gfs-danger);
}

.gfs-hint {
  font-size: 9px;
  color: #64748b;
  text-align: center;
  font-style: italic;
  margin-top: -4px;
}

/* Glassy Animations */
@keyframes geofencesettings-soft-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 102, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
  }
}

@media (max-width: 720px) {
  .gfs-container {
    top: 0px;
    left: 20px;
    right: 20px;

    width: calc(100% - 20px);
    left: 10px;
    border-radius: 0 0 12px 12px;
  }
}
:root {
  --gfas-bg: rgba(255, 255, 255, 0.52);
  --gfas-primary: #003366;
  --gfas-secondary: #0066cc;
  --gfas-text: rgba(15, 23, 42, 1);
  --gfas-muted: rgba(15, 23, 42, 0.7);
  --gfas-border: rgba(15, 23, 42, 0.08);
  --gfas-blur: blur(14px);
}

.gfas-card {
  width: 360px;
  z-index: 200;
  overflow: hidden;

  position: fixed;
  top: 0;
  left: calc(50% - 180px);

  font-family: "Poppins", sans-serif;
  color: var(--gfas-text);

  background: var(--gfas-bg);
  backdrop-filter: var(--gfas-blur);
  -webkit-backdrop-filter: var(--gfas-blur);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.15);

  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

/* Visible state */
.gfas-card.visible {
  transform: translateY(0);
  opacity: 1;

  animation: gfas-overshoot 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gfas-overshoot {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(0);
  }
}

.gfas-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(45, 66, 95, 0.04);
  border-bottom: 1px solid var(--gfas-border);
}

.gfas-meta {
  display: flex;
  flex-direction: column;
}
.gfas-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--gfas-secondary);
  letter-spacing: 1px;
}
.gfas-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gfas-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gfas-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gfas-muted);
  transition: transform 0.3s;
}
.gfas-close-btn:hover {
  transform: rotate(90deg);
  color: #e11d48;
}

.gfas-body {
  padding: 16px;
  position: relative;
  min-height: 100px;
}

/* Declarative Phase Control */
.gfas-section {
  display: none;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}


.gfas-badge {
  background: rgba(0, 102, 204, 0.08);
  color: var(--gfas-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0, 102, 204, 0.15);
}

.gfas-dot-pulse {
  width: 6px;
  height: 6px;
  background: var(--gfas-secondary);
  border-radius: 50%;
  animation: geofencesettings-fade 1s infinite alternate;
}

@keyframes geofencesettings-fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.gfas-section.gfas-active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.gfas-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--gfas-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gfas-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--gfas-border);
  background: white;
  font-size: 12px;
  color: var(--gfas-primary);
  outline: none;
}

.gfas-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gfas-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gfas-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.03);
  padding: 8px 12px;
  border-radius: 12px;
}

.gfas-color-picker {
  border: none;
  background: none;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

/* Buttons matching MarkerBox Primary/Ghost */
.gfas-btn {
  height: 40px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.gfas-btn-primary {
  background: linear-gradient(
    135deg,
    var(--gfas-primary),
    var(--gfas-secondary)
  );
  color: white;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.gfas-btn-ghost {
  background: white;
  border: 1px solid var(--gfas-border);
  color: var(--gfas-text);
}

.gfas-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.gfas-info-box {
  padding: 12px;

  font-size: 12px;
  line-height: 1.4;
  border-radius: 12px;
  background: rgba(0, 102, 204, 0.08);

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.gfas-info-box i {
  color: var(--gfas-secondary);
  font-size: 16px;
}
.gfas-success {
  background: rgba(16, 185, 129, 0.1);
}
.gfas-success i {
  color: #10b981;
}

.gfas-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* GEOFENCE LIST MODAL - FINAL PERFORMANCE BUILD */

.gfl-card {
  --gfl-bg: rgba(255, 255, 255, 0.52);
  --gfl-primary: #003366;
  --gfl-secondary: #0066cc;
  --gfl-text: #0f172a;
  --gfl-muted: rgba(15, 23, 42, 0.6);
  --gfl-border: rgba(15, 23, 42, 0.08);
  --gfl-blur: blur(14px);

  --gfl-tertiary: #b7d3f0;
  --gfl-selected: #b1c7e5;
  --gfl-alert: #e11d48;

  width: 360px;
  max-height: 500px;
  z-index: 200;
  overflow: hidden;

  position: fixed;
  top: 0;
  left: calc(50% - 180px);

  color: var(--gfl-text);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;

  background: var(--gfl-bg);
  backdrop-filter: var(--gfl-blur);
  -webkit-backdrop-filter: var(--gfl-blur);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;

  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

/* Visible state */
.gfl-card.visible {
  transform: translateY(0);
  opacity: 1;

  animation: gfs-overshoot 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- HEADER & SEARCH BAR --- */
.gfl-header {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--gfl-border);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.gfl-header-meta {
  display: flex;
  flex-direction: column;
}

.gfl-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--gfl-secondary);
  letter-spacing: 1px;
}

.gfl-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gfl-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gfl-header-actions {
  flex: 1;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* SEARCH BAR LOGIC */
.gfl-search-wrapper {
  flex: 1;
  position: relative;

  display: flex;
  align-items: center;

}

.gfl-search-icon {
  position: absolute;
  left: 10px;
  font-size: 11px;
  color: var(--gfl-muted);
  pointer-events: none;
  z-index: 2;
}

.gfl-search {
  position: relative;

  width: 100%;
  padding: 6px 10px 6px 30px;
  z-index: 1;
  outline: none;

  font-size: 12px;
  font-weight: 300;
  border-radius: 12px;
  border: 1px solid var(--gfl-border);
  background: rgba(255, 255, 255, 0.8);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gfl-search:focus {
  background: #ffffff;
  border-color: var(--gfl-secondary);
  box-shadow: 0 0 0 3px rgba(var(--gfl-secondary-rgb), 0.1);

  border-color: #b1c7e5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gfl-btn-close {
  width: 30px;
  height: 30px;

  background: none;
  border: none;
  cursor: pointer;

  color: var(--gfl-muted);
  font-size: 20px;

  transition: transform 0.3s;
}
.gfl-btn-close:hover {
  transform: rotate(90deg);
  color: #e11d48;
}

/* --- TABLE PRECISION --- */
.gfl-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.gfl-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.gfl-table th:nth-child(1),
.gfl-table td:nth-child(1) {
  width: 75px;
}
.gfl-table th:nth-child(2),
.gfl-table td:nth-child(2) {
  width: auto;
}
.gfl-table th:nth-child(3),
.gfl-table td:nth-child(3) {
  width: 75px;
}
.gfl-table th:nth-child(4),
.gfl-table td:nth-child(4) {
  width: 100px;
  text-align: right;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.gfl-table th {
  padding: 0px 10px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--gfl-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gfl-row {
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.gfl-row:hover {
  background: rgba(255, 255, 255, 0.5);
}
.gfl-row.is-selected {
  background: #ffffff !important;
}

.gfl-table td {
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gfl-table tr td:first-child {
  border-radius: 6px 0 0 6px;
}
.gfl-table tr td:last-child {
  border-radius: 0 6px 6px 0;
}

/* --- REGO TAGS & COLLAPSE --- */
.gfl-info-row td {
  padding: 0 !important;
  border: none;
}

.gfl-collapse-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.gfl-info-row.is-expanded .gfl-collapse-wrapper {
  grid-template-rows: 1fr;
}

.gfl-collapse-content {
  overflow: hidden;
}

.gfl-details-box {
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--gfl-border);
  border-radius: 8px;
  margin: 0 8px 8px 8px;
  padding: 10px;
}

.gfl-vehicle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gfl-vehicle-card {
  background: #ffffff;
  border: 1px solid var(--gfl-border);
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--gfl-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gfl-remove-btn {
  background: none;
  border: none;
  color: #ff8e8e;
  cursor: pointer;
  font-size: 14px;
  transition:
    color 0.2s,
    transform 0.2s;
  display: flex;
  align-items: center;
}

.gfl-remove-btn:hover {
  color: var(--gfl-alert);
  transform: scale(1.1);
}

/* --- BADGES & BUTTONS --- */
.gfl-id-badge {
  /* background-color: var(--gfl-tertiary); */
  color: var(--gfl-primary);

  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 10px;
  font-family: monospace;
}

.gfl-type-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.04);
  font-weight: 500;
  color: var(--gfl-muted);
}

.gfl-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gfl-icon-btn.view {
  background: var(--gfl-tertiary);
  color: var(--gfl-primary);
}
.gfl-icon-btn.delete {
  background: #fee2e2;
  color: var(--gfl-alert);
}
.gfl-icon-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* --- MOBILE CARDS --- */
@media (max-width: 720px) {
  .gfl-table,
  .gfl-table thead,
  .gfl-table tbody,
  .gfl-table th,
  .gfl-table td,
  .gfl-table tr {
    display: block;
    width: 100%;
  }

  .gfl-table thead {
    display: none;
  }

  .gfl-row {
    position: relative;
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.6);
  }

  .gfl-table td {
    display: block;
    padding: 2px 0;
    width: 100% !important;
    border: none;
    white-space: normal;
  }

  .gfl-name-cell {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gfl-primary);
    width: 80% !important;
  }

  .gfl-actions-cell {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
  }
}

/* UTILS */
.gfl-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gfl-border);
  border-top-color: var(--gfl-secondary);
  border-radius: 50%;
  animation: gflSpin 0.8s linear infinite;
}

@keyframes gflSpin {
  to {
    transform: rotate(360deg);
  }
}

.gfl-body::-webkit-scrollbar {
  width: 3px;
}
.gfl-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}
:root {
    --alert-critical: #e11d48;
    --alert-warn: #f59e0b;
}

/* Container */
.alert-container {
    width: 320px;
    max-height: 190px;
    z-index: 1100;
    overflow: hidden;

    /* position: fixed;
    top: 6px;
    left: 6px; */

    /* font-family: 'Poppins', system-ui, sans-serif; */

    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: var(--mb-glass-surface);
    box-shadow: var(--mb-shadow);
    backdrop-filter: var(--mb-blur);
    -webkit-backdrop-filter: var(--mb-blur);

    display: flex;
    flex-direction: column;
}

/* Header */
.alert-header {
    display: flex;
    align-items: center;
    /* Vertical center for the whole header */
    justify-content: space-between;
    padding: 4px 12px;
    background: rgba(15, 23, 42, 0.05);
    /* Matching your glass UI */
    border-bottom: 1px solid var(--mb-border);
}

.alert-header-title {
    display: flex;
    align-items: center;
    /* Vertical center for items inside the title */
    gap: 6px;
    /* Remove background-color: red; once confirmed */
}

/* 1. The Icon */
.alert-bell-icon {
    font-size: 13px;
    color: var(--mb-muted);
    display: flex;
    align-items: center;
}

/* 2. The Text */
.alert-title-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mb-primary);
    line-height: 1;
    /* Forces the box to wrap tightly around the text */
    margin-top: 1px;
    /* Optical adjustment: sometimes text looks too high */
    white-space: nowrap;
}

/* 3. The Badge */
.alert-badge {
    padding: 1px 6px;

    color: white;
    font-size: 10px;
    border-radius: 10px;
    font-weight: 700;

    background: #f59e0b;
}

/* The Close Icon (Right Side) */
.alert-close-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--mb-muted);
    display: flex;
    align-items: center;
    transition: all 0.6s ease;
}

.alert-close-btn:hover {
    transform: rotate(-180deg);
    color: var(--mb-alert);
}

/* Scroll area */
.alert-scroll-wrapper {
    padding: 8px;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;

    /* ensures it respects max-height of container */
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.alert-scroll-wrapper::-webkit-scrollbar {
    width: 4px;
}

.alert-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--mb-border);
    border-radius: 10px;
}

/* Card */
.alert-card {
    padding: 2px;

    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    border: 1px solid var(--mb-border);
    cursor: pointer;

    display: flex;

    transition: transform 0.2s ease, background 0.2s ease;
}

.alert-card:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(4px);
}

.alert-card-body {
    flex: 1;
    padding: 8px 10px;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Delete button */
.alert-btn-delete {
    width: 60px;
    margin-right: 5px;
    cursor: pointer;

    background: none;
    border: none;
    border-radius: 6px;

    font-size: 14px;
    color: var(--mb-muted);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.alert-btn-delete .delete-icon {
    transition: transform 0.2s ease, color 0.2s ease;
}

.alert-btn-delete:hover > .delete-icon{
    color: var(--alert-critical);
    transform: translateY(-2px);
}

/* Tag */
.alert-type-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.alert-type-tag.critical {
    background: rgba(225, 29, 72, 0.15);
    color: var(--alert-critical);
}

.alert-type-tag.warn {
    background: rgba(245, 158, 11, 0.15);
    color: var(--alert-warn);
}

/* Main text */
.alert-main-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.alert-icon {
    font-size: 14px;
    margin-top: 1px;
}

.alert-card.critical .alert-icon {
    color: var(--alert-critical);
}

.alert-card.warn .alert-icon {
    color: var(--alert-warn);
}

.alert-rego {
    font-size: 11px;
    font-weight: 500;
    color: var(--mb-secondary);
    letter-spacing: 0.08em;
}

.alert-description {
    font-size: 12px;
    color: var(--mb-text);
    line-height: 1.3;
    font-weight: 500;
}

/* Exit animation */
.alert-card.alert-is-closing {
    animation: alertSlideOut 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes alertSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
        max-height: 120px;
        margin-bottom: 8px;
    }

    to {
        transform: translateX(100px);
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        padding: 0;
        border-width: 0;
    }
}

/* Entry animation (runs only when a card mounts) */
@media (prefers-reduced-motion: no-preference) {
    .alert-card {
        animation: alertSlideIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Don't animate cards that are exiting */
.alert-card.alert-is-closing {
    animation: alertSlideOut 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* Mobile */
@media (max-width: 720px) {
    .alert-container {
        width: 280px;

        position: fixed;
        top: 4px;
        right: 4px;
    }
}/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/* deepmap.css */
.live-map-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.map-viewport {
  width: 100%;
  height: 100%;
}

.vehicle-count {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #111;
  color: #00ff88;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Monaco', monospace;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border-left: 4px solid #00ff88;
}

/* Marker Styling */
.marker-container {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-core {
  width: 12px;
  height: 12px;
  background: #3498db;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 2;
}

.online .marker-core { background: #00ff88; }
.idle .marker-core { background: #f1c40f; }

/* The Directional Arrow */
.direction-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #333;
  top: -10px; /* Position above the core */
  transition: transform 0.8s ease;
}

.tooltip-label {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
}.live-map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.map-container {
  width: 100%;
  height: 100%;
}

.vehicle-count {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #111;
  color: #00ff88;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Monaco', monospace;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border-left: 4px solid #00ff88;
}:root {
  --fleettable-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.05), transparent 60%);

  --fleettable-surface: rgba(255, 255, 255, 0.72);
  --fleettable-text: rgba(15, 23, 42, 0.92);
  --fleettable-muted: rgba(15, 23, 42, 0.62);

  --fleettable-border: rgba(15, 23, 42, 0.10);
  --fleettable-border-soft: rgba(15, 23, 42, 0.06);
  --fleettable-border-color-selected: #b1c7e5;

  --fleettable-primary: #003366;
  --fleettable-secondary: #0066cc;
  --fleettable-btn-primary: #16537e;
  --fleettable-btn-secondary: #447597;

  --fleettable-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --fleettable-shadow: 0 10px 26px rgba(2, 6, 23, 0.10);
  --fleettable-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.14);

  --fleettable-radius-sm: 10px;
  --fleettable-radius: 14px;
  --fleettable-radius-lg: 18px;

  --fleettable-blur: blur(14px);
  --fleettable-header-h: 66px;
  --fleettable-gutter: 16px;

  --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.25);
}

* {
  box-sizing: border-box;
}

.fleettable-page {
  height: 100vh;
  /* fallback */
  height: 100dvh;
  /* modern mobile: dynamic viewport */
  overflow: hidden;
  color: var(--fleettable-text);
  background: var(--fleettable-bg);
}

/* Header */
.fleettable-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--fleettable-header-h);
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px var(--fleettable-gutter);
  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));
  background: linear-gradient(0deg, var(--fleettable-btn-primary), var(--fleettable-btn-secondary));
  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));


  border-bottom: 1px solid rgba(249, 115, 22, 0.60);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.fleettable-header-left,
.fleettable-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fleettable-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.fleettable-title-main {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fleettable-title-sub {
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  font-weight: 400;
}

.fleettable-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

/* Toggle */
.fleettable-toggle {
  cursor: pointer;
  padding: 8px 12px;

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;

  /* color: rgba(15, 23, 42, 0.82);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--mp-shadow-sm); */

  display: inline-flex;
  align-items: center;
  gap: 10px;

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.fleettable-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.fleettable-toggle:active {
  transform: translateY(0) scale(0.98);
}

.fleettable-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fleettable-toggle-text {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.fleettable-toggle-icon {
  width: 18px;
  height: 12px;
  position: relative;
  display: inline-block;
}

.fleettable-toggle-icon::before,
.fleettable-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #fff;
  transition: transform .4s ease, top .4s ease, bottom .4s ease;
}

.fleettable-toggle-icon::before {
  top: 0;
}

.fleettable-toggle-icon::after {
  bottom: 0;
}

.fleettable-toggle.is-open .fleettable-toggle-icon::before {
  transform: rotate(45deg);
  top: 5px;
}

.fleettable-toggle.is-open .fleettable-toggle-icon::after {
  transform: rotate(-45deg);
  bottom: 5px;
}

/* Selected chip */
.fleettable-chip {
  height: 36px;
  padding: 0 12px;
  cursor: pointer;

  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  letter-spacing: 0.08em;

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: transform .16s ease, background .16s ease;
}

.fleettable-chip:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
}

.fleettable-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Main */
.fleettable-main {
  height: calc(100dvh - var(--fleettable-header-h));
  margin-top: calc(var(--fleettable-header-h) - var(--fleettable-gutter));
  /* margin-top: var(--fleettable-header-h); */
  padding: var(--fleettable-gutter);

  display: flex;
  flex-direction: column;
  gap: var(--fleettable-gutter);

  overflow: hidden;
}

.fleettable-rego-panel-card {
  overflow: hidden;
  margin-top: var(--fleettable-gutter);

  border: 1px solid var(--fleettable-border);
  border-radius: var(--fleettable-radius);
  background: var(--fleettable-surface);
  box-shadow: var(--fleettable-shadow);
  backdrop-filter: var(--fleettable-blur);
}

.fleettable-rego-panel-card:has(.fleettable-accordion.is-closed) {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Accordion */
.fleettable-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.fleettable-accordion.is-open {
  grid-template-rows: 1fr;
}

.fleettable-accordion-inner {
  overflow: hidden;
  min-height: 0;
}

/* Rego header */
.fleettable-rego-header {
  position: sticky;
  top: 0;
  z-index: 5;

  padding: 10px 14px;
  border-bottom: 1px solid var(--fleettable-border-soft);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: var(--fleettable-blur);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fleettable-rego-header-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fleettable-rego-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleettable-muted);
}

.fleettable-rego-meta {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
}

.fleettable-rego-header-right {
  flex: 1;
  min-width: 240px;
  display: flex;
  justify-content: flex-end;
}

/* Search */
.fleettable-rego-search {
  width: min(420px, 100%);
  padding: 10px 12px;

  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.80);
  box-shadow: var(--fleettable-shadow-sm);

  display: flex;
  align-items: center;
  gap: 8px;
}

.fleettable-rego-search>i {
  color: #0f172aad;
}

.fleettable-rego-search input {
  width: 100%;
  border: none;
  outline: none;

  background: transparent;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.86);
}

.fleettable-rego-search:focus-within {
  /* box-shadow: var(--focus-ring); */
  border: 1px solid var(--fleettable-border-color-selected);
}

.fleettable-btn-clear {
  width: 30px;
  height: 30px;
  cursor: pointer;

  border: none;
  background: none;
  color: #0f172aad;

  display: grid;
  place-items: center;

  transition: transform .14s ease, box-shadow .14s ease;
}

.fleettable-btn-clear:hover {
  transform: translateY(-1px);
  /* box-shadow: var(--fleettable-shadow-sm); */
}

.fleettable-btn-clear:active {
  transform: scale(0.98);
}

.fleettable-btn-clear:focus-visible {
  outline: none;
  /* box-shadow: var(--focus-ring); */
}

/* Rego grid */
.fleettable-rego-body {
  padding: 12px 14px 14px;
}

.fleettable-rego-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

@keyframes fleettableTileIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fleettable-rego-card {
  padding: 10px;
  cursor: pointer;

  border-radius: 12px;
  border: 1px solid #0f172a1a;
  box-shadow: var(--fleettable-shadow-sm);
  background: #f8fafc;

  display: flex;
  align-items: center;
  gap: 10px;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  animation: fleettableTileIn 420ms ease-out both;
}

.fleettable-rego-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.fleettable-rego-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fleettable-rego-card.active {
  border: none;
  background: rgba(240, 246, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 102, 204, 0.14);
}

.fleettable-rego-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;

  border: 1px solid #1e293b24;
  background: rgba(240, 246, 255, 0.92);
  color: #64748b;
}

.fleettable-rego-card-icon .bi-truck-front-fill {
  color: #003366eb;
}

.fleettable-rego-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.fleettable-rego-card-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fleettable-rego-card-value {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #003366eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleettable-rego-card-value.active {
  color: var(--fleettable-secondary);
}

.fleettable-rego-card-status {
  display: grid;
  place-items: center;
  color: #1e293b;
  /* color: #0066ccbf; */
}

/* Shared helpers */
.fleettable-loading {
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 8px;
}

.fleettable-inline-empty,
.fleettable-no-data {
  padding: 10px 14px;

  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  letter-spacing: 0.05em;

  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: #ffffff9e;

  display: flex;
  align-items: center;
  gap: 10px;
}

/* Fade-up helper */
.fleettable-fade-up {
  animation: fadeUp 800ms ease-out both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Table area */
.fleettable-table-area {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.fleettable-table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.fleettable-controls {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--fleettable-shadow-sm);
}

.fleettable-controls-holder {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.fleettable-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fleettable-field.grow {
  min-width: 240px;
  flex: 1;
}

.fleettable-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fleettable-muted);
}

.fleettable-btn-float {
  position: absolute;
  top: 4px;
  right: 8px;

  border: none;
  background: none;

  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fleettable-muted);

  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.fleettable-field input,
.fleettable-field select {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  outline: none;
  font-size: 14px;
}

.fleettable-field input:focus,
.fleettable-field select:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(0, 102, 204, 0.45);
}

/* Buttons */
.fleettable-btn {
  height: 38px;
  cursor: pointer;
  padding: 0 10px;

  font-size: 13px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.86);

  border-radius: 12px;
  border: 1px solid rgba(0, 51, 102, 0.18);
  background: rgba(255, 255, 255, 0.72);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.fleettable-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--fleettable-shadow-sm);
  border-color: rgba(0, 102, 204, 0.35);
}

.fleettable-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.fleettable-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fleettable-btn.primary {
  border: none;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, var(--fleettable-btn-primary), var(--fleettable-btn-secondary));

  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.fleettable-btn.ghost {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.70);
}

/* Table */
.fleettable-table-scroller {
  flex: 1;
  overflow: auto;
  border-radius: var(--fleettable-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.70);
  min-height: 0;
}

.fleettable-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.fleettable-table th,
.fleettable-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 13px;
  text-align: center;
}

.fleettable-table td:nth-child(2) {
  text-align: start;
}

.fleettable-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(15, 23, 42, 0.72);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 11px;
}

.fleettable-table tr:hover td {
  background: rgba(0, 102, 204, 0.06);
}

.fleettable-table .wide {
  text-align: left;
  max-width: 560px;
  overflow-wrap: break-word;
}

.fleettable-table .mono {
  font-variant-numeric: tabular-nums;
}

.strong {
  font-weight: 600;
}

/* Footer */
.fleettable-footer {
  overflow: hidden;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fleettable-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.60);
}

/* Pager */
.fleettable-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fleettable-pager-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fleettable-page-btn {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);
  cursor: pointer;
  font-size: 13px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.72);
}

.fleettable-page-btn.is-active {
  border-color: rgba(0, 102, 204, 0.42);
  color: rgba(0, 51, 102, 0.95);
  box-shadow: 0 10px 24px rgba(0, 102, 204, 0.12);
}

.fleettable-page-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fleettable-ellipsis {
  color: rgba(15, 23, 42, 0.45);
  padding: 0 6px;
}

/* Empty */
.fleettable-empty-center {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}

.fleettable-empty-card {
  max-width: 420px;
  padding: 48px 32px;
  text-align: center;

  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--fleettable-shadow-lg);
  backdrop-filter: var(--fleettable-blur);
}

@keyframes fleettablePopIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fleettable-pop {
  animation: fleettablePopIn 420ms ease-out both;
}

.fleettable-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 102, 204, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 246, 255, 0.88));
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  display: grid;
  place-items: center;
}

.fleettable-empty-icon>i {
  color: rgba(0, 51, 102, 0.92);
  font-size: 32px;
}

.fleettable-empty-title {
  font-size: 18px;
  font-weight: 500;
}

.fleettable-empty-sub {
  margin: 8px 0 24px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
}

.fleettable-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.58);
}

/* Controls accordion (same pattern as rego panel) */
.fleettable-controls-accordion {
  display: grid;
  grid-template-rows: 0fr;
  /* closed */
  transition: grid-template-rows 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.fleettable-controls-accordion.is-open {
  grid-template-rows: 1fr;
  /* open */
}

.fleettable-controls-accordion-inner {
  overflow: hidden;
  /* critical */
  min-height: 0;
}

/* optional: make open/close feel smoother */
.fleettable-controls {
  transform-origin: top;
}


/* Mobile */
@media (max-width: 720px) {
  .fleettable-main {
    padding: 12px;
    gap: 12px;
  }

  .fleettable-rego-header-right {
    min-width: 100%;
    justify-content: stretch;
  }

  .fleettable-rego-search {
    width: 100%;
  }

  .fleettable-controls {
    padding: 12px;
    gap: 10px;
  }

  .fleettable-controls-holder {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
  }

  .fleettable-controls-holder .fleettable-field {
    grid-column: 1 / -1;
  }

  .fleettable-controls-holder .fleettable-btn.primary {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .fleettable-footer {
    gap: 10px;
    flex-direction: column;
  }

  .fleettable-title-sub {
    font-size: 11.5px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {

  .fleettable-accordion,
  .fleettable-rego-card,
  .fleettable-pop {
    transition: none !important;
    animation: none !important;
  }

  .fleettable-controls-accordion {
    transition: none !important;
  }
}:root {
  --mp-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --mp-surface: rgba(255, 255, 255, 0.72);
  --mp-surface-strong: rgba(255, 255, 255, 0.92);

  --mp-text: rgba(15, 23, 42, 0.92);
  --mp-muted: rgba(15, 23, 42, 0.62);

  --mp-border: rgba(15, 23, 42, 0.1);
  --mp-border-soft: rgba(15, 23, 42, 0.06);

  --mp-primary: #003366;
  --mp-secondary: #0066cc;
  --mp-accent: #fb8018;

  --mp-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --mp-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --mp-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --mp-radius: 14px;
  --mp-radius-lg: 18px;
  --mp-blur: blur(14px);

  --mp-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

.mp-page {
  height: 100dvh;
  overflow: hidden;

  background: var(--mp-bg);
  color: var(--mp-text);
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;

  display: flex;
  flex-direction: column;
}

.mp-header {
  flex: 0 0 66px;
  height: 66px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 16px;
  background: linear-gradient(
    180deg,
    rgba(0, 51, 102, 0.82),
    rgba(0, 51, 102, 0.96)
  );

  border-bottom: 1px solid rgba(249, 115, 22, 0.6);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.mp-header-left,
.mp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mp-header-title-main {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mp-header-title-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 400;
}

.mp-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

/* layout */
/* .mp-main {
  flex: 1;
  overflow-y: auto;
  margin: 20px;
} */

.mp-main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;

  -webkit-overflow-scrolling: touch;
  /* optional: nicer scrollbar spacing */
  scrollbar-gutter: stable both-edges;
}

.mp-card {
  width: 100%;
  overflow: hidden;

  background: var(--mp-surface);
  border-radius: var(--mp-radius-lg);
  border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow-lg);
  backdrop-filter: var(--mp-blur);
  -webkit-backdrop-filter: var(--mp-blur);
}

.mp-card-topbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mp-border-soft);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(15, 23, 42, 0.7);
  font-size: 12px;
}

.mp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-link {
  text-decoration: none;
}

/* buttons */
.btn-plain {
  height: 38px;
  cursor: pointer;

  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  border: none;
  background: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition: color 140ms ease;
}

.btn-plain:hover {
  color: #f97316;
}

.mp-btn {
  height: 38px;
  padding: 0 16px;
  cursor: pointer;

  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--mp-shadow-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.mp-btn > i {
  font-size: 1rem;
}

.mp-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
  border-color: rgba(0, 102, 204, 0.22);
}

.mp-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.mp-btn:focus-visible {
  outline: none;
  box-shadow: var(--mp-focus);
}

.mp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.mp-btn-primary {
  border: none;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.mp-btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.7);
}

.mp-btn > span {
  width: 150px;
  font-size: 13px;
}

/* loading + empty */
.mp-loading {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mp-loading-text {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
}

.mp-empty {
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mp-empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(0, 102, 204, 0.18);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  display: grid;
  place-items: center;
}

.mp-empty-icon i {
  font-size: 30px;
  color: rgba(0, 51, 102, 0.92);
}

.mp-empty-title {
  font-size: 16px;
  font-weight: 500;
}

.mp-empty-sub {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
  max-width: 420px;
}

/* content */
.mp-content {
  padding: 16px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  min-height: 0;
}

.mp-left {
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border-soft);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--mp-shadow-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.mp-avatar-wrap {
  display: flex;
  justify-content: center;
}

.mp-avatar {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.mp-identity {
  text-align: center;
}

.mp-org {
  font-size: 14px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.86);
}

.mp-name {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
}

.mp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-right {
  /* border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border-soft);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--mp-shadow-sm);
  padding: 14px; */
  min-height: 0;
}

.mp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mp-field {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--mp-shadow-sm);
  min-width: 0;
}

.mp-field-wide {
  grid-column: 1 / -1;
}

.mp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.62);
}

.mp-value {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.8);
  font-weight: 450;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-wrap {
  white-space: normal;
  line-height: 1.4;
}

/* mobile */
@media (max-width: 820px) {
  .mp-main {
    padding: 12px;
  }

  .mp-content {
    grid-template-columns: 1fr;
  }

  .mp-grid {
    grid-template-columns: 1fr;
  }

  .mp-card-topbar {
    /* flex-wrap: wrap;
    justify-content: center; */
  }

  .mp-topbar-actions {
    /* width: 100%;
    justify-content: center; */
  }

  .mp-header-title-sub {
    font-size: 11.5px;
  }
  /* .mp-header-right{
    display:none;
  } */
}
:root {
  --up-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --up-surface: rgba(255, 255, 255, 0.72);
  --up-surface-strong: rgba(255, 255, 255, 0.92);

  --up-text: rgba(15, 23, 42, 0.92);
  --up-muted: rgba(15, 23, 42, 0.62);

  --up-border: rgba(15, 23, 42, 0.1);
  --up-border-soft: rgba(15, 23, 42, 0.06);

  --up-primary: #003366;
  --up-secondary: #0066cc;
  --up-accent: #fb8018;

  --up-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --up-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --up-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --up-radius: 14px;
  --up-radius-lg: 18px;
  --up-blur: blur(14px);
  --up-focus: 0 1px 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

.up-page {
  height: 100dvh;
  overflow: hidden;

  background: var(--up-bg);
  color: var(--up-text);
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;

  display: flex;
  flex-direction: column;
}

.up-header {
  flex: 0 0 66px;
  height: 66px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 16px;
  background: linear-gradient(
    180deg,
    rgba(0, 51, 102, 0.82),
    rgba(0, 51, 102, 0.96)
  );
  border-bottom: 1px solid rgba(249, 115, 22, 0.6);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.up-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.up-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

.up-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.up-header-title-main {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.up-header-title-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 400;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 52vw;
}

.up-main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;

  -webkit-overflow-scrolling: touch;
  /* optional: nicer scrollbar spacing */
  scrollbar-gutter: stable both-edges;
}

.up-card {
  width: 100%;
  overflow: hidden;

  border-radius: var(--up-radius-lg);
  border: 1px solid var(--up-border);
  background: var(--up-surface);
  box-shadow: var(--up-shadow-lg);
  backdrop-filter: var(--up-blur);
  -webkit-backdrop-filter: var(--up-blur);
}

.up-card-topbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--up-border-soft);
  background: rgba(255, 255, 255, 0.55);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.up-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(15, 23, 42, 0.7);
  font-size: 12px;
}

.up-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 12px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(15, 23, 42, 0.78);

  cursor: pointer;
  box-shadow: var(--up-shadow-sm);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.up-upload:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
  border-color: rgba(0, 102, 204, 0.22);
}

.up-upload.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.up-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.up-upload.is-disabled input {
  cursor: not-allowed;
}

.up-upload-icon {
  color: rgba(0, 51, 102, 0.92);
}

.up-upload > span {
  text-align: end;
  width: 60px;
  font-size: 13px;
  font-weight: 500;
}

/* layout */
.up-content {
  padding: 16px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  min-height: 0;
}

.up-content-left {
  border-radius: var(--up-radius);
  border: 1px solid var(--up-border-soft);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--up-shadow-sm);
  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.up-avatar-wrap {
  display: flex;
  justify-content: center;
}

.up-avatar {
  width: 150px;
  height: 150px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.up-identity {
  text-align: center;
}

.up-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.86);
}

.up-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
}

.up-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.up-content-right {
  /* border-radius: var(--up-radius);
  border: 1px solid var(--up-border-soft);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--up-shadow-sm); */
  /* padding: 14px; */
  min-height: 0;
}

.up-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.up-field {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--up-shadow-sm);
  min-width: 0;
}

.up-field-wide {
  grid-column: 1 / -1;
}

.up-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.62);
}

.up-input {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  padding: 0 12px;

  font-size: 14px;
  color: rgba(15, 23, 42, 0.86);
  outline: none;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--up-shadow-sm);
}

.up-input:focus {
  border-color: rgba(0, 102, 204, 0.35);
  border-color: #b1c7e5;

  box-shadow: var(--up-focus);
}

.up-input:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* buttons */
.up-btn {
  height: 40px;
  padding: 0 14px;

  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  box-shadow: var(--up-shadow-sm);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.up-btn > i {
  font-size: 1rem;
}

.up-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
  border-color: rgba(0, 102, 204, 0.22);
}

.up-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.up-btn:focus-visible {
  outline: none;
  box-shadow: var(--up-focus);
}

.up-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.up-btn-primary {
  border: none;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, var(--up-primary), var(--up-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.up-btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.7);
}

.up-btn > span {
  width: 60px;
  font-size: 13px;
  font-weight: 500;
}

/* loading + empty */
.up-loading {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.up-loading-text {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
}

.up-empty {
  width: min(520px, 100%);
  padding: 24px;
  border-radius: var(--up-radius-lg);
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
  box-shadow: var(--up-shadow);
}

.up-empty-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 102, 204, 0.18);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  display: grid;
  place-items: center;
}

.up-empty-icon i {
  font-size: 30px;
  color: rgba(0, 51, 102, 0.92);
}

.up-empty-title {
  font-size: 16px;
  font-weight: 600;
}

.up-empty-sub {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
}

/* mobile */
@media (max-width: 860px) {
  .up-main {
    padding: 12px;
  }

  .up-content {
    grid-template-columns: 1fr;
  }

  .up-grid {
    grid-template-columns: 1fr;
  }
}

/* topbar right */
.up-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* dirty indicator */
.up-dirty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.1);
  color: rgba(15, 23, 42, 0.78);
  font-size: 12px;
}

.up-dirty.is-clean {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.1);
}

.up-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--up-accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

/* upload progress */
.up-progress {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--up-border-soft);
  background: rgba(255, 255, 255, 0.55);
}

.up-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.7);
}

.up-progress-pct {
  font-variant-numeric: tabular-nums;
  color: rgba(0, 51, 102, 0.92);
  font-weight: 600;
}

.up-progress-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.1);
}

.up-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--up-primary), var(--up-secondary));
  transition: width 160ms linear;
}

/* validation */
.up-input.is-invalid {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.up-hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
}

.up-hint-error {
  color: rgba(239, 68, 68, 0.78);
}

/* mobile: topbar stacks cleaner */
@media (max-width: 860px) {
}
:root {
  --cp-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --cp-surface: rgba(255, 255, 255, 0.72);
  --cp-surface-strong: rgba(255, 255, 255, 0.92);

  --cp-text: rgba(15, 23, 42, 0.92);
  --cp-muted: rgba(15, 23, 42, 0.62);

  --cp-border: rgba(15, 23, 42, 0.10);
  --cp-border-soft: rgba(15, 23, 42, 0.06);

  --cp-primary: #003366;
  --cp-secondary: #0066cc;
  --cp-accent: #fb8018;

  --cp-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --cp-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --cp-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --cp-radius: 14px;
  --cp-radius-lg: 18px;
  --cp-blur: blur(14px);
  --cp-focus: 0 1px 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

.cp-page {
  height: 100dvh;
  overflow: hidden;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  display: flex;
  flex-direction: column;
}

.cp-header {
  flex: 0 0 66px;
  height: 66px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));
  border-bottom: 1px solid rgba(249, 115, 22, 0.60);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.cp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cp-title-main {
  color: rgba(255, 255, 255, .95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
}

.cp-title-sub {
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}

/* main scroll area */
.cp-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;

  display: grid;
  justify-items: center;
  align-content: start;

  -webkit-overflow-scrolling: touch;
}

.cp-card {
  width: min(780px, 100%);
  padding: 10px;

  border-radius: var(--cp-radius-lg);
  border: 1px solid var(--cp-border);
  background: var(--cp-surface);
  box-shadow: var(--cp-shadow-lg);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  overflow: hidden;
}

.cp-card-top {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cp-border-soft);
  background: rgba(255, 255, 255, .55);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, .72);
  color: rgba(15, 23, 42, .70);
  font-size: 12px;
}

.cp-muted {
  font-size: 12px;
  color: rgba(15, 23, 42, .58);
}

/* form */
.cp-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .62);

}

.cp-input-wrap {
  height: 42px;
  padding: 4px 10px;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--cp-shadow-sm);

  display: flex;
}


.cp-input-wrap:focus-within {
  /* border-color: rgba(0, 102, 204, 0.35); */
  box-shadow: var(--cp-focus);
  border-color: #b1c7e5;
}

.cp-input-wrap .cp-eye {
  color: rgba(15, 23, 42, 0.55);
  font-size: 15px;

  border: none;
  background: transparent;
}

.cp-eye:hover {
  color: rgba(0, 51, 102, 0.9);
}

.cp-eye:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

.cp-input {
  flex: 1;

  outline: none;
  border: none;
  background: none;

  font-size: 14px;
  color: rgba(15, 23, 42, .86);
}

.cp-input:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cp-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 2px;
}

/* buttons */
.cp-btn {
  height: 38px;
  padding: 0 16px;
  cursor: pointer;

  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow: var(--cp-shadow-sm);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.cp-btn>i {
  font-size: 1rem;
}

.cp-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.cp-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.cp-btn:focus-visible {
  outline: none;
  box-shadow: var(--cp-focus);
}

.cp-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.cp-btn-primary {
  border: none;
  color: rgba(255, 255, 255, .95);
  background: linear-gradient(135deg, var(--cp-primary), var(--cp-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.cp-btn-ghost {
  background: rgba(255, 255, 255, .50);
  border-color: rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .70);
}

.cp-btn>span {
  width: 150px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* mobile */
@media (max-width: 720px) {
  .cp-main {
    padding: 12px;
  }

  .cp-grid {
    grid-template-columns: 1fr;
  }

  .cp-actions {
    flex-direction: column;
    align-items: stretch;
  }
}:root {
  /* Theme */
  --history-bg: radial-gradient(circle at top left, #ffffff 0%, #f0f4ff 100%);
  --history-surface: rgba(255, 255, 255, 0.72);
  --history-surface-strong: rgba(255, 255, 255, 0.88);

  --history-text: rgba(15, 23, 42, 0.92);
  --history-muted: rgba(15, 23, 42, 0.62);

  --history-border: rgba(15, 23, 42, 0.10);
  --history-border-soft: rgba(15, 23, 42, 0.06);

  --history-primary: #003366;
  --history-secondary: #0066cc;

  /* Minimal orange */
  --history-accent: rgba(249, 115, 22, 0.65);

  --history-border-color: #e2e8f0;
  --history-border-color-selected: #c4d5eb;

  --history-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --history-shadow: 0 10px 26px rgba(2, 6, 23, 0.10);
  --history-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.14);

  --history-radius-sm: 10px;
  --history-radius: 14px;
  --history-radius-lg: 18px;

  --history-blur: blur(14px);

  --history-header-h: 66px;
  --history-gutter: 16px;
}

/* --- Page + background glow --- */
.history-page {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.05), transparent 60%);
}

/* .history-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.05), transparent 60%);
  filter: blur(26px);
  opacity: 0.95;
} */

/* --- Header --- */
.history-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--history-header-h);
  z-index: 30;

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--history-gutter);

  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));
  border-bottom: 1px solid rgba(249, 115, 22, 0.60);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

/* toggle button */
.history-div-rego-btn {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.history-div-rego-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.history-div-rego-btn:active {
  transform: translateY(0) scale(0.98);
}

.history-div-rego-btn-toggle {
  cursor: pointer;
  font-size: 14px;
  padding: 0 8px;
  color: white;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.history-div-rego-btn-toggle::before {
  content: 'Rego';
  margin-right: 10px;
}

.history-div-rego-btn-toggle.active::before {
  content: 'Close';
}

.history-div-rego-btn-toggle span {
  position: relative;
  width: 20px;
  height: 40px;
}

.history-div-rego-btn-toggle span::before,
.history-div-rego-btn-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #fff;
  transition: 0.5s;
}

.history-div-rego-btn-toggle span::before { top: 14px; }
.history-div-rego-btn-toggle span::after { bottom: 14.5px; }

.history-div-rego-btn-toggle.active span::before {
  transform: rotate(225deg);
  top: 19px;
}

.history-div-rego-btn-toggle.active span::after {
  transform: rotate(135deg);
  bottom: 19.5px;
}

.history-header-spacer { flex: 1; }

.history-div-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.history-div-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.history-div-subtitle-text {
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  font-weight: 400;
}

.history-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

/* --- Shell layout --- */
.history-main {
  height: calc(100vh - var(--history-header-h));
  overflow: hidden;
  position: relative;
  z-index: 1;

  margin-top: var(--history-header-h);
  padding: var(--history-gutter);
  gap: var(--history-gutter);

  display: flex;
  flex-direction: column;   
}

/* Panel wrapper: animate using max-height + transform instead of height:auto */
.history-panel {
  overflow: hidden;
  transform-origin: top;
}

/* CLOSED */
.history-panel.is-closed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    max-height 420ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 260ms ease;
}

/* OPEN */
.history-panel.is-open {
  /* big enough for your grid + searchbar; adjust if your fleet is huge */
  /* max-height: 520px; */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height 520ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 240ms ease;
}

.history-content {
  flex: 1;
  overflow: hidden;
}

/* --- Card/widget base --- */
.history-card {
  overflow: hidden;

  border: 1px solid var(--history-border);
  border-radius: var(--history-radius);
  background: var(--history-surface);

  box-shadow: var(--history-shadow);
  backdrop-filter: var(--history-blur);
  -webkit-backdrop-filter: var(--history-blur);

  display: flex;
  flex-direction: column;
  min-height: 0;
}

.history-widget-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.history-widget-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.62);
}

.history-widget-meta {
  font-size: 12px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.55);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.55);
}

/* Searchbar (single definition; duplicates removed) */
.history-searchbar {
  margin: 12px 14px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.80);
  box-shadow: var(--history-shadow-sm);
}

.history-searchbar i {
  color: rgba(15, 23, 42, 0.45);
  font-size: 14px;
}

.history-searchbar input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  color: rgba(15, 23, 42, 0.86);
}

.history-clear-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.60);
  transition: transform .14s ease, box-shadow .14s ease;
}

.history-clear-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--history-shadow-sm);
}

.history-clear-btn:active {
  transform: scale(0.98);
}

/* rego list container */
.history-rego-grid-wrap {
  overflow: auto;
  padding: 10px;
}

.history-rego-grid-wrap::-webkit-scrollbar { width: 6px; }
.history-rego-grid-wrap::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 999px;
}

.history-rego-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.history-rego-tile {
  padding: 10px;
  cursor: pointer;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.80);

  display: flex;
  align-items: center;
  justify-content: space-between;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  animation: historyTileIn 420ms ease-out both;
}

@keyframes historyTileIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.history-rego-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.history-rego-tile:active {
  transform: translateY(-1px) scale(0.99);
}

.history-rego-tile.is-active {
  border-color: rgba(0, 102, 204, 0.44);
  box-shadow: 0 16px 32px rgba(0, 102, 204, 0.14);
}

.history-rego-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 102, 204, 0.14);
  background: rgba(240, 246, 255, 0.92);
  color: rgba(0, 51, 102, 0.92);
}

.history-rego-status i {
  color: rgba(0, 102, 204, 0.75);
  font-size: 16px;
}

.history-rego-tile-text {
  font-size: 13px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.86);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* used in JSX */
.history-empty-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin: 10px 14px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  color: rgba(15, 23, 42, 0.62);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.60);
}

/* --- Table area --- */
.history-table-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* Fade-up helper */
.history-fade-up {
  animation: fadeUp 420ms ease-out both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Controls */
.history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  border: none;
  margin-bottom: 1.5rem;
}

.history-controls-left,
.history-controls-right {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.history-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.history-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--history-muted);
}

/* input/select (single definition; duplicates removed) */
.history-field input,
.history-field select {
  height: 40px;
  cursor: pointer;
  outline: none;
  padding: 0 10px;

  font-size: 14px;
  font-weight: 400;

  border-radius: 10px;
  border: 1px solid var(--history-border-soft);
  background: #f8fafc;
}

.history-field input:focus,
.history-field select:focus {
  border-color: rgba(0, 102, 204, 0.45);
}

/* Buttons */
.history-btn {
  height: 38px;
  cursor: pointer;

  padding: 0 12px;
  font-size: 13px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.86);

  border-radius: 12px;
  border: 1px solid rgba(0, 51, 102, 0.18);
  background: rgba(255, 255, 255, 0.72);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.history-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--history-shadow-sm);
  border-color: rgba(0, 102, 204, 0.35);
}

.history-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.99);
}

.history-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.history-btn.primary {
  border: none;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, var(--history-primary), var(--history-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.history-btn.primary:hover:not(:disabled) {
  box-shadow: 0 22px 50px rgba(0, 51, 102, 0.28);
}

.history-btn.ghost {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.70);
}

/* Table */
.history-table-scroller {
  flex: 1;
  overflow: auto;
  border-radius: var(--history-radius-sm);
  border: 1px solid var(--history-border-soft);
  background: rgba(255, 255, 255, 0.70);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.history-table th,
.history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

.history-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(15, 23, 42, 0.72);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 11px;
}

.history-row {
  animation: rowIn 360ms ease-out both;
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* status color for online, paused, idle, offline */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-dot.online {
  background: #2ecc71;
}

.status-dot.idle {
  background: #f39c12;
}

.status-dot.offline {
  background: #e74c3c;
}

/* addresss clickable to map */
.address-cell.clickable {
  cursor: pointer;
}

.address-cell.clickable:hover {
  text-decoration: underline;
}

.history-table tr:hover td {
  background: rgba(0, 102, 204, 0.06);
}

.history-table .wide {
  text-align: left;
  max-width: 560px;
  overflow-wrap: break-word;
}

.history-table .mono {
  font-variant-numeric: tabular-nums;
}

.history-table .strong {
  font-weight: 500;
  color: rgba(15, 23, 42, 0.86);
}

/* Footer + pager */
.history-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(15, 23, 42, 0.60);
}

.history-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-pager-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-page-btn {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);
  cursor: pointer;
  font-size: 13px;
  font-weight: 450;
  color: rgba(15, 23, 42, 0.72);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.history-page-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--history-shadow-sm);
  border-color: rgba(0, 102, 204, 0.28);
}

.history-page-btn.is-active {
  border-color: rgba(0, 102, 204, 0.42);
  color: rgba(0, 51, 102, 0.95);
  box-shadow: 0 10px 24px rgba(0, 102, 204, 0.12);
}

.history-ellipsis {
  color: rgba(15, 23, 42, 0.45);
  padding: 0 6px;
}

/* Loading / no data */
.history-loading-wrap {
  padding: 16px;
  display: grid;
  place-items: center;
}

.history-no-data {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Pick a rego empty state --- */
.history-empty-center {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  display: grid;
  place-items: center;
  padding: 18px;
}

.history-empty-card {
  max-width: 400px;
  padding: 48px 32px;
  text-align: center;

  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--history-shadow-lg);
  backdrop-filter: var(--history-blur);
  -webkit-backdrop-filter: var(--history-blur);
}

.history-pop {
  animation: popIn 420ms ease-out both;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.history-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;

  border-radius: 999px;
  border: 1px solid rgba(0, 102, 204, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 246, 255, 0.88));
  box-shadow: 0 14px 36px rgba(0, 51, 102, 0.14);
  display: grid;
  place-items: center;
}

.history-empty-icon > i {
  color: rgba(0, 51, 102, 0.92);
  font-size: 32px;
}

.history-empty-title {
  font-size: 18px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.86);
}

.history-empty-sub {
  margin: 8px 0 32px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
}

.history-empty-hint {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.58);
}

/* If you want the panel to be taller on desktop */
@media (min-width: 1100px) {
  .history-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .history-panel.is-open {
    max-height: 620px;
  }
}

:root {
  --fm-navy: #003366;
  --fm-blue: #0066cc;
  --fm-orange: #f97316;
  --fm-border: #e2e8f0;
  /* --fm-bg: #f8fafc; */

  --fm-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --fm-surface: rgba(255, 255, 255, 0.72);
  --fm-text: rgba(15, 23, 42, 0.92);

  --fm-border: rgba(15, 23, 42, 0.1);
  --fm-border-soft: rgba(15, 23, 42, 0.06);

  --fm-primary: #003366;
  --fm-secondary: #0066cc;

  --fm-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --fm-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --fm-radius: 14px;
  --fm-radius-lg: 18px;
  --fm-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);

  --fm-h: 38px;
  --fm-pad: 12px;

  /* desktop left rail width */
  --fm-left-w: 400px;

  --fm-gap: 12px;
}

/* Page Reset */
.fm-page {
  height: 100dvh;

  display: flex;
  flex-direction: column;
  background-color: #f1f5f9;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

/* floater button */
.fm-btn-floater {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 70px;
  height: 70px;

  z-index: 1000;
  padding: 8px;
  cursor: pointer;

  color: white;
  font-size: 13px;

  background: linear-gradient(180deg, #5fa9f0 0%, #2f7fd6 100%);
  background: linear-gradient(135deg, var(--fm-primary), var(--fm-secondary));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transition: 0.2s;
}

.fm-btn-floater:hover {
  background: linear-gradient(135deg, var(--fm-secondary), var(--fm-primary));
  color: var(--fm-orange);
}

.fm-btn-add > span {
  font-size: 13px;
}

/* HEADER: Reverted to Blue/Navy Gradient */
.fm-header {
  height: 66px;
  background: linear-gradient(
    180deg,
    rgba(0, 51, 102, 0.85),
    rgba(0, 51, 102, 0.98)
  );
  border-bottom: 2px solid var(--fm-orange);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  z-index: 100;
}

.fm-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fm-header-info {
  text-align: right;
}

.fm-title {
  font-size: 16px;
  font-weight: 600;
}

.fm-subtitle {
  font-size: 12px;
  opacity: 0.7;
}

.fm-logo {
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* LAYOUT & PADDING */
.fm-main {
  flex: 1;
  padding: 16px;
  min-height: 0;
}

.fm-layout {
  display: flex;
  gap: 16px;
  height: 100%;
  position: relative;
}

.fm-sidebar {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 14px;
  border: 1px solid var(--fm-border);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.fm-panel-container {
  flex: 1;
  background: white;
  border-radius: 14px;
  border: 1px solid var(--fm-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.fm-panel-content {
  height: 100%;
  width: 100%;

  overflow: hidden;
}

/* SIDEBAR HEADER & SEARCH */
.fm-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--fm-border);
  background: #fcfdfe;
}

.fm-toggle-track {
  position: relative;
  padding: 4px;

  display: flex;
  background: #e2e8f0;
  border-radius: 20px;
  isolation: isolate;
}

.fm-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  /* background: var(--fm-navy); */
  background: linear-gradient(135deg, var(--fm-primary), var(--fm-secondary));
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.fm-toggle-track.is-v::before {
  transform: translateX(0);
}

.fm-toggle-track.is-e::before {
  transform: translateX(100%);
}

.fm-toggle-track.is-t::before {
  transform: translateX(200%);
}

.fm-toggle-track button {
  flex: 1;
  padding: 8px;

  cursor: pointer;
  z-index: 1;

  /* font-weight: 500; */
  font-size: 13px;
  color: #64748b;
  letter-spacing: 0.08em;

  border: none;
  background: transparent;

  transition: 0.2s;
}

.fm-toggle-track button.active {
  color: white;
}

.fm-search-container {
  height: 40px;

  margin-top: 15px;
  padding: 0 15px;

  display: flex;
  align-items: center;
  gap: 10px;
  background: white;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.fm-search-container.is-active,
.fm-search-container:focus-within {
  border-color: var(--fm-blue);
  border-color: #b1c7e5;

  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* box-shadow: 0 1px 3px rgba(0, 102, 204, 0.22); */
}

.search-icon {
  color: #94a3b8;
  font-size: 14px;
}

.fm-search-container input {
  border: none;
  background: none;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 300;
  width: 100%;
  outline: none;
}

.fm-search-clear {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 2px;
  color: rgba(15, 23, 42, 0.55);
}

.fm-list-area {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* SYSTEM OVERVIEW (2s Delay) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fm-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* Container for the Icon and Pulse */
/* Container */
.fm-empty-visual {
  animation: fadeInUp 0.7s ease forwards 1s;
  opacity: 0;
  position: relative;
  /* Essential for child absolute positioning */
  width: 80px;
  height: 80px;
  background: rgba(0, 51, 102, 0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  /* Centers the container itself */
}

/* Icon */
.fm-empty-visual i {
  font-size: 32px;
  color: var(--fm-navy);
  z-index: 2;
  line-height: 1;
  /* Prevents icon font-size from pushing boundaries */
}

/* The Fixed Pulse Ring */
.fm-pulse-ring {
  position: absolute;
  /* Place the top-left corner in the dead center */
  top: 50%;
  left: 50%;
  /* Set fixed size to match parent exactly */
  width: 80px;
  height: 80px;
  border: 1px solid var(--fm-navy);
  border-radius: 50%;
  /* Anchor point for scale is now truly center because of the translate below */
  animation: pulse-fixed 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

@keyframes pulse-fixed {
  0% {
    /* We must keep -50% -50% in every frame to keep it centered */
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

.fm-empty-title {
  opacity: 0;
  margin-top: 20px;

  color: var(--fm-navy);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;

  animation: fadeInUp 0.7s ease forwards 1.2s;
}

.fm-empty-text {
  max-width: 320px;
  margin-top: 10px;
  opacity: 0;

  text-align: center;
  color: #4d5764;
  font-size: 14px;
  line-height: 1.6;

  animation: fadeInUp 0.7s ease forwards 1.4s;
}

.fm-empty-stats {
  animation: fadeInUp 0.7s ease forwards 1.6s;
  opacity: 0;
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.fm-stat-box {
  min-width: 120px;
  padding: 15px 25px;

  text-align: center;

  background: #f8fafc;
  border: 1px solid var(--fm-border);
  border-radius: 12px;
}

.fm-stat-box .label {
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(36, 45, 66, 0.75);
  letter-spacing: 0.08em;

  display: block;
}

.fm-stat-box .count {
  font-size: 20px;
  font-weight: 700;
  color: var(--fm-navy);
}

/* Responsive Panel */
@media (max-width: 820px) {
  .fm-sidebar {
    flex: 1;
  }

  .fm-panel-container {
    position: fixed;
    inset: 70px 10px 10px 10px;
    z-index: 200;
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .panel-open .fm-panel-container {
    transform: translateY(0);
  }

  .fm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
  }

  .fm-subtitle {
    font-size: 11.5px;
  }
}
.vcl-root {
  --accent: #003366;
  --bg-soft: #f8fafc;
  --text-main: #1e293b;
  --text-dim: #64748b;
  
  font-family: 'Inter', sans-serif;
  height: 100%;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
}

/* Header & Search */
.vcl-header {
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  background: white;
  border-bottom: 1px solid #f1f5f9;
}

.vcl-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.vcl-icon {
  position: absolute;
  left: 14px;
  color: var(--text-dim);
  font-size: 14px;
}

.vcl-input {
  width: 100%;
  padding: 10px 40px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.vcl-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.05);
  outline: none;
}

.vcl-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
}

.vcl-btn-add {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.vcl-btn-add:active { transform: scale(0.9); }

/* Grid Layout */
.vcl-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: none;
}
.vcl-body::-webkit-scrollbar { display: none; }

.vcl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Empty State */
.vcl-center {
  height: 100%;
  display: grid;
  place-items: center;
}

.vcl-empty-state {
  text-align: center;
  margin-top: 80px;
}

.vcl-empty-art {
  font-size: 50px;
  color: #e2e8f0;
  margin-bottom: 16px;
}

.vcl-empty-state h3 {
  font-weight: 500;
  color: var(--text-main);
  font-size: 18px;
}

.vcl-empty-state p {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 300;
}

.vcl-cta-empty {
  margin-top: 20px;
  padding: 10px 24px;
  background: #000;
  color: #fff;
  border-radius: 10px;
  border: none;
  font-weight: 400;
  cursor: pointer;
}

/* Card Entry Animation */
.vcl-card-anim {
  opacity: 0;
  animation: cardFadeIn 0.5s ease-out forwards;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}.v-card {
  --vc-primary: #003366;
  --vc-secondary: #0066cc;
  --vc-tertiary: #b7d3f0;

  --vc-text-main: #1e293b;
  --vc-text-secondary: rgba(0, 0, 0, 0.7);
  --vc-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --vc-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  width: 100%;
  position: relative;

  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  outline: none;
}

/* Interaction: Lift and Glow */
.v-card:hover {
  transform: translateY(-5px);
  border-color: #00336633;
  box-shadow: 0 20px 40px rgba(0, 51, 102, 0.06);
}

.v-card-chevron {
  position: absolute;
  top: 20px;
  right: 10px;

  color: #cbd5e1;
  font-size: 15px;
  transition: all 0.3s;
}

.v-card:hover .v-card-chevron {
  color: #003366;
  transform: translateX(3px);
}

.v-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v-card-icon {
  width: 48px;
  height: 48px;
  background: #f8fafc;
  color: #003366;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  transition: background 0.3s;
}

.v-card:hover .v-card-icon {
  background: #003366;
  color: #ffffff;
}

.v-card-title {
  flex: 1;
}

.v-card-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  color: rgba(15, 23, 42, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.v-card-rego {
  font-size: 16px;
  color: var(--vc-primary);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pills for data */
.v-card-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v-card-info-pill {
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  font-weight: 300;
}

.v-card-info-pill i {
  font-size: 14px;
}

.v-card-info-pill.service {
  background: #fff1f2;
  color: #e11d48;
}

.v-card-info-pill.service i {
  color: #fb7185;
}.ecl-root {
  --accent: #003366;
  --bg-soft: #f8fafc;
  --text-main: #1e293b;
  --text-dim: #64748b;

  font-family: 'Inter', sans-serif;
  height: 100%;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
}

/* Header & Search */
.ecl-header {
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  background: white;
  border-bottom: 1px solid #f1f5f9;
}

.ecl-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.ecl-icon {
  position: absolute;
  left: 14px;
  color: var(--text-dim);
  font-size: 14px;
}

.ecl-input {
  width: 100%;
  padding: 10px 40px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.ecl-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.05);
  outline: none;
}

.ecl-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
}

.ecl-btn-add {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.ecl-btn-add:active {
  transform: scale(0.9);
}

/* Body */
.ecl-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: none;
}

.ecl-body::-webkit-scrollbar {
  display: none;
}

/* Grid Layout (match VCL) */
.ecl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Loading */
.ecl-center {
  height: 100%;
  display: grid;
  place-items: center;
}

/* Empty State */
.ecl-empty-state {
  text-align: center;
  margin-top: 80px;
}

.ecl-empty-art {
  font-size: 50px;
  color: #e2e8f0;
  margin-bottom: 16px;
}

.ecl-empty-state h3 {
  font-weight: 500;
  color: var(--text-main);
  font-size: 18px;
}

.ecl-empty-state p {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 300;
}

.ecl-cta-empty {
  margin-top: 20px;
  padding: 10px 24px;
  background: #000;
  color: #fff;
  border-radius: 10px;
  border: none;
  font-weight: 400;
  cursor: pointer;
}

/* Card Entry Animation */
.ecl-card-anim {
  opacity: 0;
  animation: eclCardFadeIn 0.5s ease-out forwards;
}

@keyframes eclCardFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.ec-card {
  --ec-primary: #003366;
  --ec-secondary: #0066cc;
  --ec-tertiary: #b7d3f0;

  --ec-text-main: #1e293b;
  --ec-text-secondary: rgba(0, 0, 0, 0.7);
  --ec-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --ec-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  width: 100%;
  position: relative;

  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  outline: none;

  display: flex;
  flex-direction: column;
}

.ec-card:hover {
  transform: translateY(-4px);
  border-color: #00336633;
  box-shadow: 0 15px 30px rgba(0, 51, 102, 0.05);
}

/* Subtle Action Indicator */
.ec-chevron {
  position: absolute;
  top: 20px;
  right: 10px;

  color: #cbd5e1;
  font-size: 15px;
  transition: all 0.3s;
}

.ec-card:hover .ec-chevron {
  color: #003366;
  transform: translateX(3px);
}

.ec-top {
  width: 100%;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

/* Profile Image */
.ec-img-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ec-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
  flex-shrink: 0;
  transition: border-color 0.3s;
}

.ec-card:hover .ec-avatar-wrap {
  border-color: #003366;
}

.ec-avatar {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

/* Info Section */
.ec-content {
  margin-top: 10px;
  flex: 1;
  min-width: 0;
}

.ec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.ec-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ec-primary);

  /* Thin look */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-id-pill {
  padding: 2px 8px;

  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  color: rgba(15, 23, 42, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.02em;

  background: #f1f5f9;
  border-radius: 100px;
}

.ec-email {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  /* Extra thin for email */
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Focus State */
.ec-card:focus-visible {
  border-color: #003366;
  box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.08);
}

.vvm-shell {
  --vvm-primary: #003366;
  --vvm-secondary: #0066cc;
  --vvm-tertiary: #b7d3f0;

  --vvm-text-main: #1e293b;
  --vvm-text-secondary: rgba(0, 0, 0, 0.7);
  --vvm-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --vvm-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  --danger: #ff4d4d;
  --text-dim: #64748b;
  --bg: #f8fafc;

  position: relative;
  height: 100%;
  padding: 16px;

  overflow-y: auto;

  background: var(--bg);

  display: flex;
  flex-direction: column;

  font-family: 'Inter', sans-serif;
}

/* Minimalist Close */

.vvm-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;

  cursor: pointer;
  z-index: 10;
  color: #0066cc;
  color: #a9a9a9;

  background: #fff;
  border: 1px solid #e2e8f0;
  border: none;
  background: none;

  transition: all 0.6s ease;
}

.vvm-close-btn>i {
  font-size: 18px;
}

.vvm-close-btn:hover {
  color: #e74c3c;
  scale: 1.25;

  transform: rotate(180deg);
}

/* Main Card */

.vvm-card {
  position: relative;
  margin-top: 50px;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px #2c415680;

  display: flex;
  flex-direction: column;

  /* background-color: yellow; */
}

.vvm-image-wrap {
  position: absolute;
  top: -55px;
  left: 24px;

  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.15);
}

.vvm-image-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}

.vvm-badge {
  width: 120px;
  padding: 6px 14px;

  position: absolute;
  top: -20px;
  right: 24px;

  border-radius: 8px;
  background: var(--vvm-tertiary);
  box-shadow: 0 2px 4px rgba(0, 102, 204, 0.3);

  display: grid;
  place-items: center;
}

.vvm-id {
  color: var(--vvm-text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.vvm-meta {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.vvm-meta p {
  margin: 1px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  display: flex;
  flex-direction: row;
}

.vvm-meta p span:first-child {
  color: var(--text-dim);
}

.vvm-meta .vvm-meta-value {
  width: 80px;

  color: var(--vvm-primary);
  font-weight: 400;
  margin-left: 8px;
}

.vvm-data-area {
  margin-top: 38px;
  padding: 6px 12px;
}

/* Data Sections */

.vvm-section {
  margin-bottom: 12px;
}

.vvm-section header {
  margin-left: 6px;
  margin-bottom: 6px;

  color: var(--text-dim);
  font-size: 11px;
  /* font-weight: 500; */
  text-transform: uppercase;
  letter-spacing: 1px;

  display: flex;
  align-items: center;
  gap: 8px;

  /* background-color: red; */
}

.vvm-section header i {
  color: var(--vvm-primary);
  font-size: 14px;
}

.vvm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vvm-stat {
  background: #fcfdfe;
  border: 1px solid #f1f5f9;
  padding: 12px;
  border-radius: 12px;
}

.vvm-stat label {
  margin-bottom: 4px;

  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;

  display: block;
}

.vvm-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--vvm-primary);
}

.vvm-unit {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 4px;
}

.vvm-stat.urgent {
  background: #fff1f2;
  border-color: #ffe4e6;
}

.vvm-stat.urgent .vvm-val {
  color: var(--danger);
}

/* FOOTER ANIMATION - THE CORE */

.vvm-footer {
  flex-shrink: 0;
  height: 64px;

  margin-top: 20px;
  overflow: hidden;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px #2c415680;

  display: flex;
  align-items: center;

  /* transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); */
  transition: height 0.6s ease;
}

.vvm-footer.stage-transitioning {
  opacity: 0.5;
}

.vvm-footer.stage-confirm {
  height: 120px;
}

.vvm-footer-inner {
  width: 100%;
  padding: 0 16px;
}

.vvm-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.vvm-edit-cta {
  flex: 1;
  height: 44px;
  /* background: #000; */
  background: linear-gradient(135deg, var(--vvm-primary), var(--vvm-secondary));

  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vvm-edit-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(255, 102, 204, 0.22);
}

.vvm-delete-icon {
  width: 44px;
  height: 44px;
  background: #fff1f2;
  color: var(--danger);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vvm-delete-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(255, 102, 204, 0.22);
}

/* Confirm Pane */

.vvm-confirm {
  text-align: center;
}

.vvm-confirm p {
  color: var(--vvm-text-secondary);
  font-size: 12px;
  margin-bottom: 16px;
}

.vvm-confirm-btns {
  display: flex;
  gap: 10px;
}

.vvm-cancel-btn {
  flex: 1;
  height: 38px;

  cursor: pointer;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.82);

  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--vvm-shadow-sm);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vvm-cancel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.vvm-delete-btn {
  flex: 1;
  height: 38px;

  cursor: pointer;
  font-size: 12px;
  color: #fff;

  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: var(--danger);
  box-shadow: var(--vvm-shadow-danger);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vvm-delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(255, 102, 204, 0.22);
}

.animate-in {
  animation: slideUp 0.4s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vem-shell {
  --vem-primary: #003366;
  --vem-secondary: #0066cc;
  --vem-tertiary: #b7d3f0;
  --danger: #ff4d4d;
  --text-dim: #64748b;
  --bg: #f8fafc;

  --vem-text-main: #1e293b;
  --vem-text-secondary: rgba(0, 0, 0, 0.7);
  --vem-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --vem-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  position: relative;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
}

/* Close Button */

.vem-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;

  cursor: pointer;
  z-index: 10;
  color: #a9a9a9;

  border: 1px solid #e2e8f0;
  background: #fff;
  border: none;
  background: none; 

  transition: all 0.4s ease;
}

.vem-close-btn>i{
  font-size: 18px;
}

.vem-close-btn:hover {
  color: var(--danger);
  transform: rotate(180deg) scale(1.1);
}

/* Card Wrapper */

.vem-card {
  position: relative;
  margin-top: 50px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px #2c415680;
  display: flex;
  flex-direction: column;
}

/* Avatar - Circular variant for Employees */

.vem-image-wrap {
  position: absolute;
  top: -55px;
  left: 24px;
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  /* Circular for person */
  padding: 4px;
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.15);
}

.vem-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.vem-badge {
  width: 120px;
  padding: 6px 14px;

  position: absolute;
  top: -20px;
  right: 24px;

  border-radius: 8px;
  background: var(--vem-tertiary);
  box-shadow: 0 2px 4px rgba(0, 102, 204, 0.3);

  display: grid;
  place-items: center;
}

.vem-id {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

.vem-meta {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.vem-meta p {
  margin: 1px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  display: flex;
  flex-direction: row;
}

.vem-meta p span:first-child {
  color: var(--text-dim);
}

.vem-meta .vem-meta-value {
  width: 80px;

  color: var(--vem-primary);
  font-weight: 400;
  margin-left: 8px;
}

.vem-data-area {
  margin-top: 24px;
  padding: 20px;
}

.vem-profile-header {
  margin-bottom: 24px;
}

.vem-profile-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--vem-primary);
}

.vem-profile-header p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 300;
}

/* Data Grid */

.vem-section {
  margin-bottom: 20px;
}

.vem-section header {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vem-section header i {
  color: var(--vem-primary);
}

.vem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vem-stat {
  background: #fcfdfe;
  border: 1px solid #f1f5f9;
  padding: 12px;
  border-radius: 12px;
}

.vem-stat label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}

.vem-val {
  font-size: 14px;
  color: var(--vem-primary);
  font-weight: 500;
}

/* FOOTER ANIMATION */

.vem-footer {
  flex-shrink: 0;
  height: 64px;
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px #2c415680;
  display: flex;
  align-items: center;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.vem-footer.stage-transitioning {
  opacity: 0.5;
}

.vem-footer.stage-confirm {
  height: 120px;
}

.vem-footer-inner {
  width: 100%;
  padding: 0 16px;
}

.vem-actions {
  display: flex;
  gap: 12px;
}

.vem-edit-cta {
  flex: 1;
  height: 44px;
  background: linear-gradient(135deg, var(--vem-primary), var(--vem-secondary));
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.vem-edit-cta:hover {
  transform: translateY(-2px);
}

.vem-delete-icon {
  width: 44px;
  height: 44px;
  background: #fff1f2;
  color: var(--danger);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.vem-confirm {
  text-align: center;
}

.vem-confirm p {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.vem-confirm-btns {
  display: flex;
  gap: 10px;
}

.vem-cancel-btn,
.vem-delete-btn {
  flex: 1;
  height: 38px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;

  box-shadow: var(--vem-shadow-sm);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vem-cancel-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: var(--text-dim);
}

.vem-delete-btn {
  background: var(--danger);
  border: none;
  color: #fff;
  box-shadow: var(--vem-shadow-danger);
}

.vem-cancel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.vem-delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(255, 102, 204, 0.22);
}

.animate-in {
  animation: slideUp 0.4s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}.avm-v-shell {
  --avm-primary: #003366;
  --avm-secondary: #0066cc;
  --avm-tertiary: #b7d3f0;

  --avm-text-main: #1e293b;
  --avm-text-secondary: rgba(0, 0, 0, 0.7);
  --avm-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --avm-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avm-v-header {
  padding: 4px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f1f5f9;
}

.avm-v-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avm-v-title-section h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--avm-primary);
}

.avm-v-title-section p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.avm-v-close {
  margin-top: 10px;

  cursor: pointer;
  color: #a9a9a9;
  font-size: 18px;

  background: none;
  border: none;

  transition: all 0.6s ease;
}

.avm-v-close:hover {
  color: #e74c3c;
  scale: 1.25;

  transform: rotate(180deg);
}

.avm-v-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  overflow-y: auto;
}

/* Photo Section */
.avm-photo-section {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.avm-image-box {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 16px;
  border: 2px dashed #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}

.avm-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.avm-placeholder .avm-add-image {
  font-size: 1.2rem;
  color: #94a3b8;
}

.avm-placeholder span {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.avm-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avm-v-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: 0.2s;
}

.avm-image-box:hover .avm-v-overlay {
  opacity: 1;
}

/* Form Elements */
.avm-section-divider {
  margin-top: 10px;
  padding-bottom: 5px;

  font-size: 11px;
  font-weight: 600;
  color: #003366;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  border-bottom: 1px solid #f1f5f9;
}

.avm-v-group {
  width: 100%;
}

.avm-v-group.div-grid-horizontal {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: center;
}

.avm-v-group label {
  margin-bottom: 6px;
  display: block;

  font-size: 11px;
  /* font-weight: 500; */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.avm-v-group input,
.avm-v-group select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
}

.avm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Footer */
.avm-v-footer {
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
}

.avm-btn-secondary,
.avm-btn-primary {
  flex: 1;
  height: 48px;
  cursor: pointer;

  font-size: 13.5px;
  border-radius: 16px;
  letter-spacing: 0.08em;
  font-weight: 500;

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.avm-btn-secondary:hover,
.avm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.avm-btn-secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.avm-btn-primary {
  background: #003366;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.avm-btn-primary:disabled {
  opacity: 0.6;
}.aem-v-shell {
  --aem-primary: #003366;
  --aem-secondary: #0066cc;
  --aem-tertiary: #b7d3f0;

  --aem-text-main: #1e293b;
  --aem-text-secondary: rgba(0, 0, 0, 0.7);
  --aem-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --aem-shadow-danger: 0 1px 2px rgba(255, 77, 77, 0.8);

  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aem-v-header {
  padding: 4px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f1f5f9;
}

.aem-v-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.aem-v-title-section h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--aem-primary);
}

.aem-v-title-section p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.aem-v-close {
  margin-top: 10px;

  cursor: pointer;
  color: #a9a9a9;
  font-size: 18px;

  background: none;
  border: none;

  transition: all 0.6s ease;
}

.aem-v-close:hover {
  color: #e74c3c;
  scale: 1.25;
  transform: rotate(180deg);
}

.aem-v-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  overflow-y: auto;
}

/* Avatar Style */
.aem-photo-section {
  display: flex;
  justify-content: center;
}

.aem-avatar-circle {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  border: 2px dashed #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}

.aem-avatar-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.aem-avatar-placeholder span {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}

.aem-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aem-v-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: 0.2s;
}

.aem-avatar-circle:hover .aem-v-overlay {
  opacity: 1;
}

/* Form Grouping */
.aem-v-group {
  width: 100%;
}

.aem-v-group label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.aem-v-group input {
  width: 100%;
  height: 45px;
  padding: 0 14px;
  outline: none;

  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  transition: all 0.2s;
}

.aem-v-group select {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ff0000;
  outline: none;
  font-size: 14px;
}

.aem-v-group input:focus {
  background: #fff;

  border-color: #b1c7e5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Footer */
.aem-v-footer {
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 20px;
}

.aem-btn-secondary,
.aem-btn-primary {
  flex: 1;
  height: 48px;
  cursor: pointer;

  font-size: 13.5px;
  border-radius: 16px;
  letter-spacing: 0.08em;
  font-weight: 500;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.aem-btn-secondary:hover,
.aem-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
  border-color: rgba(0, 102, 204, 0.22);
}

.aem-btn-secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.aem-btn-primary {
  background: #003366;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.aem-btn-primary:disabled {
  opacity: 0.6;
}
.uvm-v-shell {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.uvm-v-header {
  padding: 10px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f1f5f9;
}

.uvm-v-asset {
  display: flex;
  align-items: center;
  gap: 12px;
}

.uvm-v-image-box {
  position: relative;
  width: 90px;
  height: 90px;
  overflow: hidden;
  cursor: pointer;

  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.uvm-v-image-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.uvm-v-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: 0.2s;
}

.uvm-v-image-box:hover .uvm-v-overlay {
  opacity: 1;
}

.uvm-v-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.uvm-v-title span {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.uvm-v-close {
  margin: 5px;

  color: #cbd5e1;
  cursor: pointer;
  font-size: 18px;

  background: none;
  border: none;

  transition: all 0.6s ease;
}

.uvm-v-close:hover {
  color: #e74c3c;
  scale: 1.25;

  transform: rotate(180deg);
}

.uvm-v-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
}

.uvm-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #003366;
  text-transform: uppercase;
  margin-top: 10px;
  border-left: 3px solid #003366;
  padding-left: 8px;
}

.uvm-v-group {
  width: 100%;
}

.uvm-v-group.div-group-horizontal {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 8px;
}

.uvm-v-group label {
  margin-bottom: 6px;
  display: block;

  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #64748b;

}

.uvm-v-group input,
.uvm-v-group select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
}

.uvm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.uvm-v-footer {
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
}

.uvm-v-btn {
  flex: 1;
  height: 46px;
  cursor: pointer;

  font-size: 14px;
  font-weight: 500;

  border-radius: 20px;
  transition: 0.2s;
}

.uvm-v-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.uvm-v-btn.secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.uvm-v-btn.primary {
  background: #003366;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.uvm-v-btn:disabled {
  opacity: 0.5;
}.uem-v-shell {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.uem-v-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f1f5f9;
}

.uem-v-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.uem-v-avatar {
  position: relative;
  width: 90px;
  height: 90px;
  overflow: hidden;
  cursor: pointer;

  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.uem-v-avatar img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.uem-v-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: 0.2s;
}

.uem-v-avatar:hover .uem-v-overlay {
  opacity: 1;
}

.uem-v-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}

.uem-v-title span {
  font-size: 11px;
  color: #94a3b8;
}

.uem-v-close {
  margin: 5px;

  color: #cbd5e1;
  cursor: pointer;
  font-size: 18px;

  background: none;
  border: none;

  transition: all 0.6s ease;
}

.uem-v-close:hover {
  color: #e74c3c;
  scale: 1.25;

  transform: rotate(180deg);
}

/* The Vertical Form */
.uem-v-body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  overflow-y: auto;
}

.uem-v-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.uem-v-group label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.uem-v-group input {
  width: 100%;
  height: 45px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.uem-v-group input:focus {
  border-color: #003366;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.05);

  border-color: #b1c7e5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Footer Buttons */
.uem-v-footer {
  padding: 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
}

.uem-v-btn {
  flex: 1;
  height: 46px;
  cursor: pointer;

  font-size: 14px;
  font-weight: 500;

  border-radius: 20px;
  transition: 0.2s;
}

.uem-v-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  border-color: rgba(0, 102, 204, 0.22);
}

.uem-v-btn.secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.uem-v-btn.primary {
  background: #003366;
  border: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.2);
}

.uem-v-btn:active {
  transform: scale(0.98);
}.playhistory-div-main-container {
  height: 100vh;

  overflow: hidden;
  font-family: 'Poppins', sans-serif;

  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  /* background: linear-gradient(to bottom, #3c657b, #191d26); */
  /* background: linear-gradient(to bottom, #4d82b5, #15212f); */
  /* background: #222641; */
  /* background: linear-gradient(to bottom, #3c657b, #191d26); */
  /* background: #243c49; */
}

/******* header section ************/
.playhistory-div-header {
  width: 380px;
  min-width: 380px;
  height: 50px;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 1000;
  padding: 10px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  background: linear-gradient(to bottom, #355366, #032940);

  box-shadow: 1px 0.5px 0.5px 0.5px rgba(241, 141, 17, 1),
    2em 4em 4em -2em rgba(241, 141, 17, 0.5),
    1em 2em 2em -2.5em rgba(241, 141, 17, 0.5);
}

.playhistory-div-header>img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.playhistory-div-header>span {
  margin-top: 5px;

  color: white;
  font-size: 18px;
  letter-spacing: 1px;
}

.playhistory-div-mobile-controls {
  flex: 1;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.playhistory-div-mobile-controls-btn {
  width: 40px;
  height: 40px;

  cursor: pointer;
  border: none;
  border-radius: 0.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
  box-shadow: -2px 2px 3px 1px rgb(0, 0, 0, 0.4),
    -2px 2px 4px 1px rgb(0, 0, 0, 0.6), -2px 2px 8px 1px rgb(0, 0, 0, 0.6);

  transform: scale(0.95);
  transition: transform 0.3s ease, box-shadow 0.4s ease;

  &:hover {
    transform: scale(1);
    /* box-shadow: 0px 2px 0.5px 0.5px rgba(241, 141, 17, 1),
      2em 4em 6em -1em rgba(241, 141, 17, 1); */

    box-shadow: 0px 0.5px 2px 0.5px rgb(241, 141, 17),
      0px 0.5px 2px 0.5px rgb(241, 141, 17),
      0px 0.5px 2px 0.5px rgb(241, 141, 17);
  }
}

/********* end of header section ***********/

/* left side details widget section */
.playhistory-div-widget-section {
  width: 380px;
  min-width: 380px;
  height: calc(100% - 50px);

  margin-top: 50px;
  z-index: 1001;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  background-color: #fcfcfc;
}

/* input timestamp section */
.playhistory-div-input-widget {
  width: 350px;
  min-width: 350px;
  height: 80px;
  min-height: 80px;

  margin-top: 5px;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  /* border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680; */
}

.playhistory-div-input-widget-field {
  width: 80%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.playhistory-div-input-widget-field>span {
  width: 50px;

  color: #096c96;
  font-size: 1rem;
  text-align: center;
}

.playhistory-div-input-widget-field>input {
  width: 220px;
  padding: 2px 8px;
  outline: none;

  border-radius: 4px;
  border: 1px solid #ccc;

  transition: all 0.5s linear;

  &:focus {
    border: 1px solid #f18d11;
  }
}

.playhistory-div-input-widget-search {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 4px;
  right: 0px;

  cursor: pointer;
  border: none;

  color: #808080;
  font-size: 13px;
  font-weight: 300;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 4px;
  box-shadow: 0 2px 4px #2c415680;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 2px 4px #2c4156;
    color: #f18d11;
  }
}

/* end of input timestamp section */

/*widget section for address */
.playhistory-div-address-widget {
  width: 350px;
  min-width: 350px;
  height: 70px;
  min-height: 70px;

  margin-top: 5px;

  display: flex;

  border-radius: 2px;
  /* background-color: #f8f9f9; */
  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
}

.address-widget-div-card {
  width: 100%;

  position: relative;
  display: flex;
  align-items: center;
}

.address-widget-div-card>i {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.8rem;
  color: #fb8018;
}

.address-widget-div-streetview {
  width: 60px;
  height: 60px;

  cursor: pointer;
  border: none;
  margin-right: 6px;

  color: #808080;
  font-size: 13px;
  font-weight: 300;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 4px;
  box-shadow: 0 2px 4px #2c415680;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 2px 4px #2c4156;
    color: #f18d11;
  }
}

.address-widget-div-card .address-widget-span-address-name {
  flex: 1;
  margin: 2px 6px 2px 18px;
  text-align: center;

  color: #5d7584;
  font-size: 14px;
}

/*******end of address widget ***********/

/* widget section for vehicle details*/
.playhistory-div-vehicle-widget {
  width: 350px;
  min-width: 350px;

  margin-top: 10px;
  cursor: pointer;

  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;

  transition: box-shadow 0.5s ease;

  &:hover {
    box-shadow: 1px 2px 4px #fa7f00;
  }
}

.vehicle-widget-div-card {
  width: 100%;
  padding: 5px 10px 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.vehicle-widget-div-header {
  width: 98%;
  align-self: flex-start;
}

.vehicle-widget-div-header>span:nth-child(1) {
  /* color: #88b0c0;
  font-size: 13.5px;
  font-weight: 300; 
  margin: 0 6px;*/

  color: #fb8018;
  font-size: 12px;
  letter-spacing: 1px;
  /* align-self: flex-end; */
}

.vehicle-widget-div-header>span:nth-child(2) {
  font-size: 14px;
  color: #096c96;
}

.vehicle-widget-div-header .horizontal-line {
  height: 1px;
  background-color: #305062;
  box-shadow: 0px 0px 2px 0px #305062;
}

.vehicle-widget-div-body {
  width: 100%;
  margin-top: 10px;
  display: flex;
}

.vehicle-widget-div-body>img {
  width: 150px;
  height: auto;

  margin-left: 10px;
  object-fit: contain;
  align-self: flex-end;

  border-radius: 4px;
}

.vehicle-widget-div-weight-section {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.vehicle-widget-div-axle {
  width: 100%;
  margin-top: 5px;

  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.vehicle-widget-div-axle-name {
  width: 80px;
  /* color: #666666; */
  font-size: 13px;
  text-align: start;
  display: inline-block;
}

.vehicle-widget-div-axle-weight {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  /* float: right; */
  letter-spacing: 0.25px;
}

.vehicle-widget-div-axle-weight>span {
  color: #096c96;
  font-size: 11px;
}

.vehicle-widget-card-total {
  width: 100%;
  margin-top: 5px;

  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* box-shadow: 0 2px 4px 4px rgba(44, 65, 86, 1); */
  border-radius: 4px;
  border: 1px solid #fb8018;
  background: linear-gradient(to bottom, #0c2637, #081925);
  box-shadow: 0px 2px 4px 2px rgb(6, 86, 121);
}

.vehicle-widget-total-weight-name {
  color: #fb8018;
  font-size: 12px;
  align-self: center;
}

.vehicle-widget-total-weight-value {
  font-size: 16px;
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  /* justify-content: space-between; */
}

/* end of widget section for vehicle details */

/* vehicle parameters widget section */
.playhistory-div-parameter-widget {
  width: 350px;
  min-width: 350px;
  height: 90px;
  min-height: 90px;

  margin-top: 10px;

  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;

  display: flex;
}

.playhistory-div-parameter-widget .vertical-line {
  width: 1px;
  height: 40px;

  margin: 0 10px;
  align-self: center;

  background-color: #355366;
  box-shadow: 0px 0px 2px 0px #032940;
}

.playhistory-div-parameter-field {
  flex: 1;

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* background-color: yellowgreen; */
}

.playhistory-div-parameter-field>span:nth-child(1) {
  position: absolute;
  top: 1px;
  left: 1px;

  font-weight: 300;

  color: #fb8018;
  font-size: 11px;
  letter-spacing: 1px;
}

.playhistory-div-parameter-field>span:nth-child(3) {
  /* color: #333; */
  color: #096c96;

  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.25px;
}

.playhistory-div-parameter-speed {
  margin-top: 6px;

  color: #032940;
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  transform: skew(-2deg);

  /* background-color: yellowgreen; */
}

.playhistory-div-status-icon {
  width: 50px;
  height: 14px;
  margin-top: 10px;
  margin-bottom: 4px;

  border: 1px #081925 solid;

  border-radius: 7px;
  background-color: #ec2d01;

  box-shadow: 0px 1px 2px #032940;

  transition: all 0.3s ease;
}

/* ujj todo compass*/
.playhistory-div-map-compass-outer-rim {
  /* position: absolute;
  bottom: 20px;
  right: 5px;
  z-index: 999; */

  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 8px;

  /* background: linear-gradient(180deg, #f1f1f1 0%, #ffffff 100%);
  box-shadow: -4px 4px 3px 1px rgb(0, 0, 0, 0.4),
    -8px 8px 4px 1px rgb(0, 0, 0, 0.6), -12px 12px 8px 1px rgb(0, 0, 0, 0.6); */

  scale: 0.95;
  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
  box-shadow: -2px 2px 3px 1px rgb(0, 0, 0, 0.4),
    -2px 2px 4px 1px rgb(0, 0, 0, 0.6), -2px 2px 8px 1px rgb(0, 0, 0, 0.6);
}

.playhistory-div-map-compass-inner-rim {
  border-radius: 50%;
  scale: 0.98;
  border: solid red 1px;
  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
}

.playhistory-div-map-compass {
  /* border: solid #ff5f00 3.5px; */
  width: 60px;
  height: 60px;
  border-radius: 50%;

  position: relative;

  scale: 0.97;

  box-shadow: 2px -2px 2px -1px rgb(108, 115, 129, 0.8),
    -3px 3px 4px 1px rgb(0, 0, 0, 0.5),
    inset -2px 2px 2px 0 rgb(108, 115, 129, 0.2),
    inset 2px -2px 2px 0px rgb(0, 0, 0, 0.3);
}

.playhistory-div-map-compass>span {
  color: white;
  font-weight: 200;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}

.playhistory-div-map-compass>span:nth-child(1) {
  position: absolute;
  top: -3px;
  left: 26px;
}

.playhistory-div-map-compass>span:nth-child(2) {
  position: absolute;
  top: 22px;
  right: 3px;
}

.playhistory-div-map-compass>span:nth-child(3) {
  position: absolute;
  left: 26px;
  bottom: -4px;
}

.playhistory-div-map-compass>span:nth-child(4) {
  position: absolute;
  left: 2px;
  top: 22px;
}

.playhistory-div-map-compass>img {
  position: absolute;
  left: 24px;
  top: 13px;

  height: 35px;

  transition: transform 0.3s ease;
}

/* end of compass */

/*******end of parameter widget section ********/

/* widget for showing analytics related details */
.playhistory-div-analytics-widget {
  width: 350px;
  min-width: 350px;
  height: 110px;
  min-height: 100px;

  margin-top: 10px;
  cursor: pointer;

  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;

  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  transition: box-shadow 0.5s ease;

  &:hover {
    /* box-shadow: 1px 2px 4px #2c4156; */
    box-shadow: 1px 2px 4px #fa7f00;
  }
}

.playhistory-div-analytics-widget>span {
  position: absolute;
  top: 5px;
  left: 8px;

  color: #fb8018;
  font-size: 12px;
  letter-spacing: 1px;
}

/***** end of analytics widget *****/

/* widget for time related status used in chart*/
.playhistory-div-chart-widget {
  width: 350px;
  min-width: 350px;
  height: 110px;
  min-height: 100px;

  margin-top: 10px;
  cursor: pointer;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  transition: box-shadow 0.5s ease;

  &:hover {
    /* box-shadow: 1px 2px 4px #2c4156; */
    box-shadow: 1px 2px 4px #fa7f00;
  }

  animation: 1.5s ease-out 0s 1 FadeIn;
}

.playhistory-div-chart-widget>span>i {
  font-size: 0.8rem;
  color: #fb8018;
  font-weight: 600;
}

.playhistory-div-chart-widget>span {
  position: absolute;
  top: 5px;
  left: 8px;

  color: #fb8018;
  font-size: 12px;
  letter-spacing: 1px;
}

/* end of chart widget section */

/**********play history control widget*******/
.playhistory-div-control-widget {
  width: 350px;
  min-width: 350px;
  height: 65px;
  min-height: 65px;
  margin-top: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-radius: 2px;

  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  animation: 1.5s ease-out 0s 1 FadeIn;
}

.playhistory-div-control-widget .playhistory-div-control-header {
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.playhistory-div-control-header>span {
  align-self: flex-end;
  font-size: 12px;
}

.playhistory-div-control-header>span:nth-child(1) {
  margin-left: 6px;
  color: #fb8018;
  letter-spacing: 1px;
}

.playhistory-div-control-header>span:nth-child(2) {
  margin-right: 35px;
}

.playhistory-div-control-header>span:nth-child(3) {
  margin-right: 6px;
}

.playhistory-div-control-btns {
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;

}

.playhistory-div-control-btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;

  display: flex;
  align-items: center;
}

.playhistory-div-control-btn>i {
  font-size: 2.5rem;

  color: #355366;
  filter: drop-shadow(0px 0px 4px rgba(152, 243, 248, 0.1));

  transform: scale(0.9);
  transition: transform 0.4s ease, box-shadow 0.4s ease;

  &:hover {
    color: #f18d11;
    transform: scale(1);
  }
}

/*********** end of control widget for playing history ***********/

/**********timestamp section ************/
.playhistory-span-status-timestamp {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #000;
}

/******#####end of widget section #####****/

/*center body section of play history */
.playhistory-div-body-section {
  /*horizontally*/
  flex: 1;
  height: 100%;

  display: flex;
  flex-direction: column;
}

/********* upper section of history ********/
.playhistory-div-body-upper {
  /* vertical */
  flex: 1;

  overflow: hidden;

  display: flex;
  flex-direction: row;

  background-color: #d2d2d2;
  transition: height 0.5s;
}

/* trackmap section for showing vehicle on map in tracking manner */
.playhistory-div-trackmap {
  /* row */
  flex: 1;

  position: relative;

  animation: 2s ease-out 0s 1 FadeInMap;
}

.playhistory-div-trackmap>img {
  position: absolute;
  top: 16px;
  right: 5px;
  z-index: 1001;

  width: 150px;
  height: auto;
}

.playhistory-span-status-timestamp-map {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1001;

  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #000;

  display: none;
}

.playhistory-div-trackmap .leaflet-popup {
  margin: 0;
  bottom: -12px !important;
}

.playhistory-div-trackmap .leaflet-popup .leaflet-popup-content-wrapper {
  /* padding: 0; */
}

.playhistory-div-trackmap .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: 4px 4px 2px;
  width: 70px !important;
}

.playhistory-div-trackmap .leaflet-popup .leaflet-popup-tip-container {
  /* transform: translateY(-17px); */
}

.playhistory-div-trackmap .leaflet-popup .leaflet-popup-close-button {
  color: red;
}

.playhistory-div-trackmap .leaflet-fade-anim .leaflet-popup {
  transition: opacity 1s linear;
}

.map-custom-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* end of trackmap */
/**********end of upper section*********/

/****************lower section of this play history page***********/
.playhistory-div-body-lower {
  height: 50%;

  overflow: hidden;

  display: flex;
  flex-direction: row;

  background-color: #d2d2d2;
}

/**********end of lower section*********/



/* details */
.playhistory-div-vehicle-details {
  width: 400px;
  height: calc(100% - 10px);
  margin-left: 5px;
  margin-top: 5px;

  overflow: hidden;
  z-index: 2001;

  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: -1px 2px 3px 0.5px #475863;

  /* Transition for the property */
  transform: translateX(0px);

  /* Added transition for smooth animation */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playhistory-div-vehicle-details.hidden {
  width: 0px;
  opacity: 0;
  transform: translateX(400px);
}

.vehicledetails-div-main-container {
  width: 100%;
  height: 100%;
}

.vehicledetails-div-card {
  width: 100%;
  height: 100%;

  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.vehicledetails-div-header {
  width: 100%;
  margin-top: 5px;
  position: relative;
}

.vehicledetails-div-headerfield {
  display: flex;
  font-size: 12.5px;
}

.vehicledetails-div-btnCancel {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;

  cursor: pointer;

  color: #fa7f00;
  font-size: 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  scale: 1.6;

  border: none;
  transition: all 0.6s ease;
  /* background-color: red; */

  &:hover {
    color: #e74c3c;
    scale: 1.5;

    transform: rotate(180deg);
  }
}

.vehicledetails-div-img-rego {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: yellowgreen; */
}

.vehicledetails-div-img-rego>img {
  width: auto;
  height: 120px;
  border-radius: 5px;
  object-fit: cover;
}

.vehicledetails-div-img-rego>span {
  align-self: flex-end;
  margin-right: 25px;

  color: #096c96;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.vehicledetails-div-card .horizontal-lines {
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.vehicledetails-div-card .horizontal-lines>span {
  width: 150px;
  height: 1px;

  /* background-color: #355366;
  box-shadow: 0px 0px 2px 0px #032940; */
  background-color: #305062;
  box-shadow: 0px 0px 2px 0px #305062;
}

.vehicledetails-div-field {
  width: 100%;
  margin-top: 8px;

  display: flex;
  gap: 10px;
  justify-content: center;
}

.vehicledetails-div-field>span:nth-child(1) {
  width: 150px;
  /* color: #666666; */
  font-size: 13px;
  text-align: start;
  /* background-color: yellowgreen; */
}

.vehicledetails-div-field>span:nth-child(2) {
  width: 100px;

  color: #000;
  font-size: 14px;
  font-weight: 500;
  /* float: right; */
  letter-spacing: 0.25px;

  /* background-color: yellowgreen; */
}

.vehicledetails-div-field>span:nth-child(2)>span {
  color: #096c96;
  font-size: 11px;
}

/*********** end of vehicle details section**********/

.playhistory-div-control-slider {
  border: 1px solid #6d7790;
  margin: 6px;
  border-radius: 10px;
}


.playhistory-div-analytics {
  width: 400px;
  height: calc(100% - 10px);
  margin-right: 5px;
  margin-top: 5px;
  z-index: 2001;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  background-color: white;
  /* box-shadow: 2px 2px 0.5px 0.5px rgb(255, 115, 0); */
  box-shadow: 1px 2px 3px 0.5px #475863;

  /* Transition for the property */
  transform: translateX(0px);

  /* Added transition for smooth animation */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playhistory-div-analytics.hidden {
  width: 0px;
  opacity: 0;
  transform: translateX(-200px);
}

.playhistory-div-analytics>span {
  margin: 10px 0 0 10px;
  letter-spacing: 1px;
  font-size: 14px;
  align-self: flex-start;
  color: #fb8018;
}

.playhistory-div-analytics-card {
  width: 100%;
  height: 100%;

  /* overflow: hidden; */
  position: relative;
}

.playhistory-div-analytics-card-details {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: -400px;

  border-radius: 2px;
  background-color: #fcfcfc;
  box-shadow: 0 2px 4px #2c415680;
  margin-right: 20px;

  /* Added transition for smooth animation */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playhistory-div-analytics-card-details.active {
  left: 0px;
}

.playhistory-div-analytics-table {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: scroll;
  scrollbar-width: thin;
  /* scrollbar-color: #2f5171 #15212f; */
  margin-top: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transition: all 0.5s linear;
}

.playhistory-div-analytics-table::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.playhistory-div-analytics-table::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  box-shadow: inset 0 0 5px grey;
}

/* Handle */
.playhistory-div-analytics-table::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.playhistory-div-analytics-table::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.playhistory-div-analytics-table .div-analytics-axle {
  width: 100%;
  height: 60px;

  margin-bottom: 2px;

  display: flex;
  align-items: center;

  animation: 2s ease-out 0s 1 FadeIn;
  border-bottom: 1px solid #121e241f;
}

.playhistory-div-analytics-table .div-analytics-axle:last-child {
  border-bottom: none;
}

.div-analytics-axle>span:nth-child(1) {
  width: 80px;
  overflow-wrap: break-word;
  margin-left: 10px;

  color: #096c96;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.div-analytics-axle .vertical-line {
  width: 1px;
  height: 40px;

  margin: 0 10px;

  background-color: #355366;
  box-shadow: 0px 0px 2px 0px #032940;
}

.div-analytics-axle .div-analytics-axle-body {
  flex: 1;
  margin: 0 10px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.div-analytics-axle-body .div-analytics-axle-max-weight,
.div-analytics-axle-faults {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div-analytics-axle-body .div-analytics-axle-max-weight>span:nth-child(1) {
  color: #808080;
  font-size: 13px;
  letter-spacing: 0.25px;
}

.div-analytics-axle-body .div-analytics-axle-max-weight>span:nth-child(2) {
  color: #000;
  font-size: 13.5px;
  letter-spacing: 0.25px;
}

.div-analytics-axle-body .div-analytics-axle-max-weight>span>span {
  color: #096c96;
  font-size: 12px;
  margin-left: 5px;
  font-weight: 300;
}

.div-analytics-axle-body .div-analytics-axle-faults>span:nth-child(1) {
  color: #808080;
  font-size: 13px;
  letter-spacing: 0.25px;
}

.div-analytics-axle-body .div-analytics-axle-faults>span:nth-child(2) {
  color: #d45732;
  font-size: 13.5px;
  letter-spacing: 0.25px;
}

/* section for showing route of travel in map */
.playhistory-map-span-header {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 999;

  padding: 4px 6px;
  color: white;
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 300;

  border-radius: 0.8em;
  /* background: linear-gradient(to bottom, #1e4b69, #081925);
  box-shadow: 0px 1px 6px 1px rgb(6, 47, 64); */

  background: linear-gradient(205deg, rgb(52, 59, 99) 0%, rgb(27, 30, 52) 100%);
  box-shadow: 0px 1px 6px 1px rgb(6, 47, 64);
}

.playhistory-div-chart {
  width: 400px;
  height: calc(100% - 10px);
  margin-left: 5px;
  margin-top: 5px;
  z-index: 2001;

  display: flex;
  flex-direction: column;

  background-color: white;
  /* box-shadow: 2px 2px 0.5px 0.5px rgb(255, 115, 0); */
  box-shadow: -1px 2px 3px 0.5px #475863;

  /* Transition for the property */
  transform: translateX(0px);

  /* Added transition for smooth animation */
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playhistory-div-chart.hidden {
  width: 0px;
  opacity: 0;
  transform: translateX(400px);
}

.playhistory-div-chart>span {
  margin-left: 20px;
  margin-top: 10px;
  align-self: flex-start;

  color: #fb8018;
  font-size: 14px;
  letter-spacing: 1px;
}

.playhistory-div-chart-card {
  flex: 1;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.playhistory-div-chart-bar {
  width: 95%;
  flex: 1;
}

.playhistory-div-chart-count {
  width: 100%;
  height: 80px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.playhistory-div-chart-count .vertical-line {
  width: 1px;
  height: 40px;

  margin-top: 10px;

  background-color: #355366;
  box-shadow: 0px 0px 2px 0px #032940;
}

.playhistory-div-chart-count>div {
  width: 110px;
  height: 100%;

  font-size: 14px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.playhistory-div-chart-count>div>span:nth-child(1) {
  height: 20px;
  margin: 10px 0px 5px;

  font-size: 14px;
  letter-spacing: 0.75px;
  font-weight: 400;
}

.playhistory-div-chart-count>div>span:nth-child(2) {
  width: 100%;
  flex: 1;
  color: #000;
  font-size: 13px;
  letter-spacing: 0.25px;
}

.playhistory-div-chart-count>div.online>span:nth-child(1) {
  /* color: #23ac05; */
  color: #096c96;

  /* background: linear-gradient(to bottom, #23ac05, #0b3701);
  box-shadow: 1px 2px 0.5px 0.5px rgb(2, 48, 7); */
}

.playhistory-div-chart-count>div.idle>span:nth-child(1) {
  /* color: #fa7f00; */
  color: #096c96;

  /* background: linear-gradient(to bottom, #fa7f00, #ff5f00);
  box-shadow: 2px 2px 0.5px 0.5px rgb(255, 115, 0);
  box-shadow: 1px 2px 0.5px 0.5px rgb(175, 79, 0); */
}

.playhistory-div-chart-count>div.offline>span:nth-child(1) {
  /* color: #b90e0a; */
  color: #096c96;

  /* background: linear-gradient(to bottom, #ec2d01, #b90e0a);
  box-shadow: 1px 2px 0.5px 0.5px rgb(134, 25, 1); */
}

/* routemap section for showing vehicle in the overall route */
.playhistory-div-routemap {
  flex: 1;

  position: relative;

  /* transition: transform 0.4s ease, box-shadow 0.4s ease; */
  animation: 2s ease-out 0s 1 FadeInMap;
  transition: all 0.5s ease;
}

.playhistory-div-routemap.visible {
  bottom: 0;
}

/* end of routemap */

/* for animation keyframe */
@keyframes FadeIn {
  0% {
    opacity: 0.5;
    scale: 0.3;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes FadeInMap {
  0% {
    opacity: 0.5;
    scale: 0.3;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

/* for smaller screen */
@media (max-width: 767px) {
  .playhistory-div-header {
    /* width: 100%; */
    display: none;
  }

  .playhistory-div-route-details-header>img {
    position: fixed;
    top: 60px;
    left: 60px;
  }

  .playhistory-div-widget-section {
    width: 100vw;
    height: 50vh;

    position: absolute;
    bottom: 0;
    left: 0;

    flex-direction: column;
    flex-wrap: wrap;
  }

  .playhistory-div-input-widget {
    margin-top: 2px;
  }

  .playhistory-div-address-widget {
    margin-top: 2px;
  }

  .playhistory-div-vehicle-widget {
    margin-top: 5px;
  }

  .playhistory-div-parameter-widget {
    height: 80px;
    min-height: 80px;
    margin: 2px 0 0 5px;
  }

  .playhistory-div-control-widget {
    margin: 5px 0 0 5px;
  }

  .playhistory-div-analytics-widget {
    height: 100px;
    min-height: 100px;
    margin: 5px 0 0 5px;
  }

  .playhistory-div-chart-widget {
    height: 100px;
    min-height: 100px;
    margin: 5px 0 0 5px;
  }

  .playhistory-span-status-timestamp {
    position: fixed;
    top: 16px;
    right: 5px;
    z-index: 1001;

    display: none;
  }

  .playhistory-span-status-timestamp-map {
    display: block;
  }
}

/* speedometer */
.playhistory-div-speedometer-container {
  position: absolute;
  bottom: 20px;
  left: 5px;
  z-index: 999;
  font-family: 'Orbitron', 'Audiowide', sans-serif;

  /* background: radial-gradient(circle at center, #222 40%, #000 100%); */
  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0px 0px 2px 0px #032940;

  text-align: center;
}

.playhistory-div-speedometer-container .label {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 2px;
}

.playhistory-div-speedometer-container .speed {
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: #d4e6f4;
  text-shadow: 0 0 20px #7eb6e0, 0 0 20px #7eb6e0;
  transform: skew(-2deg);
}

.playhistory-div-speedometer-container .unit {
  font-size: 13px;
  font-weight: 300;
  color: #cacaca;
  letter-spacing: 0.5px;
  display: block;
}

.playhistory-div-map-speedometer-outer-rim {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 999;

  width: 135px;
  height: 135px;
  border-radius: 50%;

  /* background: linear-gradient(180deg, #f1f1f1 0%, #ffffff 100%);
  box-shadow: -4px 4px 3px 1px rgb(0, 0, 0, 0.4),
    -8px 8px 4px 1px rgb(0, 0, 0, 0.6), -12px 12px 8px 1px rgb(0, 0, 0, 0.6); */

  scale: 0.95;
  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
  box-shadow: -2px 2px 3px 1px rgb(0, 0, 0, 0.4),
    -2px 2px 4px 1px rgb(0, 0, 0, 0.6), -2px 2px 8px 1px rgb(0, 0, 0, 0.6);
}

.playhistory-div-map-speedometer-inner-rim {
  border-radius: 50%;
  scale: 0.98;
  border: solid red 1px;
  background: linear-gradient(205deg, #243c49 0%, #121e24 100%);
}

.playhistory-div-map-speedometer {
  position: relative;
  width: 135px;
  height: 135px;
  border-radius: 50%;

  scale: 0.97;

  box-shadow: 2px -2px 2px -1px rgb(108, 115, 129, 0.8),
    -3px 3px 4px 1px rgb(0, 0, 0, 0.5),
    inset -2px 2px 2px 0 rgb(108, 115, 129, 0.2),
    inset 2px -2px 2px 0px rgb(0, 0, 0, 0.3);
}

.playhistory-div-map-speedometer>img:nth-child(1) {
  position: absolute;
  scale: 0.95;
  height: 135px;
  right: 0.6px;
}

.playhistory-div-map-speedometer>img:nth-child(2) {
  position: absolute;

  height: 135px;
  scale: 0.9;

  transition: transform 0.3s ease;
}

.playhistory-div-map-speedometer>span {
  position: absolute;
  width: 100%;
  bottom: 6px;

  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 2px;
  font-size: 18px;
}

/* end of speedometer */:root {
  --hlp-bg:
    radial-gradient(520px at 18% 22%, rgba(0, 102, 204, 0.12), transparent 60%),
    radial-gradient(520px at 78% 76%, rgba(0, 51, 102, 0.12), transparent 60%),
    radial-gradient(420px at 72% 18%, rgba(249, 115, 22, 0.06), transparent 60%);

  --hlp-surface: rgba(255, 255, 255, 0.72);
  --hlp-surface-strong: rgba(255, 255, 255, 0.92);

  --hlp-text: rgba(15, 23, 42, 0.92);
  --hlp-muted: rgba(15, 23, 42, 0.62);

  --hlp-border: rgba(15, 23, 42, 0.10);
  --hlp-border-soft: rgba(15, 23, 42, 0.06);

  --hlp-primary: #003366;
  --hlp-secondary: #0066cc;
  --hlp-accent: #fb8018;

  --hlp-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --hlp-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
  --hlp-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --hlp-radius: 14px;
  --hlp-radius-lg: 18px;
  --hlp-blur: blur(14px);

  --hlp-focus: 0 0 0 3px rgba(0, 102, 204, 0.22);
}

* {
  box-sizing: border-box;
}

.hlp-page {
  height: 100dvh;
  overflow: hidden;
  background: var(--hlp-bg);
  color: var(--hlp-text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

.hlp-header {
  flex: 0 0 auto;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0, 51, 102, 0.82), rgba(0, 51, 102, 0.96));
  border-bottom: 1px solid rgba(249, 115, 22, 0.60);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.22);
}

.hlp-header-left,
.hlp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}


.hlp-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}

.hlp-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hlp-header-title-main {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hlp-header-title-sub {
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  font-weight: 400;
}



.hlp-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.hlp-card {
  width: 100%;

  margin: 0 auto;
  border-radius: var(--hlp-radius-lg);
  border: 1px solid var(--hlp-border);
  background: var(--hlp-surface);
  box-shadow: var(--hlp-shadow-lg);
  backdrop-filter: var(--hlp-blur);
  -webkit-backdrop-filter: var(--hlp-blur);
  overflow: hidden;
}

.hlp-card-top {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hlp-border-soft);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hlp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(15, 23, 42, 0.70);
  font-size: 12px;
}

.hlp-muted {
  font-size: 12px;
  color: var(--hlp-muted);
}

.hlp-body {
  padding: 16px;
}

.hlp-copy {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.78);
}

.hlp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hlp-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: var(--hlp-shadow-sm);
  min-width: 0;
}

.hlp-item-wide {
  grid-column: 1 / -1;
}

.hlp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.62);
}

.hlp-value {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.82);
  letter-spacing: 0.08em;
  font-weight: 450;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hlp-wrap {
  white-space: normal;
  line-height: 1.45;
}

.hlp-link {
  color: rgba(0, 51, 102, 0.92);
  text-decoration: none;
  font-weight: 400;
  font-size: 13px;
}

.hlp-link:hover {
  text-decoration: underline;
}

.hlp-sep {
  margin: 0 6px;
  color: rgba(15, 23, 42, 0.55);
}

.hlp-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(15, 23, 42, 0.68);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

/* buttons */
.hlp-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.hlp-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.hlp-btn:focus-visible {
  outline: none;
  box-shadow: var(--hlp-focus);
}

.hlp-btn-ghost {
  background: rgba(255, 255, 255, 0.10);
}

/* mobile */
@media (max-width: 820px) {
  .hlp-grid {
    grid-template-columns: 1fr;
  }

  .hlp-main {
    padding: 12px;
  }
}/* ControlHistory.css – Tesla-style light, orange + navy accent */

/* ========== PALETTE ========== */

/* Palette */
:root {
  /* color: #fb8018; */
  --ch-orange: #f97316;
  --ch-orange-light: #f18d11;
  --ch-orange-soft: #ffedd5;
  --ch-blue: #5886b0;
  --ch-blue-soft: #6fa8dc;
  --ch-blue-dark: #355366;

  --ch-gray: #e5e7eb;


  --ch-surface: #ffffff;
  --ch-surface-soft: #fbfcff;

  --ch-bg: #f7f8fc;
  --ch-card: #ffffff;
  --ch-card-gray: #f6f6f6;
  --ch-border: #e2e8f0;
  /* --ch-border: #eeeeee; */
  --ch-border-subtle: #eaebef;
  --ch-border-light: #f1f5f9;
  --ch-primary: #355366;
  --ch-secondary: #496475;
  --ch-tertiary: #5d7584;

  --ch-primary-dark: #0056b3;
  --ch-primary-light: #eff6ff;
  --ch-text-primary: #111827;
  --ch-text-secondary: #4b5563;
  --ch-text-muted: #9ca3af;
  --ch-text-tertiary: #3c5c63;

  --ch-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.08);
  --ch-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ch-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --ch-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --ch-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
  --ch-shadow-btn: 0 9px 20px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ch-shadow-btn-primary: 0 12px 26px rgba(248, 113, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --ch-radius-sm: 6px;
  --ch-radius: 10px;
  --ch-radius-lg: 14px;
  --ch-radius-xl: 18px;

  --ch-border-soft: #e5e7eb;
  --ch-border-subtle: #eceff4;

  --ch-shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.12);
  --ch-shadow-panel: 0 18px 40px rgba(15, 23, 42, 0.18);
  /* Status */
  --ch-status-online: #28a745;
  --ch-status-offline: #dc3545;
  --ch-fault: #ff4d4f;
  /* Red for faults */
  --ch-success: #10b981;
  --ch-warning: #f59e0b;
  --ch-danger: #ef4444;
}

/* ========== ROOT LAYOUT ========== */

.ch-root {
  position: relative;
  display: flex;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(circle at top left, #ffffff 0, var(--ch-bg) 55%);
  color: var(--ch-text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  overflow: hidden;
}

.ch-root-logo {
  position: absolute;
  top: 26px;
  left: 22px;
  z-index: 1200;
  width: 140px;
  height: auto;
  opacity: 0.9;
}

/* ========== EMPTY STATE ========== */

.ch-root-empty {
  align-items: center;
  justify-content: center;
}

.ch-card-empty {
  padding: 32px 40px;
  max-width: 360px;
  text-align: center;
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  box-shadow: var(--ch-shadow-soft);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ch-blue-dark);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.15);
}

.ch-card-empty h1 {
  margin: 0 0 8px;
  font-size: 22px;
}

.ch-card-empty p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ch-text-secondary);
}

.ch-btn {
  cursor: pointer;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, #ffffff, #e5e7eb);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ch-btn-empty {
  color: #ffffff;
  border-color: rgba(248, 113, 22, 0.9);
  background: linear-gradient(180deg, var(--ch-orange), #ea580c);
}

/* ========== BACK BUTTON ========== */
.ch-back-button {
  position: absolute;
  top: 4px;
  left: 12px;

  z-index: 10;
  font-size: 12px;
  color: var(--ph-text-secondary);

  display: flex;
  align-items: center;
  gap: 6px;
}

.ch-back-button button {
  cursor: pointer;
  padding: 4px;
  border-radius: var(--ch-radius-sm);

  color: var(--ch-orange);
  font-size: 12px;
  font-weight: 500;

  background: none;
  border: none;

  display: flex;
  align-items: center;
  gap: 6px;

  transition: all 0.2s;
}

.back-button:hover {
  background: var(--ph-primary-light);
}

.breadcrumb-separator {
  color: var(--ph-text-tertiary);
}

/* ========== MAIN MAP ========== */

.ch-main-map-section {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ch-map,
.ch-map .leaflet-container,
#leaflet-map-main,
#leaflet-map-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* ========== RIGHT “CONSOLE” STACK ========== */

.ch-details-section {
  position: fixed;
  top: 10px;
  right: 10px;
  height: calc(100vh - 25px);
  width: 330px;
  z-index: 10;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  /* 
  padding: 14px 14px 18px; */
  border-radius: var(--ch-radius-lg);
  /* background: var(--ch-surface-soft); */
  box-shadow: var(--ch-shadow-panel);
  /* border: 1px solid var(--ch-border-subtle); */
}

.ch-side-map-section {
  position: relative;

  width: 100%;
  height: 220px;
  border-radius: var(--ch-radius-sm);
  overflow: hidden;
}

.ch-map-address {
  position: absolute;
  left: 0;
  bottom: 0;

  z-index: 200px;
  height: 50px;

  border-radius: var(--ch-radius-sm);
  background: var(--ch-surface);
  box-shadow: var(--ch-shadow-panel);
  border: 1px solid var(--ch-border-subtle);
}

.ch-details-scroll {
  overflow-y: auto;

  padding: 4px 6px;

  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ch-details-scroll::-webkit-scrollbar {
  width: 6px;
}

.ch-details-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

/* inner cards in the stack */

.ch-card {
  background: var(--ch-surface);
  border-radius: var(--ch-radius-sm);
  border: 1px solid var(--ch-border-subtle);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.ch-details-card {
  padding: 12px 14px;
}

/* ========== WEIGHT COMPONENT ========== */

.ch-weight-widget {
  width: 100%;
  max-width: 330px;
  padding: 10px;

  position: relative;
  display: flex;
  flex-direction: column;

  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  transition: box-shadow 0.5s ease;

  &:hover {
    box-shadow: 1px 2px 4px #2c4156;
    /* box-shadow: 1px 2px 4px #fa7f00; */
  }
}

.ch-component-header {
  margin-bottom: 8px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;

  color: var(--ch-primary);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ch-component-header button {
  cursor: pointer;
  font-size: 11px;
  color: var(--ch-text-tertiary);
  letter-spacing: 0.05em;

  border: none;
  background: transparent;

  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ch-component-body {
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.ch-component-top {
  margin-top: 8px;
  /* padding: 2px 6px; */
  border-top: 1px solid var(--ch-border-soft);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ch-component-top .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ch-text-tertiary);
}

.ch-component-top .value {
  font-size: 16px;
  font-weight: 600;
}

.ch-component-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ch-component-content .weight-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.ch-component-content .weight-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ch-text-secondary);
}

.ch-component-content .weight-color {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ch-component-content .weight-bar-container {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.ch-component-content .weight-bar {
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

.ch-component-content .weight-percentage {
  font-size: 9px;
  color: #ffffff;
}

.ch-component-content .weight-value {
  font-size: 11px;
  color: var(--ch-text-secondary);
}

/* ========== BOTTOM BAR (TESLA-LIKE PLAYER) ========== */

.ch-bottom-section {
  position: fixed;
  bottom: 16px;
  left: 60px;
  /* transform: translateX(-50%); */
  z-index: 9;

  width: calc(100vw - 380px - 60px);
  /* calc(100%width - rightsideWidth - margin - left) */
  /* width: calc(100% - 300px - 20px - 40px); */
  max-width: 1080px;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 12px 18px;
  border-radius: var(--ch-radius-lg);
  background: var(--ch-surface);
  box-shadow: var(--ch-shadow-panel);
  border: 1px solid var(--ch-border-subtle);
}

/* Left: vehicle snapshot */

.ch-details-component {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}

.ch-details-vehicle-img {
  height: 90px;
  width: auto;
  border-radius: 14px;
  background: #f3f4f6;
  padding: 4px 6px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.ch-details-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch-details-info-row {
  font-size: 12px;

  display: flex;
  justify-content: space-between;
  align-items: cen;
  gap: 14px;
}

.ch-details-info-row .label {
  color: var(--ch-text-tertiary);
  font-size: x-small;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ch-details-info-row .value {
  color: var(--ch-text-secondary);
  font-size: small;
  font-weight: 500;
}

/* Divider */

.ch-vertical-bar {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom,
      transparent,
      var(--ch-border-soft),
      transparent);
}

/* Right: playback controls */

.ch-control-component {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ch-control-header {
  text-align: right;
  font-size: 11px;

  color: var(--ch-text-tertiary);
  letter-spacing: 0.05em;
}

.ch-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ch-div-control-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-div-control-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ch-div-control-btn.btn-bg {
  width: 42px;
  height: 42px;
}

.ch-div-control-btn>i {
  font-size: 18px;
  color: var(--ch-blue-dark);
  transition: transform 0.16s ease, color 0.16s ease;
}

.ch-div-control-btn.btn-bg>i {
  font-size: 26px;
  color: var(--ch-orange);
}

.ch-div-control-btn:hover>i {
  transform: translateY(-1px) scale(1.02);
  color: var(--ch-orange);
}

.ch-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ch-text-muted);
}

.ch-speed select {
  background: #f9fafb;
  border-radius: 999px;
  /* border: 1px solid var(--ch-border-subtle); */
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ch-blue-dark);
}

/* Slider */

.ch-control-slider {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}

.ch-control-slider input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
      var(--ch-orange) var(--progress-percent, 0%),
      var(--ch-border-soft) var(--progress-percent, 0%)) no-repeat;
}

/* webkit thumb */
.ch-control-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid var(--ch-orange);
  box-shadow: 0 0 7px rgba(15, 23, 42, 0.35);
  cursor: pointer;
}

/* firefox thumb */
.ch-control-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid var(--ch-orange);
  box-shadow: 0 0 7px rgba(15, 23, 42, 0.35);
  cursor: pointer;
}

.ch-slider-labels {
  margin-top: 6px;

  font-size: 10px;
  color: var(--ch-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;

  display: flex;
  justify-content: space-between;
}

/* ========== MINI-MAP CUSTOM MARKER ========== */

.ch-marker {
  background: transparent !important;
  border: none !important;
}

.ch-marker .marker-pulse {
  position: relative;
}

.ch-marker .marker-pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.35);
  animation: pulse 2s infinite;
}

.ch-marker .marker-inner {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-marker .marker-inner>img {
  height: 24px;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.75;
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* widget */
.ch-div-analytics-widget {
  width: 310px;
  min-width: 300px;
  height: 120px;
  min-height: 110px;

  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;

  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  transition: box-shadow 0.5s ease;

  &:hover {
    box-shadow: 1px 2px 4px #2c4156;
    /* box-shadow: 1px 2px 4px #fa7f00; */
  }
}

.ch-div-analytics-widget>span {
  position: absolute;
  top: 8px;
  left: 12px;

  color: var(--ch-primary);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* ========== truck state ========== */
/* widget shell */
.ch-div-truck-state-widget {
  width: 100%;
  max-width: 330px;
  padding: 24px 10px 10px;

  position: relative;
  display: flex;
  flex-direction: column;

  background-color: #fff;
  box-shadow: 0 2px 4px #2c415680;
  transition: box-shadow 0.5s ease;

  &:hover {
    box-shadow: 1px 2px 4px #2c4156;
    /* box-shadow: 1px 2px 4px #fa7f00; */
  }
}

/* title */
.ch-div-truck-state-widget>span {
  position: absolute;
  top: 8px;
  left: 12px;

  color: var(--ch-primary);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* === truck state grid === */

.ch-truck-state {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 3 per row */
  column-gap: 8px;
  row-gap: 8px;
}

.ch-truck-state-row {
  position: relative;
  height: 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  border-radius: var(--ch-radius-sm);
  background: #f9fafb;
  border: 1px solid var(--ch-border-subtle);
}

.ch-truck-state-row .ch-truck-state-i {
  font-size: 1.2rem;
  color: var(--ch-primary);
  /* inactive grey */
}

.ch-truck-state-i.active {
  color: #22c55e;
  /* green when active */
}

/* label under dot */
.ch-truck-state-row span {
  height: 20px;

  margin-top: 4px;

  color: var(--ch-text-tertiary);
  font-size: x-small;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* ========== RESPONSIVE ========== */

@media (max-width: 1100px) {
  .ch-details-section {
    display: none;
    /* prioritise map + bottom bar */
  }

  .ch-bottom-section {
    width: calc(100vw - 40px);
  }
}

@media (max-width: 768px) {
  .ch-bottom-section {
    height: auto;
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .ch-details-component {
    justify-content: flex-start;
  }

  .ch-vertical-bar {
    display: none;
  }
}:root {
  --cch-bg-gradient: radial-gradient(circle at top left, #ffffff 0%, #f0f4ff 100%);
  --cch-surface: rgba(255, 255, 255, 0.85);
  --cch-surface-solid: #ffffff;
  --cch-surface-glass: rgba(255, 255, 255, 0.32);

  --cch-bg-blue-gray: rgba(215, 215, 255, 0.3);

  /* --cch-primary: #4f46e5;
  --cch-secondary: #8b5cf6; */
  --cch-primary: #003366;
  --cch-secondary: #0066cc;
  --cch-tertiary: #b7d3f0;
  --cch-orange: #f97316;
  --cch-orange-dark: #ea580c;
  --cch-success: #10b981;
  --cch-warning: #f59e0b;
  --cch-danger: #E57373;
  --cch-danger-light: #E57373af;

  --cch-slider-background: #0066cc1f;

  --cch-border: rgba(0, 0, 0, 0.08);
  --cch-border-light: rgba(0, 0, 0, 0.04);
  --cch-border-heavy: rgba(0, 0, 0, 0.12);

  --cch-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cch-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cch-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.12);
  --cch-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);

  --cch-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.12);
  --cch-icon-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);

  --cch-radius-sm: 8px;
  --cch-radius: 12px;
  --cch-radius-lg: 16px;
  --cch-radius-xl: 24px;

  --cch-icon-tertiary: rgba(0, 0, 0, 0.5);

  --cch-text-primary: rgba(0, 0, 0, 0.95);
  --cch-text-secondary: rgba(0, 0, 0, 0.7);
  --cch-text-tertiary: rgba(0, 0, 0, 0.5);
  --cch-text-alt-info: #3c5c63;

  --cch-text-light: rgba(255, 255, 255, 0.95);

  --cch-blur-sm: blur(8px);
  --cch-blur: blur(14px);
  --cch-blur-lg: blur(20px);

  --cch-side-width: 380px;
  --cch-gutter: 12px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

body {
  background: var(--cch-bg-gradient);
  color: var(--cch-text-primary);
  overflow: hidden;
}

/* ========== ROOT ========== */
.cch-root {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.cch-card {
  border-top: 1px solid var(--cch-border);
  border-radius: var(--cch-radius-sm);

  border: 1px solid var(--cch-border);
  border-top-color: var(--cch-border-heavy);
  /* keeps your accent */

  background: var(--cch-surface-glass);
  box-shadow: var(--cch-shadow);
  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== EMPTY STATE ========== */
.cch-root-empty {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;

  background: var(--cch-bg-gradient);
  position: relative;
}

.cch-root-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px at 20% 20%, rgba(79, 70, 229, 0.1), transparent 60%),
    radial-gradient(400px at 80% 80%, rgba(249, 115, 22, 0.1), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

.cch-card-empty {
  max-width: 400px;
  padding: 48px 32px;
  text-align: center;
  z-index: 1;
}

.cch-card-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;

  border-radius: 50%;
  border: 1px solid var(--cch-border-light);
  background: linear-gradient(135deg, var(--cch-surface-solid), #f8fafc);
  box-shadow: var(--cch-shadow-lg);

  display: grid;
  place-items: center;
}

.cch-card-empty-icon>i {
  font-size: 32px;
  color: var(--cch-primary);
}

.cch-card-empty h1 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 600;
  color: var(--cch-text-primary);
  line-height: 1.3;
}

.cch-card-empty p {
  margin: 0 0 32px;
  font-size: 15px;
  color: var(--cch-text-secondary);
  line-height: 1.6;
}

.cch-btn-empty {
  cursor: pointer;
  padding: 12px 24px;

  font-size: 14px;
  font-weight: 500;
  color: var(--cch-text-light);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* background: linear-gradient(135deg, var(--cch-primary), var(--cch-secondary)); */
  background: linear-gradient(135deg, var(--cch-orange), var(--cch-orange-dark));
  border: none;
  border-radius: var(--cch-radius-xl);
  box-shadow: var(--cch-shadow);

  transition: all 0.2s ease;
}

.cch-btn-empty:hover {
  transform: translateY(-2px);
  box-shadow: var(--cch-shadow-lg);
}

.cch-btn-empty:active {
  transform: translateY(0);
}

/* ========== LOGO ========== */
.cch-logo {
  width: 120px;
  height: auto;
  z-index: 20;

  position: fixed;
  top: 10px;
  right: 12px;

  filter: drop-shadow(var(--cch-shadow-sm));
  pointer-events: none;
}

/* ========== NAVIGATION BUTTONS ========== */
.cch-buttons-navigation {
  z-index: 20;

  position: fixed;
  top: 6px;
  left: 12px;

  display: flex;
  align-items: center;
  gap: 16px;
}

.cch-btn-back {
  height: 44px;
  padding: 0px 16px 0 12px;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  color: var(--cch-text-tertiary);
  font-size: 14px;

  border: 1px solid var(--cch-border);
  border-radius: var(--cch-radius);
  background: var(--cch-surface-glass);
  box-shadow: var(--cch-shadow-sm);
  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);

  transition: all 0.2s ease;
}

.cch-btn-back:hover {
  color: var(--cch-text-secondary);

  background: var(--cch-surface-solid);
  box-shadow: var(--cch-shadow);
  transform: translateX(-1px);
}

.cch-btn-back>i {
  font-size: 16px;
}

/* ========== WIDGET BUTTONS ========== */
.cch-buttons-mobile {
  display: none;

  border: 1px solid var(--cch-border);
  border-radius: var(--cch-radius);
  background: var(--cch-surface-glass);
  box-shadow: var(--cch-shadow);
  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);
}

.cch-btn-mobile {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: none;
  border-radius: calc(var(--cch-radius) - 2px);
  background: transparent;
  color: var(--cch-text-tertiary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cch-btn-mobile:hover {
  color: var(--cch-text-secondary);
  transform: translateY(-1px);
  box-shadow: var(--cch-shadow-lg);

}

.cch-btn-mobile.active {
  color: var(--cch-secondary);
}

.cch-btn-mobile.active:hover {
  transform: translateY(-1px);
}

/* ========== end of NAVIGATION BUTTONS ========== */

/* ========== MAP BUTTONS ========== */
.cch-buttons-map {
  position: fixed;
  top: 50%;
  left: 12px;
  gap: 8px;
  z-index: 90;

  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}

.cch-btn-map {
  width: 44px;
  height: 44px;
  cursor: pointer;

  color: var(--cch-text-tertiary);
  font-size: 16px;

  border: 1px solid var(--cch-border);
  border-radius: var(--cch-radius);
  background: var(--cch-surface-glass);
  box-shadow: var(--cch-shadow-sm);
  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);

  display: grid;
  place-items: center;

  transition: all 0.2s ease;
}

.cch-btn-map:hover {
  color: var(--cch-text-secondary);

  background: var(--cch-surface-solid);
  box-shadow: var(--cch-shadow);

  transform: translateY(-1px);
}

.cch-btn-map.active {
  /* background: linear-gradient(135deg, var(--cch-primary), var(--cch-secondary)); */
  color: var(--cch-secondary);
  font-size: 18px;
}

/* ========== end of MAP BUTTONS ========== */


/* ========== MAP CONTAINER ========== */
.cch-map-container {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.cch-main-map {
  width: 100%;
  height: 100%;
}

.leaflet-container {
  font-family: inherit;
}

.leaflet-control-attribution {
  background: var(--cch-surface-glass) !important;
  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);
  border: 1px solid var(--cch-border) !important;
  border-radius: var(--cch-radius-sm) !important;
  font-size: 11px !important;
  color: var(--cch-text-tertiary) !important;
  padding: 4px 8px !important;
}

/* ========== end of MAP CONTAINER ========== */


/* ========== SIDE PANEL ========== */
.cch-side-panel {
  width: var(--cch-side-width);
  z-index: 10;
  overflow: hidden;

  position: fixed;
  top: 4px;
  right: 6px;
  bottom: 18px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ========== SIDE PANEL MAP CONTAINER ========== */
.cch-track-map {
  position: relative;

  height: 240px;
  border-radius: var(--cch-radius-sm);
  overflow: hidden;
  /* box-shadow: var(--cch-shadow-lg); */


}

.cch-mini-map {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ========== VEHICLE MARKER ========== */
.cch-marker-vehicle {
  background: transparent !important;
  border: none !important;
}

.cch-marker-vehicle .cch-marker-inner {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cch-marker-vehicle .cch-marker-inner>img {
  height: 24px;
}

.cch-marker-pulses {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  /* background: rgba(255, 122, 26, 0.18); */
  background: rgba(79, 70, 229, 0.2);
  background: rgba(56, 189, 248, 0.35);

  animation: cch-pulses 1.6s infinite;
}

@keyframes cch-pulses {
  0% {
    transform: translate(-2px, -2px) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translate(-2px, -2px) scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.75;
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.cch-address-bar {
  z-index: 2;
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;

  padding: 4px 8px;
  border-radius: var(--cch-radius-xl);
  border: 1px solid var(--cch-border);

  display: flex;
  align-items: center;
  gap: 8px;

  background: var(--cch-surface-glass);
  backdrop-filter: var(--cch-blur-lg);
  -webkit-backdrop-filter: var(--cch-blur-lg);
  box-shadow: var(--cch-shadow);
}

.cch-address-bar>i {
  color: var(--cch-icon-tertiary);
  font-size: 16px;
}

.cch-address-bar span {
  flex: 1;

  font-size: 12px;
  color: var(--cch-primary);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cch-streetview-btn {
  width: 36px;
  height: 36px;
  cursor: pointer;

  font-size: 16px;
  color: var(--cch-text-tertiary);

  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 1px solid var(--cch-border);
  border-radius: 50%;
  box-shadow: var(--cch-shadow-sm);

  display: grid;
  place-items: center;

  transition: transform 0.12s ease, color 0.12s ease, filter 0.12s ease,
    box-shadow 0.12s ease;
}

.cch-streetview-btn:hover {
  transform: translateY(-1px);
  color: var(--cch-orange);
  filter: brightness(1.02);
  box-shadow: var(--cch-shadow);
}

/* ========== end of mini MAP CONTAINER ========== */

/* ========== WIDGETS CONTAINER ========== */
.cch-container-widgets {
  flex: 1;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cch-container-widgets::-webkit-scrollbar {
  width: 6px;
}

.cch-container-widgets::-webkit-scrollbar-track {
  background: transparent;
}

.cch-container-widgets::-webkit-scrollbar-thumb {
  background: var(--cch-border-heavy);
  border-radius: 3px;
}

/* ========== WIDGET STYLES ========== */
.cch-widget {
  padding: 12px 16px;
}

.cch-widget:hover {
  box-shadow: var(--cch-shadow-lg);
  /* transform: translateY(-1px); */
}

.cch-widget {
  animation: fadeInWidget 1s ease-out;
}

.cch-widget-header {
  /* margin-bottom: 15px; */
  padding-bottom: 6px;

  /* border-bottom: 1px solid var(--cch-border-light); */

  display: flex;
  align-items: center;
  gap: 10px;
}

.cch-widget-header>i {
  font-size: 16px;
  color: var(--cch-icon-tertiary);
}

.cch-widget-header>span {
  color: var(--cch-text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cch-widget-header-btn {
  width: 34px;
  height: 34px;
  margin-left: auto;
  cursor: pointer;

  color: var(--cch-icon-tertiary);
  font-size: 14px;

  background: var(--cch-bg-blue-gray);
  border: none;
  border-radius: 17px;

  display: grid;
  place-items: center;

  transition: all 0.2s ease;
}

.cch-widget-header-btn:hover {
  background: var(--cch-surface-solid);
  color: var(--cch-text-secondary);
}

/* Analytics Widget */
.cch-container-analytics {
  /* display: grid; */
  /* grid-template-columns: repeat(2, 1fr); */
  /* gap: 16px; */
  display: flex;
  justify-content: space-around;
}


/* ========== TRUCK STATE ========== */
.cch-container-truck-state {
  display: grid;
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.cch-card-truck-state {
  padding: 10px;

  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;

  display: flex;
  align-items: center;

  transition: 0.2s ease;
}

.cch-card-truck-state .icon-container {
  font-size: 1rem;
}

.cch-card-truck-state.active.danger {
  border: none;
  background: #fef2f2;
}

.cch-card-truck-state.active.danger .bi {
  color: #ef4444;
  animation: pulse 2s infinite;
}

.state-info {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.state-info .label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.state-info .value {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.state-info .value.active {
  color: var(--cch-warning);
}

.state-info .value.active.danger {
  color: #ef4444;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

/* TRUCK STATE Widget */
.cch-truck-state-details {}

.cch-truck-state-item {
  padding: 4px 6px;

  position: relative;

  background: var(--cch-surface-solid);
  border: 1px solid var(--cch-border);
  border-radius: var(--cch-radius);
  /* box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18); */
  box-shadow: 2px 2px 6px rgba(118, 118, 209, 0.18);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;

  background: #f3f4f6af;

  transition: all 0.2s ease;
}

.cch-truck-state-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--cch-shadow);
}

.cch-truck-state-item.on {
  /* background: linear-gradient(135deg, #f0f9ff, #e0f2fe); */
  /* border-color: rgba(59, 130, 246, 0.2); */

  /* box-shadow: 2px 2px 6px var(--cch-danger-light); */
  box-shadow: 2px 2px 2px rgba(186, 36, 6, 0.1);
  box-shadow: 2px 2px 6px rgba(229, 115, 115, 0.3);

  box-shadow: 1px 1px 4px #E57373af;
}

.cch-truck-state-item>i {
  font-size: 20px;
  color: var(--cch-icon-tertiary);
}

.cch-truck-state-item.active>i {
  color: var(--cch-primary);
}

.cch-truck-state-label {
  font-size: 11px;
  color: var(--cch-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.cch-truck-state-item .bi.on {
  color: var(--cch-danger);
}

.cch-truck-state-item .bi.off {
  color: var(--cch-primary);
}

.cch-truck-state-indicator {
  position: absolute;
  top: 0;
  right: 4px;

  width: 14px;
  height: 14px;
  margin: 4px 0;

  border-radius: 7px;
  transition: all 0.2s ease;
}

.cch-truck-state-indicator.on {
  /* background: var(--cch-danger-light); */
  background: linear-gradient(135deg, var(--cch-danger), var(--cch-danger-light));

  box-shadow: 0 0 10px 4px rgba(186, 36, 6, 0.1);
}

.cch-truck-state-indicator.off {
  background: var(--cch-icon-tertiary);
  opacity: 0.3;
}

/* WEIGHT Widget */
.cch-weight-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cch-weight-row {
  display: grid;
  grid-template-columns: 60px 1fr 110px;
  gap: 16px;
  align-items: center;
}

.cch-weight-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--cch-text-tertiary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cch-weight-bar {
  height: 10px;
  background: var(--cch-border-light);
  border-radius: 4px;
  overflow: hidden;
}

.cch-weight-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cch-primary), var(--cch-secondary));
  /* background: linear-gradient(90deg, rgba(255, 122, 26, 0.35), rgba(255, 122, 26, 0.9)); */
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cch-weight-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cch-weight-value span:first-child {
  color: var(--cch-text-secondary);
  font-size: 11px;
  font-weight: 500;
}

.cch-weight-value span:last-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--cch-primary);
}

.cch-weight-total {
  margin-top: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--cch-border-light);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cch-weight-total span:first-child {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cch-text-tertiary);
  text-transform: uppercase;
}

.cch-total-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--cch-primary);
}

/* ========== PLAYER PANEL ========== */
.cch-player-panel {
  z-index: 30;
  padding: 5px;

  position: fixed;
  left: var(--cch-gutter);
  right: calc(var(--cch-side-width) + 20px);
  bottom: 20px;

  display: flex;
  align-items: center;
  gap: 16px;
}

.cch-divider {
  width: 1px;
  align-self: stretch;
  /* background: linear-gradient(to bottom, transparent, var(--cch-slider-background), var(--cch-orange)); */

  background: linear-gradient(to bottom,
      transparent,
      var(--cch-slider-background),
      transparent);
}

.cch-player-left,
.cch-player-right {

  min-width: 0;
}

.cch-player-center {
  flex: 1
}

/* ========== VEHICLE DETAILS COMPONENT ========== */
.cch-vehicle-details {
  padding: 0 20px;
  display: flex;
  align-items: center;
  /* gap: 20px; */
}

.cch-vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 140px;
}

.cch-info-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}

.cch-info-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--cch-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.cch-info-value {
  font-size: 13px;
  /* font-weight: 600; */
  color: var(--cch-text-primary);
  white-space: nowrap;
}

.cch-vehicle-image {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(var(--cch-shadow));
}

/* ========== end VEHICLE DETAILS COMPONENT ========== */

/* ========== CURRENT COMPONENT ========== */
.cch-current-container {
  padding: 10px;
  display: grid;
  /* grid-template-columns: 75px 20px 75px; */
  grid-template-columns: 75px auto 75px;
  align-items: center;
  /* shared middle column */
  gap: 6px;
}

.cch-current-title {
  font-size: 11px;

  grid-column: 1 / -1;
  /* key trick */
  display: contents;
}

.cch-current-label,
.cch-vehicle-id {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cch-current-label {
  /* font-weight: 500; */
  color: var(--cch-text-tertiary);
}

.cch-current-icon {
  color: var(--cch-text-alt-info);
}

.cch-vehicle-id {
  /* font-weight: 600; */
  color: var(--cch-text-secondary);
}

.cch-current-timestamp {
  font-size: 11px;
  color: var(--cch-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;

  grid-column: 1 / -1;
  /* key trick */
  display: contents;
}

.cch-current-dot {
  color: var(--cch-text-secondary);

  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--cch-text-alt-info);
  /* box-shadow: 0 0 16px 1px var(--cch-secondary); */
}

.cch-current-label,
.cch-current-date {
  text-align: left;
}

.cch-vehicle-id,
.cch-current-time {
  text-align: right;
}

.cch-current-icon,
.cch-current-dot {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  line-height: 1;
}

/* ========== end of CURRENT COMPONENT ========== */



.cch-container-dm {
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 16px;
  max-height: 90px;
}

/* Image & Rego Badge */
.cch-image-dm {
  position: relative;
  height: 80px;
  /* background: var(--cch-surface-light, #f1f5f9); */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cch-image-dm img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.cch-rego-dm {
  position: absolute;
  top: -6px;
  left: 4px;

  background: var(--cch-tertiary);
  color: var(--cch-text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Content Layout */
.cch-content-dm {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cch-info-dm {
  display: flex;
  align-items: center;
  /* Changed from baseline to center for better icon alignment */
  gap: 8px;
}

.cch-label-dm {
  font-size: 9px;
  font-weight: 600;
  color: var(--cch-text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.1em;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.cch-icon-dm {
  font-size: 14px;
  color: var(--cch-icon-tertiary);
  display: flex;
  align-items: center;
}

.cch-value-dm {
  font-size: 13px;
  font-weight: 600;
  color: var(--cch-text-primary, #1e293b);
  line-height: 1;
  /* Prevents icon from shifting text height */
}

.cch-timestamp-dm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cch-text-secondary);
}

.cch-timestamp-dm i {
  font-size: 12px;
  color: var(--cch-primary);
}

.cch-dot-dm {
  width: 3px;
  height: 3px;
  background: var(--cch-secondary, #cbd5e1);
  border-radius: 50%;
}







/* Playback Controls */
.cch-playback-container {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  /* background-color: red; */
}

.cch-playback-header {
  /* position: absolute; */
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cch-progress-info {
  font-size: 12px;
  /* font-weight: 500; */
  color: var(--cch-text-secondary);
  letter-spacing: 0.08em;
}

.cch-speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cch-speed-control label {
  font-size: 11px;
  font-weight: 500;
  color: var(--cch-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cch-speed-select {
  padding: 6px 12px;
  cursor: pointer;

  font-size: 12px;
  font-weight: 500;
  color: var(--cch-text-primary);

  background: var(--cch-surface-solid);
  border: 1px solid var(--cch-border);
  border-radius: var(--cch-radius-sm);

  transition: all 0.2s ease;
}

.cch-speed-select:hover {
  border-color: var(--cch-primary);
}

.cch-playback-buttons {
  /* margin-top: 18px; */
  margin-right: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.cch-playback-btn {
  width: 40px;
  height: 40px;
  cursor: pointer;

  color: var(--cch-text-primary);
  font-size: 18px;

  background: var(--cch-surface-solid);
  border: 1px solid var(--cch-border);
  border-radius: 50%;
  box-shadow: var(--cch-shadow);

  display: grid;
  place-items: center;

  transition: all 0.2s ease;
}

.cch-playback-btn:hover:not(:disabled) {
  background: var(--cch-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--cch-shadow-lg);
}

.cch-playback-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cch-playback-btn.primary {
  width: 48px;
  height: 48px;
  color: white;
  font-size: 20px;

  background: linear-gradient(135deg, var(--cch-primary), var(--cch-secondary));
  border: none;
}

.cch-playback-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--cch-shadow-xl);
}

.cch-playback-slider {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cch-progress-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;

  /* background: linear-gradient(to right,
      var(--cch-primary) 0%,
      var(--cch-primary) var(--progress, 0%),
      var(--cch-slider-background) var(--progress, 0%),
      var(--cch-slider-background) 100%); */

  background: linear-gradient(to right,
      var(--cch-primary) var(--progress, 0%),
      var(--cch-slider-background) var(--progress, 0%));

  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.cch-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  cursor: grab;

  background: white;
  border: 3px solid var(--cch-primary);
  border-radius: 50%;
  /* box-shadow: var(--cch-shadow-lg); */
  box-shadow: 0 0 14px rgba(38, 97, 191, 0.52);

  transition: all 0.2s ease;
}

.cch-progress-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  /* box-shadow: var(--cch-shadow-xl); */
  box-shadow: 0 0 10px 4px rgba(38, 97, 191, 0.52);
}

.cch-progress-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.cch-time-range {
  margin-top: 4px;

  font-size: 11px;
  color: var(--cch-text-alt-info);
  letter-spacing: 0.12em;
  text-transform: uppercase;

  display: flex;
  justify-content: space-between;
}

/* ========== MOBILE DRAWER ========== */
.cch-container-mobile {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;

  max-height: 60vh;
  z-index: 50;
  margin: 4px;

  display: none;
  pointer-events: auto;
  overflow: hidden;

  background: transparent;

  /*
  background: var(--cch-surface-glass); 
  border-radius: 0 0 var(--cch-radius-sm) var(--cch-radius-sm);
  border-top: 1px solid var(--cch-border);

  backdrop-filter: var(--cch-blur);
  -webkit-backdrop-filter: var(--cch-blur);
  box-shadow: var(--cch-shadow); 
  */

  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

.cch-container-mobile.open {
  transform: translateY(0px);
}

.cch-container-mobile::-webkit-scrollbar {
  width: 6px;
}

.cch-container-mobile::-webkit-scrollbar-thumb {
  background: var(--cch-border-heavy);
  border-radius: 3px;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
  .cch-side-panel {
    display: none;
  }

  .cch-player-panel {
    right: var(--cch-gutter);
  }

  .cch-buttons-mobile {
    display: flex;
  }

  .cch-container-mobile {
    display: block;
  }
}

@media (max-width: 1024px) {}

@media (max-width: 768px) {
  .cch-player-panel {
    flex-direction: column;
  }

  .cch-divider {
    display: none;
  }

  .cch-player-center {
    width: 100%;
  }

  .cch-buttons-map {
    left: 12px;
  }

  .cch-logo {
    width: 100px;
  }

  .cch-player-left,
  .cch-player-right {
    display: none;
  }

  .cch-current-container {
    text-align: center;
  }

  .cch-weight-label {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .cch-vehicle-image {
    width: 100px;
  }

  .cch-vehicle-info {
    min-width: 120px;
  }

  .cch-playback-container {
    padding: 2px 10px;
  }

  .cch-playback-buttons {
    /* margin-top: 20px; */
    gap: 8px;
  }

  .cch-playback-btn {
    font-size: 16px;
  }

  .cch-playback-btn.primary {
    font-size: 18px;
  }
}

/* ========== UTILITY CLASSES ========== */
.cch-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== ANIMATIONS ========== */
/* todo ujj delete fadeIn */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInWidget {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  50% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ========== LOADING STATES ========== */
.cch-loading {
  position: relative;
  overflow: hidden;
}

.cch-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ========== DARK THEME SUPPORT ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --cch-bg-gradient: radial-gradient(circle at top left, #0f172a 0%, #1e293b 100%);
    --cch-surface: rgba(30, 41, 59, 0.85);
    --cch-surface-solid: #1e293b;
    --cch-surface-glass: rgba(30, 41, 59, 0.72);

    --cch-border: rgba(255, 255, 255, 0.08);
    --cch-border-light: rgba(255, 255, 255, 0.04);
    --cch-border-heavy: rgba(255, 255, 255, 0.12);

    --cch-text-primary: rgba(255, 255, 255, 0.95);
    --cch-text-secondary: rgba(255, 255, 255, 0.7);
    --cch-text-tertiary: rgba(255, 255, 255, 0.5);
    --cch-text-light: rgba(255, 255, 255, 0.95);

    --cch-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cch-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cch-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5);
    --cch-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
  }

  .leaflet-tile {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  }

  .leaflet-control-attribution {
    background: var(--cch-surface-glass) !important;
    color: var(--cch-text-tertiary) !important;
  }
}/* GControlHistory.css */

:root {
    --gh-bg: #e9edffff;
    --gh-surface: #ffffff;

    --gh-orange: #f97316;
    --accent: #ff7a1a;

    --panel: rgba(255, 255, 255, 0.42);
    --border: rgba(0, 0, 0, 0.08);

    --muted: rgba(72, 71, 71, 0.75);
    --muted2: rgba(150, 150, 150, 0.7);

    --gh-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.12);
    --gh-icon-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);

    --gh-border-subtle: #eaebef;
    --gh-border-soft: #dfdfdf;

    --gh-radius-lg: 14px;
    --gh-radius-sm: 8px;

    --gh-text-primary: #000000eb;
    --gh-text-secondary: #191919ab;
    --gh-text-tertiary: #3c5c63;
}

html,
body {
    height: 100%;
}

body {
    background: radial-gradient(circle at top left, #ffffff 0, var(--gh-bg) 85%);
}

/* ========== EMPTY STATE ========== */
/* .gh-root-empty {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, #ffffff 0, var(--gh-bg) 85%);
} */
.gh-root-empty {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, #ffffff 0, var(--gh-bg) 85%);
    position: relative;
    overflow: hidden;
}

/* soft blobs so blur becomes visible */
.gh-root-empty::before,
.gh-root-empty::after {
    content: "";
    position: absolute;
    inset: -120px;
    pointer-events: none;
    z-index: 0;
}

.gh-root-empty::before {
    background:
        radial-gradient(320px 280px at 30% 30%, rgba(59, 130, 246, 0.18), transparent 60%),
        radial-gradient(320px 280px at 70% 70%, rgba(249, 115, 22, 0.14), transparent 60%),
        radial-gradient(240px 220px at 70% 25%, rgba(16, 185, 129, 0.12), transparent 60%);
    filter: blur(18px);
}

.gh-root-empty::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    opacity: 0.6;
}


.gh-card-empty {
    width: min(360px, 92vw);
    padding: 30px;
    text-align: center;
}

.gh-card-empty-icon {
    width: 80px;
    height: 80px;
    margin: 10px auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    box-shadow: var(--gh-icon-shadow);
}

.gh-card-empty-icon i {
    font-size: 2rem;
    color: #3b82f6;
}

.gh-card-empty h1 {
    margin: 12px 0;
    font-size: 22px;
    color: var(--gh-text-primary);
}

.gh-card-empty p {
    margin: 18px 0;
    font-size: 14px;
    color: var(--gh-text-secondary);
}

.gh-btn-empty {
    cursor: pointer;
    padding: 10px 18px;

    font-size: 13px;
    font-weight: 600;
    margin: 10px auto 20px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    border-radius: 999px;
    border: 1px solid rgba(248, 113, 22, 0.65);
    color: #ffffff;
    background: linear-gradient(180deg, var(--gh-orange), #ea580c);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);

    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.gh-btn-empty:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.22);
}

/* ========== ROOT ========== */
.gh-root {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "SF Pro Text", sans-serif;
}

.gh-card {
    padding: 10px 12px;

    border-radius: var(--gh-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--panel);
    box-shadow: var(--gh-shadow-soft);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gh-logo {
    position: fixed;
    top: 10px;
    right: 8px;
    width: 110px;
    z-index: 20;
    opacity: 0.9;
    pointer-events: none;
}

/* ========== MAP ========== */
.gh-map-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.gh-map,
.leaflet-container {
    width: 100%;
    height: 100%;
}

.leaflet-control-attribution {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.35) !important;
}

/* ========== MAP BUTTONS ========== */
.gh-map-buttons {
    width: 40px;
    z-index: 40;

    position: fixed;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
}

.gh-map-button {
    cursor: pointer;
    height: 40px;
    width: 40px;

    display: grid;
    place-items: center;

    background: transparent;
    border: none;

    color: rgba(0, 0, 0, 0.72);
    transition: background 0.15s ease, color 0.15s ease;
}

.gh-map-button+.gh-map-button {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.gh-map-button:hover {
    background: rgba(255, 255, 255, 0.78);
    color: rgba(0, 0, 0, 0.90);
}

.gh-map-button.active {
    color: var(--accent);
}

/* ========== RIGHT PANEL ========== */
.gh-details-panel {
    width: 340px;
    z-index: 10;
    overflow: hidden;

    position: fixed;
    top: 4px;
    right: 6px;
    bottom: 16px;

    display: flex;
    flex-direction: column;
}

.gh-details-panel-scroll {
    padding: 8px 0;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gh-details-panel-scroll::-webkit-scrollbar {
    width: 8px;
}

.gh-details-panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.10);
    border-radius: 999px;
}

/* MINI MAP */
.gh-details-map {
    position: relative;
    height: 220px;
    border-radius: var(--gh-radius-sm);
    overflow: hidden;
}

.gh-trackmap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.gh-div-address {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 4px 6px;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.06);

    color: var(--gh-text-primary);
    font-size: 11px;
}

.gh-div-address span {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gh-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    box-shadow: var(--gh-icon-shadow);

    cursor: pointer;
    transition: transform 0.12s ease, color 0.12s ease, filter 0.12s ease;
}

.gh-card-icon:hover {
    transform: translateY(-1px);
    color: var(--gh-orange);
    filter: brightness(1.02);
}

/* WIDGET CARD */
.gh-card.widget {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.gh-card.widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.gh-widget-header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gh-widget-header>span {
    color: var(--gh-text-primary);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    display: flex;
    gap: 8px;
    align-items: center;
}

.gh-weight-button {
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: var(--gh-text-primary);
    background: transparent;
    border: none;
    font-size: 12px;
    transition: color 0.12s ease;
}

.gh-weight-button:hover {
    color: rgba(255, 122, 26, 0.75);
}

/* WEIGHT */
.gh-weight-component {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-weight-row {
    font-size: 12px;
    display: grid;
    grid-template-columns: 60px 1fr 110px;
    gap: 10px;
    align-items: center;
}

.gh-weight-label {
    color: var(--gh-text-tertiary);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.gh-weightBar {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.gh-weightFill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 122, 26, 0.35), rgba(255, 122, 26, 0.9));
    border-radius: 999px;
    transition: width 0.25s ease;
}

.gh-weight-value {
    color: var(--gh-text-primary);
    font-size: 12px;
    white-space: nowrap;
    letter-spacing: 0.06em;

    display: grid;
    gap: 4px;
    grid-template-columns: 45px auto 1fr;
    align-items: center;
}

.gh-weight-value span:last-child {
    justify-self: end;
}

.gh-weight-total {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--gh-border-soft);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gh-weight-total span:first-child {
    color: var(--gh-text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.gh-weight-total span:last-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--gh-text-primary);
}

/* TRUCK STATE */
.gh-truck-state-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
}

.gh-truck-state-item {
    height: 70px;
    padding: 10px 8px;
    border-radius: 8px;
    /* background: #f0f1f3; */
    /* border: 1px solid var(--gh-border-subtle); */

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    /* background: #f0f1f3; */
    /* box-shadow: 2px 2px 6px #ece; ujj*/
    box-shadow: 2px 2px 6px rgba(127, 82, 0, 0.18);
}

.gh-truck-state-dot {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: var(--muted2);
    box-shadow: 0 0 18px rgba(207, 207, 207, 0.40);
}

.gh-truck-state-item.on .gh-truck-state-dot {
    background: #22c55e;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

.gh-truck-state-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gh-text-tertiary);
}

/* analytics */
.gh-analytics {
    display: flex;
    justify-content: space-between;
}

/* PLAYER */
.gh-player {
    height: 120px;
    z-index: 35;

    position: fixed;
    left: 12px;
    right: 364px;
    bottom: 12px;

    display: flex;
    align-items: center;
    gap: 30px;
}

.gh-player-addons {
    display: flex;
}

.gh-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.10);
}

/* controls */
.gh-controls {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gh-controlsTop {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gh-progressText {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.gh-speed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.gh-speed>span {
    font-size: 10px;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.gh-speed select {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--gh-text-primary);
    border-radius: 999px;
    padding: 6px 10px;
    outline: none;
}

.gh-btnRow {
    margin-top: 10px;
    margin-right: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gh-round {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.55);
    color: var(--gh-text-primary);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.gh-round:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

.gh-round:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.gh-round.primary {
    width: 48px;
    height: 48px;
    border-color: rgba(255, 122, 26, 0.38);
    background: rgba(255, 122, 26, 0.18);
}

.gh-round.primary i {
    color: var(--accent);
    font-size: 20px;
}

.gh-slider input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--accent) var(--p, 0%), rgba(255, 165, 0, 0.12) var(--p, 0%));
}

.gh-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 3px solid var(--accent);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.22);
}

.gh-sliderMeta {
    margin-top: 4px;
    font-size: 10px;
    color: var(--gh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: flex;
    justify-content: space-between;
}

/* marker */
.gh-marker {
    background: transparent !important;
    border: none !important;
}

.gh-markerInner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
}

.gh-markerInner img {
    width: 22px;
    height: 22px;
    transition: transform 0.22s ease;
}

.gh-markerPulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 122, 26, 0.18);
    animation: ghPulse 1.6s infinite;
}

@keyframes ghPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* ========== TOP BUTTONS BAR ========== */
.gh-buttons {
    z-index: 40;
    overflow: hidden;

    position: fixed;
    top: 6px;
    left: 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;

    border-radius: 10px;
    /* background: rgba(255, 255, 255, 0.62); */
    /* border: 1px solid rgba(0, 0, 0, 0.08); */
    /* box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12); */
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    box-shadow: var(--gh-icon-shadow);
}

.gh-button-back {
    padding: 0 6px;
    cursor: pointer;
    height: 30px;

    font-size: 0.8rem;
    color: var(--gh-text-primary);
    background: none;
    border: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.gh-button-back:hover {
    transform: translateY(-1px);
    color: var(--gh-orange);
    filter: brightness(1.02);
}

/* ========== DETAILSCOMPONENT ========== */
.gh-detailsComponent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.gh-vehicleImg {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.gh-vehicleInfo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-vehicleInfo .row {
    display: flex;
    justify-content: space-between;
    gap: 2px;
}

.gh-vehicleInfo .k {
    color: var(--muted2);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.gh-vehicleInfo .v {
    color: var(--gh-text-primary);
    font-size: 12px;
}

/* ========== end of DETAILSCOMPONENT ========== */

/* ========== CURRENTCOMPONENT ========== */

.gh-currentComponent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.gh-currentComponent-title {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.gh-currentComponent-title .sep {
    color: var(--muted2);
}

.gh-currentComponent .dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.35);
}

.gh-currentComponent-timestamp {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--gh-text-primary);
}

/* ========== end CURRENTCOMPONENT ========== */


/* ========== MOBILE WIDGET BUTTONS ========== */
.gh-widget-buttons {
    display: none;
    width: 200px;
    overflow: hidden;
}

.gh-widget-button {
    cursor: pointer;

    width: 50px;
    height: 40px;

    display: grid;
    place-items: center;

    background: transparent;
    border: none;

    color: rgba(0, 0, 0, 0.72);
    transition: background 0.15s ease, color 0.15s ease;
}

.gh-widget-button+.gh-widget-button {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.gh-widget-button:hover {
    background: rgba(255, 255, 255, 0.78);
    color: rgba(0, 0, 0, 0.90);
}

.gh-widget-button.active {
    color: var(--accent);
}

/* =======================
   MOBILE WIDGET DRAWER
   ======================= */

/* default (desktop) */
.gh-mobileDrawer {
    display: none;
}

/* 1100px and below: right panel hidden + drawer enabled */
@media (max-width: 1100px) {
    .gh-details-panel {
        display: none;
    }

    .gh-player {
        right: 12px;
    }

    /* keep widget buttons visible */
    .gh-widget-buttons {
        display: flex;
    }

    /* drawer shell */
    .gh-mobileDrawer {
        display: block;
        position: fixed;
        left: 50%;
        top: 60px;
        /* above widget buttons */
        transform: translateX(-50%);
        z-index: 60;
        width: min(560px, calc(100vw - 24px));
        pointer-events: none;
        /* only inner clickable */
    }

    /* drawer content */
    .gh-mobileDrawer-inner {
        pointer-events: auto;
        max-height: 52vh;
        overflow: auto;

        opacity: 0;
        transform: translateY(-300px) scale(0.98);
        transition: opacity 160ms ease, transform 180ms ease;
    }

    .gh-mobileDrawer.open .gh-mobileDrawer-inner {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* extra small tweaks */
@media (max-width: 768px) {
    .gh-player-addons {
        display: none;
    }

    .gh-mobileDrawer {
        bottom: 66px;
        width: calc(100vw - 16px);
    }

    .gh-mobileDrawer-inner {
        max-height: 58vh;
    }

    .gh-topbar-title {
        display: none;
    }

    .gh-player {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .gh-divider {
        display: none;
    }
}/* Enhanced Design Variables */
:root {
  --dch-bg: #f8fafc;
  --dch-card: #ffffff;
  --dch-border: #e2e8f0;
  --dch-border-light: #f1f5f9;
  
  --dch-primary: #3b82f6;
  --dch-primary-light: #eff6ff;
  --dch-secondary: #64748b;
  --dch-success: #10b981;
  --dch-warning: #f59e0b;
  --dch-danger: #ef4444;
  
  --dch-text-primary: #0f172a;
  --dch-text-secondary: #475569;
  --dch-text-tertiary: #94a3b8;
  
  --dch-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --dch-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --dch-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --dch-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
  
  --dch-radius-sm: 6px;
  --dch-radius: 10px;
  --dch-radius-lg: 14px;
  --dch-radius-xl: 18px;
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap Icons adjustments */
.bi {
  /* font-size: 1em; */
  /* vertical-align: -0.125em; */
}

.bi-circle-fill {
  font-size: 0.6em;
  margin-right: 4px;
}

.bi-circle-fill.online {
  color: var(--dch-success);
}

.bi-circle-fill.offline {
  color: var(--dch-danger);
}

.dch-root {
  display: flex;
  height: 100vh;
  background: var(--dch-bg);
  color: var(--dch-text-primary);
  overflow: hidden;
}

/* EMPTY STATE */
.dch-root-empty {
  align-items: center;
  justify-content: center;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}

.dch-card {
  background: var(--dch-card);
  border-radius: var(--dch-radius-xl);
  border: 1px solid var(--dch-border);
  box-shadow: var(--dch-shadow-xl);
  backdrop-filter: blur(10px);
}

.dch-empty-card {
  padding: 40px 48px;
  text-align: center;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--dch-primary-light), #ffffff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dch-primary);
  box-shadow: var(--dch-shadow);
}

.dch-empty-card h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--dch-text-primary);
}

.dch-empty-card p {
  margin: 0;
  color: var(--dch-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* SIDEBAR */
.dch-sidebar {
  width: 420px;
  min-width: 380px;
  padding: 24px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, var(--dch-bg) 100%);
  border-right: 1px solid var(--dch-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dch-text-tertiary) transparent;
}

.dch-sidebar::-webkit-scrollbar {
  width: 6px;
}

.dch-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.dch-sidebar::-webkit-scrollbar-thumb {
  background: var(--dch-text-tertiary);
  border-radius: 3px;
}

/* Header */
.dch-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dch-border-light);
}

.dch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dch-text-secondary);
}

.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--dch-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--dch-radius-sm);
  transition: all 0.2s;
}

.back-button:hover {
  background: var(--dch-primary-light);
}

.breadcrumb-separator {
  color: var(--dch-text-tertiary);
}

.dch-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--dch-text-primary);
  margin: 4px 0;
  background: linear-gradient(135deg, var(--dch-text-primary), var(--dch-text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vehicle-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.vehicle-rego {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--dch-primary), #2563eb);
  color: white;
  border-radius: var(--dch-radius);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--dch-shadow);
}

.org-badge {
  padding: 4px 10px;
  background: var(--dch-primary-light);
  color: var(--dch-primary);
  border-radius: var(--dch-radius);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--dch-primary-light);
  border-radius: var(--dch-radius);
  font-size: 13px;
  color: var(--dch-primary);
  font-weight: 500;
}

/* Sections */
.dch-section {
  background: var(--dch-card);
  border-radius: var(--dch-radius-xl);
  border: 1px solid var(--dch-border);
  box-shadow: var(--dch-shadow);
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dch-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progress-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--dch-success);
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: var(--dch-radius);
}

.points-count {
  font-size: 12px;
  color: var(--dch-text-tertiary);
}

/* Timeline Slider */
.timeline-slider-container {
  margin: 20px 0;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--dch-text-tertiary);
}

.custom-slider {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.slider-input {
  position: absolute;
  width: 100%;
  height: 20px;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.slider-track {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--dch-border);
  border-radius: 2px;
  overflow: hidden;
}

.slider-progress {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--dch-primary), var(--dch-success));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.slider-thumb {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid var(--dch-primary);
  border-radius: 50%;
  box-shadow: var(--dch-shadow);
}

/* Playback Controls */
.playback-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.playback-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--dch-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--dch-shadow);
}

.control-btn.secondary {
  background: white;
  color: var(--dch-text-secondary);
  border: 1px solid var(--dch-border);
}

.control-btn.secondary:hover:not(:disabled) {
  background: var(--dch-bg);
  transform: translateY(-1px);
  box-shadow: var(--dch-shadow-lg);
}

.control-btn.primary {
  background: linear-gradient(135deg, var(--dch-primary), #2563eb);
  color: white;
  padding: 12px 32px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.control-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.speed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.speed-controls label {
  font-size: 13px;
  color: var(--dch-text-secondary);
  font-weight: 500;
}

.speed-buttons {
  display: flex;
  gap: 6px;
}

.speed-btn {
  padding: 6px 12px;
  border: 1px solid var(--dch-border);
  background: white;
  color: var(--dch-text-secondary);
  border-radius: var(--dch-radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.speed-btn:hover {
  border-color: var(--dch-primary);
  color: var(--dch-primary);
}

.speed-btn.active {
  background: var(--dch-primary);
  border-color: var(--dch-primary);
  color: white;
}

/* Snapshot Section */
.snapshot-section {
  flex: 1;
}

.snapshot-meta {
  font-size: 12px;
  color: var(--dch-text-tertiary);
  background: var(--dch-primary-light);
  padding: 4px 8px;
  border-radius: var(--dch-radius);
}

.snapshot-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-grid {
  display: grid;
  gap: 16px;
}

.info-card {
  background: var(--dch-bg);
  border-radius: var(--dch-radius-lg);
  padding: 16px;
  border: 1px solid var(--dch-border-light);
}

.info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.info-icon {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: var(--dch-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dch-primary);
  box-shadow: var(--dch-shadow-sm);
}

.info-icon .bi {
  font-size: 16px;
}

.info-title {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-title h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--dch-text-primary);
  margin: 0;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--dch-radius);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.online {
  background: rgba(16, 185, 129, 0.1);
  color: var(--dch-success);
}

.status-badge.offline {
  background: rgba(239, 68, 68, 0.1);
  color: var(--dch-danger);
}

.toggle-chart {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--dch-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.info-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.info-row .label {
  color: var(--dch-text-secondary);
}

.info-row .value {
  color: var(--dch-text-primary);
  font-weight: 500;
}

.info-row .value.highlight {
  color: var(--dch-primary);
  font-weight: 600;
}

.unit {
  font-size: 11px;
  color: var(--dch-text-tertiary);
  margin-left: 2px;
}

.total-weight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: var(--dch-radius);
  border: 1px solid var(--dch-border);
  margin-bottom: 16px;
}

.total-weight .label {
  font-size: 13px;
  color: var(--dch-text-secondary);
}

.total-weight .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--dch-text-primary);
}

.weight-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weight-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.weight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  color: var(--dch-text-secondary);
}

.weight-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.weight-bar-container {
  flex: 1;
  height: 20px;
  background: var(--dch-border);
  border-radius: var(--dch-radius);
  overflow: hidden;
}

.weight-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  border-radius: var(--dch-radius);
  transition: width 0.3s ease;
  min-width: 40px;
}

.weight-percentage {
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.weight-value {
  min-width: 60px;
  text-align: right;
  font-weight: 500;
  color: var(--dch-text-primary);
  font-size: 12px;
}

.location-card {
  grid-column: 1 / -1;
}

.location-details {
  background: white;
  border-radius: var(--dch-radius);
  padding: 12px;
  border: 1px solid var(--dch-border);
  margin-top: 12px;
}

.coordinates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dch-text-primary);
  font-weight: 500;
  margin-bottom: 8px;
}

.address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--dch-text-secondary);
  line-height: 1.4;
}

.address .bi {
  margin-top: 2px;
}

/* Quick Stats */
.quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: var(--dch-radius-lg);
  border: 1px solid var(--dch-border);
  box-shadow: var(--dch-shadow-sm);
}

.stat-card .bi {
  color: var(--dch-primary);
  font-size: 18px;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--dch-text-primary);
}

.stat-label {
  font-size: 11px;
  color: var(--dch-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* MAP AREA */
.dch-map-shell {
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dch-map-container {
  flex: 1;
  background: var(--dch-card);
  border-radius: var(--dch-radius-xl);
  overflow: hidden;
  box-shadow: var(--dch-shadow-xl);
  display: flex;
  flex-direction: column;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: white;
  border-bottom: 1px solid var(--dch-border);
}

.map-title h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--dch-text-primary);
  margin: 0 0 4px 0;
}

.map-stats {
  display: flex;
  gap: 16px;
}

.map-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--dch-text-tertiary);
}

.map-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.current-time {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--dch-primary-light);
  color: var(--dch-primary);
  border-radius: var(--dch-radius);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--dch-shadow-sm);
}

.map-wrapper {
  flex: 1;
  position: relative;
  background: var(--dch-bg);
}

.dch-map {
  width: 100%;
  height: 100%;
}

/* Custom Marker */
.current-marker {
  background: transparent !important;
  border: none !important;
}

.current-marker .marker-pulse {
  position: relative;
}

.current-marker .marker-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dch-primary);
  animation: pulse 2s infinite;
}

.current-marker .marker-inner {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dch-shadow-lg);
  font-size: 16px;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Map Overlay */
.map-overlay {
  position: absolute;
  left: 24px;
  bottom: 24px;
  pointer-events: none;
}

.location-card-overlay {
  pointer-events: auto;
  max-width: 320px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--dch-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--dch-shadow-lg);
}

.location-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dch-text-secondary);
  margin-bottom: 8px;
}

.location-address {
  font-size: 13px;
  color: var(--dch-text-primary);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .dch-root {
    flex-direction: column;
  }

  .dch-sidebar {
    width: 100%;
    min-width: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--dch-border);
  }

  .dch-map-shell {
    height: 50vh;
    padding: 16px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .quick-stats {
    grid-template-columns: 1fr;
  }

  .map-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .map-stats {
    justify-content: space-between;
  }
}

/* Add these styles at the end of your CSS file */

.map-error {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: var(--dch-radius);
  padding: 40px;
  text-align: center;
  color: var(--dch-text-secondary);
}

.map-error .bi {
  font-size: 48px;
  color: var(--dch-warning);
  margin-bottom: 16px;
}

.map-error p {
  margin: 0;
  font-size: 14px;
}

.dch-map {
  min-height: 400px;
}

/* Ensure map container has proper dimensions */
.map-wrapper {
  position: relative;
  flex: 1;
  min-height: 0; /* Important for flex layouts */
}

.dch-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

/* Add a loading state */
.dch-map-container.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dch-map-container.loading::after {
  content: 'Loading map...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  color: var(--dch-primary);
  font-weight: 500;
}/* toast-theme.css */
:root {
  --tt-primary: #003366;
  --tt-secondary: #0066cc;
  --tt-bg: rgba(255, 255, 255, 0.94);
  --tt-text: #1e293b;
  --tt-shadow: 0 10px 30px -5px rgba(2, 6, 23, 0.15);
  --tt-border: rgba(15, 23, 42, 0.08);
}

/* The Main Pill */
.Toastify__toast-container .tt-toast {
  position: relative !important;
  overflow: hidden !important;
  /* CRITICAL: This clips the progress bar to the pill curve */
  border-radius: 12px !important;
  min-height: 50px !important;
  margin-bottom: 12px !important;

  /* Left padding (50px) allows space for the 42px rail + icon */
  padding: 8px 24px 8px 50px !important;

  background: var(--tt-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--tt-shadow) !important;
  border: 1px solid var(--tt-border) !important;
  display: flex !important;
  align-items: center !important;
}

/* THE LEFT COLOR RAIL */
.Toastify__toast-container .tt-toast::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 42px;
  background: linear-gradient(135deg, var(--tt-primary), var(--tt-secondary));
  z-index: 1;
}

/* TYPE SPECIFIC RAIL COLORS */
.Toastify__toast--info.tt-toast::before {
  background: linear-gradient(135deg, var(--tt-primary), var(--tt-secondary)) !important;
}

.Toastify__toast--success.tt-toast::before {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

/* .Toastify__toast--error.tt-toast::before { background: linear-gradient(135deg, #f9812d, #fa9d5b) !important; } */
.Toastify__toast--error.tt-toast::before {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

.Toastify__toast--warning.tt-toast::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
}

/* POSITION THE ICON INSIDE THE RAIL */
.Toastify__toast-container .Toastify__toast-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: 18px !important;
  margin: 0 !important;
}

.Toastify__toast-container .Toastify__toast-icon svg {
  fill: #fff !important;
}

/* THE MESSAGE TEXT */
.Toastify__toast-container .tt-body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--tt-text) !important;
  line-height: 1.4 !important;
}

/* THE PROGRESS BAR (Fixed at the absolute bottom edge) */
.Toastify__toast-container .tt-progress {
  position: absolute !important;
  bottom: 0px !important;
  /* Flushed to bottom */
  left: 42px !important;
  width: 100% !important;
  height: 4px !important;
  /* Thick enough to be visible but sleek */

  /* Overriding Toastify defaults */
  top: auto !important;
  border-radius: 0 !important;
  transform-origin: left !important;
  opacity: 0.8 !important;
  z-index: 3 !important;
}

/* Force the library's internal animation class to be snappy */
.Toastify__progress-bar--animated {
  animation-play-state: running !important;
}

/* TYPE SPECIFIC PROGRESS COLORS */
.Toastify__toast--info .tt-progress {
  background: var(--tt-secondary) !important;
}

.Toastify__toast--success .tt-progress {
  background: #16a34a !important;
}

/* .Toastify__toast--error .tt-progress { background: #f9812d !important; } */
.Toastify__toast--error .tt-progress {
  background: #ef4444 !important;
}

.Toastify__toast--warning .tt-progress {
  background: #fbbf24 !important;
}

/* HIDE CLOSE BUTTON */
.Toastify__close-button {
  display: none !important;
}/* Theme Variables */
:root,
[data-theme="light"] {
  --border-bottom: rgba(15, 23, 42, 0.08);

  /* general */
  --f-logo-primary: #0e336e;
  --f-logo-secondary: #2f7fd6;
  --f-logo-tertiary: #466592;
  --f-logo-accent: #5fa9f0;

  --f-orange-light: #f97316;
  --f-orange: #ff7a1a;
  --f-red: #DB3030;

  /* glass surface */
  --f-card-bg: rgba(255, 255, 255, 0.22);
  --f-glass-border: rgba(255, 255, 255, 0.5);
  --f-glass-box-shadow: -2px -2px 5px 0px rgba(0, 0, 0, 0.2);
  --f-glass-blur: blur(14px);

  /* input */
  --fl-notch-dark: rgba(15, 23, 42, 0.12);
  --fl-notch-light: rgba(255, 255, 255, 1);
  --fl-notch-focus-top: rgba(15, 23, 42, 0.42);
  --f-notch-focus-base: rgba(15, 23, 42, 0.22);

  /* image */
  --f-img-radius: 18px;
  --f-img-border: 1px solid rgba(15, 23, 42, 0.1);
  --f-img-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* mini card */
  --f-card-box-bg: rgba(255, 255, 255, 0.5);
  --f-card-box: rgba(255,255,255,0.7);
  --f-box-shadow: 0 2px 4px rgba(44, 65, 86, 0.25);

  --f-bg-main: #f8fafc;
  --f-bg-secondary: #f1f5f9;
  --f-bg-tertiary: #ffffff;

  --f-text-label: #003366f2;
  --f-text-label-alt: #0066ccb8;
  --f-text-title: #0066cc;

  --f-text-primary: rgba(15, 23, 42, 1);
  --f-text-secondary: rgba(15, 23, 42, 0.82);
  --f-text-secondary-alt: rgba(15, 23, 42, 0.92);
  --f-text-tertiary: rgba(15, 23, 42, 0.6);
  --f-text-muted: rgba(15, 23, 42, 0.38);
  --f-text: rgba(15, 23, 42, 0.92);

  /* glass card */
  --f-info_bg: rgba(255, 255, 255, 0.45);
  --f-card-border: 1px solid rgba(255, 255, 255, 0.22);
  --f-card-border-radius: 16px;
  --f-card-blur: blur(14px);
  --f-card-box-shadow: 0 2px 4px rgba(44, 65, 86, 1);

  --f-highlight-bg: rgba(15, 23, 42, 0.08);
  --f-bg-highlight: rgba(0, 0, 0, 0.04);

  --f-btn-bg: rgba(255, 255, 255, 0.85);

  --f-accent: #4f46e5;
  --f-accent-hover: #4338ca;
  --f-success: #10b981;
  --f-warning: #f59e0b;
  --f-warning-hover: #f59e0b33;
  --f-warning-text: #c47e08;
  --f-danger: #ef4444;
  --f-danger-hover: #ef444433;
  --f-danger-text: #bf3636;

  --f-ignore: #64748b;

  --f-primary: #003366;
  --f-secondary: #0066cc;
  --f-tertiary: #b7d3f0;
  --f-selected: #b1c7e5;

  --f-bg-card: rgba(255, 255, 255, 0.72);
  --f-border-color: rgba(15, 23, 42, 0.1);

  --f-card-radius: 12px;
  --f-radius-sm: 14px;
  --f-radius-lg: 24px;

  --f-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --f-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.16);

  --f-shadow-3d:
    6px 6px 12px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.15);

  --f-card-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.15);
  --f-card-shadow-hover:
    0px 2px 4px rgba(0, 0, 0, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.15);

  --fl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --f-shadow-md: 0 10px 26px rgba(2, 6, 23, 0.12);
}

[data-theme="dark"] {
  --border-bottom: rgba(255, 255, 255, 0.08);

  /* glass surface */
  --f-card-bg: rgba(255, 255, 255, 0.22);
  --f-glass-border: rgba(255, 255, 255, 0.1);
  --f-glass-box-shadow: -2px -2px 5px 0px rgba(255, 255, 255, 0.2);
  --f-glass-blur: blur(14px);

  /* input */
  --fl-notch-dark: rgba(0, 0, 0, 0.6);
  --fl-notch-light: rgba(255, 255, 255, 0.03);
  --fl-notch-focus-top: rgba(0, 0, 0, 0.42);
  --f-notch-focus-base: rgba(255, 255, 255, 0.22);

  /* image */
  --f-img-radius: 18px;
  --f-img-border: 1px solid rgba(148, 163, 184, 0.5);
  --f-img-box-shadow: 0 4px 12px rgba(148, 163, 184, 0.08);

  --f-bg-main: #0f172a;
  --f-bg-secondary: #1e293b;
  --f-bg-tertiary: #334155;

  --f-text-label: #66a3ffff;
  --f-text-label-alt: #3b82ccb8;
  --f-text-title: #3b82cc;

  /* --f-text-primary: rgba(241, 245, 249, 1);
  --f-text-secondary: rgba(203, 213, 225, 1);
  --f-text-tertiary: rgba(148, 163, 184, 1);
  --f-text-muted: rgba(120, 135, 160, 1); */

  --f-text-primary: rgba(241, 245, 249, 1);
  --f-text-secondary: rgba(241, 245, 249, 0.75);
  --f-text-secondary-alt: rgba(241, 245, 249, 0.85);
  --f-text-tertiary: rgba(241, 245, 249, 0.6);
  --f-text-muted: rgba(241, 245, 249, 0.4);
  --f-text: rgba(203, 213, 225, 0.92);

  /* glass card */
  --f-info_bg: rgba(10, 12, 18, 0.45);
  --f-card-border: 1px solid rgba(255, 255, 255, 0.22);
  --f-card-border-radius: 16px;
  --f-card-blur: blur(14px);
  --f-card-box-shadow: 0 2px 4px rgba(44, 65, 86, 1);

  --f-highlight-bg: rgba(255, 255, 255, 0.08);
  --f-bg-highlight: rgba(255, 255, 255, 0.04);

  --f-btn-bg: rgba(30, 41, 59, 0.85);

  --f-card-box-bg: rgba(0, 0, 0, 0.4);
  --f-card-box: rgba(0, 0, 0, 0.4);

  --f-accent: #818cf8;
  --f-accent-hover: #6366f1;
  --f-success: #34d399;
  --f-warning: #fbbf24;
  --f-warning-hover: #fbbf2433;
  --f-warning-text: #f7b13b;
  --f-danger: #f87171;
  --f-danger-hover: #f8717133;
  --f-danger-text: #f26969;

  --f-ignore: #94a3b8;

  --f-primary: #66a3ff;
  --f-secondary: #4d94ff;
  --f-tertiary: #334155;
  --f-selected: #1e3a5f;

  --f-bg-card: rgba(30, 41, 59, 0.72);

  --f-border-color: rgba(226, 232, 240, 0.1);

  --f-card-radius: 12px;
  --f-radius-sm: 14px;
  --f-radius-lg: 24px;

  --f-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.3);
  --f-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.5);

  --f-shadow-3d:
    4px 4px 8px rgba(0, 0, 0, 0.25), -1px -1px 2px rgba(255, 255, 255, 0.1);

  --f-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --f-card-shadow:
    0px 2px 4px rgba(255, 255, 255, 0.25), -1px -1px 2px rgba(0, 0, 0, 0.1);
  --f-card-shadow-hover:
    0px 2px 4px rgba(255, 255, 255, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.1);

  --fl-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.2);
  --f-shadow-md: 0 10px 26px rgba(2, 6, 23, 0.4);
}

/* Glass Panel Base - Uses CSS variables from parent theme */
.glass-panel {
  background: var(--f-btn-bg, rgba(15, 23, 42, 0.92));
  backdrop-filter: blur(24px);
  border: 1px solid var(--f-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  box-shadow: var(--f-shadow-3d, 6px 6px 12px rgba(0, 0, 0, 0.4));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif; */
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Main Dashboard */
.fleet-dashboard {
  position: relative;
  width: 100vw;
  height: 100vh;

  overflow: hidden;
  background: var(--f-bg-main);

  display: flex;

  transition: all 0.3s ease;
}

/* Map Section */
.map-section {
  flex: 1;
  position: relative;
  transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;

  z-index: 1001;
  cursor: pointer;

  font-size: 13px;
  color: var(--f-text-primary);

  background: var(--f-btn-bg);
  border-radius: var(--f-card-radius);
  border: 1px solid var(--f-glass-border);
  box-shadow: var(--f-shadow-md);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-text-stroke: 0.5px currentColor !important;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-3px) scale(1.05);
  color: var(--f-orange-light, #4f46e5);
}

/* fleet message chat */
.floating-chat-btn {
  position: fixed;
  bottom: 120px;
  left: 24px;
  width: 44px;
  height: 44px;
  z-index: 1001;
  cursor: pointer;

  color: var(--f-bg-secondary);
  font-size: 20px;

  border-radius: 50%;
  border: none;
  background: var(--f-orange, #3b82f6);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);

  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

[data-theme="dark"] .floating-chat-btn {
  background: var(--bg-tertiary, #1e293b);
  color: var(--f-orange-light);
}

.floating-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

/* ===================== */
/* buttons */
/* ===================== */
/* buttons */
.fleet-btn {
  height: 38px;
  padding: 0 16px;
  cursor: pointer;

  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--mp-shadow-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.fleet-btn > i {
  font-size: 1rem;
}

.fleet-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.1);
  border-color: rgba(0, 102, 204, 0.22);
}

.fleet-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.fleet-btn:focus-visible {
  outline: none;
  box-shadow: var(--mp-focus);
}

.fleet-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.fleet-btn-primary {
  border: none;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
  box-shadow: 0 16px 36px rgba(0, 51, 102, 0.22);
}

.fleet-btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.7);
}

.fleet-btn > span {
  width: 150px;
  font-size: 13px;
}

/* Responsive Design */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .theme-toggle-btn {
    width: 36px;
    height: 36px;
    top: 12px;
    left: 12px;
  }

  .floating-chat-btn {
    width: 36px;
    height: 36px;
    left: 12px;
    bottom: 214px;

    font-size: 16px;
  }
}

@media (max-width: 480px) {
}

/* Smooth transitions for theme switching */
.fleet-dashboard,
.stats-glass-panel,
.theme-toggle-btn,
.floating-chat-btn,
.error-card,
.retry-btn {
  transition: all 0.3s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--f-bg-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--f-text-muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--f-accent);
}
/* ============================================================
   FLEET LIST PAGE — Modern Glassmorphic UI Design System
   Desktop: vertical sidebar (right edge)
   Mobile:  horizontal swipe strip (bottom edge)
   ============================================================ */

@keyframes fl-slide-left {
  from {
    transform: translateX(24px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fl-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fl-shimmer {
  0% {
    background-position: -300px 0;
  }
  100% {
    background-position: 300px 0;
  }
}

@keyframes fl-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Desktop layout ─────────────────────────────────────────── */
.fleet-list-page {
  width: 320px;
  height: calc(100% - 20px);
  overflow: hidden;
  z-index: 1000;

  position: fixed;
  top: 10px;
  right: 10px;

  /* glass surface */
  /* background: var(--f-card-bg);
  border: 1px solid var(--f-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--f-card-radius);
  box-shadow: var(--f-glass-box-shadow);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur); */

  display: flex;
  flex-direction: column;

  animation: fl-slide-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fleet-list-page.fl-collapsed {
  display: none !important;
}

/* ── Container Header ─────────────────────────────────────────── */
.fl-sidebar-header {
  margin-left: 6px;
  margin-right: 6px;
  padding: 10px;

  /* background: rgba(15, 23, 42, 0.05); */
  /* glass surface */
  background: var(--f-card-bg, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--f-glass-border, rgba(255, 255, 255, 0.1));

  border-radius: 16px;

  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  /* box-shadow: var(--f-glass-box-shadow); */
  border-bottom: 1px solid
    var(--f-border-color, var(--f-border-glass, rgba(255, 255, 255, 0.1)));

  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-theme="dark"] .fl-sidebar-header {
  background: var(--f-card-bg, rgba(20, 24, 33, 0.85));
  border: 1px solid var(--f-glass-border, rgba(255, 255, 255, 0.06));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.fl-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fl-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.fl-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffc800;
  font-size: 18px;
  flex-shrink: 0;
}

.fl-brand-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--f-logo-primary, #fff);
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.fl-brand-text span {
  color: var(--f-logo-secondary, --f-primary);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.fl-btn-collapse {
  width: 28px;
  height: 28px;
  cursor: pointer;

  font-size: 13px;
  color: var(--f-text-tertiary, #64748b);
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;

  transition: all 0.15s ease;
}

.fl-btn-collapse:hover {
  color: var(--f-orange-light);
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .fl-btn-collapse:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Search Field ─────────────────────────────────────── */
/* search vehicle or rego */
.fl-search-field {
  width: 100%;
}

.fl-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fl-search-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;

  font-size: 13px;
  color: var(--f-text-secondary);
  opacity: 0.5;
}

.fl-input-wrapper:focus-within .fl-search-icon {
  color: var(--f-orange-light);
  opacity: 1;
}

.fl-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 32px; /* Space for the icon */

  font-size: 13px;
  color: var(--f-text-primary, #1e293b);

  outline: none;
  border-radius: 10px;
  background: var(--f-card-box-bg);
  border: 1px solid var(--f-border-color);
  box-shadow:
    inset 3px 3px 6px var(--fl-notch-dark),
    inset -1px -1px 3px var(--fl-notch-light);

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* THE "DEEP NOTCH" FOCUS STATE */
.fl-input:focus {
  transform: translateY(1px);

  box-shadow:
    inset 2px 2px 4px var(--fl-notch-focus-top),
    inset -1px -1px 1px var(--f-notch-focus-base);
}

.fl-input::placeholder {
  color: var(--f-text-secondary);
  opacity: 0.65;
}

.fl-search-shortcut {
  position: absolute;
  right: 12px;

  font-size: 11px;
  font-weight: 500;
  color: var(--f-text-secondary);

  padding: 1px 5px;
  border: 1px solid var(--f-border-color);
  border-radius: 4px;
  pointer-events: none;
}

.fl-btn-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;

  z-index: 10px;
  cursor: pointer;
  color: var(--f-danger);

  border: none;
  border-radius: 4px;
  background: transparent;

  display: grid;
  place-items: center;
}

.fl-btn-search-clear:hover {
  color: var(--f-accent-hover);
  background: var(--fl-danger-hover);
}

/* ── Segmented Control  ────── */
.fl-segment-control {
  padding: 4px;

  background: var(--f-bg-highlight);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;

  display: flex;
  gap: 2px;
  box-sizing: border-box;
}

.fl-segment-item {
  flex: 1;
  position: relative;
  height: 32px;
  padding: 4px 6px;
  cursor: pointer;

  color: var(--f-text-tertiary, #94a3b8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;

  background: transparent;
  border-radius: 8px;
  border: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-segment-item:hover {
  background: var(--f-glass-border);
  transform: translateY(-1px);
}

.fl-segment-item.active {
  background: linear-gradient(135deg, var(--f-primary), var(--f-secondary));
  background: linear-gradient(
    180deg,
    #5fa9f0 0%,
    #2f7fd6 25%,
    #466592 65%,
    #0e336e 100%
  );
  background: linear-gradient(180deg, #5fa9f0 0%, #2f7fd6 100%);

  box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4));
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Subtle inner top-border gloss */
}

.segment-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fl-text-secondary); /* Muted default */
  transition: color 0.15s ease;
}

.fl-segment-item.active .segment-label {
  color: rgba(255, 255, 255, 0.85);
}

.segment-item-count {
  position: absolute;
  right: 4px;
  top: 2px;

  display: none;
}

.fl-segment-item:hover .segment-item-count {
  display: flex;
}

.segment-count {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 500;
}

.segment-dot {
  width: 5px;
  height: 5px;
  margin: 2px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor; /* Subtle glow effect */
}
.dot-online {
  color: #10b981;
  background: currentColor;
}
.dot-idle {
  color: #f59e0b;
  background: currentColor;
}
.dot-offline {
  color: #94a3b8;
  background: currentColor;
}

/* Live Badge */
.fl-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.fl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2s infinite;
}

/* Live Badge */
/* ── Summary line ────────────────────────────────────────────── */
.fl-summary {
  margin: 4px;
  font-size: 11.5px;
  color: var(--f-text-tertiary);
}
.fl-loading-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--f-warning-text, #c47e08);
}
.fl-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--f-border-color);
  border-top-color: var(--f-secondary);
  border-radius: 50%;
  animation: fl-spin 0.6s linear infinite;
}

/* ── Scroll list (desktop vertical) ─────────────────────────── */
.fl-scroll-wrapper {
  flex: 1;
  min-height: 0; /* Keeps flex container from blowing out parent boundaries */

  overflow-y: auto; /* Allows vertical scroll */
  overflow-x: hidden; /* Prevents awkward side-to-side desktop wiggling */

  display: flex;
  flex-direction: column;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Scrollbar Styling */
.fl-scroll-wrapper::-webkit-scrollbar {
  width: 4px;
}

.fl-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--mb-border);
  border-radius: 10px;
}

/* .fl-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
} */

.fl-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--f-secondary, --f-primary);
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state-3d {
  padding: 20px;
  text-align: center;

  background: var(--f-card-bg, rgba(255, 255, 255, 0.85));

  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid
    var(--f-border-color, var(--f-border-glass, rgba(255, 255, 255, 0.1)));
  border-radius: 20px;
  box-shadow: var(--f-shadow-3d, 6px 6px 12px rgba(0, 0, 0, 0.4));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* animation: slideUp 0.3s ease-out; */
  animation: fl-fade-up 0.3s ease-out both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fl-empty-icon {
  font-size: 28px;
  color: var(--f-text-muted);
}

.fl-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--f-text-secondary);
}

.fl-empty-reset {
  padding: 5px 14px;
  border-radius: 12px;
  border: 1px solid var(--f-border-color);
  background: var(--f-btn-bg, rgba(15, 23, 42, 0.92));

  box-shadow: var(--f-shadow-3d);
  color: var(--f-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}

.fl-empty-reset:hover {
  transform: translateY(-1px);
  color: var(--f-orange-light);
}

.tele-item-horizontal {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4));
}

.tele-label {
  display: block;
  font-size: 8px;
  font-weight: 800;
  color: var(--f-text-muted, #94a3b8);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tele-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--f-text-primary, #fff);
}

/* ============================================ */
/* MOBILE RESPONSIVE */
/* ============================================ */

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .fleet-list-page {
    /* unset desktop positioning */
    position: fixed;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0px;
    width: 100%;
    /* Lets the content define the bar's natural height */
    height: auto;

    z-index: 2000;

    /* todo ujj causing opacity issue in mobile view */
    /* animation: fl-mobile-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; */
  }

  @keyframes fl-mobile-up {
    from {
      transform: translateY(40px);
      opacity: 0.6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Explicitly hide the header on mobile */
  .fl-sidebar-header {
    display: none !important;
  }

  /* Clean up the Horizontal Scroll Strip */
  .fl-scroll-wrapper {
    display: flex;
    flex-direction: row;

    /* Crucial: Toggle axes for swipe strip */
    overflow-x: auto;
    overflow-y: hidden;

    /* Hide scrollbar default for clean UI */
    scrollbar-width: none;

    /* touch-action: pan-x; */
    touch-action: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* Padding to prevent box-shadows from getting clipped */
    /* padding: 12px 16px; */
  }

  /* hide on mobile */
  .fl-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  /* 1. If ANY card inside the wrapper is active, hide all cards... */
  .fl-scroll-wrapper:has(.fleet-card.active) .fleet-card {
    display: none !important;
  }
}

@media (max-width: 480px) {
}

/* Landscape Mode */
@media (max-width: 768px) and (orientation: landscape) {
}
/* Modern Card */
/* Animation Keyframes */
@keyframes fd-slide-left {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.fleet-card {
  margin: 6px;
  padding: 12px;
  overflow: hidden;
  cursor: pointer;

  /* glass surface */
  background: var(--f-card-bg);
  border: 1px solid
    var(--f-border-color, var(--f-border-glass, rgba(255, 255, 255, 0.1)));
  border-radius: var(--f-card-radius);
  box-shadow: var(--f-card-shadow, 6px 6px 12px rgba(0, 0, 0, 0.4));
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);

  display: flex;
  flex-direction: column;
  gap: 10px;

  /* remove default shrink so scrollable */
  flex-shrink: 0;

  /* ── MOBILE FRIENDLY INITIAL STATE ── */
  opacity: 0;
  transform: translateY(
    10px
  ); /* Small upward nudge instead of huge side-slide */
  animation: fl-mobile-fade-up 0.25s ease-out forwards;
}

/* ── NEW MOBILE ANIMATION KEYFRAME ── */
@keyframes fl-mobile-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fleet-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--f-card-shadow-hover, 8px 8px 16px rgba(0, 0, 0, 0.5));
}

.fleet-card.active {
  /* border-color: var(--f-accent, #6366f1); */
  /* background: rgba(99, 102, 241, 0.1); */
  /* box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4)); */

  box-shadow:
    0 2px 4px rgba(14, 51, 110, 0.4),
    -1px -1px 6px rgba(14, 51, 110, 0.3); /* Keeps top glass edge sharp */
}

.fleet-card-header {
  position: relative;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-bottom);

  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: end;
}

.fc-img-container {
  position: relative;
}

.fc-img {
  width: 56px;
  height: 56px;
  border-radius: var(--f-img-radius);
  object-fit: cover;

  border: var(--f-img-border);
  box-shadow: var(--f-img-box-shadow);
}

.fc-status-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;

  font-size: 10px;
  color: white;
  border-radius: 50%;
  border: 2px solid white;

  display: grid;
  place-items: center;
}

.fc-status-badge.online {
  background: var(--f-success, #10b981);
  box-shadow: 0 0 8px var(--f-success, #10b981);
  /* color: var(--f-success, #10b981); */
  animation: pulse 2s infinite;
}
.fc-status-badge.idle {
  background: var(--f-warning);
  box-shadow: var(--f-warning, #94a3b8);
}
.fc-status-badge.offline {
  background: var(--f-ignore);
  box-shadow: var(--f-ignore, #94a3b8);
  /* color: var(--f-text-muted, #94a3b8); */
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.fc-meta-details {
  display: flex;
  flex-direction: column;
}
.fc-meta-rego {
  color: var(--f-text-label-alt);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.fc-meta-name {
  color: var(--f-text-label);
  font-size: 13px;
  line-height: 1.1;
  font-weight: 550;
  letter-spacing: 1px;
}
/* todo ujj */
.text-online {
  color: var(--clr-online);
}

.text-paused {
  color: var(--clr-paused);
}

.text-offline {
  color: var(--clr-offline);
}

/* Toggle */
.fc-switch-wrap {
  position: absolute;
  top: 0px;
  right: 0px;
}

.fc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.fc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.fc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  transition: 0.2s;
}

.fc-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
}

.fc-switch input:checked + .fc-slider {
  background: linear-gradient(135deg, var(--f-primary), var(--f-secondary));
}

.fc-switch input:checked + .fc-slider:before {
  transform: translate(20px, -50%);
}

.fleet-card-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  align-items: start;
}

.fleet-card-content.hide {
  display: none;
}

.fc-card-box {
  padding: 4px 8px;

  background: var(--f-card-box-bg);
  border-radius: 6px;
  /* box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4)); */
  box-shadow: var(--f-box-shadow);
}

.fc-card-box.full {
  grid-column: span 2;
}

.fc-card-box label {
  display: block;

  color: var(--f-text-tertiary, #94a3b8);

  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1px;
}

.fc-card-box .value {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-text-primary, #fff);
}

.fc-card-box .value.highlight {
  color: var(--f-text-title, #6366f1);
}

.fc-card-box .value.success {
  color: var(--f-success, #10b981);
}

.fc-card-box .value.warn {
  font-size: 9px;
  font-weight: 500;
  color: var(--f-warning, #94a3b8);
}

.fc-hover-expand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base state for breakdown section */
.fc-weight-breakdown {
  max-height: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout dividers */
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Active Hover Trigger State */
.fc-hover-expand:hover {
  background: var(--f-bg-highlight, rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.fc-hover-expand:hover .fc-weight-breakdown {
  max-height: 40px; /* Room for breakdown labels */
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--f-border-color, rgba(255, 255, 255, 0.08));
}
/* Breakdown text metrics formatting */
.breakdown-item {
  display: flex;
  flex-direction: column;
}

.breakdown-item .bd-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--f-text-tertiary, #64748b);
}

.breakdown-item .bd-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--f-text-secondary, #cbd5e1);
}

.fc-card-body-weight {
  padding: 2px;
  display: flex;
  justify-content: space-between;
}

.fc-body-pct {
  color: var(--f-text-label);
  font-size: 10px;
}

.fc-card-address {
  padding: 6px;

  background: var(--f-card-box-bg);
  border-radius: 8px;
  /* box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4)); */
  box-shadow: var(--f-box-shadow);

  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-card-address .fc-speedometer {
  min-width: 40px;
  border-right: 1px solid
    var(--f-border-color, var(--f-border-glass, rgba(255, 255, 255, 0.1)));

  display: flex;
  flex-direction: column;
  align-items: center;
}

.fc-card-address .fc-speed {
  font-size: 18px;
  font-weight: 700;
  color: var(--f-text-tertiary, #fff);
  line-height: 1;
}

.fc-card-address .fc-speed.moving {
  color: var(--f-success, #10b981);
}

.fc-card-address .fc-unit {
  margin-top: 2px;
  font-size: 8px;
  font-weight: 600;
  color: var(--f-text-secondary);
}

.fc-card-address .fc-address {
  flex: 1;

  font-size: 12.5px;
  color: var(--f-text-secondary-alt);
  line-height: 1.2;
}

/* ── DESKTOP ONLY ANIMATION OVERRIDE ── */
@media (min-width: 769px) {
  .fleet-card {
    transform: translateX(100px) scale(0.96);
    animation: fd-slide-left 0.28s ease-out forwards;
  }
}

@media (max-width: 768px) {
  /* Make every card take up almost full viewport width minus padding */
  .fleet-card {
    padding: 6px;
    /* glass surface */
    background: var(--f-card-bg);
    border: 1px solid var(--f-border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--f-card-radius);
    box-shadow: var(--f-card-shadow, 6px 6px 12px rgba(0, 0, 0, 0.4));
    backdrop-filter: var(--f-glass-blur);
    -webkit-backdrop-filter: var(--f-glass-blur);

    flex: 0 0 min(calc(100vw - 32px), 400px);
    scroll-snap-align: center;
  }

  /* 1. If ANY card inside the wrapper is active, hide all cards... */
  /* .fleet-card.active {
    display: none !important;
  } */
}
.fleet-status-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex-grow: 1;
}

.fcs-status-badge {
  padding: 4px;
  background: var(--f-highlight-bg);
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 6px;

  transition: all 0.2s ease;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--f-text-tertiary);
}

.badge-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.75px;
  color: var(--f-text-secondary);
}

/* OFF State */
.status-off {
  opacity: 0.5;
}

/* WARNING State (Active, Speed <= 10) */
.status-warning {
  background: var(--f-warning-hover);
}
.status-warning .indicator-dot {
  background: var(--f-warning);
  box-shadow: 0 0 5px var(--f-warning);
}
.status-warning .badge-label {
  color: var(--f-warning-text);
}

/* CRITICAL State (Active, Speed > 10) */
.status-critical {
  background: var(--f-danger-hover);
  animation: anim-critical-alert 1s infinite;
}
.status-critical .indicator-dot {
  background: var(--f-danger);
  box-shadow: 0 0 8px var(--f-danger);
}
.status-critical .badge-label {
  color: var(--f-danger-text);
}

@keyframes anim-critical-alert {
  0%,
  100% {
    background: #ef444433;
  }
  50% {
    background: #ef444466;
  }
}
/* Theme Variables - Inherits from parent */
.map-container-wrapper {
  --control-bg-light: rgba(255, 255, 255, 0.95);
  --control-bg-dark: rgba(30, 41, 59, 0.95);
  --control-shadow-light:
    0 4px 15px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --control-shadow-dark:
    0 4px 15px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --text-light: #1e293b;
  --text-dark: #f1f5f9;
  --border-light: rgba(255, 255, 255, 0.5);
  --border-dark: rgba(255, 255, 255, 0.1);
  --overlay-bg-light: rgba(248, 250, 252, 0.85);
  --overlay-bg-dark: rgba(15, 23, 42, 0.85);

  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary, #f1f5f9);
  transition: background 0.3s ease;
}

/* Dark theme specific */
[data-theme="dark"] .map-container-wrapper {
  background: var(--bg-tertiary, #1e293b);
}

.leaflet-map {
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary, #f1f5f9);
}

/* Leaflet tile layer adjustment for dark mode */
[data-theme="dark"] .leaflet-tile {
  filter: brightness(1.1) contrast(1.1);
  /* filter: brightness(0.8) contrast(1.2); */
}

/* Custom Zoom Control Styling */
.custom-zoom-control {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 1001;

  background: var(--control-bg-light);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: var(--control-shadow-light);
  border: 1px solid var(--border-light);

  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

[data-theme="dark"] .custom-zoom-control {
  background: var(--control-bg-dark);
  box-shadow: var(--control-shadow-dark);
  border: 1px solid var(--border-dark);
}

.zoom-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .zoom-btn {
  color: var(--text-dark);
}

.zoom-btn:hover {
  background: white;
  color: var(--f-orange-light, #4f46e5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .zoom-btn:hover {
  background: var(--bg-secondary, #334155);
  color: var(--f-orange-light, #818cf8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.zoom-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 2px 8px;
}

[data-theme="dark"] .zoom-divider {
  background: rgba(255, 255, 255, 0.08);
}

/* Floating Action Map Controls */
.map-control-btn-bbox {
  position: absolute;
  top: 92px;
  left: 24px;
  width: 44px;
  height: 44px;

  z-index: 1001;
  cursor: pointer;

  font-size: 13px;
  color: var(--f-text-primary);

  background: var(--f-btn-bg);
  border-radius: var(--f-card-radius);
  border: 1px solid var(--f-glass-border);
  box-shadow: var(--f-shadow-md);
  backdrop-filter: blur(8px);
  -webkit-text-stroke: 0.5px currentColor !important;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-control-btn-bbox:hover {
  transform: translateY(-3px) scale(1.05);
  color: var(--f-orange-light, #4f46e5);
}

.map-control-btn-locate {
  position: absolute;
  top: 160px;
  left: 24px;
  width: 44px;
  height: 44px;

  z-index: 1001;
  cursor: pointer;

  font-size: 13px;
  color: var(--f-text-primary);

  background: var(--f-btn-bg);
  border-radius: var(--f-card-radius);
  border: 1px solid var(--f-glass-border);
  box-shadow: var(--f-shadow-md);
  backdrop-filter: blur(8px);
  -webkit-text-stroke: 0.5px currentColor !important;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-control-btn-locate:hover {
  transform: translateY(-3px) scale(1.05);
  color: var(--f-orange-light, #4f46e5);
}

.map-control-btn-locate:active {
  transform: translateY(0) scale(0.98);
}

/* Location button active state */
.map-control-btn-locate {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.map-control-btn-locate:active {
  background: var(--f-orange-light, #4f46e5);
  color: white;
}

.map-control-btn-locate.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.map-control-btn-locate.hidden {
  opacity: 0;
  transform: translateY(8px); /* subtle slide down */
  pointer-events: none;
}

/* Modern Loading Overlay */
.map-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg-light);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

[data-theme="dark"] .map-loading-overlay {
  background: var(--overlay-bg-dark);
}

.loading-content {
  text-align: center;
}

.loading-spinner-ring {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(79, 70, 229, 0.1);
  border-left-color: var(--f-orange-light, #4f46e5);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

[data-theme="dark"] .loading-spinner-ring {
  border: 4px solid rgba(129, 140, 248, 0.2);
  border-left-color: var(--f-orange-light, #818cf8);
}

.map-loading-overlay p {
  color: var(--text-light);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}

[data-theme="dark"] .map-loading-overlay p {
  color: var(--text-dark);
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Leaflet Attribution Styling */
.leaflet-control-attribution {
  font-size: 9px !important;
  background: transparent !important;
  color: var(--text-muted, #94a3b8) !important;
  border: none !important;
  backdrop-filter: blur(4px);
  padding: 4px 8px !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .leaflet-control-attribution {
  color: var(--text-muted, #64748b) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.leaflet-control-attribution a {
  color: var(--f-orange-light, #4f46e5) !important;
}

[data-theme="dark"] .leaflet-control-attribution a {
  color: var(--f-orange-light, #818cf8) !important;
}

/* Leaflet Popup Styling for Theme */
.leaflet-popup-content-wrapper {
  background: var(--card-bg, white) !important;
  color: var(--text-primary, #1e293b) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg, 0 10px 25px -5px rgba(0, 0, 0, 0.1)) !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: var(--card-bg, #1e293b) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

.leaflet-popup-tip {
  background: var(--card-bg, white) !important;
}

[data-theme="dark"] .leaflet-popup-tip {
  background: var(--card-bg, #1e293b) !important;
}

.leaflet-popup-close-button {
  color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .leaflet-popup-close-button {
  color: var(--text-muted, #94a3b8) !important;
}

.leaflet-popup-close-button:hover {
  color: var(--danger, #ef4444) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .map-control-btn-bbox {
    width: 36px;
    height: 36px;
    top: 60px;
    left: 12px;
  }

  .map-control-btn-locate {
    width: 36px;
    height: 36px;
    top: 108px;
    left: 12px;
  }

  .custom-zoom-control {
    left: 12px;
    bottom: 184px;
  }

  .zoom-btn {
    width: 36px;
    height: 36px;
  }

  .map-control-btn-bbox svg {
    width: 16px;
    height: 16px;
  }

  .map-control-btn-locate svg {
    width: 16px;
    height: 16px;
  }

  .zoom-btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
}

/* Smooth transitions for theme switching */
.map-container-wrapper,
.custom-zoom-control,
.map-control-btn-bbox,
.map-control-btn,
.leaflet-popup-content-wrapper,
.leaflet-control-attribution {
  transition: all 0.3s ease;
}

/* Ensure markers look good in both themes */
.leaflet-marker-icon {
  transition: filter 0.3s ease;
}

[data-theme="dark"] .leaflet-marker-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}@media (hover:hover){.maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}}.maplibregl-ctrl button:not(:disabled):active{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23333' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2333b5e5' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}@keyframes maplibregl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.maplibregl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}[dir=rtl] .maplibregl-popup-anchor-left{flex-direction:row-reverse}[dir=rtl] .maplibregl-popup-anchor-right{flex-direction:row}[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-start}[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-start}.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.maplibregl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.maplibregl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{left:0;position:absolute;top:0;transition:opacity .2s;will-change:transform}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.maplibregl-user-location-dot:before{animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}@media (prefers-reduced-motion:reduce){.maplibregl-user-location-dot:before{animation:none}}@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}.maplibregl-cooperative-gesture-screen{align-items:center;background:rgba(0,0,0,.4);color:#fff;display:flex;font-size:1.4em;inset:0;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(pointer:coarse){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999}/* ── Marker root ─────────────────────────────────────────────────────── */
.mkr-root {
  position: relative;
  cursor: pointer;
  transform-origin: bottom center;
  transform: scale(var(--zoom-scale, 1));
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.2s ease;
  will-change: transform;
}
/* ── Status badge — mirrors fc-status-badge ──────────────────────────── */
@keyframes mkr-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes mkr-alert-ping {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
  }
}

/* ── Sonar rings ─────────────────────────────────────────────────────── */
.mkr-sonar {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkr-ring {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 50%;
  border: 1.5px solid var(--sc);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--sc) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--sc) 45%, transparent);
  /* animation: mkr-ping 2.8s ease-out infinite; */
  animation: mkr-ping 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.mkr-ring.r1 {
  animation-delay: 0s;
}
.mkr-ring.r2 {
  animation-delay: 0.4s;
}
.mkr-ring.r3 {
  animation-delay: 0.8s;
}
@keyframes mkr-ping {
  0% {
    transform: scale(0.18);
    opacity: 0.8;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
.mkr-selected .mkr-ring {
  animation-duration: 2.2s;
  border-width: 2px;
}
.mkr-alert .mkr-ring {
  animation-duration: 1.5s;
}

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.mkr-tooltip.leaflet-tooltip {
  padding: 4px 10px !important;
  pointer-events: auto;

  color: var(--f-text-primary, #fff);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  white-space: nowrap;

  border: 1px solid var(--f-border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--f-card-radius, 10px) !important;
  background: var(--f-card-bg, rgba(4, 13, 18, 0.95)) !important;
  box-shadow: var(--f-box-shadow, 6px 6px 12px rgba(0, 0, 0, 0.4)) !important;
  backdrop-filter: var(--f-glass-blur, blur(12px));
}
.mkr-tooltip.leaflet-tooltip::before {
  display: none !important;
}
.mkr-tooltip.leaflet-tooltip-top {
  margin-left: 0 !important;
}

.mkr-tooltip.leaflet-tooltip-top::before {
  left: 50% !important;
  transform: translateX(-50%);
}

.tt-main {
  display: grid;
  grid-template-columns: 50px auto 50px;
  align-items: center;
}

.tt-sep {
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: 0.2;
  margin: 0 8px;
}

.tt-rego {
  justify-self: end;
  text-align: right;
  color: var(--f-text-label, #e2e8f0);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.tt-speed {
  justify-self: start;
  color: var(--f-text-tertiary, #94a3b8);
  font-weight: 600;
  font-size: 11px;
}
.tt-speed.moving {
  color: var(--f-success, #10b981);
}
.tt-speed small {
  font-size: 8px;
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.mkr-tooltip .tt-expand {
  width: 0;
  min-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    margin-top 0.18s ease;

  margin-top: 0;
}

.mkr-tooltip:hover .tt-expand {
  width: auto;
  max-height: 120px;
  opacity: 1;
  margin-top: 8px;
}

/* Row 3: address */
.hud-address {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--f-text-secondary, #94a3b8);
}
.hud-pin-icon {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--f-text-tertiary, #64748b);
}

/* Row 4: coordinates — only meaningful on a map */
.hud-coords {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  color: var(--f-text-tertiary, #64748b);
  opacity: 0.7;
}
.hud-coords-sep {
  opacity: 0.4;
}

/* ── gps icon ────────────────────────────────── */
.gps-pin-shape {
  width: var(--sz);
  height: var(--sz);

  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);

  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    #1c4c80 0%,
    /* Very soft slate gray */ #2565ab 60%,
    /* Bright porcelain */ #2f7fd6 100% /* Pure white */
  );
  background: linear-gradient(135deg, #205895 0%, #173f6b 55%, #0e2640 100%);

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

[data-theme="dark"] .gps-pin-shape {
  background: linear-gradient(135deg, #334155 0%, #0f172a 55%, #020617 100%);
  background: linear-gradient(135deg, #1c4c80 0%, #123255 55%, #09192a 100%);
}

/* colored outline */
.gps-pin-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;

  border: 1.5px solid var(--sc);
  opacity: 0.85;
  pointer-events: none;
}

/* center live dot */
.gps-pin-core {
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background: var(--sc);
  transform: translate(-50%, -50%) rotate(45deg);
  overflow: hidden;
}

.gps-pin-core-shine {
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  top: 18%;
  left: 18%;
  background: rgba(255, 255, 255, 0.75);
}

/* ── Leaflet base ────────────────────────────────────────────────────── */
.leaflet-container {
  font-family: "DM Sans", system-ui, sans-serif;
}

/* ── updated ────────────────────────────────────────────────────── */
.mkr-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Label floats above the pin */
.mkr-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 6px;
  padding: 4px 10px;

  white-space: nowrap;
  z-index: 10;
  border-radius: 8px;
  font-size: 12px;
  /* background: var(--bg-card, #fff); */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.18); */
  border: 1px solid var(--f-border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--f-card-radius, 10px) !important;
  background: var(--f-card-bg, rgba(4, 13, 18, 0.95)) !important;
  box-shadow: var(--f-box-shadow, 6px 6px 12px rgba(0, 0, 0, 0.4)) !important;
  backdrop-filter: var(--f-glass-blur, blur(12px));

  transform: translateX(-50%);

  /* IMPORTANT: auto so cursor moving from pin to tooltip
     doesn't fire onMouseLeave on the wrapper */
  pointer-events: auto;
}

.mkr-tooltip--permanent {
  /* border: 1.5px solid var(--sc, #10b981); */
}

.mkr-tooltip--hover {
  /* slightly more transparent for non-permanent */
  opacity: 0.92;
}
/* Stats Glass Panel */
.stats-glass-panel {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 32px;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(180%);
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--glass-border);
  animation: slideInDown 0.5s ease-out;
}

.stat-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-v {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.stat-t {
  font-size: 11px;
  color: var(--text-muted);
}

.stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color);
}

.stat-item.online .stat-v {
  color: var(--success);
}

.stat-item.offline .stat-v {
  color: var(--danger);
}

.speed-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Animations */
@keyframes slideInDown {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .stats-glass-panel {
    gap: 20px;
    padding: 12px 20px;
  }

  .stat-row {
    gap: 12px;
  }

  .stat-v {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .stats-glass-panel {
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    justify-content: space-around;
    gap: 10px;
  }

  .speed-group {
    display: none;
  }

  .stat-v {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .stats-glass-panel {
    padding: 10px 16px;
    bottom: 16px;
    width: calc(100% - 32px);
  }

  .stat-row {
    gap: 8px;
  }

  .stat-t {
    font-size: 9px;
  }

  .stat-v {
    font-size: 18px;
  }

  .stat-divider {
    height: 20px;
  }
}/* Error State */
.fleet-error-page {
  width: 100vw;
  height: 100vh;
  background: var(--f-bg-main);

  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-error-card {
  max-width: 360px;
  padding: 40px;
  text-align: center;

  background: var(--f-bg-card);
  border: 1px solid var(--f-border-color);
  border-radius: var(--f-radius-lg);
  box-shadow: var(--f-shadow-lg);

  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
}

.fd-error-icon-wrapper {
  width: 64px;
  height: 64px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--f-danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.fd-error-card h3 {
  color: var(--f-text-primary);
  margin-bottom: 16px;
}

.fd-error-card p {
  color: var(--f-text-tertiary);
  margin-bottom: 24px;
}

.retry-btn {
  width: 100%;
  padding: 12px;
  background: var(--f-accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.retry-btn:hover {
  background: var(--f-accent-hover);
  transform: translateY(-1px);
}
/* ROOT CONTAINER */
.alert-widget {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

/* COLLAPSED BUTTON */
.alert-collapsed {
  width: 44px;
  height: 44px;
  position: relative;

  cursor: pointer;
  color: #fff;
  font-size: 20px;
  font-weight: 600;

  background: var(--f-btn-bg);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-card-radius);
  box-shadow: var(--f-shadow-md);
  backdrop-filter: blur(12px) saturate(180%);

  display: flex;
  align-items: center;
  justify-content: center;

  /* todo ujj work later */
  display: none; 

  transition: all 0.2s ease;
}

.alert-collapsed > .alert-badge {
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;

  background: var(--f-warning);
}

.alert-collapsed:hover {
  transform: translateY(-2px);
  background: var(--f-accent);
}

/* PANEL */
.alert-panel {
  width: 260px;
  max-height: 400px;
  margin-top: 10px;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* HEADER */
.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.alert-header button {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
}

/* LIST */
.alert-list {
  overflow-y: auto;
  padding: 10px;
}

/* GROUP */
.alert-group {
  margin-bottom: 12px;
}

.alert-group-title {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 6px;
  font-weight: 600;
}

/* ITEMS */
.alert-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
}

.alert-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

/* 🔴 PRIORITY STYLES */
.alert-group.overload .alert-group-title {
  color: #ef4444;
}

.alert-group.harshBrake .alert-group-title,
.alert-group.harshAccel .alert-group-title {
  color: #f59e0b;
}

/* 🔥 OPTIONAL pulse for critical */
.alert-group.overload .alert-group-title::after {
  content: " ●";
  color: #ef4444;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
/* Animation Keyframes */
@keyframes fd-slide-up {
  from {
    opacity: 0;
    transform: translateY(-100px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fd-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

.fleet-details-container {
  width: 380px;
  overflow: hidden;
  z-index: 1002;

  position: fixed;
  bottom: 16px;
  left: 80px;

  background: var(--f-card-bg);
  border: var(--f-card-border);
  border-radius: var(--f-card-border-radius);
  backdrop-filter: var(--f-card-blur);
  -webkit-backdrop-filter: var(--f-card-blur);
  box-shadow: var(--f-card-box-shadow);

  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  animation: fd-slide-up 0.28s ease-out;
}

/* Close Button */
.fd-close {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 2px;
  right: 2px;

  z-index: 10;
  cursor: pointer;
  color: var(--f-text-tertiary);

  border: none;
  background: none;

  display: grid;
  place-items: center;

  transition: all 0.5s ease;
}

.fd-close:hover {
  color: var(--f-danger);
  scale: 1.25;
  transform: rotate(180deg);
}

.fd-card {
  padding: 12px 20px 6px;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Header: Image + Title + address */
.fd-header {
  position: relative;
  padding-bottom: 4px;

  /* background: var(--f-info_bg); */
  border-bottom: 1.5px solid var(--border-bottom);
  /* background: rgba(45, 66, 95, 0.04); */

  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.fd-header-img {
  position: relative;
}

.fd-v-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;

  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4)); */
}

/* status */
.fd-status-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;

  font-size: 10px;
  color: white;
  border-radius: 50%;
  border: 2px solid white;

  display: grid;
  place-items: center;
}
.fd-status-badge.online {
  background: var(--f-success);
  box-shadow: 0 0 8px var(--f-success, #10b981);
  /* color: var(--f-success, #10b981); */
}
.fd-status-badge.idle {
  background: var(--f-warning);
  box-shadow: var(--f-warning, #94a3b8);
}
.fd-status-badge.offline {
  background: var(--f-ignore);
  box-shadow: var(--f-ignore, #94a3b8);
  /* color: var(--f-text-muted, #94a3b8); */
}

/* title */
.fd-header-title {
  flex: 1;
}

.fd-header-title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--f-text-label);
}

.fd-updated-ts {
  margin-top: 2px;
  color: var(--f-danger-text);
  font-size: 10px;

  display: flex;
  align-items: center;
  gap: 3px;
}

/* address */
/* .fd-header-address {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fd-address-icon {
  color: var(--f-text-label);
  font-size: 16px;
}

.fd-address-text {
  font-size: 0.75rem;
  color: var(--f-text);
} */

/* Axles: weight */
.fd-weight-container {
  display: flex;
  flex-direction: column;
}

.fd-weight-header {
  padding: 0 4px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fd-weight-title {
  /* font-size: 0.8rem;
  color: var(--f-text-secondary); */
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--f-text-tertiary);
}

.fd-weight-badge {
  padding: 4px 8px;
  color: var(--f-text-title);
  font-size: 0.75rem;
  font-weight: 700;

  background: var(--f-highlight-bg);
  border-radius: 6px;
}

.fd-weight-axles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.fd-axle-card {
  padding: 4px 6px;
  transition: all 0.2s ease;
}

.fd-axle-card:hover {
  transform: translateY(-2px);
}

.fd-axle-card-header {
  margin-bottom: 2px;

  font-size: 0.75rem;
  color: var(--f-text-primary);

  display: flex;
  justify-content: space-between;
}

.fd-axle-name {
  color: var(--f-text-secondary);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1px;
}

.fd-axle-weight {
  color: var(--f-text-title);
  font-weight: 600;
}

.fd-axle-bar {
  height: 6px;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4));
}

.fd-axle-bar-fill {
  height: 100%;

  background: linear-gradient(
    90deg,
    var(--f-primary, #6366f1),
    var(--f-secondary, #818cf8)
  );
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);

  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fd-axle-bar-fill.critical {
  /* background: linear-gradient(90deg, var(--f-danger, #ef4444), #dc2626); */

  background: linear-gradient(90deg, var(--f-danger), #f97316);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* address container */
.fd-address-container {
  padding: 12px;

  background: rgba(15, 23, 42, 0.03);
  background: var(--f-highlight-bg);
  border-radius: 12px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-address-icon {
  color: var(--f-secondary);
  font-size: 16px;
}

.fd-address-text {
  color: var(--f-text-secondary-alt);
  font-size: 12px;
  line-height: 1.4;
  /* Ensure the text doesn't overflow the card */
  word-break: break-word;
}

/* Stats: Grid layout instead of separate boxes */
.fd-stats-grid {
  margin: 0 12px;
  padding: 8px 12px;

  background: var(--f-card-box-bg);
  border-radius: var(--f-card-radius);
  box-shadow: var(--f-card-shadow);

  display: grid;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fd-stat {
  display: flex;
  flex-direction: column;
}

.fd-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--f-text-tertiary);
  font-weight: 600;
}

.fd-stat strong {
  font-size: 0.85rem;
  color: var(--f-text-primary);
  font-weight: 600;
}

/* Driver: Bottom anchor */
.fd-driver-details-section {
  padding: 6px 2px;

  /* background: var(--f-info_bg); */

  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-driver-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;

  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;

  background: var(--f-text-label);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-driver-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fd-d-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--f-text-label);
  line-height: 12px;
}
.fd-d-id {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--f-text-secondary);
}

.fd-driver-actions {
  display: flex;
  gap: 8px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.fd-btn {
  height: 36px;
  padding: 0 14px;

  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;

  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition: all 0.2s;
}

.fd-btn-primary {
  background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
  color: white;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 51, 102, 0.15);
}

.fd-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

.fd-btn-ghost {
  background: white;
  color: var(--mb-text);
  border: 1px solid var(--mb-border);
}

.fd-btn-ghost:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 51, 102, 0.25);
  box-shadow: 0 12px 24px rgba(0, 51, 102, 0.25);
}

/* .fd-driver-actions button:hover {
  color: var(--f-warning);
  border-color: var(--f-tertiary, #6366f1);
  transform: translateY(-1px);
} */

/* Mobile Tweaks */
@media (max-width: 600px) {
  .fd-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fd-weight-axles {
    /* grid-template-columns: 1fr; */
  }
}

/* ========== DESKTOP STYLES ========== */
@media (min-width: 1024px) {
}

/* ========== MOBILE STYLES ========== */
@media (max-width: 768px) {
  .fleet-details-container {
    width: calc(100vw - 12px);

    left: 6px;
    right: 6px;
    top: 2px;
    bottom: auto;
  }
}

/* ========== SMALL MOBILE ========== */
@media (max-width: 480px) {
}

/* ========== UTILITIES ========== */
.fd-skeleton {
  animation: fd-pulse 1.5s ease-in-out infinite;
}
.fmp-backdrop {
  position: absolute;
  inset: 0;

  z-index: 10;
  overflow: hidden; /* Prevent the entire container from scrolling */

  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  border-radius: inherit;

  display: flex;
  align-items: flex-end;

  animation: fmp-fade-in 0.15s ease;
}

@keyframes fmp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fmp-sheet {
  width: 100%;
  padding: 12px 20px;

  background: var(--bg-card, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  gap: 8px;

  animation: fmp-slide-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes fmp-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.fmp-header {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--f-border-color, #e2e8f0);

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.fmp-to-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
}

.fmp-to-rego {
  font-size: 12px;
  font-weight: 600;
  color: var(--f-text-label-alt, #00ff00);
  letter-spacing: 0.04em;
}

/* Error Banner Space Control */
.fmp-error {
  flex: 1;
  padding: 4px 8px;

  font-size: 11px;
  color: #ef4444;

  background: rgba(239, 68, 68, 0.06);
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Micro Chips Row */
.fmp-type-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.fmp-type-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 6px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: all 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
}

.fmp-type-chip i {
  font-size: 11px;
}

.fmp-type-chip--active {
  background: color-mix(in srgb, var(--chip-color) 12%, transparent);
  border-color: var(--chip-color);
  color: var(--chip-color);
}

/* Form Container Layout */
.fmp-form-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: unset; /* Automatically consumes middle height allocation dynamically */
}

.fmp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmp-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fmp-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}

.fmp-input,
.fmp-textarea {
  width: 100%;
  padding: 4px 8px;
  outline: none;
  resize: none;

  color: var(--text-primary, #0f172a);
  font-size: 12px;

  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--bg-surface, #f8fafc);
  box-sizing: border-box;
  transition: all 0.2s;
}
.fmp-input::placeholder,
.fmp-textarea::placeholder {
  color: #9ca3af;
}

.fmp-textarea {
  flex: 1;
  min-height: 70px; /* Secure bounds so it leaves space for buttons below */
}

.fmp-input:focus,
.fmp-textarea:focus {
  border-color: #b1c7e5;
  background: var(--bg-card, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.fmp-char-count {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}

/* Bottom Actions Control Row */
.fmp-action-controls {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.fmp-close,
.fmp-send-btn {
  height: 34px;
  cursor: pointer;

  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

.fmp-close {
  flex: 1;
  border: 1.5px solid var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-secondary, #475569);
  transition: background 0.15s;
}
.fmp-close:hover {
  background: var(--bg-surface, #f1f5f9);
}

.fmp-send-btn {
  flex: 2;
  border: none;
  background: var(--chip-color, #3b82f6);
  color: #ffffff;
  gap: 4px;
  font-weight: 700;
  transition: opacity 0.15s;
}
.fmp-send-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.fmp-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@keyframes fmp-spin-anim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.fmp-spin {
  display: inline-block;
  animation: fmp-spin-anim 0.7s linear infinite;
}
/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.mdl-backdrop {
  z-index: 1002;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  animation: mdl-fade-in 0.18s ease both;
}

@keyframes mdl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
/* Panel — remove overflow:hidden, needs to be relative for absolute children */
.mdl-panel {
  position: fixed;          /* keep fixed, not absolute */
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 100vw;
  z-index: 1002;

  background: var(--f-card-bg);
  border: var(--f-card-border);
  backdrop-filter: var(--f-card-blur);
  -webkit-backdrop-filter: var(--f-card-blur);
  box-shadow: var(--f-card-box-shadow);
  border-left: 1px solid var(--f-info_bg, #e2e8f0);

  display: flex;
  flex-direction: column;
  overflow: visible;        /* allow prompt to overflow panel bounds if needed */
  animation: mdl-slide-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Content area below header — fills remaining height, clips its own scroll */
.mdl-panel-content {
  flex: 1;
  position: relative;       /* prompt anchors to this */
  overflow: hidden;         /* clips thread/list scroll */
  display: flex;
  flex-direction: column;
}

@keyframes mdl-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.mdl-panel-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);

  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-shrink: 0;
}
.mdl-panel-header > i {
  color: var(--f-logo-accent);
}
.mdl-span-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--f-logo-primary, #0f172a);
}

.mdl-btn-close {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-left: auto;

  color: var(--f-text-muted, #64748b);
  font-size: 16px;

  border: none;
  background: var(--f-card-bg);
  border-radius: 16px;

  transition: all 0.6s ease;
}
.mdl-btn-close:hover {
  color: #e74c3c;
  scale: 1.25;
  transform: rotate(180deg);
}
.mdl-btn-close:active {
  transform: scale(0.92);
}

/* ── Conversation list ────────────────────────────────────────────────────── */
.mdl-convo-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mdl-convo-item {
  width: 100%;
  padding: 12px;
  cursor: pointer;

  position: relative;
  overflow: hidden;

  border-radius: 8px;
  border: none;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  background: var(--f-card-box-bg);
  box-shadow: var(--f-inset-3d, inset 2px 2px 5px rgba(0, 0, 0, 0.4));
  /* box-shadow: var(--f-box-shadow); */

  display: flex;
  align-items: center;
  gap: 10px;

  transition: background 0.12s;
  animation: mdl-item-in 0.2s ease both;
}

/* Stagger each item */
.mdl-convo-item:nth-child(1) {
  animation-delay: 0.04s;
}
.mdl-convo-item:nth-child(2) {
  animation-delay: 0.08s;
}
.mdl-convo-item:nth-child(3) {
  animation-delay: 0.12s;
}
.mdl-convo-item:nth-child(4) {
  animation-delay: 0.16s;
}
.mdl-convo-item:nth-child(5) {
  animation-delay: 0.2s;
}

@keyframes mdl-item-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mdl-convo-item:hover {
  background: var(--bg-surface, #f8fafc);
}
.mdl-convo-item--active {
  background: var(--bg-surface, #f8fafc);
}

/* Blue left-rail accent on active row */
.mdl-convo-item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, #3b82f6);
  border-radius: 0 2px 2px 0;
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.mdl-avatar {
  position: relative;
  width: 40px;
  height: 40px;

  font-size: 17px;
  color: var(--text-secondary, #475569);

  border: var(--f-img-border);
  border-radius: 50%;
  background: var(--bg-surface, #f1f5f9);
  box-shadow: var(--f-img-box-shadow);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: border-color 0.15s;
}

.mdl-convo-item--active .mdl-avatar {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.mdl-avatar-badge {
  width: 18px;
  height: 18px;
  padding: 0 3px;

  position: absolute;
  top: -5px;
  right: -5px;

  color: #fff;
  font-size: 10px;
  font-weight: 500;

  background: #ef4444;
  border-radius: 10px;
  border: 1.5px solid var(--bg-card, #fff);

  display: flex;
  align-items: center;
  justify-content: center;

  animation: mdl-pop-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mdl-pop-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.mdl-convo-body {
  flex: 1;
  min-width: 0;

  display: flex;
  gap: 2px;
}

.mdl-convo-time-status {
  display: flex;
  flex-direction: column;
}

.mdl-convo-time {
  font-size: 10px;
  color: var(--f-text-muted, #94a3b8);
  white-space: nowrap;
  flex-shrink: 0;
}

.mdl-preview-type-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.mdl-convo-details {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mdl-convo-rego {
  font-size: 13px;
  font-weight: 600;
  color: var(--f-text-primary, #0f172a);
  letter-spacing: 0.02em;
}

.mdl-convo-preview {
  font-size: 11px;
  color: var(--f-text-secondary, #64748b);
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 4px;
}

.mdl-preview-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.mdl-preview-status {
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Thread ───────────────────────────────────────────────────────────────── */
.mdl-thread {
  flex: 1;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  animation: mdl-thread-in 0.2s ease both;
}

@keyframes mdl-thread-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mdl-thread-header {
  padding: 10px 0;
  margin: 0 10px 10px;
  border-bottom: 1px solid var(--f-border-color, #e2e8f0);

  display: flex;
  align-items: center;
  gap: 8px;
}

.mdl-thread-btn-back {
  cursor: pointer;

  font-size: 14px;

  border: none;
  background: none;

  display: flex;
  align-items: center;
  gap: 12px;

  transition:
    background 0.12s,
    transform 0.1s;
}
.mdl-thread-btn-back>i {
  width: 32px;
  height: 32px;
  color: var(--f-text-muted, #64748b);

  background: var(--f-card-bg);
  border-radius: 16px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.mdl-thread-btn-back:hover {
  color: var(--f-orange);
}
.mdl-thread-btn-back:active {
  transform: scale(0.9);
}

.mdl-thread-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--f-text-secondary-alt, #0f172a);
  letter-spacing: 0.02em;

  display: flex;
  align-items: center;
  gap: 8px;
}

.mdl-thread-body {
  flex: 1;
  padding: 10px 12px;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.mdl-load-more-btn {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 6px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-size: 11px;
  font-weight: 600;
  color: var(--f-text-muted, #94a3b8);

  background: transparent;
  border: 1px dashed var(--f-border-color, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.mdl-load-more-btn:hover:not(:disabled) {
  color: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  background: var(--f-card-box-bg);
}
.mdl-load-more-btn:disabled { opacity: 0.5; cursor: default; }

.mdl-msg-count {
  text-align: center;
  font-size: 10px;
  color: var(--f-text-muted, #94a3b8);
  letter-spacing: 0.03em;
}

/* ── Message bubble ───────────────────────────────────────────────────────── */
.mdl-bubble {
  padding: 10px 12px;

  border-radius: 10px;
  border-left: 2px solid transparent;
  background: var(--f-card-box);
  box-shadow: var(--f-box-shadow);

  display: flex;
  flex-direction: column;
  gap: 4px;

  animation: mdl-bubble-in 0.2s ease both;
}

.mdl-bubble:nth-child(1) {
  animation-delay: 0.04s;
}
.mdl-bubble:nth-child(2) {
  animation-delay: 0.08s;
}
.mdl-bubble:nth-child(3) {
  animation-delay: 0.12s;
}
.mdl-bubble:nth-child(4) {
  animation-delay: 0.16s;
}

@keyframes mdl-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Type-based bubble colours */
.mdl-bubble--alert {
  border-left-color: #ef4444;
}
.mdl-bubble--command {
  border-left-color: #3b82f6;
}
.mdl-bubble--request {
  border-left-color: #f59e0b;
}
.mdl-bubble--info {
  border-left-color: #10b981;
}

/* Dark mode bubble tones */
[data-theme="dark"] .mdl-bubble--alert {
  border-left-color: #f05656;
}
[data-theme="dark"] .mdl-bubble--command {
  border-left-color: #4e8ef6;
}
[data-theme="dark"] .mdl-bubble--request {
  border-left-color: #f6a723;
}
[data-theme="dark"] .mdl-bubble--info {
  border-left-color: #27c08d;
}

.mdl-bubble-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mdl-bubble-type-icon {
  font-size: 11px;
}
.mdl-bubble-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.mdl-bubble-time {
  font-size: 11px;
  color: var(--f-text-tertiary, #94a3b8);
  margin-left: auto;
}

.mdl-bubble--alert .mdl-bubble-type-icon,
.mdl-bubble--alert .mdl-bubble-type {
  color: #bf3636;
}
.mdl-bubble--command .mdl-bubble-type-icon,
.mdl-bubble--command .mdl-bubble-type {
  color: #2f68c4;
}
.mdl-bubble--request .mdl-bubble-type-icon,
.mdl-bubble--request .mdl-bubble-type {
  color: #c47e08;
}
.mdl-bubble--info .mdl-bubble-type-icon,
.mdl-bubble--info .mdl-bubble-type {
  color: #0c9467;
}

[data-theme="dark"] .mdl-bubble--alert .mdl-bubble-type-icon,
[data-theme="dark"] .mdl-bubble--alert .mdl-bubble-type {
  color: #d73d3d;
}
[data-theme="dark"] .mdl-bubble--command .mdl-bubble-type-icon,
[data-theme="dark"] .mdl-bubble--command .mdl-bubble-type {
  color: #3575dd;
}
[data-theme="dark"] .mdl-bubble--request .mdl-bubble-type-icon,
[data-theme="dark"] .mdl-bubble--request .mdl-bubble-type {
  color: #dc8e09;
}
[data-theme="dark"] .mdl-bubble--info .mdl-bubble-type-icon,
[data-theme="dark"] .mdl-bubble--info .mdl-bubble-type {
  color: #0ea674;
}

.mdl-bubble-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--f-text-secondary, #0f172a);
  line-height: 1.3;
}

.mdl-bubble-body {
  font-size: 11px;
  color: var(--f-text-secondary, #475569);
  line-height: 1.5;
}

.mdl-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.mdl-bubble-code {
  font-size: 9px;
  color: var(--f-text-muted, #94a3b8);
  font-family: monospace;
  letter-spacing: 0.04em;
}

/* ── Status pills ─────────────────────────────────────────────────────────── */
.mdl-status-pill {
  padding: 2px 6px;

  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  border-radius: 10px;
  transition: opacity 0.2s;
}

.mdl-status-pill--sent {
  /* background: #f1efe8; */
  color: #5f5e5a;
}
.mdl-status-pill--delivered {
  background: #f1efe8;
  color: #5f5e5a;
}
.mdl-status-pill--accept {
  background: #d7e1cf;
  color: #3b6d11;
}
.mdl-status-pill--reject {
  background: #fcebeb;
  color: #a32d2d;
}
.mdl-status-pill--dismissed {
  background: #faeeda;
  color: #854f0b;
}

[data-theme="dark"] .mdl-status-pill--sent,
[data-theme="dark"] .mdl-status-pill--delivered {
  background: rgba(136, 135, 128, 0.2);
  color: #d3d1c7;
}
[data-theme="dark"] .mdl-status-pill--accepted {
  background: rgba(99, 153, 34, 0.2);
  color: #c0dd97;
}
[data-theme="dark"] .mdl-status-pill--rejected {
  background: rgba(226, 75, 74, 0.2);
  color: #f7c1c1;
}
[data-theme="dark"] .mdl-status-pill--dismissed {
  background: rgba(186, 117, 23, 0.2);
  color: #fac775;
}

/* ── New message highlight ────────────────────────────────────────────────── */
.mdl-bubble--new {
  animation: mdl-bubble-new 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mdl-bubble-new {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Compose bar at bottom of thread ─────────────────────────────────────── */
.mdl-compose-bar {
  padding: 10px 12px;
  flex-shrink: 0;
}

.mdl-compose-bar-btn {
  width: 100%;
  padding: 9px 12px;
  cursor: pointer;

  color: var(--f-text-tertiary, #64748b);
  font-size: 12px;

  border-radius: 8px;
  border: 1px solid var(--f-img-border, #e2e8f0);
  box-shadow: var(--f-box-shadow);
  background: var(--f-card-box-bg);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.mdl-compose-bar-btn:hover {
  background: var(--bg-surface, #f8fafc);
  color: var(--f-orange, #3b82f6);
}

/* ── States ───────────────────────────────────────────────────────────────── */
.mdl-state-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  text-align: center;
  animation: mdl-fade-in 0.2s ease both;
}

.mdl-state-msg i {
  font-size: 26px;
  opacity: 0.5;
}

.mdl-state-msg--error {
  color: #ef4444;
}

.mdl-state-msg--error button,
.mdl-state-msg--empty button {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-secondary, #475569);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.mdl-state-msg--error button:hover,
.mdl-state-msg--empty button:hover {
  background: var(--bg-surface, #f8fafc);
}

.mdl-empty-compose {
  background: var(--accent, #3b82f6) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.mdl-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border, #e2e8f0);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: mdl-spin 0.65s linear infinite;
}

@keyframes mdl-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Small spinner variant for load-more button */
.mdl-spinner--sm {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mdl-panel {
    width: 100vw;
    top: auto;
    height: 75dvh;

    border-radius: 18px 18px 0 0;
    border-left: none;
    border-top: 1px solid var(--border, #e2e8f0);
    animation: mdl-slide-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .mdl-avatar-badge {
    width: 16px;
    height: 16px;
    top: -3px;
    right: -3px;
    font-size: 9px;
  }

  .mdl-bubble-time {
    font-size: 9px;
  }

  @keyframes mdl-slide-up {
    from {
      transform: translateY(100%);
      opacity: 0.6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}