@charset "UTF-8";:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top{left:50%;top:0;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-right{right:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{left:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;display:block;height:32px;outline:none;overflow:hidden;padding:0;width:32px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#eee}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' 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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-up .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9 8.41421L12.2929 11.7071C12.6834 12.0976 13.3166 12.0976 13.7071 11.7071C14.0976 11.3166 14.0976 10.6834 13.7071 10.2929L9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-down .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 6.29289C4.68342 5.90237 5.31658 5.90237 5.70711 6.29289L9 9.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L9.70711 11.7071C9.31658 12.0976 8.68342 12.0976 8.29289 11.7071L4.29289 7.70711C3.90237 7.31658 3.90237 6.68342 4.29289 6.29289Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23333' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E");background-size:18px 18px}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.0017 3.0017L4.0017 15.0017L10.0017 15.0017V12.0017H12.0017V15.0017H14.0017L14.0017 3.0017C14.0097 2.86829 13.9894 2.73469 13.9419 2.60973C13.8945 2.48477 13.8211 2.37129 13.7266 2.27678C13.6321 2.18228 13.5186 2.10889 13.3937 2.06147C13.2687 2.01405 13.1351 1.99368 13.0017 2.0017L5.0017 2.0017C4.86829 1.99368 4.73469 2.01405 4.60973 2.06147C4.48477 2.10889 4.37129 2.18228 4.27678 2.27678C4.18228 2.37129 4.10889 2.48477 4.06147 2.60973C4.01405 2.73469 3.99368 2.86829 4.0017 3.0017ZM8.0017 14.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017 10.0017H6.0017L6.0017 8.0017H8.0017V10.0017ZM8.0017 6.0017L6.0017 6.0017V4.0017H8.0017V6.0017ZM12.0017 10.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017 6.0017H10.0017V4.0017L12.0017 4.0017V6.0017Z' fill='%23333333'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%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.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23000'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:#ffffff80;margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:initial;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left)>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:#ffffff80;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%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}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left) .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%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 (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%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")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid #0000;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:initial;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:#eee}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px #00000059;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:#000000b3;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{font-size:16px;font-weight:700;text-align:center}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#ccc;color:#000}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#ccc}
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
          box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rbc-month-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  -ms-flex-preferred-size: 0px;
      flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  -ms-flex-preferred-size: 0 px;
      flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rbc-time-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}

/*# sourceMappingURL=react-big-calendar.css.map *//* =========================================
   1. VARIABLES & THEME PALETTE
   ========================================= */
:root {
  /* --- BRANDING --- */
  --primary: #009ADC;
  --primary-hover: #007bb0;

  /* --- LIGHT MODE (Default) --- */
  --bg-main: #F3F4F6;
  --bg-card: #f8f8f8;
  --bg-sidebar: #18181b;

  /* Standard Input (on white/grey backgrounds) */
  --bg-input: #ebe8e8;

  /* 🟢 NEW: Modal/Card Input (Safe for overlay contexts) */
  --bg-input-modal: #ebe8e8;

  --bg-hover: rgba(0, 0, 0, 0.05);

  --sidebar-active-bg: #27272a;
  --sidebar-active-text: #ebe8e8;

  --text-main: #1F2937;
  --text-muted: #6B7280;
  --text-on-sidebar: #D1D5DB;

  --border: #E5E7EB;
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.7);

  /* Status Colors */
  --status-green: #10b981;
  --status-red: #ef4444;
  --status-amber: #f59e0b;
  --status-blue: #3b82f6;

  /* 🟢 ROLE-BASED HEADER COLORS */
  --role-ops: #009ADC;
  /* Blue */
  --role-accounting: #10b981;
  /* Green */
  --role-compliance: #f59e0b;
  /* Orange */
  --role-admin: #ef4444;
  /* Red */
  --role-hr: #8b5cf6;
  /* Purple */
  --role-fleet: #e6ea08;
  /* Yellow */
  --role-data: #2563eb;
  /* Royal Blue */
}
@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
  #root, body {
    zoom: 0.55; /* Start at 0.65, adjust down to 0.5 if you need it smaller */
    /* Remove any transform or width: 200% rules you added! */
  }
}


/* --- DARK MODE OVERRIDES --- */
body.dark-mode {
  --bg-main: #18181b;
  --bg-card: #27272a;
  --bg-sidebar: #09090b;

  /* Standard Input (Black - good for main page) */
  --bg-input: #18181b;

  /* 🟢 NEW: Modal Input (Grey - Matches Card, Fixes Black Box) */
  --bg-input-modal: #27272a;

  --bg-hover: rgba(255, 255, 255, 0.03);

  --sidebar-active-bg: #27272a;
  --sidebar-active-text: #ffffff;

  --text-main: #F4F4F5;
  --text-muted: #A1A1AA;
  --text-on-sidebar: #71717a;

  --border: #3f3f46;
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(31, 41, 55, 0.6);
}

/* =========================================
   GLOBAL INPUT FIXES (Spinners & Checkboxes)
   ========================================= */

/* --- 1. NUMBER SPINNERS (The Up/Down Arrows) --- */

/* LIGHT MODE: Force Black -> Grey using Invert */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  /* 50% Invert turns Black to Grey. Opacity softens it slightly. */
  filter: invert(0.5) opacity(0.8);
  cursor: pointer;
}

/* DARK MODE: Force Black -> White */
body.dark-mode input[type=number]::-webkit-inner-spin-button,
body.dark-mode input[type=number]::-webkit-outer-spin-button {
  /* 100% Invert turns Black to White. Dimmed to 50% for subtle look. */
  filter: invert(1) opacity(0.5);
}

/* --- 2. CHECKBOXES --- */
input[type="checkbox"] {
  accent-color: var(--primary, #009ADC);
  cursor: pointer;
}

/* Light Mode Unchecked: Soften the hard black border */
input[type="checkbox"]:not(:checked) {
  filter: opacity(0.4);
}

/* Dark Mode Unchecked: Invert to visible white/grey border */
body.dark-mode input[type="checkbox"]:not(:checked) {
  filter: invert(1) opacity(0.5);
}

/* Reset filter when checked so the Blue Color shines through */
input[type="checkbox"]:checked,
body.dark-mode input[type="checkbox"]:checked {
  filter: none;
  opacity: 1;
}

/* =========================================
   CRM & ENTITY MANAGEMENT STANDARD STYLES
   ========================================= */

/* 1. MAIN CONTAINER */
/* Replaces the 'rug' - standard padding and full height */
.crm-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  gap: 1.5rem;
  background-color: var(--bg-main);
  /* Standard Floor */
  overflow: hidden;
}

/* 2. HEADER */
.crm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* 3. SPLIT LAYOUT (List Sidebar | Main Content) */
.crm-split-layout {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  overflow: hidden;
}

/* The List Sidebar (Left) */
.crm-list-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 5px;
  flex-shrink: 0;
}

/* The List Items */
.crm-list-item {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.crm-list-item:hover {
  border-color: var(--primary);
}

.crm-list-item.selected {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.crm-list-item.archived {
  opacity: 0.6;
  background-color: var(--bg-main);
}

/* 4. DETAIL VIEW (The Right Side) */
.crm-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr 450px;
  /* Info | Feed | Tabs */
  gap: 1.5rem;
  flex: 1;
  overflow: hidden;
}

/* 5. STANDARD CARDS */
.crm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.crm-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 6. HELPERS */
.empty-state-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  gap: 15px;
}

/* --- UNIFIED ICON BUTTONS --- */
.btn-icon {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: #9ca3af;
  /* Default Grey (Text Muted) */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base Hover (Generic) */
.btn-icon:hover {
  color: var(--text-main);
}

/* Edit Hover: Brand Blue */
.btn-icon.edit:hover {
  color: var(--primary);
}

/* Delete Hover: Red */
.btn-icon.delete:hover {
  color: #ef4444;
}

/* Disabled State */
.btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- REVIEW BUTTON (Grey -> Purple Hover) --- */
.btn-review {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-review:hover {
  color: var(--role-accounting);
  border-color: var(--role-accounting);
  background-color: rgba(139, 92, 246, 0.1);
}

/* =========================================
   2. GLOBAL RESET & UTILITIES
   ========================================= */
body {
  margin: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  transition: background-color 0.3s, color 0.3s;
}

input,
select,
textarea {
  box-sizing: border-box;
  outline: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

/* Common Helpers */
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.spin {
  animation: spin 1s linear infinite;
}

.hover-scale {
  transition: transform 0.2s;
}

.hover-scale:hover {
  transform: translateY(-1px);
}

/* =========================================
   3. LAYOUT & SIDEBAR
   ========================================= */
.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background-color: var(--bg-sidebar);
  color: white;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  height: 100vh; /* Or 100% depending on your layout */
  overflow-y: auto; /* Adds a scrollbar ONLY if the content overflows */
  overscroll-behavior: contain; /* Prevents scrolling the nav bar from scrolling the whole page behind it */
}

body.dark-mode .sidebar {
  border-right: 1px solid var(--border);
}

.sidebar.collapsed {
  width: 72px;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .user-info {
  display: none;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0.75rem 0;
}

.sidebar.collapsed .user-profile {
  justify-content: center;
  padding: 1rem 0;
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.logo-sidebar {
  max-height: 50px;
  max-width: 200px;
  width: auto;
  transition: all 0.3s;
  display: block;
}

.logo-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
  transition: all 0.3s;
  display: block;
}

.nav-links {
  flex: 1;
  padding: 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  color: var(--text-on-sidebar);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}

.nav-item.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.user-profile {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.user-avatar {
  min-width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
}

/* Header */
.top-header {
  height: 64px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  transition: background-color 0.3s;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
}

/* --- TABS: SHARP & PROFESSIONAL --- */
.tab-btn {
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 3px solid transparent;
  /* The "Line" */
  border-radius: 0;
  /* 🟢 Removes rounded corners on the button itself */
  transition: all 0.2s;
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  /* 🟢 ensure the line is perfectly flat/square */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.tab-btn:hover {
  background-color: rgba(0, 0, 0, 0.02);
  /* Very subtle hover bg */
}

/* =========================================
   4. DASHBOARD & WIDGETS
   ========================================= */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
  width: 100%;
}

@media (max-width: 1200px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.dash-widget {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  height: 100%;
  min-width: 0;
}

.widget-header {
  padding: 0.75rem 1rem;
  background-color: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
}

.widget-count {
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.widget-content {
  flex: 1;
  overflow-y: auto;
}

.widget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Inward Glow Hover Effect (Fixed: Diluted Gradient) */
.widget-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;

  /* 🟢 CHANGED: The gradient now starts at 85% Transparent color, not solid color */
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--status-color), transparent 85%),
      transparent);

  opacity: 0;
  transition: width 0.4s ease-out, opacity 0.3s ease-in;
  pointer-events: none;
  z-index: 0;
}

/* Hover State */
.widget-row:hover::after {
  width: 45%;
  opacity: 1;
  /* We control opacity in the gradient above, so we can keep this at 1 */
}

/* Expanded Card Hover (Wider, softer) */
.widget-row.expanded:hover::after {
  width: 60%;
  /* No opacity change needed, the gradient mix handles the softness */
}

/* 🟢 NEW: Tame the bleed on "In Transit" Progress Rows */
/* Since the background is already colored, we drop this to a whisper */
.widget-row.compact-progress-row:hover::after {
  opacity: 0.02;
  /* Almost invisible, just a sheen */
  width: 30%;
  /* Shorter bleed distance */
  filter: brightness(1.2);
  /* Adds light instead of pigment */
}

.widget-row:hover {
  background-color: var(--bg-hover);
}

.row-id {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.75rem;
}

.row-route {
  color: var(--text-main);
  font-weight: 500;
}

.row-meta {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: right;
}

.empty-widget {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Widget Action Bar */
.widget-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  opacity: 0.9;
}

.skeleton-card {
  padding: 12px;
  margin-bottom: 8px;
  border-left: 4px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-card.compact {
  padding: 4px 8px;
  margin-bottom: 4px;
}

.skeleton-bar {
  background: var(--border);
  border-radius: 4px;
}

.widget-header-dynamic {
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  border-bottom: 1px solid var(--border);
}

/* Use CSS variables for the color injection in JS */
.widget-glow-warning {
  animation: pulse-amber-glow 2s infinite ease-in-out;
}

.widget-glow-critical {
  animation: pulse-red-glow 2s infinite ease-in-out;
}

.card-expanded-hover {
  background: linear-gradient(90deg, var(--status-color-light) 0%, var(--bg-card) 60%);
}

.card-compact-progress {
  background: linear-gradient(to right,
      var(--progress-color) var(--prog),
      transparent var(--prog));
}

/* --- WIDGET HEADER DYNAMIC --- */
.widget-header-dynamic {
  /* 95% Transparent so the pulse shines through the background */
  background-color: color-mix(in srgb, var(--widget-color), transparent 95%);
  border-left: 4px solid var(--widget-color);
  border-bottom: 1px solid color-mix(in srgb, var(--widget-color), transparent 85%);

  /* Layout: Pushes Title (Left) and Count (Right) apart */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;

  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.widget-header-dynamic:hover {
  filter: brightness(0.95);
}

/* 🟢 FIXED: Pointing to the specific HEADER animations now */
.widget-header-dynamic.pulse-warning {
  animation: pulse-header-amber 2s infinite ease-in-out;
}

.widget-header-dynamic.pulse-critical {
  animation: pulse-header-red 2s infinite ease-in-out;
}

/* 🟢 ENSURE THESE KEYFRAMES EXIST (Paste below the header block if missing) */
@keyframes pulse-header-red {
  0% {
    background-color: rgba(239, 68, 68, 0.05);
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }

  50% {
    background-color: rgba(239, 68, 68, 0.2);
    box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.3);
  }

  100% {
    background-color: rgba(239, 68, 68, 0.05);
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes pulse-header-amber {
  0% {
    background-color: rgba(245, 158, 11, 0.05);
  }

  50% {
    background-color: rgba(245, 158, 11, 0.25);
    box-shadow: inset 0 0 15px rgba(245, 158, 11, 0.2);
  }

  100% {
    background-color: rgba(245, 158, 11, 0.05);
  }
}

/* =========================================
   DASHBOARD CARD STYLES (Refactored)
   ========================================= */

/* Base Card Layout */
.widget-row {
  position: relative;
  display: block;
  cursor: pointer;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--status-color);
  /* Uses variable! */
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: visible;
  /* Allows ribbons to stick out */
  z-index: 1;
}

/* 1. COMPACT MODE (Default) */
.widget-row.compact {
  padding: 4px 8px 4px 12px;
  min-height: 42px;
}

/* 2. ROOMY MODE (Expanded) */
.widget-row.expanded {
  padding: 10px 12px 10px 16px;
  min-height: 115px;
  background: var(--bg-card);
  /* Fallback */
}

/* Roomy Hover Effect: Subtle Lift (Fixes Blurry Text) */
.widget-row.expanded:hover {
  transform: translateY(-1px);
  /* 🟢 CHANGED: Replaces scale(1.002) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  background-color: color-mix(in srgb, var(--status-color), transparent 96%);
}

/* 3. PROGRESS BAR BACKGROUND (For Compact Transit Loads) */
/* 🟢 FIXED: Added '-row' to match the JS logic */
.widget-row.compact-progress-row {
  /* This uses variables set in JS: --prog and --tip-color */
  /* We use !important to ensure this gradient overrides the default white/dark background */
  background: linear-gradient(to right,
      color-mix(in srgb, var(--tip-color), transparent 85%) var(--prog),
      transparent var(--prog)) !important;
}

/* The Pulsing Tip (Fresh Data Only) */
.widget-row.compact-progress-row.fresh::after {
  content: '';
  position: absolute;
  left: var(--prog);
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--tip-color);
  box-shadow: 0 0 10px var(--tip-color);
  /* Increased glow slightly */
  animation: tipPulse 2s infinite ease-in-out;
  transition: left 0.5s ease;
  z-index: 1;
  /* 🟢 LOWER than .row-main */
  opacity: 0.8;
  pointer-events: none;
}

@keyframes tipPulse {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 2px var(--tip-color);
  }

  50% {
    opacity: 1.0;
    box-shadow: 0 0 8px var(--tip-color);
  }

  100% {
    opacity: 0.4;
    box-shadow: 0 0 2px var(--tip-color);
  }
}

/* 4. RIBBON STACK (Action Buttons) */
.ribbon-stack {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
  pointer-events: none;
  /* Let clicks pass through to card unless hitting a button */
  align-items: flex-end;
}

.ribbon-stack>div {
  pointer-events: auto;
}

/* Re-enable clicks on buttons */

/* 5. TEXT UTILITIES */
.row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 🟢 REQUIRED for z-index */
  z-index: 5;
  /* 🟢 Sits above the progress bar & pulse */
}

.row-main.compact {
  padding-right: 5px;
  justify-content: center;
}

.row-main.expanded {
  padding-right: 55px;
  justify-content: flex-start;
  padding-top: 6px;
}

/* Label/Value Helpers */
.lbl-muted {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  /* 🟢 FIXED (was fontWeight) */
  width: 30px;
  display: inline-block;
}

/* Hot Load Border Override */
.hot-load-border {
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}

/* =========================================
   5. UI COMPONENTS (Buttons, Inputs, Tables)
   ========================================= */
/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--text-muted);
}

/* ========================================== */
/* 🟢 NEW BLUE WIDGET BUTTON                  */
/* ========================================== */
.btn-secondary-blue {
  background: transparent;
  color: var(--primary);
  /* Makes the text and icon blue */
  border: 1px solid var(--primary);
  /* Keeps the solid rounded border */
  padding: 8px 16px;
  /* Matches your regular btn-secondary */
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-secondary-blue:hover {
  background: rgba(0, 154, 220, 0.1);
  /* Adds a very soft blue fill on hover */
  color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary-blue:active {
  background: var(--primary-hover);
  color: #ffffff;
  border-color: var(--primary-hover);
}

.btn-xs {
  background: var(--bg-card);
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-xs:hover {
  border-color: var(--primary);
  background: rgba(0, 154, 220, 0.1);
}

.btn-icon {
  padding: 6px;
  color: var(--text-muted);
  border-radius: 4px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-icon:hover {
  color: var(--primary);
  background-color: rgba(0, 154, 220, 0.1);
}

/* Inputs - FIXED FOR LIGHT MODE */
.form-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-main);
}

.form-input:focus {
  border-color: var(--primary);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0px !important;
}

.input-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.input-group input,
.input-group select {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-size: 0.95rem;
  width: 100%;
}

.input-group input:focus,
.input-group select:focus {
  border-color: var(--primary);
}

/* Tables */
.data-table-card {
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 1rem 1.5rem;
  background: rgba(128, 128, 128, 0.05);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-main);
}

.table-row-hover:hover {
  background-color: var(--bg-hover);
  transition: background-color 0.2s ease;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-badge.open {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: #3b82f6;
}

.status-badge.pending,
.status-badge.dispatched,
.status-badge.scheduled {
  background-color: rgba(234, 179, 8, 0.15);
  color: #EAB308;
  border-color: #EAB308;
}

.status-badge.intransit,
.status-badge.enroute {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border-color: #10B981;
}

.status-badge.delivered {
  background-color: rgba(139, 92, 246, 0.15);
  color: #8B5CF6;
  border-color: #8B5CF6;
}

.status-badge.cancelled,
.status-badge.alert {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: #ef4444;
}

.ribbon-btn-dynamic {
  background-color: var(--glass-bg);
  backdrop-filter: blur(10px);
  /* The border color is dynamic, keep that inline or use a var */
}

/* 🟢 NEW: Standardized Badge Pill */
.badge-pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* 🟢 CRITICAL: Prevents squishing */
  white-space: nowrap;
  line-height: 1.2;
  border: 1px solid transparent;
}

.sync-icon-btn {
  background: transparent;
  color: var(--text-muted); /* Starts neutral grey */
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy transition */
}

.sync-icon-btn:hover {
  color: var(--primary); /* Turns your branded blue! */
  transform: scale(1.15); /* Satisfying pop */
  filter: drop-shadow(0px 4px 8px rgba(var(--primary-rgb), 0.3)); /* Soft blue glow */
}

.sync-icon-btn:active {
  transform: scale(0.95); /* Click depression */
}

/* =========================================
   6. MODALS & FORMS (OrderForm)
   ========================================= */

/* --- 1. STANDARDIZED MODAL DEPTH --- */
/* --- 1. REVISED MODAL DEPTH (Subtle & Clean) --- */
.modal-depth-left {
  /* No colored border */
  border-left: 1px solid var(--border);

  /* Deep, multi-layered shadow to simulate "Lift" */
  /* Layer 1: Tight shadow for definition */
  /* Layer 2: Large, soft shadow for depth (shifted left) */
  box-shadow:
    -4px 0 12px -2px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  /* Tiny outline for crispness */

  /* Ensure it sits cleanly */
  clip-path: inset(-20px 0 -20px -20px);
  /* Allows shadow to spill out left only */
}

/* If you want it to look "stacked" like a card on top of the table */
.dark-mode .modal-depth-left {
  box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.5s ease-out forwards;
}

.modal-overlay.center {
  justify-content: center;
  align-items: center;
}

.modal-overlay.closing {
  animation: fadeOut 0.5s ease-out forwards;
  pointer-events: none;
}

.modal-content {
  width: 1000px;
  max-width: 90vw;
  height: 100%;
  background-color: var(--bg-main);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pop-up Dialog Style */
.modal-content.dialog {
  height: auto !important;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 2rem !important;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-tabs {
  display: flex;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background-color: rgba(0, 0, 0, 0.02);
  overflow-x: auto;
}

.tab-btn {
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn:hover {
  color: var(--text-main);
  border-bottom-color: var(--border);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.input-group.full-width {
  grid-column: span 2;
}


/* =========================================
   7. ANIMATIONS (Consolidated)
   ========================================= */
/* Entry/Exit */
@keyframes fadeIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }

  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@keyframes fadeOut {
  from {
    background-color: rgba(0, 0, 0, 0.5);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* Pulse Effects (Unified) */
@keyframes pulse-red-glow {
  0% {
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }

  50% {
    box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.3);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes pulse-amber-glow {
  0% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0);
  }

  50% {
    box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.3);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* Card Bleed Animation */
@keyframes card-bleed-red {
  0% {
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }

  50% {
    box-shadow: inset 45px 0 30px -10px rgba(239, 68, 68, 0.25);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.pulse-critical {
  animation: pulse-red-glow 2s infinite ease-in-out;
  position: relative;
  z-index: 1;
}

.card-pulse-critical {
  animation: card-bleed-red 2s infinite ease-in-out;
  position: relative;
  z-index: 1;
}

.hot-load-border {
  border: 1px solid rgba(239, 68, 68, 0.4);
}


/* 🟢 ADD THIS: Missing Amber Animation for Late/Warning Cards */
@keyframes card-bleed-amber {
  0% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0);
  }

  50% {
    box-shadow: inset 45px 0 30px -10px rgba(245, 158, 11, 0.25);
  }

  100% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.card-pulse-warning {
  animation: card-bleed-amber 2s infinite ease-in-out;
  position: relative;
  z-index: 1;
}

/* Add to src/App.css */
.pulse-beacon {
  animation: beacon-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.5;
}

@keyframes beacon-ping {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* =========================================
   8.1. STANDARD BUTTONS
   ========================================= */

/* --- GLOBAL ICON BUTTONS (Reusable) --- */
.btn-icon-danger {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-icon-danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* --- ACTION BUTTON HOVER EFFECTS --- */

/* Cancel / Danger Hover */
.btn-hover-red:hover {
  color: #ef4444;
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.05);
}

/* Comms / Brand Hover */
.btn-hover-purple:hover {
  color: #8b5cf6;
  border-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.05);
}

/* Copy / Warning Hover */
.btn-hover-yellow:hover {
  color: #eab308;
  border-color: #eab308;
  background-color: rgba(234, 179, 8, 0.05);
}


/* =========================================
   8. GLASS BUTTONS & RIBBONS
   ========================================= */
.glass-btn {
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.glass-btn:hover {
  transform: translateY(-1px);
}

.glass-btn-brand {
  background: rgba(0, 154, 220, 0.08);
  border-color: rgba(0, 154, 220, 0.3);
  color: #009ADC;
}

.glass-btn-brand:hover {
  background: rgba(0, 154, 220, 0.15);
  border-color: #009ADC;
}

.glass-btn-green {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.glass-btn-green:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

.glass-btn-red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.glass-btn-red:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* Dashboard Ribbon Buttons */
.ribbon-btn {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  color: white;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.5);
  padding: 6px 8px 6px 12px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border: none;
  cursor: pointer;
  height: 32px;
  width: 32px;
  overflow: hidden;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.ribbon-btn:hover {
  width: 110px;
  background-color: var(--btn-color) !important;
  z-index: 50;
}

.ribbon-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ribbon-label {
  margin-right: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.ribbon-btn:hover .ribbon-label {
  opacity: 1;
}

/* =========================================
   9. LOGIN & PUBLIC PAGES
   ========================================= */
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-main);
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.login-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

.public-tracking-card {
  width: 100%;
  max-width: 1400px;
  height: 85vh;
  min-height: 700px;
  background: #1a1c1e;
  /* Public view is always dark theme */
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
  border: 1px solid #2d2f31;
}

.public-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 350px;
  overflow: hidden;
}

/* =========================================
   10. NEW ADDITIONS (App.js Refactor)
   ========================================= */

/* --- IMPERSONATION (GOD MODE) BANNER --- */
.god-mode-banner {
  background-color: #7c3aed;
  /* Purple */
  color: white;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.exit-god-btn {
  background: white;
  color: #7c3aed;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.7rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.exit-god-btn:hover {
  opacity: 0.9;
}

/* --- SIDEBAR FOOTER & TOGGLE --- */
.sidebar-footer {
  padding: 15px;
  /* Match the sidebar background variable */
  background-color: var(--bg-sidebar);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  /* Pushes footer to bottom */
}

/* The Theme Switch Row */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  /* Use sidebar specific text color */
  color: var(--text-on-sidebar);
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}

.theme-toggle-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}

/* User Profile Refinements for Footer */
/* We reuse .user-profile but remove the top border since the footer container handles it */
.sidebar-footer .user-profile {
  border-top: none;
  padding: 8px 0 0 0;
}

/* --- HEADER BUTTONS (Replaces inline hover logic) --- */
.btn-header-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-header-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: rgba(0, 154, 220, 0.05);
  /* Subtle brand tint */
}

/* Dark mode specific tweak for header button */
body.dark-mode .btn-header-secondary:hover {
  background-color: rgba(56, 189, 248, 0.1);
}

/* --- HEADER BRANDING FIX --- */
.header-brand-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  /* 🟢 Forces single line */
  white-space: nowrap;
  overflow: hidden;
}

.header-logo {
  max-height: 32px;
  max-width: 140px;
  object-fit: contain;
  display: block;
  /* Prevents weird inline spacing */
}

.header-agency-name {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.5px;
  color: var(--text-main);
  white-space: nowrap;
}

.header-divider {
  border-left: 1px solid var(--border);
  height: 24px;
  margin: 0 4px;
  /* Tighter spacing around divider */
  display: inline-block;
}

.header-page-title {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* =========================================
   11. TIMELINE VIEW STYLES
   ========================================= */

/* --- MAIN CONTAINER --- */
.timeline-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* --- TOOLBAR --- */
.timeline-toolbar {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-main);
  flex-shrink: 0;
}

.timeline-search-wrapper {
  position: relative;
  width: 300px;
}

.timeline-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  color: var(--text-muted);
}

.timeline-search-input {
  width: 100%;
  padding: 8px 12px 8px 35px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.8rem;
  outline: none;
}

.timeline-search-input:focus {
  border-color: var(--primary);
}

.zoom-group {
  display: flex;
  background: var(--bg-card);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.zoom-btn {
  padding: 4px 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.2s;
  background: transparent;
  color: var(--text-muted);
}

.zoom-btn.active {
  background: var(--primary);
  color: white;
}

/* --- VIEWPORT & GRID --- */
.timeline-viewport {
  flex: 1;
  overflow: auto;
  position: relative;
  scroll-behavior: auto;
}

/* Dragging cursor state is handled inline via style */

/* STICKY HEADER */
.timeline-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  min-width: max-content;
}

.resource-header-label {
  width: 220px;
  flex: 0 0 220px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 0.7rem;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  position: sticky;
  left: 0;
  background: var(--bg-main);
  z-index: 111;
  text-transform: uppercase;
  box-sizing: border-box;
}

.time-track {
  display: flex;
  /* width is set inline via JS calculations */
}

.time-col {
  box-sizing: border-box;
  text-align: left;
  padding: 10px 0 10px 6px;
  border-left: 1px dotted rgba(128, 128, 128, 0.1);
  flex-shrink: 0;
  height: 100%;
}

.time-col.major {
  border-left: 1px solid var(--border);
  background: rgba(128, 128, 128, 0.03);
}

/* --- ROWS & RESOURCES --- */
.timeline-body {
  position: relative;
  min-width: max-content;
  min-height: 100%;
}

.res-row {
  display: flex;
  height: 75px;
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
  position: relative;
}

.row-sidebar {
  width: 220px;
  flex: 0 0 220px;
  padding: 0 15px;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  left: 0;
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* Border left color set inline for row identification */
}

/* --- EVENTS & LOADS --- */
.track-area {
  position: relative;
  display: flex;
  cursor: cell;
  /* Width set inline */
}

.deadhead-line {
  position: absolute;
  top: 38px;
  height: 2px;
  border-top: 2px dotted var(--text-muted);
  opacity: 0.4;
  z-index: 1;
}

.event-block {
  position: absolute;
  top: 10px;
  height: 55px;
  z-index: 5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 4px;
}

.event-block.hatched {
  background-image: repeating-linear-gradient(45deg,
      rgba(239, 68, 68, 0.1),
      rgba(239, 68, 68, 0.1) 10px,
      rgba(239, 68, 68, 0.2) 10px,
      rgba(239, 68, 68, 0.2) 20px);
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.event-block.event-note {
  background: #fef08a;
  border: 1px solid #eab308;
  color: #854d0e;
}

.load-block {
  position: absolute;
  top: 18px;
  height: 40px;
  z-index: 10;
  cursor: grab;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow: visible;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, z-index 0.2s, filter 0.2s;
}

.load-block:hover {
  transform: translateY(-2px) scale(1.005);
  z-index: 100 !important;
  filter: brightness(1.1);
}

/* Conflict styling */
.load-conflict {
  box-shadow: 0 0 0 2px #ef4444, 0 0 15px rgba(239, 68, 68, 0.5) !important;
  animation: pulse-critical-bg 1.5s infinite;
  z-index: 20 !important;
}

/* --- INDICATORS --- */
.now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  z-index: 90;
  pointer-events: none;
  transition: left 0.5s linear;
  transform: translateX(-50%);
}

.now-head {
  position: absolute;
  top: 0px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
}

.tracking-pin {
  position: absolute;
  top: 0px;
  z-index: 50;
  cursor: pointer;
  transition: transform 0.2s;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.tracking-pin:hover {
  transform: scale(1.4) translateY(-2px);
  z-index: 1000;
  color: #3b82f6 !important;
}

/* --- ANIMATIONS & POPUPS --- */
@keyframes pulse-critical-bg {
  0% {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
  }

  50% {
    background-color: rgba(239, 68, 68, 0.45);
    border-color: #b91c1c;
  }

  100% {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
  }
}

@keyframes pulse-warning-bg {
  0% {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
  }

  50% {
    background-color: rgba(245, 158, 11, 0.4);
    border-color: #b45309;
  }

  100% {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
  }
}

.animate-critical {
  animation: pulse-critical-bg 2s infinite ease-in-out !important;
}

.animate-warning {
  animation: pulse-warning-bg 2s infinite ease-in-out !important;
}

/* Custom Map Popup styling */
.tracking-popup-custom {
  position: fixed;
  background: var(--bg-card);
  color: var(--text-main);
  padding: 0;
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  width: 250px;
  overflow: hidden;
}

.popup-map-area {
  height: 150px;
  background: var(--bg-main);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-details {
  padding: 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* =========================================
   12. COMMAND CENTER STYLES
   ========================================= */

/* --- LAYOUT --- */
.command-layout {
  height: calc(100vh - 65px);
  width: 100%;
  display: flex;
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
}

/* --- SIDEBAR --- */
.command-sidebar {
  width: 380px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  z-index: 10;
  flex-shrink: 0;
}

.command-tabs {
  display: flex;
  background: var(--bg-main);
  padding: 10px 10px 0 10px;
  gap: 5px;
  border-bottom: 1px solid var(--border);
}

.command-tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  position: relative;
  top: 1px;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.command-tab-btn.active {
  background: var(--bg-card);
  color: var(--primary);
  font-weight: bold;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.command-tab-btn.inactive {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
  border: 1px solid transparent;
}

.dark-mode .command-tab-btn.inactive {
  background: rgba(255, 255, 255, 0.05);
}

.command-list-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: var(--bg-card);
}

/* --- CARDS (Negotiations & Matches) --- */
.command-card {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--bg-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.command-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: var(--text-muted);
}

/* Handshake Status Badge */
.handshake-badge {
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

.handshake-badge.action {
  background: rgba(245, 158, 11, 0.15);
  /* Amber tint */
  color: #d97706;
}

.handshake-badge.waiting {
  background: rgba(107, 114, 128, 0.1);
  /* Grey tint */
  color: var(--text-muted);
}

/* Match Card Styles */
.match-header-context {
  padding: 10px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: var(--text-main);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.distance-tag {
  font-size: 0.75rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.distance-tag.near {
  color: #10b981;
}

.distance-tag.far {
  color: #f59e0b;
}

/* --- MAP ELEMENTS --- */
.map-container {
  flex: 1;
  position: relative;
}

/* Custom Marker Pin (SVG Container) */
.map-marker-pin {
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.map-marker-pin:hover {
  transform: scale(1.1);
  z-index: 100;
}

.map-marker-pin.selected {
  transform: scale(1.2);
  z-index: 100;
}

/* Inner Icon Centering */
.pin-icon-inner {
  position: absolute;
  top: 0;
  left: -2px;
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
}

/* --- MAP POPUP OVERRIDES (Specific to Command Center) --- */
.command-popup-content {
  padding: 8px;
  color: #1e293b;
  /* Keep dark text for map popup legibility if using white bg, or use var if themed */
}

/* If you want the popup to be theme-aware, use variables: */
.command-popup-content {
  color: var(--text-main);
}

.command-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.command-popup-divider {
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  padding-bottom: 8px;
}

/* =========================================
   13. CALENDAR MODAL STYLES
   ========================================= */

/* --- OVERLAY & CONTAINER --- */
.cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  /* Slightly lighter for light mode context */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

.cal-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 98vw;
  max-width: 1800px;
  height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* --- HEADER --- */
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg-main);
  /* Distinct header bg */
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  flex-shrink: 0;
}

.header-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-group.right {
  gap: 20px;
}

.cal-icon-box {
  width: 36px;
  height: 36px;
  background: rgba(0, 154, 220, 0.1);
  color: var(--primary);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cal-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  min-width: 220px;
  letter-spacing: -0.5px;
}

/* --- TABS & CONTROLS --- */
.filter-tabs {
  display: flex;
  background: var(--bg-card);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.filter-tabs button {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.filter-tabs button:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.filter-tabs button.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-controls,
.view-controls {
  display: flex;
  background: var(--bg-card);
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 2px;
}

.nav-controls button,
.view-controls button {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 0.85rem;
}

.nav-controls button:hover,
.view-controls button:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.view-controls button.active {
  background: var(--bg-main);
  /* Inverted look for active toggle */
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .view-controls button.active {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.new-event-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s;
}

.new-event-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: var(--text-main);
}

/* --- DRAWER (Add/Edit) --- */
.cal-drawer {
  background: var(--bg-main);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
  animation: slideDown 0.2s ease-out;
  flex-shrink: 0;
  box-shadow: inset 0 -4px 6px -4px rgba(0, 0, 0, 0.05);
}

.cal-drawer.editing {
  background: rgba(0, 154, 220, 0.05);
  border-left: 4px solid var(--primary);
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 80px;
  text-transform: uppercase;
}

.cal-drawer input,
.cal-drawer select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  flex: 1;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.cal-drawer input:focus,
.cal-drawer select:focus {
  border-color: var(--primary);
}

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

.save-btn {
  background: #10b981;
  color: white;
  font-weight: bold;
  border: none;
  padding: 0 20px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.save-btn:hover {
  background: #059669;
}

.delete-btn {
  background: var(--bg-card);
  color: #ef4444;
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* --- CALENDAR BODY & OVERRIDES --- */
.cal-body {
  flex: 1;
  width: 100%;
  background: var(--bg-card);
  padding: 20px;
  position: relative;
  box-sizing: border-box;
}

/* React Big Calendar Overrides */
.rbc-calendar {
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
}

.rbc-month-view,
.rbc-time-view,
.rbc-agenda-view {
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.rbc-header {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.rbc-day-bg+.rbc-day-bg,
.rbc-month-row+.rbc-month-row,
.rbc-time-view .rbc-time-gutter,
.rbc-time-view .rbc-time-header,
.rbc-time-content,
.rbc-timeslot-group,
.rbc-day-slot .rbc-time-slot,
.rbc-time-header-content,
.rbc-day-slot {
  border-color: var(--border);
}

.rbc-off-range-bg {
  background: var(--bg-main);
  /* Slightly darker/lighter for off-range */
}

.rbc-today {
  background-color: rgba(0, 154, 220, 0.05) !important;
}

.rbc-event {
  background: none;
  padding: 0;
}

/* Event Types */
.rbc-custom-event {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin: 1px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.1s;
}

.rbc-custom-event:hover {
  transform: scale(1.02);
  z-index: 5;
}

.type-load-pickup {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.type-load-delivery {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.type-crm-task {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

.type-general {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.type-meeting {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.3);
  color: #ec4899;
}

.type-deadline {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.mine {
  box-shadow: inset 3px 0 0 0 var(--primary);
  /* Left stripe indicator for own events */
}

.evt-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================
   14. MarketPlace
   ========================================= */
/* --- MARKETPLACE LAYOUT --- */
.marketplace-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  overflow-y: hidden;
  background-color: var(--bg-main);
  /* Ensures correct background in both modes */
}

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

.marketplace-title {
  margin: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
}

.marketplace-subtitle {
  margin: 5px 0 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.marketplace-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
  /* Slight padding for scrollbar breathing room */
}

/* --- TABS --- */
.marketplace-tabs {
  display: flex;
  gap: 10px;
}

.mp-tab-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.mp-tab-btn:hover {
  background-color: var(--bg-card);
  /* Subtle hover effect */
  color: var(--text-main);
}

.mp-tab-btn.active {
  border-color: var(--primary);
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--primary);
  font-weight: 700;
}

/* Optional: Make the active tab background slightly more visible in Dark Mode */
[data-theme='dark'] .mp-tab-btn.active {
  background-color: rgba(59, 130, 246, 0.15);
}

/* --- MARKETPLACE POSTINGS --- */
.mp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.mp-header h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
}

/* LIST VIEW (TABLE) */
.mp-table-wrapper {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.mp-table {
  width: 100%;
  border-collapse: collapse;
}

.mp-th {
  background-color: var(--bg-main);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mp-tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-main);
  transition: background-color 0.15s ease;
}

.mp-tr:hover {
  background-color: var(--bg-main);
  /* Subtle hover lift */
}

/* Dark mode tweak for hover visibility */
[data-theme='dark'] .mp-tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.mp-td {
  padding: 12px;
}

/* GRID VIEW (CARDS) */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.mp-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

/* BADGES */
.mp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* EDIT BUTTON */
.btn-edit-posting {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-edit-posting:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* --- MARKETPLACE RATES LAYOUT --- */
.mp-rates-rug {
  /* 🟢 SOLID FLOOR: Light Mode #F3F4F6 */
  background-color: #F3F4F6 !important;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  border-radius: 0;
}

/* 🟢 DARK MODE FLOOR: #18181b */
body.dark-mode .mp-rates-rug {
  background-color: #18181b !important;
}

/* --- THE CARDS (Sitting on the Rug) --- */
/* Each card gets a solid background (White or Dark Gray) to pop against the floor */

/* 1. CONFIG CARD */
.mp-config-row {
  background-color: var(--bg-card);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr 150px 150px 170px;
  gap: 15px;
  align-items: end;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 2. MAP CARD */
.mp-map-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

/* 3. GAUGE CARDS */
.rate-gauge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 4. MARGIN CARD (Orange Gradient) */
.mp-margin-card {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 8px;
  padding: 25px 30px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
  position: relative;
  overflow: hidden;
}

/* 5. DATA CARDS */
.mp-data-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- INTERNAL ELEMENTS --- */

.mp-label {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mp-input {
  height: 42px;
  width: 100%;
  background-color: var(--bg-main);
  /* Inset relative to Card */
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-main);
  padding: 0 12px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.mp-input:focus {
  border-color: var(--primary);
}

.mp-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 35px;
  cursor: pointer;
}

.mp-visuals-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

.mp-gauges-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mp-tables-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* Map Overlays */
.mp-map-error {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(239, 68, 68, 0.95);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.mp-map-distance {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Toggles */
.mp-toggle-group {
  display: flex;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 4px;
}

.mp-toggle-btn {
  flex: 1;
  padding: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
}

.mp-toggle-btn.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Gauge Internals */
.rate-gauge.empty {
  opacity: 0.7;
  align-items: center;
  justify-content: center;
}

.gauge-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: flex-end;
}

.gauge-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gauge-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.gauge-value-empty {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 5px;
  color: var(--text-muted);
}

.gauge-track {
  height: 8px;
  width: 100%;
  background: var(--bg-main);
  border-radius: 4px;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.gauge-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gauge-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Margin Card Internals */
.mp-margin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mp-margin-label {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.95;
  letter-spacing: 0.05em;
}

.mp-margin-value {
  font-size: 2.5rem;
  font-weight: 800;
  margin-top: 15px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.mp-margin-sub {
  font-size: 0.9rem;
  opacity: 0.95;
  margin-top: 10px;
  font-weight: 600;
}

/* Table Internals */
.mp-card-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp-card-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--text-main);
  font-weight: 700;
}

.mp-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mp-data-table th {
  text-align: left;
  color: var(--text-muted);
  padding: 12px 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.mp-data-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}

.mp-data-table tr:last-child td {
  border-bottom: none;
}

.mp-external-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 15px;
}

.mp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-source-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.mp-source-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mp-empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- MARKETPLACE NETWORK RUG --- */
.mp-network-rug {
  /* 🟢 SOLID FLOOR: Light Mode */
  background-color: #F3F4F6 !important;
  width: 100%;
  height: 100%;
  display: flex;
  /* Using Flex Col to stack the two "Rows" */
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding: 0;
}

/* 🟢 DARK MODE FLOOR */
body.dark-mode .mp-network-rug {
  background-color: #18181b !important;
}

/* --- ROWS --- */
.mp-row-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* 2/3 Left, 1/3 Right */
  gap: 20px;
  flex-shrink: 0;
  /* Don't shrink the top row */
}

.mp-row-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  flex: 1;
  /* Fill remaining height */
  min-height: 0;
  /* Allow scrolling inside */
}

.mp-col-right-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* --- CARDS --- */
.mp-net-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.mp-net-card.disabled {
  opacity: 0.7;
  pointer-events: none;
}

/* LOCK OVERLAY */
.mp-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

body.dark-mode .mp-lock-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* INPUTS */
.mp-net-search {
  width: 100%;
  height: 46px;
  background-color: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px 0 45px;
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.mp-net-search:focus {
  border-color: #009ADC;
  box-shadow: 0 0 0 3px rgba(0, 154, 220, 0.1);
}

/* LIST ITEMS */
.mp-net-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-main);
  margin-bottom: 10px;
  transition: background 0.2s;
}

.mp-net-item:hover {
  border-color: var(--primary);
}

/* GLASS BUTTONS */
.glass-btn {
  border: 1px solid rgba(156, 163, 175, 0.3);
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.glass-btn:hover {
  transform: translateY(-1px);
}

.glass-btn-brand {
  background: rgba(0, 154, 220, 0.08);
  border-color: rgba(0, 154, 220, 0.3);
  color: #009ADC;
}

.glass-btn-brand:hover {
  background: rgba(0, 154, 220, 0.15);
  border-color: #009ADC;
}

.glass-btn-green {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.glass-btn-green:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

.glass-btn-red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.glass-btn-red:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* STATS */
.mp-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  height: 100%;
}

.mp-stat-box {
  background: var(--bg-main);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mp-stat-val {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
}

.mp-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* TOAST */
.mp-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #009ADC;
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 154, 220, 0.4);
  z-index: 9999;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: mpSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mpSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

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

.mp-toast-icon {
  background: white;
  padding: 4px;
  border-radius: 50%;
  color: #009ADC;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* INFO BOX */
.mp-info-box {
  padding: 15px;
  background: rgba(0, 154, 220, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(0, 154, 220, 0.2);
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.5;
  flex-shrink: 0;
}

.mp-info-title {
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #009ADC;
}

/* =========================================
   15. QUOTE MANAGER
   ========================================= */

/* --- MANUAL QUOTE MODAL CSS --- */

/* 🟢 BODY & LAYOUT */
.mq-body {
  padding: 25px;
  overflow-y: auto;
  flex: 1;
  background-color: var(--bg-main);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 🟢 CARDS */
.mq-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 🟢 GRID SYSTEMS */
.mq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.mq-grid-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* Customer gets more space */
  gap: 20px;
  align-items: start;
}

/* 🟢 HEADER BUTTONS (Grey Default -> Color Hover) */
.btn-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

/* Book -> Green Hover */
.btn-action.book:hover {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

/* Save/Recalc -> Blue Hover */
.btn-action.save:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

/* Close X */
.btn-close-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-close-icon:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

/* 🟢 ROUTE SECTION (Flex & Centered) */
.mq-route-container {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.mq-route-group {
  flex: 1;
}

.mq-route-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  /* Align visually with input text */
  min-width: 140px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.mq-route-line {
  width: 100%;
  height: 1px;
  border-top: 2px dashed var(--border);
  margin-top: 6px;
  position: relative;
}

.mq-route-arrow {
  position: absolute;
  right: -5px;
  top: -7px;
  color: var(--border);
  background: var(--bg-card);
  /* Hide dashed line behind arrow */
  padding-left: 2px;
}

/* 🟢 INPUTS */
.mq-zip-row {
  display: flex;
  gap: 10px;
}

.mq-zip-input {
  width: 100px;
  text-align: center;
  font-weight: 600;
}

/* 🟢 FINANCIALS */
.mq-total-bar {
  background: var(--bg-main);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.mq-total-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  border: none;
  background: transparent;
  text-align: right;
  outline: none;
  width: 200px;
}

/* =========================================
   16. FLEET MANAGER
   ========================================= */

.fleet-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header & Toolbar */
.fleet-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fleet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* --- 1. FLEET MANAGER TOOLBAR TABS (Pills) --- */
.tab-group {
  display: flex;
  background: var(--bg-main);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.pill-tab {
  padding: 6px 16px;
  border-radius: 4px;
  /* Rounded corners */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  transition: all 0.2s;
  background: transparent;
  color: var(--text-muted);
}

.pill-tab.active {
  background: var(--bg-card);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pill-tab:hover {
  color: var(--primary);
}

/* Search Bar */
.search-wrapper {
  position: relative;
  max-width: 350px;
  width: 100%;
}

.search-input {
  padding: 8px 8px 8px 36px;
  border-radius: 6px;
  border: 1px solid var(--border);
  width: 100%;
  font-size: 0.85rem;
  background: var(--bg-main);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* Content Area */
.content-card {
  flex: 1;
  overflow-y: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* --- GRID VIEW FIXES --- */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  overflow-y: auto;
  flex: 1;

  /* 🟢 FIX 1: Packs rows at the top instead of spreading them out */
  align-content: start;

  /* 🟢 FIX 2: Prevents items from stretching vertically */
  align-items: start;

  /* 🟢 FIX 3: Increased padding so hover borders aren't cut off */
  padding: 10px;
}

.fleet-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-main);
  position: relative;
  transition: transform 0.1s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.fleet-card:hover {
  border-color: var(--role-fleet);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
  /* Ensures it sits above neighbors */
}

/* Internal Card Layout (Replaces Inline Styles) */
.fleet-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /* Reduced from 15px */
}

.fleet-card-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Reduced from 8px */
  padding-bottom: 10px;
  /* Reduced from 15px */
  border-bottom: 1px solid var(--border);
  flex: 1;
  /* Pushes actions to bottom */
}

.fleet-card-actions {
  margin-top: 10px;
  /* Reduced from 15px */
  display: flex;
  gap: 8px;
}

/* --- LIST VIEW --- */
.list-view-container {
  overflow-y: auto;
  flex: 1;
  border-radius: 8px;
}

.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fleet-table th {
  text-align: left;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
}

.fleet-table td {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}

.fleet-table tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* --- COMPONENTS --- */

/* Status Badges */
.status-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  height: fit-content;
}

.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Role Icon Box */
.role-icon-box {
  width: 40px;
  /* Reduced from 48px */
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-fleet {
  background: rgba(234, 179, 8, 0.1);
  color: var(--role-fleet);
}

.role-driver {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Action Buttons */
.action-btn {
  padding: 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: var(--bg-input);
  color: var(--text-main);
  border-color: var(--border);
}

.action-btn.delete:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.btn-report {
  flex: 1;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
}

/* --- 2. MODAL STANDARD TABS (Lines) --- */
.modal-tabs-container {
  padding: 0 30px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
  flex-shrink: 0;
  display: flex;
  gap: 25px;
}

.line-tab {
  padding: 15px 5px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  /* The line */
  border-radius: 0;
  /* NO rounded corners */
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.2s, border-color 0.2s;
}

.line-tab.active {
  color: var(--text-main);
  font-weight: 600;
  border-bottom-color: var(--role-fleet);
  /* Uses the Yellow */
}

/* 🟢 FIX: Force color to text-main on hover (overrides global button styles) */
.line-tab:hover {
  color: var(--text-main) !important;
  background: transparent !important;
  border-bottom-color: transparent;
  /* Keep line transparent on hover unless active */
}

/* --- 3. FORM GRID LAYOUT (50/50 Split) --- */
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Exact 50/50 split */
  gap: 20px;
  width: 100%;
  /* Ensure it fills container */
}

.input-group {
  width: 100%;
  /* Ensure input container fills the grid cell */
  margin-bottom: 0;
}

.form-input {
  width: 100%;
  /* Ensure actual input fills the container */
  box-sizing: border-box;
}

/* Helper for full width rows inside grid */
.full-width {
  grid-column: 1 / -1;
}

/* =========================================
   MAPBOX POPUP OVERRIDES
   ========================================= */

/* 1. The Container (The Bubble) */
.mapboxgl-popup-content {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  padding: 10px !important;
}

/* 2. The Tip (The little triangle at the bottom) */
.mapboxgl-popup-tip {
  border-top-color: var(--border) !important;
  /* Matches border */
  border-bottom-color: transparent !important;
}

/* 3. The Close Button */
.mapboxgl-popup-close-button {
  color: var(--text-muted) !important;
  font-size: 1.2rem;
  padding: 4px 8px;
}

.mapboxgl-popup-close-button:hover {
  background: transparent !important;
  color: var(--primary) !important;
}

/* =========================================
   ORDER FORM MODAL STYLES
   ========================================= */

/* --- MODAL LAYOUT --- */
.modal-header {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.modal-tabs {
  display: flex;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  gap: 2px;
}

.modal-body {
  padding: 20px;
  background-color: var(--bg-card);
  overflow-y: auto;
  height: calc(100vh - 180px);
  /* Adjust based on header height */
  display: flex;
  flex-direction: column;
}

/* --- FORM GRIDS & INPUTS --- */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.input-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.input-row-custom {
  display: grid;
  gap: 15px;
}

/* Use inline style for specific ratios like 1fr 0.5fr */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Utility for that Label Row */
.label-row-tight {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Aligns text to bottom so it hugs the input */
  margin-bottom: 4px;
  /* Tighter gap to the input */
  height: 18px;
  /* 🟢 Forces a fixed height so it doesn't push down */
}

/* --- ALERTS & BANNERS --- */
.banner-archive {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- 2. HEADER STATUS COLORS --- */
/* Base Badge Style */
.status-badge-header {
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
}

/* Status Variants */
.status-blue {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.2);
}

.status-green {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}

.status-red {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
  animation: pulse-red 2s infinite;
}

.status-orange {
  background-color: rgba(249, 115, 22, 0.1);
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.2);
}

.status-grey {
  background-color: var(--bg-main);
  color: var(--text-muted);
  border-color: var(--border);
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* --- CUSTOMER CARD --- */
.customer-card {
  padding: 1.25rem;
  background-color: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.customer-card.credit-blocked {
  background-color: rgba(239, 68, 68, 0.05);
  border-color: #ef4444;
}

/* --- STOP CARD (Elevated Style) --- */
.stop-card {
  /* 🟢 FIX: Use Card BG + Shadow to make it pop OUT, not sit IN */
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  /* Soft shadow for elevation */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  /* 🟢 FIX: distinct header background to separate it from the body */
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.stop-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.stop-number {
  background-color: var(--text-muted);
  color: var(--bg-card);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 🟢 FIXED */
  font-size: 0.7rem;
  font-weight: bold;
}

/* 🟢 FIX: SELECTOR VISIBILITY */
.stop-type-select {
  background: transparent;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-main);
  /* Ensures contrast in both modes */
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
}

.stop-type-select:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Ensure dropdown options are readable */
.stop-type-select option {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.stop-body {
  padding: 16px;
}

/* LTL / Hours Section in Stop Card */
.ltl-container {
  background-color: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
}

.ltl-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Freight Table in Stop Card */
.freight-section {
  margin-top: 15px;
}

.freight-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.freight-row {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  align-items: center;
}

/* --- FREIGHT GRID (Strict Alignment) --- */
.freight-grid-row {
  display: grid;
  /* 🟢 FIX: Wider Qty (70px), Wider Type (140px), Fixed Delete (36px) */
  grid-template-columns: 70px 40px 140px 1fr 160px 80px 36px;
  gap: 12px;
  align-items: center;
  /* Vertically center everything */
}

/* 🟢 FIX: Force all inputs/buttons in the grid to the same height */
.freight-grid-row input,
.freight-grid-row select,
.freight-grid-row .btn-icon-danger {
  height: 36px;
  margin: 0;
}

.btn-icon-danger {
  /* Ensure width matches height for a perfect square */
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  /* Placeholder for hover border */
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon-danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.freight-labels {
  margin-bottom: 8px;
  padding: 0 2px;
}

/* --- UNLOAD SELECTION GRID --- */
.unload-grid {
  display: grid;
  /* Auto-fill columns, min 140px wide */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.unload-card {
  background-color: var(--bg-card);
  /* Matches the card look */
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  user-select: none;
  /* Prevents text highlighting when clicking fast */
}

.unload-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 🟢 SELECTED STATE (Brand Corrected) */
.unload-card.selected {
  /* Use CSS Variable for tint to match brand exactly */
  background-color: color-mix(in srgb, var(--primary), transparent 90%);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
  /* Glow ring using brand color */
  box-shadow: 0 0 0 1px var(--primary);
}

/* Make the "10x Pallet" text bold */
.unload-card strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

/* Helper for Dims (Three small inputs in one cell) */
.dims-group {
  display: flex;
  gap: 4px;
  height: 36px;
  /* Match parent height */
}

.dims-group input {
  width: 100%;
  text-align: center;
  padding: 0 4px;
}

/* --- MARKET RATE WIDGET --- */
.market-widget {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.market-widget.has-data {
  background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent);
  border-color: rgba(59, 130, 246, 0.3);
}

.market-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.market-badge.reefer {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.2);
}

.market-badge.flatbed {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

.market-badge.van {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border-color: var(--border);
}

/* --- ACCOUNTING SUMMARY --- */
.accounting-summary-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.summary-box {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  /* 🟢 FIXED */
  align-items: center;
  /* 🟢 FIXED */
}

.summary-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}

.summary-value.revenue {
  color: #10b981;
}

.summary-value.expense {
  color: #ef4444;
}

/* --- TIMELINE --- */
.timeline-item {
  display: flex;
  gap: 15px;
  padding-bottom: 1.5rem;
  position: relative;
}

.timeline-line {
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* 🟢 FIXED */
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 🟢 FIXED */
  flex-shrink: 0;
  z-index: 1;
}

/* --- FIX HEADER BUTTONS --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between buttons */
  margin-left: auto;
  /* Pushes entire group to the right */
}

/* --- FIX DETAILS TAB GRID --- */
.input-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
}

/* Specific layout for Equipment Row (Equip | Length | ID) */
.grid-equip-row {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr 1fr;
  /* Wide | Narrow | Wide */
  gap: 15px;
  width: 100%;
}

/* Ensure inputs fill their grid cells */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.input-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* --- ACCOUNTING TAB STYLES --- */

/* Line Item Grid (Type | Amount | Delete) */
.accounting-row {
  display: grid;
  /* Description/Type (Grow) | Amount (Fixed) | Delete (Fixed) */
  grid-template-columns: 1fr 140px 36px;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

/* Force heights to match for clean alignment */
.accounting-row select,
.accounting-row input,
.accounting-row .btn-icon-danger {
  height: 36px;
  margin: 0;
}

/* Section Headers */
.accounting-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- PROFIT / MARGIN FOOTER --- */
.accounting-footer {
  margin-top: 30px;
  padding: 20px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

.profit-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.profit-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

/* Dynamic Colors for Footer */
.profit-positive {
  color: #10b981;
}

/* Green */
.profit-negative {
  color: #ef4444;
}

/* Red */

.margin-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
}

.margin-positive {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.margin-negative {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* --- DOCS TAB LAYOUT --- */
.docs-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  /* Upload Area (Narrower) | List (Wider) */
  gap: 20px;
  height: 100%;
  min-height: 400px;
}

/* 1. The Container (Recessed / Darker) */
.doc-list-container {
  background-color: var(--bg-main);
  /* The "Well" look */
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 2. The Document Card (Elevated / Lighter) */
.doc-card {
  background-color: var(--bg-card);
  /* Pops off the dark background */
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.doc-card:hover {
  transform: translateY(-1px);
  border-color: var(--text-muted);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.doc-info {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.doc-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* specific icon colors */
.doc-icon-box.pdf {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.doc-icon-box.img {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.doc-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.doc-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-details {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}

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

/* --- NOTES TAB STYLING --- */
.notes-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

/* The Popout Input Panel */
.note-add-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  animation: slideDown 0.2s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

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

/* Standard Note Card */
.note-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.note-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  white-space: pre-wrap;
}

/* 🟢 ECHO / SYSTEM NOTE (Dark Mode Fixed) */
.note-card.echo-note {
  /* Darker Blue background for contrast */
  background-color: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  border-right: 1px solid rgba(59, 130, 246, 0.2);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.note-card.echo-note .note-header {
  border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* 1. Default (Light Mode) - Use Dark Blue Text */
.note-card.echo-note .note-body {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem;
  color: #1e40af;
  /* Dark Blue - Readable on White */
}

/* 2. Dark Mode Override - Use Light Blue Text */
/* Assuming your app adds a class like .dark or .dark-mode to the body/container */
.dark-mode .note-card.echo-note .note-body,
.dark .note-card.echo-note .note-body {
  color: #93c5fd;
  /* Light Blue - Readable on Dark Grey */
}

/* 🟢 UPDATE: Added relative positioning for the X button */
.note-add-panel {
  position: relative;
  /* Anchor for absolute elements */
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 15px 15px 15px;
  /* Extra top padding for the X */
  margin-bottom: 10px;
  animation: slideDown 0.2s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 🟢 NEW: Reusable Grey-to-Blue Button */
.btn-grey-blue {
  background-color: var(--bg-main);
  /* Light Grey bg */
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-grey-blue:hover {
  background-color: var(--primary);
  /* Brand Blue */
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* =========================================
   17. GLOBAL DROPDOWN FIXES
   ========================================= */

/* Force dropdown options to respect the theme */
select option {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Fix for Dark Mode specific browser defaults */
body.dark-mode select option {
  background-color: #27272a !important;
  /* Hardcoded dark grey for safety */
  color: #f3f4f6 !important;
}

/* Remove default blue highlight on hover/focus if it clashes */
select:focus option:checked {
  background: var(--primary) linear-gradient(0deg, var(--primary) 0%, var(--primary) 100%);
  color: white !important;
}

/* 🟢 Fix React-Big-Calendar "+ X more" link in Dark Mode */
.rbc-show-more {
  color: var(--primary, #0ea5e9) !important;
  /* Uses your bright blue brand color */
  font-weight: 700 !important;
  background-color: rgba(14, 165, 233, 0.1) !important;
  /* Light transparent background */
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-top: 2px !important;
  display: inline-block !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease !important;
}

.rbc-show-more:hover {
  background-color: var(--primary, #0ea5e9) !important;
  color: white !important;
}

/* TOAST NOTIFICATIONS */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100000;
  pointer-events: none;
}

.toast {
  min-width: 250px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1), fadeOut 0.3s ease-in 2.7s forwards;
  pointer-events: auto;
  /* Allows clicking the X button */
}

.toast.success {
  border-left-color: #10b981;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.warning {
  border-left-color: #f59e0b;
}

.toast.info {
  border-left-color: #3b82f6;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

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

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.echo-trigger-btn {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 12px;
}

.echo-trigger-btn:hover,
.echo-trigger-btn:focus {
  transform: scale(1.1);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.echo-trigger-btn:active {
  transform: scale(0.95);
}