*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-right-2 {
  right: -0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-20 {
  bottom: 5rem;
}
.left-4 {
  left: 1rem;
}
.right-1 {
  right: 0.25rem;
}
.right-4 {
  right: 1rem;
}
.top-1 {
  top: 0.25rem;
}
.top-4 {
  top: 1rem;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[499\] {
  z-index: 499;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-8 {
  height: 2rem;
}
.h-full {
  height: 100%;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-2 {
  width: 0.5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1;
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(55 65 81 / 0.5);
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / 1);
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / 1);
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / 1);
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-700\/50 {
  border-color: rgb(55 65 81 / 0.5);
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 1);
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / 1);
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / 1);
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / 1);
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / 1);
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / 1);
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-700\/50 {
  background-color: rgb(55 65 81 / 0.5);
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/50 {
  background-color: rgb(31 41 55 / 0.5);
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 1);
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/95 {
  background-color: rgb(17 24 39 / 0.95);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 1);
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / 1);
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / 1);
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-900\/20 {
  background-color: rgb(20 83 45 / 0.2);
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / 1);
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / 1);
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-slate-800\/50 {
  background-color: rgb(30 41 59 / 0.5);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-900\/20 {
  background-color: rgb(113 63 18 / 0.2);
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/10 {
  --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-800 {
  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
}
.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.to-gray-900 {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}
.to-purple-500\/10 {
  --tw-gradient-to: rgb(168 85 247 / 0.1) var(--tw-gradient-to-position);
}
.object-cover {
  object-fit: cover;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 1);
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 1);
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / 1);
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / 1);
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / 1);
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / 1);
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / 1);
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / 1);
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / 1);
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[out\:json\] {
  out: json;
}
.\[timeout\:25\] {
  timeout: 25;
}

/* ============================================================
 * KINGROAD GPS - GLOBAL LAYOUT VARIABLES - ABSOLUTE LAW
 * ============================================================
 * USEFUL AREA: From the left edge to the start of the sidebar,
 *              and from the footer to the header.
 * 
 * SINGLE RULE: Below the sidebar, the ONLY visible thing is the MAP.
 *              ALL fixed/draggable icons MUST stay in the USEFUL AREA.
 * 
 * EXCEPTION: Navigation events (exits) are temporary and can cover:
 *            - RIGHT EXIT → appears on the right (covers sidebar)
 *            - LEFT EXIT → appears on the left (covers search bar)
 *            - CENTER/FRONT EXIT → appears at center near header
 * ============================================================ */
:root {
  /* Fixed layout dimensions - KR_DASHBOARD_RESTORE_LAYOUT_PIXEL_PERFECT */
  /* MEASUREMENTS BASED ON USER REFERENCE SCREENSHOT */
  --sidebar-width: 350px;
  --footer-height: 75px;  /* REFERENCE: ~75px */
  --topbar-height: 89px;  /* ALIGNED with sidebar-header (89px real) */
  
  /* USEFUL AREA - absolute limits for widgets, alerts and icons */
  --safe-area-right: var(--sidebar-width);    /* Right limit = sidebar start */
  --safe-area-bottom: var(--footer-height);   /* Bottom limit = footer top */
  --safe-area-top: var(--topbar-height);      /* Top limit = header base */
  --safe-area-left: 0px;                       /* Left limit = screen edge */
  
  /* Safety margin so elements don't touch sidebar edge */
  --safe-margin: 50px;
  
  /* Calculated useful area */
  --safe-area-width: calc(100vw - var(--sidebar-width));
  --safe-area-height: calc(100vh - var(--topbar-height) - var(--footer-height));
  
  /* Safe position for elements on the right (away from sidebar) = 400px */
  --safe-right-position: calc(var(--sidebar-width) + var(--safe-margin));
}

/* USEFUL AREA container - use in overlays and widgets */
.safe-area-container {
  position: fixed;
  top: 89px;
  top: var(--topbar-height);
  left: 0px;
  left: var(--safe-area-left);
  right: 350px;
  right: var(--safe-area-right);
  bottom: 75px;
  bottom: var(--safe-area-bottom);
  pointer-events: none; /* Allows clicks to pass through to map */
}

/* Elements inside safe area should receive pointer-events */
.safe-area-container > * {
  pointer-events: auto;
}

/* Utility class to force elements inside useful area */
.within-safe-area {
  max-width: calc(100vw - 350px) !important;
  max-width: var(--safe-area-width) !important;
  margin-right: 350px !important;
  margin-right: var(--safe-area-right) !important;
}

/* ============================================================
 * GLOBAL RULE: Fixed elements in useful area
 * All these elements MUST respect the sidebar
 * ============================================================ */
.fixed-ui-element {
  /* Ensures fixed elements don't exceed sidebar */
  max-width: calc(100vw - 350px - 50px) !important;
  max-width: calc(100vw - var(--sidebar-width) - var(--safe-margin)) !important;
}

/* ============================================================
 * KR_EXPAND_MAP_001 - Expanded Map Mode
 * When isMapExpanded=true AND there's active route, sidebar is hidden
 * and map occupies full screen width
 * ============================================================ */
.map-expanded-mode {
  /* Sidebar hidden - map occupies entire screen */
  --sidebar-width: 0px;
  --safe-area-right: 0px;
  --safe-right-position: 50px;
}

.map-expanded-mode .tomtom-sidebar,
.map-expanded-mode .navigation-sidebar {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.map-expanded-mode .main-map-area {
  right: 0 !important;
  width: 100vw !important;
  transition: right 0.3s ease, width 0.3s ease;
}

.map-expanded-mode .dashboard-header,
.map-expanded-mode .dashboard-footer {
  right: 0 !important;
  transition: right 0.3s ease;
}

/* Hide Emergent platform badge */
#emergent-badge,
a[href*="emergent"],
[id*="emergent-badge"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 🚀 Mobile Responsiveness - Prevent horizontal scroll */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ============================================================
 * LIGHT GRAY BACKGROUND - Covers entire area (map + sidebar)
 * Same as TomTom when no map is loaded
 * ============================================================ */
html, body, #root, .App, .main-dashboard, .dashboard-container {
    background-color: #c8c8c8 !important; /* Light gray - map placeholder */
}

/* Map container placeholder - light gray until map loads */
.map-container,
.mapboxgl-map,
.mapbox-map,
[class*="map-view"],
[class*="map-area"],
.main-map-area {
    background-color: #c8c8c8 !important; /* Light gray */
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #1a1a2e !important;
    color: white;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Prevent all elements from causing horizontal scroll */
* {
    max-width: 100%;
    box-sizing: border-box;
}

#root {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 🌙 Night Anti-Glare Protection - Avoid dangerous white screens for drivers */
* {
    /* Forces global dark theme */
    color-scheme: dark !important;
}

/* Override any dangerous white backgrounds */
*[style*="background: white"],
*[style*="background-color: white"],
*[style*="background: #fff"],
*[style*="background-color: #fff"],
*[style*="background: #ffffff"],
*[style*="background-color: #ffffff"] {
    background: #1a1a2e !important;
    color: white !important;
}

/* Loading screens e splash screens seguros */
.loading, .splash, .spinner {
    background: #1a1a2e !important;
    color: #FFD700 !important;
}

/* Modals e overlays seguros */
.modal, .overlay, .popup, .dropdown {
    background: #1a1a2e !important;
    color: white !important;
}

/* Dashboard Modal System - Z-Index Hierarchy */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 650; /* Modal backdrop - normalized from 8000 */
    animation: modal-fade-in 0.2s ease;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #e9ecef;
    color: #333;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
        monospace;
}


/* 📱 Mobile-First Responsive Rules - Eliminate Horizontal Scroll */
.container, 
.wrapper,
.content,
.main,
.page,
.section,
div[class*="container"],
div[class*="wrapper"] {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Fix for map containers */
.mapboxgl-map,
.map-container,
[class*="map"],
[id*="map"] {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Fix for sidebars and panels */
.sidebar,
.panel,
.drawer,
[class*="sidebar"],
[class*="panel"] {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Responsive images and media */
img,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Fix for tables on mobile */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Mobile viewport optimization */
@media screen and (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }
    
    /* Ensure no element exceeds viewport */
    * {
        max-width: 100vw;
    }
    
    /* Fix for fixed/absolute positioned elements */
    .fixed,
    .absolute,
    [style*="position: fixed"],
    [style*="position: absolute"] {
        max-width: 100vw;
        left: 0;
        right: 0;
    }
}

/* Tablet viewport optimization */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        padding: 0;
        margin: 0;
    }
    
    * {
        max-width: 100vw;
    }
}


/* ============================================================
   FREE MAP MODE - When sidebar is hidden, icons move to right edge
   Triggered by: double-click, zoom, or drag on map
   ============================================================ */

/* When in free map mode, move all right-side icons to the edge */
.app-container.free-map-mode .volume-floating-widget,
.app-container.free-map-mode .whereami-widget,
.app-container.free-map-mode .current-location-btn.floating-control-btn,
.app-container.free-map-mode .report-incident-btn.floating-control-btn {
  right: 20px !important;
  transition: right 0.3s ease;
}

/* Also hide the sidebar in free map mode */
.app-container.free-map-mode .sidebar {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

/* Adjust the recenter button in free map mode */
.app-container.free-map-mode .recenter-button {
  /* Keep it centered but higher z-index */
  z-index: 1300;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / 1);
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / 1);
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / 1);
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / 1);
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / 1);
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700\/20:hover {
  background-color: rgb(55 65 81 / 0.2);
}
.hover\:bg-gray-700\/30:hover {
  background-color: rgb(55 65 81 / 0.3);
}
.hover\:bg-gray-700\/50:hover {
  background-color: rgb(55 65 81 / 0.5);
}
.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 1);
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 1);
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / 1);
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-700\/50:hover {
  background-color: rgb(51 65 85 / 0.5);
}
.hover\:from-blue-700:hover {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-blue-800:hover {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}
.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-blue-400\/50:hover {
  --tw-ring-color: rgb(96 165 250 / 0.5);
}
.focus\:border-transparent:focus {
  border-color: transparent;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gray-400:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-600:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / 1);
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/**
 * Mobile Responsive CSS - Eliminate Horizontal Scroll
 * KingRoad GPS - Professional Truck Navigation
 */

/* 🚀 CRITICAL: Prevent horizontal scroll on all devices */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    box-sizing: border-box !important;
    background-color: #c8c8c8 !important; /* Light gray - default background */
}

/* Apply box-sizing to all elements */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Root container must not overflow */
#root {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Main app container */
.App {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 📱 MOBILE DEVICES (320px - 480px) */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure all containers fit viewport */
    .container,
    .wrapper,
    .content,
    .main-content,
    div[class*="container"],
    div[class*="wrapper"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Map container mobile fix */
    .map-container,
    .mapboxgl-map,
    [class*="map-"],
    [id*="map"] {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Sidebar/drawer on mobile */
    .sidebar,
    .drawer,
    [class*="sidebar"],
    [class*="drawer"] {
        max-width: 85vw !important;
    }
    
    /* Buttons and inputs */
    button,
    input,
    select,
    textarea {
        max-width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Tables responsive */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 📱 SMALL TABLETS (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    .container,
    .wrapper,
    div[class*="container"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .map-container,
    .mapboxgl-map {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* 📱 TABLETS (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
    
    .container,
    .wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .map-container {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* 🖥️ DESKTOP (1025px+) */
@media screen and (min-width: 1025px) {
    .container,
    .wrapper {
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 🔧 FIX COMMON OVERFLOW CAUSES */

/* Fixed positioned elements */
[style*="position: fixed"],
.fixed {
    max-width: 100vw !important;
}

/* Absolute positioned elements */
[style*="position: absolute"],
.absolute {
    max-width: 100vw !important;
}

/* Flexbox containers */
.flex,
[class*="flex-"] {
    flex-wrap: wrap !important;
    max-width: 100vw !important;
}

/* Grid containers */
.grid,
[class*="grid-"] {
    max-width: 100vw !important;
}

/* Modals and overlays */
.modal,
.overlay,
.popup,
.dialog {
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Forms */
form {
    width: 100% !important;
    max-width: 100vw !important;
}

/* Pre and code blocks */
pre,
code {
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* Iframes */
iframe {
    max-width: 100% !important;
    width: 100% !important;
}

/* SVG */
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Canvas */
canvas {
    max-width: 100% !important;
}

/* 🎯 SPECIFIC COMPONENT FIXES */

/* Dashboard widgets */
.widget,
[class*="widget"],
.dashboard-item {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Route panel */
.route-panel,
[class*="route-panel"] {
    max-width: 100vw !important;
}

/* POI markers */
.poi-marker,
[class*="marker"] {
    max-width: 48px !important;
}

/* Navigation menu */
.nav-menu,
[class*="nav-"],
.menu {
    max-width: 100vw !important;
}

/* 🛡️ EMERGENCY OVERFLOW PREVENTION */
/* If all else fails, these rules catch everything */
body > *,
#root > *,
.App > * {
    max-width: 100vw !important;
}

/* Prevent any margin from causing overflow */
body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 📊 PERFORMANCE OPTIMIZATIONS FOR MOBILE */
@media screen and (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize touch targets */
    button,
    a,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
             text-size-adjust: 100% !important;
    }
}

/* ============================================================
 * POINTER/HOVER CAPABILITY DETECTION
 * Touch devices (coarse pointer, no hover)
 * ============================================================ */

/* Touch devices - ensure adequate touch targets */
@media (pointer: coarse) {
    /* Minimum touch target size (44x44px recommended by Apple/Google) */
    button,
    [role="button"],
    a,
    input[type="button"],
    input[type="submit"],
    .clickable,
    .interactive {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Disable hover-only interactions */
    .hover-only {
        display: none !important;
    }
    
    /* Make touch targets more accessible */
    .footer-action-btn,
    .map-control-btn,
    .sidebar-toggle-btn {
        min-width: 48px !important;
        min-height: 48px !important;
    }
}

/* Devices without hover capability */
@media (hover: none) {
    /* Remove hover effects that won't work */
    *:hover {
        /* Prevent sticky hover states on touch */
    }
    
    /* Ensure clickable items have visible active states */
    button:active,
    [role="button"]:active,
    a:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
    
    /* Hide elements that only make sense with hover */
    .tooltip-on-hover,
    .show-on-hover {
        display: none !important;
    }
}

/* Touch devices without hover - most restrictive */
@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements are accessible by tap */
    .context-menu-trigger {
        /* Long press will be used instead of right-click */
    }
    
    /* Larger spacing between interactive elements to prevent accidental taps */
    .button-group > * + * {
        margin-left: 12px !important;
    }
}

/* Desktop/mouse devices with hover capability */
@media (hover: hover) and (pointer: fine) {
    /* Enable hover effects */
    button:hover,
    [role="button"]:hover,
    a:hover {
        cursor: pointer;
    }
    
    /* Show hover-only elements */
    .hover-only {
        display: block;
    }
}

/* Hybrid devices (touch + mouse) */
@media (any-pointer: coarse) and (any-pointer: fine) {
    /* Support both input types */
    button,
    [role="button"],
    a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================
 * SAFE AREA INSETS (for notched devices)
 * ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    .app-container,
    .main-area,
    .navigation-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .custom-footer {
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ============================================================
 * DYNAMIC VIEWPORT HEIGHT (mobile address bar fix)
 * ============================================================ */

@supports (height: 100dvh) {
    .app-container,
    .main-area,
    .navigation-content,
    .main-map-area,
    .mapbox-map {
        height: 100dvh;
    }
}


/* Smooth transition animations to prevent flickering */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.App {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.App-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.App-header {
    background-color: #0f0f10;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fixes mobile address bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.App-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* Deploy trigger test Sat Dec 27 18:56:02 UTC 2025 */

/* KingRoad - King Family Palette */
:root {
  --bg-primary: #F5EAD2;
  --bg-jupiter: #EFE3C0;
  --border-primary: #5A3B1F;
  --accent-gold: #C9A14B;
  --text-primary: #3B2A1A;
  --text-secondary: #7A5F40;
  --button-bg: #5A3B1F;
  --button-text: #F5EAD2;
  --highlight: #A67C4F;
  --map-route: #C0933C;
  --alert-warning: #D98324;
  --alert-danger: #A23E2B;
  --shadow-soft: rgba(0, 0, 0, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to bottom, #F5EAD2, #EFE3C0);
  background: linear-gradient(to bottom, var(--bg-primary), var(--bg-jupiter));
  color: #3B2A1A;
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.gradient-button {
  background: linear-gradient(to right, #C9A14B, #A67C4F);
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  border: none;
  color: #F5EAD2;
  color: var(--button-text);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gradient-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 16px var(--shadow-soft);
}

.card-elegant {
  background: #F5EAD2;
  background: var(--bg-primary);
  border: 1px solid #5A3B1F;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px var(--shadow-soft);
  padding: 1rem;
  margin: 0.5rem 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-elegant:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 16px var(--shadow-soft);
}

.text-gradient {
  background: linear-gradient(45deg, #C9A14B, #A67C4F);
  background: linear-gradient(45deg, var(--accent-gold), var(--highlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}
.login-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-form-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.login-form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.login-form-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form-group label {
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.login-form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.login-form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.login-form-button {
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 10px;
}

.login-form-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-form-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-form-footer {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.login-form-link {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.login-form-link:hover:not(:disabled) {
  color: #764ba2;
}

.login-form-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.register-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-form-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
}

.register-form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.register-form-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.register-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.register-form-group label {
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.register-form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.register-form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.register-form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.register-form-group small {
  color: #888;
  font-size: 12px;
}

.register-form-button {
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 10px;
}

.register-form-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.register-form-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.register-form-footer {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-form-link {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.register-form-link:hover:not(:disabled) {
  color: #764ba2;
}

.register-form-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ============================================
   TOMTOM-STYLE MAIN MENU
   - 3x3 Grid layout
   - 80x80px icons (large and easy to touch)
   - 44x44px minimum touch targets (iOS/Android standard)
   - Safe for driving
   ============================================ */

.main-menu-tomtom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  z-index: 500; /* Main menu - normalized from 9999 */
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.main-menu-tomtom.open {
  transform: translateX(0);
}

.main-menu-tomtom.closed {
  transform: translateX(-100%);
}

/* ============================================
   HEADER - Logo and Toggle
   ============================================ */

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-section-centered {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crown-icon-image {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.logo-text-centered {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.menu-toggle:active {
  transform: scale(0.95);
}

/* ============================================
   USER INFO
   ============================================ */

.user-info {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.user-details {
  flex: 1 1;
  min-width: 0;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-status {
  font-size: 13px;
  color: #4ade80;
  margin-top: 2px;
}

.vehicle-badge {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
  color: white;
  white-space: nowrap;
}

/* ============================================
   TOMTOM-STYLE GRID MENU
   Main Feature: 3x3 Grid with LARGE icons
   ============================================ */

.menu-grid-tomtom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 24px 20px;
  flex: 1 1;
}

.menu-grid-item {
  /* CRITICAL: Minimum touch target 44x44px */
  min-width: 100px;
  min-height: 100px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  
  padding: 12px 8px;
  
  /* Remove default button styles */
  color: white;
  font-family: inherit;
  outline: none;
}

.menu-grid-item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

.menu-grid-item:active {
  transform: translateY(0) scale(0.97);
}

.menu-grid-item.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
  border-color: #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* LARGE ICONS - 80x80px for easy touch */
.grid-icon {
  font-size: 48px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.grid-label {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  max-width: 100%;
  word-wrap: break-word;
}

/* Priority-based styling */
.menu-grid-item.priority-high {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.3);
}

.menu-grid-item.priority-high .grid-label {
  font-weight: 700;
}

/* ============================================
   CANCEL ROUTE BUTTON
   ============================================ */

.route-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.cancel-route-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cancel-route-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.cancel-route-btn:active {
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE - Mobile Optimization
   ============================================ */

@media (max-width: 480px) {
  .main-menu-tomtom {
    max-width: 100%;
  }
  
  .menu-grid-tomtom {
    gap: 8px;
    padding: 16px 12px;
  }
  
  .menu-grid-item {
    min-width: 90px;
    min-height: 90px;
    padding: 10px 6px;
  }
  
  .grid-icon {
    font-size: 40px;
  }
  
  .grid-label {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .menu-grid-item {
    min-width: 80px;
    min-height: 80px;
  }
  
  .grid-icon {
    font-size: 36px;
  }
  
  .grid-label {
    font-size: 11px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.menu-grid-item:focus {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
}

.menu-grid-item:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   SMOOTH ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .main-menu-tomtom,
  .menu-grid-item,
  .menu-toggle,
  .cancel-route-btn {
    transition: none;
  }
}

/* WhereAmI Widget - Simple Round Button Style */
/* USEFUL AREA: Positions respect sidebar and footer */

.whereami-widget {
  position: fixed;
  z-index: 850;
}

/* Position: RIGHT SIDE - 12px above "My Location" button */
.whereami-widget.bottom-left,
.whereami-widget.bottom-right {
  /* Same distance from sidebar as current-location-btn (80px) */
  right: calc(350px + 80px);
  right: calc(var(--sidebar-width, 350px) + 80px);
  left: auto;
  /* Above current-location: footer(75px) + margin(8px) + report(60px) + gap(12px) + current-location(60px) + gap(12px) */
  bottom: calc(75px + 8px + 60px + 12px + 60px + 12px);
  bottom: calc(var(--footer-height, 75px) + 8px + 60px + 12px + 60px + 12px);
  top: auto;
}

.whereami-widget.top-left {
  top: calc(89px + 20px);
  top: calc(var(--topbar-height, 89px) + 20px);
  left: 20px;
}

.whereami-widget.top-right {
  top: calc(89px + 20px);
  top: calc(var(--topbar-height, 89px) + 20px);
  right: calc(350px + 20px);
  right: calc(var(--sidebar-width, 350px) + 20px); /* To the left of sidebar */
}

/* Round Button - White with Blue ? - Same size as other controls (60px) */
.whereami-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #2196F3;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
  transition: all 0.2s ease;
}

.whereami-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
  background: rgba(255, 255, 255, 1);
}

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

/* Disabled state - no GPS available */
.whereami-btn.disabled {
  cursor: not-allowed;
  background: rgba(220, 220, 220, 0.95);
  border: 3px solid #2196F3 !important; /* Blue border always visible - thicker */
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.whereami-btn.disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.whereami-btn.disabled .question-mark {
  color: #999; /* Gray center when no GPS */
}

.whereami-btn .question-mark {
  color: #2196F3;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

/* Popup when expanded */
.whereami-popup {
  position: absolute;
  bottom: 60px;
  left: 0;
  
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  
  min-width: 220px;
  max-width: 280px;
  
  overflow: hidden;
  animation: popupFadeIn 0.2s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 10px 14px;
  background: #1a1a1a;
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.popup-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.8;
}

.popup-close:hover {
  opacity: 1;
}

.popup-content {
  padding: 10px 14px;
}

.popup-content .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.popup-content .info-row:last-child {
  border-bottom: none;
}

.popup-content .row-label {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
}

.popup-content .row-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-content .loading-row,
.popup-content .no-data {
  text-align: center;
  padding: 15px 0;
  color: #666;
  font-size: 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .whereami-btn {
    width: 50px;
    height: 50px;
  }
  
  .whereami-btn .question-mark {
    font-size: 28px;
  }
  
  .whereami-popup {
    min-width: 200px;
    left: 0;
    right: auto;
  }
}

/* ============================================================
 * Toll Toggle Widget - Compact rectangle with toggle and dropdown
 * ABSOLUTE LAW: MUST stay within the USEFUL AREA
 * Position: BOTTOM LEFT corner (near sandwich menu)
 * ============================================================ */

.toll-toggle-widget {
  position: fixed;
  /* Default distance from footer (83px) */
  bottom: 83px;
  /* Same distance as search bar (20px) */
  left: 20px;
  z-index: 850;
}

/* Main Button Container - White rectangle with blue border */
.toll-main-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  
  /* White background with blue border */
  background: #FFFFFF;
  border: 2px solid #2196F3;
  border-radius: 12px;
  
  padding: 12px 16px;
  min-width: 100px;
  min-height: 48px;
  
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
  position: relative;
}

.toll-main-btn:hover {
  background: #F5F9FF;
  border-color: #1976D2;
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.4);
}

/* Highway Icon - Blue color for contrast with white background */
.highway-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2196F3;
  font-size: 20px;
}

/* Toggle Switch - Increased size */
.toll-toggle {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  padding: 0;
}

.toll-toggle.enabled {
  background: #2196F3;
}

.toll-toggle.disabled {
  background: #9e9e9e;
}

.toll-toggle .toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.toll-toggle.enabled .toggle-slider {
  transform: translateX(22px);
}

.toll-toggle.disabled .toggle-slider {
  transform: translateX(0);
}

/* Dropdown Arrow */
.dropdown-arrow {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dropdown-arrow:hover {
  background: #f0f0f0;
  color: #333;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

/* Count Badge */
.toll-count-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  
  min-width: 24px;
  height: 18px;
  border-radius: 9px;
  
  background: #2196F3;
  color: white;
  
  font-size: 10px;
  font-weight: 700;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: 0 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toll-count-badge.avoided {
  background: #FF9800;
}

/* Dropdown List - Opens UPWARD (widget is at the bottom) */
.toll-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  
  width: 320px;
  max-height: 500px;
  
  overflow: hidden;
  animation: dropdownSlideUp 0.2s ease;
  z-index: 900;
}

@keyframes dropdownSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown Header */
.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #1a1a1a;
  color: white;
}

.header-title {
  font-size: 13px;
  font-weight: 600;
}

.toggle-all-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-all-btn.on {
  background: #ef5350;
  color: white;
}

.toggle-all-btn.on:hover {
  background: #d32f2f;
}

.toggle-all-btn.off {
  background: #2196F3;
  color: white;
}

.toggle-all-btn.off:hover {
  background: #388E3C;
}

/* Toll List */
.toll-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 10px;
}

.no-tolls {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 13px;
}

/* Toll Item */
.toll-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  
  padding: 8px 10px;
  background: #f8f8f8;
  border-radius: 6px;
  margin-bottom: 5px;
  
  transition: all 0.2s ease;
}

.toll-item:last-child {
  margin-bottom: 0;
}

.toll-item.disabled {
  background: #fff3e0;
  opacity: 0.8;
}

.toll-item:hover {
  background: #f0f0f0;
}

.toll-item.disabled:hover {
  background: #ffe0b2;
}

/* Toll Item Info */
.toll-item-info {
  flex: 1 1;
  min-width: 0;
}

.toll-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.toll-type-icon {
  font-size: 14px;
}

.name-text {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toll-details {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.toll-details .detail {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}

.toll-details .cost {
  font-weight: 700;
  color: #2e7d32;
  font-size: 12px;
  background: #e8f5e9;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Toll Item Toggle */
.toll-item-toggle {
  width: 44px;
  height: 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.toll-item-toggle.on {
  background: #2196F3;
  color: white;
}

.toll-item-toggle.on:hover {
  background: #388E3C;
}

.toll-item-toggle.off {
  background: #9e9e9e;
  color: white;
}

.toll-item-toggle.off:hover {
  background: #757575;
}

/* Dropdown Footer */
.dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

.total-label {
  font-size: 12px;
  color: #666;
}

.total-value {
  font-size: 14px;
  font-weight: 700;
  color: #2196F3;
}

/* Scrollbar */
.toll-list::-webkit-scrollbar {
  width: 5px;
}

.toll-list::-webkit-scrollbar-track {
  background: transparent;
}

.toll-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .toll-toggle-widget {
    bottom: 83px;
    left: 20px;
  }
  
  .toll-dropdown {
    width: 280px;
  }
  
  .toll-details {
    flex-direction: column;
    gap: 2px;
  }
}

/* Volume Footer Button - Square button between Toll and Speedometer */

.volume-footer-btn {
  position: fixed;
  bottom: 86px;
  left: 191px; /* After toggle, before speedometer */
  z-index: 850;
  
  /* Square button design - same size as mile marker */
  width: 52px;
  height: 52px;
  
  /* White background with blue border (matching Toll Toggle) */
  background: #FFFFFF;
  border: 2px solid #2196F3;
  border-radius: 10px;
  
  /* Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Shadow */
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-footer-btn:hover {
  background: #F5F9FF;
  border-color: #1976D2;
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

.volume-footer-btn:active {
  transform: translateY(0);
}

/* Volume Icon */
.volume-icon {
  width: 28px;
  height: 28px;
  color: #2196F3;
}

/* State-specific colors */
.volume-footer-btn.volume-muted .volume-icon {
  color: #ef4444; /* Red for muted */
}

.volume-footer-btn.volume-alerts .volume-icon {
  color: #f59e0b; /* Orange/amber for alerts only */
}

.volume-footer-btn.volume-normal .volume-icon {
  color: #2196F3; /* Blue for normal */
}

/* Reroute Footer Button - Square button next to Volume */

.reroute-footer-btn {
  position: fixed;
  bottom: 86px;
  left: 255px; /* Volume (191px) + width (52px) + spacing (12px) */
  z-index: 850;
  
  /* Square button design - same size as volume */
  width: 52px;
  height: 52px;
  
  /* Blue border always visible (matching Toll Toggle) */
  background: #FFFFFF;
  border: 2px solid #2196F3;
  border-radius: 10px;
  
  /* Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Shadow */
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.reroute-footer-btn:hover:not(.disabled) {
  background: #F5F9FF;
  border-color: #1976D2;
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

.reroute-footer-btn:active:not(.disabled) {
  transform: translateY(0);
}

/* Reroute Icon - Blue when active */
.reroute-icon {
  width: 28px;
  height: 28px;
  color: #2196F3;
}

/* Reroute Emoji Icon */
.reroute-icon-emoji {
  font-size: 26px;
  line-height: 1;
}

/* Disabled state (no active route) - Blue border, gray interior */
.reroute-footer-btn.disabled {
  background: #e8e8e8;
  border-color: #2196F3; /* Keep blue border */
  cursor: not-allowed;
}

.reroute-footer-btn.disabled .reroute-icon {
  color: #999;
}

.reroute-footer-btn.disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

/* Searching state */
.reroute-footer-btn.searching {
  background: #F5F9FF;
  border-color: #2196F3;
}

/* Spinner animation */
.reroute-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(33, 150, 243, 0.3);
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Reverse Route Button - Square button next to Reroute */

.reverse-route-btn {
  position: fixed;
  bottom: 86px;
  left: 319px; /* Reroute (255px) + width (52px) + spacing (12px) */
  z-index: 850;
  
  /* Square button design - same size as reroute */
  width: 52px;
  height: 52px;
  
  /* Blue border always visible (matching Reroute and Toll Toggle) */
  background: #FFFFFF;
  border: 2px solid #2196F3;
  border-radius: 10px;
  
  /* Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Shadow */
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.reverse-route-btn:hover:not(.disabled) {
  background: #F5F9FF;
  border-color: #1976D2;
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

.reverse-route-btn:active:not(.disabled) {
  transform: translateY(0);
}

/* Reverse Icon - Blue when active */
.reverse-icon {
  width: 28px;
  height: 28px;
  color: #2196F3;
}

/* Disabled state (no active route) - Blue border, gray interior */
.reverse-route-btn.disabled {
  background: #e8e8e8;
  border-color: #2196F3;
  cursor: not-allowed;
}

.reverse-route-btn.disabled .reverse-icon {
  color: #999;
}

.reverse-route-btn.disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

/* Reversing state */
.reverse-route-btn.reversing {
  background: #F5F9FF;
  border-color: #2196F3;
}

/* Spinner animation */
.reverse-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(33, 150, 243, 0.3);
  border-top-color: #2196F3;
  border-radius: 50%;
  animation: reverse-spin 1s linear infinite;
}

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

/* Route Alternatives Modal */

.route-alternatives-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.route-alternatives-modal {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  border: 1px solid rgba(212, 184, 150, 0.3);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alternatives-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(212, 184, 150, 0.1);
  border-bottom: 1px solid rgba(212, 184, 150, 0.2);
}

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

.header-icon {
  font-size: 28px;
}

.header-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #d4b896;
}

.close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 59, 48, 0.8);
}

.alternatives-subtitle {
  padding: 12px 20px;
  color: #aaa;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.alternatives-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
}

.alternative-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alternative-card:hover {
  background: rgba(212, 184, 150, 0.1);
  border-color: rgba(212, 184, 150, 0.4);
}

.alternative-card.current {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.route-number {
  width: 28px;
  height: 28px;
  background: #d4b896;
  color: #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.route-name {
  flex: 1 1;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.current-badge {
  background: #4CAF50;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.savings-badge {
  background: #2196F3;
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-icon {
  font-size: 16px;
}

.detail-value {
  color: #ccc;
  font-size: 14px;
}

.detail-item.traffic .detail-value {
  color: #f59e0b;
}

.select-btn {
  width: 100%;
  padding: 10px;
  background: rgba(212, 184, 150, 0.2);
  border: 1px solid #d4b896;
  border-radius: 8px;
  color: #d4b896;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-btn:hover {
  background: #d4b896;
  color: #1a1a1a;
}

.alternative-card.current .select-btn {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
  color: #4CAF50;
}

.alternative-card.current .select-btn:hover {
  background: #4CAF50;
  color: #fff;
}

.alternatives-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.alternatives-footer p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

/* Scrollbar */
.alternatives-list::-webkit-scrollbar {
  width: 8px;
}

.alternatives-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.alternatives-list::-webkit-scrollbar-thumb {
  background: rgba(212, 184, 150, 0.3);
  border-radius: 4px;
}

/* Safety Alerts System - Safety Alert System */

/* Compact interface when no alerts - DRAGGABLE */
.safety-system-compact {
  position: fixed;
  bottom: 200px;
  left: 20px;
  background: rgba(76, 175, 80, 0.9);
  border: 2px solid #4CAF50;
  border-radius: 8px;
  padding: 8px 12px;
  color: white;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  z-index: 1100;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  transition: box-shadow 0.2s ease;
}

.safety-system-compact:active {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.safety-system-compact.dragging {
  opacity: 0.9;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.safety-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.safety-icon {
  font-size: 14px;
}

.safety-text {
  font-size: 11px;
  font-weight: 600;
  flex: 1 1;
}

.drag-hint {
  font-size: 14px;
  opacity: 0.6;
  cursor: grab;
  padding: 0 4px;
  letter-spacing: -2px;
}

.drag-hint:hover {
  opacity: 1;
}

/* Test buttons */
.safety-test-buttons {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.test-btn {
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.test-btn.speed-test {
  background: #F44336;
  color: white;
}

.test-btn.turn-test {
  background: #FF9800;
  color: white;
}

.test-btn.brake-test {
  background: #9C27B0;
  color: white;
}

.test-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Full-screen alert screen - safety InControl MODEL */
/* VERY HIGH Z-INDEX to appear above EVERYTHING */
.safety-alert-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999; /* Above all other elements */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  animation: safetyAlertAppear 0.4s ease-out;
}

/* Main Panel safety Style */
.safety-alert-panel {
  width: 600px;
  height: 400px;
  background: #FFDA00; /* Exact safety yellow */
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  font-family: 'Arial', 'Roboto', sans-serif;
  animation: safetyPanelEntry 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.safety-alert-panel.critical {
  background: #F44336 !important; /* Red for critical */
  animation: safetyCriticalEntry 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Warning Triangle safety Style */
.safety-warning-triangle {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  z-index: 2;
}

.safety-triangle-shape {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid #000000; /* Solid black */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-exclamation {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 36px;
  font-weight: 900;
  font-family: Arial, sans-serif;
  text-shadow: none;
}

/* Alert Content safety */
.safety-alert-content {
  margin-top: 120px;
  text-align: center;
  padding: 0 40px;
  width: 100%;
}

/* WARNING Title safety */
.safety-warning-title {
  font-size: 28px;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Timestamp safety */
.safety-timestamp {
  font-size: 14px;
  color: white;
  font-weight: 500;
  margin-bottom: 15px;
  opacity: 0.95;
}

/* Mensagem Principal safety */
.safety-main-message {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
  line-height: 1.2;
}

/* Specific Information safety */
.safety-specific-info {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}

/* Detalhes safety */
.safety-detail-info {
  font-size: 16px;
  font-weight: 500;
  color: white;
  margin-bottom: 25px;
  opacity: 0.9;
}

/* Safety instructions */
.safety-instructions {
  margin-bottom: 30px;
}

.instruction {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  display: inline-block;
  margin: 0 8px 8px 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ACKNOWLEDGE Button safety */
.safety-acknowledge-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  color: white;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 150px;
}

.safety-acknowledge-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateX(-50%) scale(1.05);
}

.safety-acknowledge-btn:active {
  transform: translateX(-50%) scale(0.95);
}

/* Contador de tempo */
.alert-timer {
  font-size: 14px;
  opacity: 0.8;
  font-weight: 500;
}

/* Emergency Overlay for Critical */
.safety-emergency-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  animation: safetyCriticalPulse 1.2s infinite;
  z-index: 1;
  border-radius: 12px;
}

/* Animations safety Style */
@keyframes safetyAlertAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
}

@keyframes safetyPanelEntry {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes safetyCriticalEntry {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-30px);
    box-shadow: 0 0 0 rgba(244, 67, 54, 0);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.05) translateY(5px);
    box-shadow: 0 8px 32px rgba(244, 67, 54, 0.4);
  }
  60% {
    opacity: 1;
    transform: scale(0.98) translateY(-5px);
    box-shadow: 0 12px 40px rgba(244, 67, 54, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 8px 32px rgba(244, 67, 54, 0.4);
  }
}

@keyframes safetyCriticalPulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.02);
  }
}

/* Specific states by alert type */
.safety-alert-overlay.critical .alert-title {
  animation: titleShake 0.5s ease-in-out 3;
}

@keyframes titleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Responsividade safety */
@media (max-width: 768px) {
  .safety-alert-panel {
    width: 90%;
    height: 350px;
    margin: 20px;
  }
  
  .safety-warning-triangle {
    width: 60px;
    height: 60px;
    top: 30px;
  }
  
  .safety-triangle-shape {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #000000;
  }
  
  .safety-exclamation {
    font-size: 24px;
    top: 10px;
  }
  
  .safety-warning-title {
    font-size: 22px;
  }
  
  .safety-main-message {
    font-size: 18px;
  }
  
  .safety-specific-info {
    font-size: 16px;
  }
  
  .safety-detail-info {
    font-size: 14px;
  }
  
  .safety-acknowledge-btn {
    padding: 10px 24px;
    font-size: 14px;
    bottom: 20px;
  }
  
  .safety-alert-content {
    margin-top: 90px;
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .safety-system-compact {
    bottom: 80px;
    left: 10px;
    right: 10px;
    width: auto;
  }
  
  .safety-test-buttons {
    flex-wrap: wrap;
  }
  
  .alert-title {
    font-size: 20px;
  }
  
  .alert-message {
    font-size: 16px;
  }
  
  .instruction {
    font-size: 12px;
    display: block;
    margin: 4px 0;
  }
}

/* Efeitos especiais para alertas de velocidade */
.safety-alert-overlay.critical .safety-alert-content {
  animation: speedAlert 0.1s ease-in-out infinite;
}

@keyframes speedAlert {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
/* ============================================================
 * AMBER Alert Button CSS
 * ABSOLUTE LAW: MUST stay inside the USEFUL AREA
 * Position: Below the Layers button, aligned with it
 * Standardized measurements with Layers button
 * ============================================================ */

.amber-alert-container {
  position: fixed !important;
  /* Complete position reset */
  inset: auto !important;
  /* Below Layers button: header(89px) + margin(8px) + button(60px) + gap(12px) */
  top: calc(89px + 8px + 60px + 12px) !important;
  top: calc(var(--topbar-height, 89px) + 8px + 60px + 12px) !important;
  /* Same distance from sidebar as Layers button (80px) */
  right: calc(350px + 80px) !important;
  right: calc(var(--sidebar-width, 350px) + 80px) !important;
  
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Fixed container size */
  width: 60px !important;
  height: 60px !important;
}

/* Main AMBER ALERT Button - Standardized size (60px same as Layers) */
.amber-alert-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  width: 60px;
  height: 60px;
  
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  border: 3px solid #FFD700;
  border-radius: 50%;
  
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Clean circular shadow (removed square shadow) */
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
  
  animation: amber-pulse 2s ease-in-out infinite;
}

.amber-alert-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
}

.amber-alert-button:active {
  transform: scale(0.95);
}

@keyframes amber-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.6);
  }
}

.amber-icon {
  font-size: 28px;
  line-height: 1;
}

.amber-text {
  font-size: 10px;
  font-weight: 800;
  color: #FFD700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.amber-subtext {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}

/* Incident Selection Menu */
.amber-incident-menu {
  position: relative;
  width: 320px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(255, 0, 0, 0.5);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: menu-slide-up 0.3s ease-out;
}

@keyframes menu-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.incident-header {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 0, 0, 0.3);
}

.incident-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #FF0000;
  margin-bottom: 4px;
}

.incident-title.confirm {
  color: #FFD700;
  animation: blink-warning 0.5s ease-in-out infinite;
}

@keyframes blink-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.incident-subtitle {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.incident-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}

.incident-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  
  padding: 12px 8px;
  
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.incident-btn:hover:not(:disabled) {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
  transform: scale(1.02);
}

.incident-btn.confirm-mode {
  animation: confirm-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes confirm-pulse {
  from {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.5);
  }
  to {
    background: rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.8);
  }
}

.incident-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.incident-emoji {
  font-size: 24px;
}

.incident-label {
  font-size: 0.7rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.incident-actions {
  display: flex;
  justify-content: center;
}

.cancel-btn {
  padding: 10px 24px;
  background: rgba(100, 100, 100, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.5);
}

.cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sending Overlay */
.sending-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 0.9rem;
}

.sending-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 0, 0, 0.3);
  border-top-color: #FF0000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 400px) {
  .amber-incident-menu {
    width: 280px;
  }
  
  .incident-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .incident-btn {
    padding: 10px 6px;
  }
  
  .incident-emoji {
    font-size: 20px;
  }
  
  .incident-label {
    font-size: 0.65rem;
  }
}

/* AMBER Alert Receiver CSS */

.amber-receiver-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-flash 1s ease-in-out infinite;
}

@keyframes overlay-flash {
  0%, 100% {
    background: rgba(50, 0, 0, 0.95);
  }
  50% {
    background: rgba(100, 0, 0, 0.95);
  }
}

.amber-receiver-container {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: linear-gradient(180deg, #1a0000 0%, #330000 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 
    0 0 60px rgba(255, 0, 0, 0.8),
    0 0 120px rgba(255, 0, 0, 0.4);
  animation: container-shake 0.5s ease-in-out;
}

@keyframes container-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Flashing Border */
.amber-flash-border {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid #FF0000;
  border-radius: 24px;
  animation: border-flash 0.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes border-flash {
  0%, 100% {
    border-color: #FF0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  }
  50% {
    border-color: #FFD700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
  }
}

/* Header */
.amber-receiver-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 0, 0, 0.5);
}

.amber-receiver-icon {
  font-size: 40px;
  animation: icon-bounce 0.5s ease-in-out infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.amber-receiver-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: #FF0000;
  text-shadow: 
    0 0 10px rgba(255, 0, 0, 0.8),
    0 0 20px rgba(255, 0, 0, 0.6),
    0 0 30px rgba(255, 0, 0, 0.4);
  animation: title-pulse 1s ease-in-out infinite;
  letter-spacing: 2px;
}

@keyframes title-pulse {
  0%, 100% {
    color: #FF0000;
    text-shadow: 
      0 0 10px rgba(255, 0, 0, 0.8),
      0 0 20px rgba(255, 0, 0, 0.6);
  }
  50% {
    color: #FFD700;
    text-shadow: 
      0 0 10px rgba(255, 215, 0, 0.8),
      0 0 20px rgba(255, 215, 0, 0.6);
  }
}

/* Content */
.amber-receiver-content {
  margin-bottom: 24px;
}

.incident-type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 0, 0, 0.2);
  border: 2px solid rgba(255, 0, 0, 0.5);
  border-radius: 12px;
  margin-bottom: 20px;
}

.badge-emoji {
  font-size: 36px;
}

.badge-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.alert-details {
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row.description {
  flex-direction: column;
  align-items: flex-start;
}

.detail-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.detail-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.alert-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 152, 0, 0.2) 100%);
  border: 1px solid rgba(255, 193, 7, 0.5);
  border-radius: 10px;
}

.warning-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.warning-text {
  font-size: 0.95rem;
  color: #FFD700;
  font-weight: 600;
  line-height: 1.4;
}

/* Footer */
.amber-receiver-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.acknowledge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  width: 100%;
  padding: 18px 24px;
  
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  border: 3px solid #81C784;
  border-radius: 12px;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  animation: btn-glow 2s ease-in-out infinite;
}

@keyframes btn-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(76, 175, 80, 0.8);
  }
}

.acknowledge-btn:hover {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
  transform: scale(1.02);
}

.acknowledge-btn:active {
  transform: scale(0.98);
}

.btn-icon {
  font-size: 24px;
}

.btn-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.alert-timer {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 500px) {
  .amber-receiver-container {
    padding: 16px;
  }
  
  .amber-receiver-title {
    font-size: 1.5rem;
  }
  
  .amber-receiver-icon {
    font-size: 30px;
  }
  
  .badge-emoji {
    font-size: 28px;
  }
  
  .badge-label {
    font-size: 1.2rem;
  }
  
  .btn-text {
    font-size: 1rem;
  }
}

/* ============================================================
 * Report Alert Button CSS - Alert Triangle
 * ABSOLUTE LAW: BOTTOM RIGHT CORNER of the USEFUL AREA
 * Position: TO THE LEFT of the sidebar, above the footer
 * Standardized measurements with Layers button
 * ============================================================ */

.report-alert-container {
  position: fixed !important;
  /* Same distance from sidebar as the Layers button (80px) */
  right: calc(350px + 80px) !important;
  right: calc(var(--sidebar-width, 350px) + 80px) !important;
  /* Above the footer with 8px margin (same pattern as header) */
  bottom: calc(75px + 8px) !important;
  bottom: calc(var(--footer-height, 75px) + 8px) !important;
  z-index: 1200 !important;
  width: auto !important;
  height: auto !important;
}

/* Main Report Button - Standardized size (60px same as Layers) */
.report-alert-button {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 60px;
  height: 60px;
  
  background: transparent; /* No background - just the triangle */
  border: none;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.report-alert-button:hover {
  transform: scale(1.1);
}

.report-alert-button:active {
  transform: scale(0.95);
}

/* Alert triangle - size proportional to the button */
.report-icon {
  font-size: 52px; /* Proportion to fill 60px button */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Report Menu Overlay */
.report-menu-overlay {
  position: fixed;
  bottom: calc(70px + 100px);
  bottom: calc(var(--footer-height, 70px) + 100px);
  right: 400px; /* Useful area: 350px sidebar + 20px margin */
  z-index: 600; /* Context menus/dropdowns */
}

/* Report Menu Modal - Google Maps Style */
.report-menu {
  position: relative;
  width: 340px;
  background: #1e1e1e;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: menu-appear 0.25s ease-out;
}

@keyframes menu-appear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.report-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #2a2a2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-menu-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.report-menu-header .close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.report-menu-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Alerts Grid */
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 16px;
}

/* Alert Item Button */
.alert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  padding: 16px 10px;
  min-height: 80px;
  
  background: #424242;
  border: none;
  border-radius: 12px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-item:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.alert-item:active:not(:disabled) {
  transform: translateY(0);
}

.alert-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.alert-item.selected {
  border: 2px solid #4CAF50;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
}

.alert-emoji {
  font-size: 28px;
  line-height: 1;
}

.alert-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

/* More / Back Buttons */
.alert-item.more-btn,
.alert-item.back-btn {
  background: #333;
  border: 1px dashed rgba(255, 255, 255, 0.3);
}

.alert-item.more-btn:hover,
.alert-item.back-btn:hover {
  background: #444;
}

/* Yellow Warning Alerts */
.alert-item[style*="FFC107"] {
  color: #000;
}

.alert-item[style*="FFC107"] .alert-label {
  color: #000;
}

/* Red Security Alerts */
.alert-item[style*="F44336"] .alert-label {
  color: #fff;
  font-weight: 600;
}

/* Region Indicator */
.region-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.region-icon {
  font-size: 16px;
}

.region-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Sending Overlay */
.sending-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 0.9rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Responsive - USEFUL AREA in all resolutions */
@media (max-width: 500px) {
  .report-alert-container {
    right: calc(350px + 80px) !important;
    right: calc(var(--sidebar-width, 350px) + 80px) !important;
    bottom: calc(75px + 8px) !important;
    bottom: calc(var(--footer-height, 75px) + 8px) !important;
  }
  
  .report-menu-overlay {
    right: calc(350px + 80px) !important;
    right: calc(var(--sidebar-width, 350px) + 80px) !important;
    bottom: calc(75px + 80px);
    bottom: calc(var(--footer-height, 75px) + 80px);
    left: 15px;
  }
  
  .report-menu {
    width: 100%;
  }
  
  .alert-item {
    padding: 12px 8px;
    min-height: 70px;
  }
  
  .alert-emoji {
    font-size: 24px;
  }
  
  .alert-label {
    font-size: 0.7rem;
  }
}

/* Tablet/Desktop positioning */
@media (min-width: 768px) {
  .report-alert-container {
    right: calc(350px + 80px) !important;
    right: calc(var(--sidebar-width, 350px) + 80px) !important;
    bottom: calc(75px + 8px) !important;
    bottom: calc(var(--footer-height, 75px) + 8px) !important;
  }
  
  .report-menu-overlay {
    right: calc(350px + 80px) !important;
    right: calc(var(--sidebar-width, 350px) + 80px) !important;
    bottom: calc(75px + 80px);
    bottom: calc(var(--footer-height, 75px) + 80px);
  }
}

/* Alert Validation Popup CSS */

.alert-validation-overlay {
  position: fixed;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  animation: popup-slide-up 0.3s ease-out;
}

@keyframes popup-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.alert-validation-popup {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  padding: 16px 20px;
  min-width: 300px;
  max-width: 380px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Progress bar */
.validation-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #81C784);
  transition: width 1s linear;
}

/* Question */
.validation-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.question-emoji {
  font-size: 32px;
}

.question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* Alert info */
.alert-info-brief {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.alert-distance,
.alert-reports {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Vote buttons */
.vote-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.vote-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  
  font-size: 1rem;
  font-weight: 700;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vote-yes {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  color: #fff;
}

.vote-yes:hover:not(:disabled) {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
  transform: scale(1.02);
}

.vote-no {
  background: linear-gradient(135deg, #757575 0%, #616161 100%);
  color: #fff;
}

.vote-no:hover:not(:disabled) {
  background: linear-gradient(135deg, #9E9E9E 0%, #757575 100%);
  transform: scale(1.02);
}

.btn-icon {
  font-size: 1.2rem;
  font-weight: 800;
}

.btn-text {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Skip button */
.skip-btn {
  display: block;
  width: 100%;
  padding: 8px;
  
  background: transparent;
  border: none;
  
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  
  cursor: pointer;
  transition: color 0.2s ease;
}

.skip-btn:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.8);
}

/* Vote result */
.vote-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.result-emoji {
  font-size: 40px;
  animation: bounce-in 0.4s ease-out;
}

@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.result-text {
  font-size: 1rem;
  color: #4CAF50;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 400px) {
  .alert-validation-overlay {
    left: 10px;
    right: 400px;
    transform: none;
  }
  
  .alert-validation-popup {
    min-width: auto;
    width: 100%;
  }
  
  .validation-question {
    flex-direction: column;
    gap: 8px;
  }
  
  .question-emoji {
    font-size: 28px;
  }
  
  .question-text {
    font-size: 1rem;
  }
}

/* Alert Settings Modal CSS */

.alert-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.alert-settings-modal {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.alert-settings-modal.alert-settings-expanded {
  max-width: 650px;
}

.alert-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.alert-settings-header h2 {
  margin: 0;
  color: #d4af37;
  font-size: 1.2rem;
  font-weight: 600;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

/* Tab Navigation */
.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
}

.tab-btn {
  flex: 1 1;
  min-width: 80px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #fff;
}

.tab-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
  color: #d4af37;
}

.alert-settings-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  color: #d4af37;
  font-size: 1rem;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.settings-section h4 {
  color: #fff;
  font-size: 0.95rem;
  margin: 16px 0 10px 0;
}

.section-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

/* Toggle Rows */
.toggle-row {
  margin-bottom: 12px;
}

.toggle-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.toggle-row label:hover {
  background: rgba(0, 0, 0, 0.3);
}

.toggle-row label span:first-child {
  color: #fff;
  font-size: 0.95rem;
}

.toggle-row input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 50px;
  height: 26px;
  background: #333;
  border-radius: 13px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.toggle-slider.small {
  width: 40px;
  height: 22px;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #666;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-slider.small::after {
  width: 16px;
  height: 16px;
}

.toggle-row input:checked + .toggle-slider,
input:checked + .toggle-slider {
  background: #4CAF50;
}

.toggle-row input:checked + .toggle-slider::after,
input:checked + .toggle-slider::after {
  left: 27px;
  background: #fff;
}

input:checked + .toggle-slider.small::after {
  left: 21px;
}

/* Alert Types Grid */
.alert-types-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-type-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.alert-type-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1 1;
}

.alert-type-toggle input[type="checkbox"] {
  display: none;
}

.alert-label {
  color: #fff;
  font-size: 0.9rem;
}

.test-btn-small {
  width: 32px;
  height: 32px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  color: #d4af37;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
}

.test-btn-small:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.3);
}

.test-btn-small:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.test-btn-small.testing {
  animation: pulse-test 0.5s ease;
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
}

/* Context Switcher */
.context-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.context-btn {
  flex: 1 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.context-btn:hover {
  background: rgba(212, 175, 55, 0.1);
}

.context-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #d4af37;
}

.context-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* Distance Grid */
.distance-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.distance-label {
  color: #fff;
  font-size: 0.9rem;
  flex: 1 1;
}

.distance-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.distance-input {
  width: 80px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  text-align: right;
}

.distance-input:focus {
  border-color: #d4af37;
  outline: none;
}

.distance-unit {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* Sounds Grid */
.sounds-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sound-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  gap: 12px;
}

.sound-label {
  color: #fff;
  font-size: 0.9rem;
  flex: 1 1;
  min-width: 120px;
}

.sound-select-group {
  display: flex;
  gap: 8px;
  flex: 1 1;
}

/* Volume Slider */
.volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-top: 8px;
}

.volume-row span {
  color: #fff;
  font-size: 0.9rem;
  min-width: 120px;
}

.volume-slider {
  flex: 1 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 3px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d4af37;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #d4af37;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Sound Select */
.sound-select,
.vibration-select {
  flex: 1 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}

.sound-select option,
.vibration-select option {
  background: #1a1a2e;
  color: #fff;
}

.test-btn {
  width: 40px;
  height: 36px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  color: #d4af37;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.test-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.3);
}

.test-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.test-btn.testing {
  animation: pulse-test 0.5s ease;
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
}

@keyframes pulse-test {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* All Sounds Section */
.all-sounds-section {
  margin-top: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.all-sounds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.sound-preview-btn {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sound-preview-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

.sound-preview-btn.testing {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

/* AMBER ALERT Section */
.amber-section {
  background: rgba(255, 0, 0, 0.1);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 0, 0, 0.3);
  margin-top: 16px;
}

.amber-section h3,
.amber-section h4 {
  color: #FF0000;
  border-bottom-color: rgba(255, 0, 0, 0.3);
}

.amber-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.amber-test-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: pulse-amber 2s infinite;
}

.amber-test-btn:hover {
  background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%);
  transform: scale(1.02);
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
}

.amber-note {
  color: #FFC107;
  font-size: 0.8rem;
  margin-top: 10px;
  text-align: center;
}

/* Reset Button */
.reset-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 16px;
}

.reset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Footer */
.alert-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 12px;
}

.auto-save-indicator {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

.save-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn:hover {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
  transform: translateY(-1px);
}

/* Scrollbar */
.alert-settings-content::-webkit-scrollbar {
  width: 6px;
}

.alert-settings-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.alert-settings-content::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.5);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 600px) {
  .alert-settings-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .alert-settings-modal.alert-settings-expanded {
    max-width: 95%;
  }
  
  .alert-settings-header h2 {
    font-size: 1rem;
  }
  
  .settings-tabs {
    padding: 6px 8px;
  }
  
  .tab-btn {
    padding: 8px 10px;
    font-size: 0.75rem;
  }
  
  .sound-config-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .sound-label {
    margin-bottom: 8px;
  }
  
  .all-sounds-grid {
    grid-template-columns: 1fr;
  }
  
  .alert-settings-footer {
    flex-direction: column;
  }
  
  .save-btn {
    width: 100%;
  }
}

/* KingRoad GPS - Navigation Status Widget
   Fixed position: bottom left, aligned with Time card edge */

.navigation-status-widget {
  position: fixed;
  /* Default height: near footer */
  bottom: 90px;
  /* Borda DIREITA alinhada com borda DIREITA do card Hora (399px) */
  /* Time card ends at ~399px, speedometer has ~170px width */
  /* left = 399 - 170 = 229px */
  left: 229px;
  z-index: 800;
  
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95) 0%, 
    rgba(16, 33, 62, 0.95) 50%, 
    rgba(15, 20, 25, 0.95) 100%
  );
  
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 16px;
  
  -webkit-backdrop-filter: blur(15px);
  
          backdrop-filter: blur(15px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.3);
  
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  
  transition: all 0.3s ease;
  transform-origin: bottom left;
}

.navigation-status-widget:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(255, 215, 0, 0.4);
  transform: translateY(-2px) scale(1.02);
}

/* Collapsed State - Always Visible */
.navigation-status-widget.collapsed {
  width: 140px;
  height: 70px;
  padding: 12px;
}

.navigation-status-widget.collapsed .widget-expanded {
  display: none;
}

/* Estado Expandido */
.navigation-status-widget.expanded {
  width: 280px;
  min-height: 200px;
  max-height: 400px;
  padding: 16px;
}

/* Header - Always Visible */
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.speed-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.speed-value {
  font-size: 1.8rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

.speed-limit {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: normal;
  pointer-events: none;
}

.gps-status {
  display: flex;
  align-items: center;
}

.gps-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Expanded Content */
.widget-expanded {
  animation: expandIn 0.3s ease-out;
}

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

/* Next maneuver removed - already exists in ExitDirectionLock and DirectionAlerts */

/* Navigation Alerts - EXCLUSIVE to Widget */
.navigation-alerts {
  margin-bottom: 12px;
}

.speed-warning,
.gps-warning,
.navigation-active {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.speed-warning {
  background: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.4);
}

.gps-warning {
  background: rgba(255, 136, 0, 0.2);
  border: 1px solid rgba(255, 136, 0, 0.4);
}

.navigation-active {
  background: rgba(0, 255, 68, 0.2);
  border: 1px solid rgba(0, 255, 68, 0.4);
}

.alert-icon {
  flex-shrink: 0;
}

.alert-text {
  color: white;
  font-weight: 600;
}

/* Vehicle Information - EXCLUSIVE to Widget */
.vehicle-info {
  margin-bottom: 12px;
}

.destination-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 0;
}

.info-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  flex: 1 1;
}

.info-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFD700;
  text-align: right;
}

/* Clock removed - already exists in NavigationFooter */

/* Connection Status */
.connection-status {
  margin-bottom: 8px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-dot.high {
  background: #00FF44;
}

.status-dot.medium {
  background: #FFD700;
}

.status-dot.low {
  background: #FF8800;
}

.status-dot:not(.high):not(.medium):not(.low) {
  background: #FF4444;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.status-text {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* Expansion Hint */
.expand-hint {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  font-style: italic;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .navigation-status-widget {
    bottom: calc(75px + 8px);
    bottom: calc(var(--footer-height, 75px) + 8px);
    left: 240px;
  }
  
  .navigation-status-widget.collapsed {
    width: 120px;
    height: 60px;
    padding: 10px;
  }
  
  .navigation-status-widget.expanded {
    width: 260px;
    max-width: calc(100vw - 20px);
  }
  
  .speed-value {
    font-size: 1.5rem;
  }
  
  .time-display {
    font-size: 1.2rem;
  }
}

/* Responsividade Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .navigation-status-widget.expanded {
    width: 270px;
  }
}

/* Initial entry animation */
.navigation-status-widget {
  animation: slideInFromBottom 0.5s ease-out;
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Volume Control Widget */

.volume-control-widget {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 400px;
  max-width: 90vw;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 650; /* Volume control - normalized from 10000 */
  
  padding: 20px;
}

.volume-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.volume-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(239, 68, 68, 0.2);
  border: none;
  border-radius: 50%;
  
  color: #ef4444;
  font-size: 20px;
  font-weight: bold;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.1);
}

.volume-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.volume-option {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-option:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(4px);
}

.volume-option.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.6);
}

.volume-icon {
  font-size: 36px;
  flex-shrink: 0;
}

.volume-info {
  flex: 1 1;
}

.volume-label {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.volume-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.volume-check {
  font-size: 24px;
  color: #10b981;
  font-weight: bold;
}

/* ============================================================
   FLOATING BUTTON MODE - Position above WhereAmI
   ============================================================ */

.volume-floating-widget {
  position: fixed;
  z-index: 850;
  
  /* Same distance from sidebar as WhereAmI (80px) */
  right: calc(350px + 80px);
  right: calc(var(--sidebar-width, 350px) + 80px);
  left: auto;
  
  /* 12px above WhereAmI: 227px (whereami bottom) + 60px (whereami height) + 12px (gap) = 299px */
  bottom: 299px;
  top: auto;
}

/* Round Button - Same size as other controls (60px) */
.volume-float-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #2196F3;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
  transition: all 0.2s ease;
}

.volume-float-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
  background: #F5F9FF;
}

.volume-float-btn:active {
  transform: scale(0.95);
}

/* Muted state - red border */
.volume-float-btn.muted {
  border-color: #F44336;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.volume-float-btn.muted:hover {
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
  background: #FFEBEE;
}

.vol-icon {
  font-size: 28px;
  line-height: 1;
}

/* Popup when expanded */
.volume-popup {
  position: absolute;
  bottom: 70px;
  right: 0;
  
  background: rgba(30, 30, 30, 0.98);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  min-width: 180px;
  overflow: hidden;
  animation: volumePopupFadeIn 0.2s ease;
}

@keyframes volumePopupFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.volume-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #1a1a1a;
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.volume-popup .popup-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.8;
}

.volume-popup .popup-close:hover {
  opacity: 1;
}

.popup-options {
  padding: 8px;
}

.popup-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.popup-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.popup-option.active {
  background: rgba(76, 175, 80, 0.2);
}

.opt-icon {
  font-size: 20px;
}

.opt-label {
  flex: 1 1;
  color: #fff;
  font-size: 14px;
}

.opt-check {
  color: #4CAF50;
  font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .volume-float-btn {
    width: 50px;
    height: 50px;
  }
  
  .vol-icon {
    font-size: 24px;
  }
}

/* OLD TOP BAR - HIDDEN */
.top-bar {
  display: none !important;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-gold);
}

.logo-text {
  font-size: 1.8rem;
  font-weight: bold;
}

.tagline {
  font-size: 0.75rem;
  color: var(--accent-gold);
  margin-top: -4px;
}

.route-info {
  flex: 1 1;
  display: flex;
  align-items: center;
}

.route-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.route-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.icon {
  color: var(--accent-gold);
}

.destination {
  color: var(--button-text);
}

.route-stats {
  display: flex;
  gap: 2rem;
  font-size: 0.9rem;
  color: var(--accent-gold);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.speed-display {
  text-align: center;
  background: rgba(196, 147, 75, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
}

.speed-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.speed-unit {
  font-size: 0.7rem;
  color: var(--button-text);
}

.gradient-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Search Section */
.search-section {
  flex: 1 1;
  max-width: 400px;
  margin: 0 1rem;
}

.topbar-search {
  width: 100%;
}

/* Test Field for Terrains */
.terrain-test-section {
  flex: 0.8 1;
  max-width: 280px;
}

.terrain-test-input {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 107, 53, 0.1));
  border: 2px solid rgba(255, 107, 53, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
}

.terrain-test-input:focus {
  border-color: #ff6b35;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1));
}

.terrain-test-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* Test Field for Constructions */
.construction-test-section {
  flex: 0.8 1;
  max-width: 280px;
}

.construction-test-input {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.1));
  border: 2px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
}

.construction-test-input:focus {
  border-color: #dc3545;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
}

.construction-test-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 1200px) {
  .top-bar {
    padding: 0 1rem;
    gap: 1rem;
  }
  
  .search-section {
    max-width: 300px;
    margin: 0 0.5rem;
  }
  
  .route-stats {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .top-bar {
    height: 60px;
    padding: 0 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .logo-section {
    order: 1;
  }
  
  .search-section {
    order: 2;
    flex: 1 1;
    min-width: 200px;
    max-width: none;
    margin: 0;
  }
  
  .route-info {
    order: 3;
    width: auto;
    flex: none;
  }
  
  .controls {
    order: 4;
    gap: 0.5rem;
  }
  
  .route-stats {
    gap: 0.5rem;
    font-size: 0.8rem;
  }
  
  .speed-display {
    padding: 0.25rem 0.5rem;
  }
  
  .speed-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .top-bar {
    height: auto;
    min-height: 60px;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  
  .search-section,
  .route-info,
  .controls {
    order: initial;
    width: 100%;
    flex: none;
  }
  
  .route-info {
    text-align: center;
  }
  
  .controls {
    justify-content: space-between;
  }
}


/* ========================================
   NEW TOP BAR - BEIGE WITH STREET NAME CENTERED
   Style matches footer clock widget
   ======================================== */

.top-bar-beige {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 350px !important; /* USEFUL AREA: ends where sidebar starts (350px) */
  width: auto !important;
  height: 89px !important;
  height: var(--topbar-height, 89px) !important;
  min-height: 89px !important;
  min-height: var(--topbar-height, 89px) !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Logo left, street center */
  
  background: #d4b896 !important; /* BEIGE - same as footer */
  
  /* Brown coffee 5px (outer) + Gold 5px (middle) + Brown coffee 5px (inner) */
  border: 5px solid #4a3728 !important;
  outline: none !important;
  box-shadow: 
    inset 0 0 0 5px #d4a84b, /* Gold line - 5px inside */
    inset 0 0 0 10px #4a3728, /* Brown coffee line - 5px more inside (5+5=10) */
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  
  z-index: 999 !important;
  padding: 0 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Logo no canto esquerdo */
.top-bar-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

/* Grupo esquerdo: Logo + Destination Flag + Calculator */
.top-bar-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding-left: 10px;
  z-index: 10; /* Above the street widget which is absolute */
}

/* Grupo direito: Weather Badge + Share button */
.top-bar-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding-right: 10px;
  z-index: 10;
}

.header-logo-img {
  height: 52px;
  width: 52px;
  object-fit: contain;
  
  /* Golden ring - TomTom style */
  border-radius: 50%;
  background: #2a2a2a; /* Dark background */
  border: 2px solid #FFD700; /* Golden ring */
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Street widget - centered in TopBar (same style as footer clock) */
.top-bar-street-widget {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  
  background: rgba(26, 26, 26, 0.95); /* Dark rectangle behind street name */
  padding: 6px 22px;
  border-radius: 6px;
  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.street-icon {
  font-size: 18px;
}

.street-text {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hide old clock and eta elements */
.top-bar-clock-widget,
.clock-icon,
.clock-time,
.top-bar-inner-border,
.top-bar-left,
.top-bar-right,
.top-bar-center,
.eta-display,
.street-name,
.eta-time,
.eta-stats,
.eta-distance,
.eta-duration,
.next-street-window {
  display: none !important;
}

/* Show only street widget */
.top-bar-street-widget {
  display: flex !important;
}

/* Share button container - inside right group now */
.top-bar-share {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

/* Share circle button - TomTom style */
.share-circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2a2a2a; /* Dark background */
  border: 2px solid #FFD700; /* Golden ring */
  color: #ffffff; /* White symbol */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.share-circle-btn:hover {
  background: #5d4637; /* Lighter coffee on hover */
  border-color: #FFC107; /* More intense gold */
  transform: scale(1.05);
}

.share-circle-btn svg {
  width: 26px;
  height: 26px;
  fill: #ffffff; /* White symbol */
}

/* Share dropdown menu */
.share-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: rgba(26, 26, 26, 0.95);
  border-radius: 12px;
  padding: 8px;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.3);
  z-index: 1000;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.share-option:hover {
  background: rgba(255, 215, 0, 0.2);
}

.share-option span {
  font-size: 18px;
}

@media (max-width: 768px) {
  .top-bar-beige {
    right: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
  }
  
  .top-bar-street-widget {
    padding: 10px 20px;
  }
  
  .street-text {
    font-size: 18px;
  }
}


/* ============================================================
   KR_FEATURE_DESTINATION_FLAG_001: Destination Icon
   - Always visible next to the logo
   - Estado ativo: colorido
   - Estado inativo: acinzentado
   ============================================================ */

/* Destination icon button */
.destination-flag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 48px;
  height: 48px;
  min-width: 48px; /* Minimum touch area */
  min-height: 48px;
  
  /* Same style as share button - Coffee with golden ring */
  background: #4a3728; /* Coffee background */
  border: 2px solid #FFD700; /* Golden ring */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  margin-left: 10px;
  
  cursor: pointer;
  transition: all 0.3s ease;
  
  position: relative;
  z-index: 10;
}

/* INACTIVE State - grayed center, BUT golden ring always visible */
.destination-flag-btn.inactive {
  opacity: 1; /* Keep visible */
  background: #6b6b6b; /* Grayed center */
  border-color: #FFD700; /* Golden ring ALWAYS visible */
  cursor: default;
}

.destination-flag-btn.inactive:hover {
  background: #7a7a7a; /* Slightly lighter on hover */
}

/* ACTIVE State - colored */
.destination-flag-btn.active {
  opacity: 1;
  filter: none;
  border-color: #FFD700; /* Solid golden ring */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.destination-flag-btn.active:hover {
  transform: scale(1.05);
  background: #5d4637; /* Lighter coffee on hover */
  border-color: #FFC107; /* More intense gold */
}

.destination-flag-btn.active:active {
  transform: scale(0.95);
}

/* Flag icon */
.destination-flag-icon {
  font-size: 26px;
  line-height: 1;
}

/* Calculator Button - Header (Round) */
.header-calculator-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 48px;
  height: 48px;
  
  background: rgba(26, 26, 26, 0.95);
  border: 2px solid #FFD700;
  border-radius: 50%;
  
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.header-calculator-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: #FFC107;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.header-calculator-btn:active {
  transform: scale(0.95);
}

.header-calculator-icon {
  width: 30px;
  height: 30px;
}

/* ============================================================
   Card Flutuante de Destino
   ============================================================ */

.destination-card-floating {
  position: absolute;
  top: calc(100% + 10px);
  left: 70px; /* Aligned with the icon */
  
  width: 320px;
  max-width: calc(100vw - 400px); /* Do not invade sidebar */
  
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.1);
  
  z-index: 2000;
  
  animation: slideDownFadeIn 0.3s ease-out;
  
  overflow: hidden;
}

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

/* Header do Card */
.destination-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding: 12px 16px;
  
  background: rgba(255, 215, 0, 0.15);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.destination-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffd700;
}

.destination-card-close {
  width: 28px;
  height: 28px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  
  color: #ffffff;
  font-size: 14px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.destination-card-close:hover {
  background: rgba(255, 0, 0, 0.3);
}

/* Card Content */
.destination-card-content {
  padding: 16px;
  
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.destination-card-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.destination-card-address {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.destination-card-city {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.destination-card-coords {
  font-size: 12px;
  color: rgba(255, 215, 0, 0.8);
  font-family: monospace;
  margin-top: 4px;
}

.destination-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.destination-card-stats .stat-item {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* Card Actions */
.destination-card-actions {
  display: flex;
  gap: 8px;
  
  padding: 12px 16px;
  
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.destination-action-btn {
  flex: 1 1;
  
  padding: 10px 16px;
  
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  
  background: rgba(255, 215, 0, 0.1);
  color: #ffffff;
  
  font-size: 13px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.destination-action-btn:hover {
  background: rgba(255, 215, 0, 0.25);
  border-color: rgba(255, 215, 0, 0.6);
}

.destination-action-btn.copy:hover {
  background: rgba(0, 200, 83, 0.2);
  border-color: rgba(0, 200, 83, 0.5);
}

.destination-action-btn.edit:hover {
  background: rgba(33, 150, 243, 0.2);
  border-color: rgba(33, 150, 243, 0.5);
}

/* Responsivo */
@media (max-width: 768px) {
  .destination-card-floating {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }
  
  .destination-flag-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  
  .destination-flag-icon {
    font-size: 18px;
  }
}
/* File-ID: weather-badge-css-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Header Weather Badge
 * Status: stable
 * Created-At: 2026-02-04
 * Last-Updated-At: 2026-02-08
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : WeatherBadge.css
 * Summary      : Samsung-style weather badge with icons and colored temps
 * KR_HEADER_WEATHER_TRIPLE_BADGE_002
 * ============================================================ */

.weather-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  
  /* White solid rectangle - SAME STYLE as street widget */
  background: rgba(255, 255, 255, 0.95);
  border: none;
  padding: 6px 18px;
  border-radius: 6px;
  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  flex-shrink: 0;
  height: auto;
  max-height: 40px;
}

/* Weather Condition Emoji (sun, rain, snow, clouds) */
.weather-emoji {
  font-size: 22px;
  line-height: 1;
}

/* Temperature Group Container (icon + value) */
.weather-temp-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Thermometer and Feels Icons */
.weather-temp-icon,
.weather-feels-icon {
  font-size: 16px;
  line-height: 1;
}

/* Temperature Numbers with white outline */
.weather-temp-value {
  font-family: 'Roboto', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  /* White outline is applied via inline style textShadow */
}

/* Legacy class for backwards compatibility */
.weather-temp {
  font-family: 'Roboto', 'Arial', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

/* Loading */
.weather-badge-loading {
  min-width: 80px;
  justify-content: center;
}

.weather-badge-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(26, 26, 26, 0.2);
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: weather-spin 0.8s linear infinite;
}

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

/* Empty state */
.weather-badge-empty {
  opacity: 0.5;
}

/* Mobile */
@media (max-width: 768px) {
  .weather-emoji {
    font-size: 18px;
  }
  
  .weather-temp-value {
    font-size: 16px;
  }
  
  .weather-temp-icon,
  .weather-feels-icon {
    font-size: 14px;
  }
  
  .weather-badge {
    gap: 6px;
    margin-left: 8px;
  }
}

/**
 * King Assistant Button Styles
 * TomTom style - matching CompactSearchBar + blue border
 */

.king-assistant-button {
  display: flex;
  align-items: center;
  gap: 10px;
  
  /* TomTom exact height - same as SearchBar */
  height: 50px;
  padding: 0 15px;
  
  /* TomTom exact colors - translucent */
  background: #F5F5F5;
  border: 2px solid #2196F3; /* Blue border like left icons */
  border-radius: 25px; /* Pill shape */
  
  /* TomTom exact shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.king-assistant-button:hover {
  background: #EEEEEE;
  box-shadow: 0 3px 6px rgba(33, 150, 243, 0.25);
  transform: translateY(-1px);
  border-color: #1976D2;
}

.king-assistant-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.king-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
}

.king-text {
  color: #555555;
  font-size: 17px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Pulse animation to attract attention */
.king-assistant-button.pulse {
  animation: king-pulse 1s ease-in-out;
}

@keyframes king-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35);
  }
}

/* Responsive: Hide text on small screens */
@media (max-width: 768px) {
  .king-text {
    display: none;
  }
  
  .king-assistant-button {
    height: 46px;
    padding: 0 12px;
    border-radius: 23px;
    justify-content: center;
  }
  
  .king-icon {
    font-size: 22px;
  }
}

/* King Assistant Setup Styles */
/* Modern, clean wizard interface */

.king-setup {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.setup-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #ffffff;
  padding: 24px;
  text-align: center;
}

.setup-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.setup-icon.spinning {
  animation: spin 1s linear infinite;
}

.setup-icon.success {
  animation: bounce 0.5s ease;
}

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

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.setup-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.setup-content {
  padding: 24px;
}

.setup-subtitle {
  color: #5f6368;
  font-size: 14px;
  margin: 0 0 20px 0;
  text-align: center;
}

/* Welcome Section */
.setup-welcome {
  text-align: center;
}

.welcome-text {
  color: #3c4043;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.setup-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #3c4043;
}

.benefit-icon {
  font-size: 20px;
}

/* Provider List */
.provider-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.provider-card {
  display: block;
  width: 100%;
  padding: 16px;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.provider-card:hover {
  background: #e8f0fe;
  border-color: #1a73e8;
}

.provider-card.recommended {
  border-color: #34a853;
  background: #e6f4ea;
}

.provider-card.recommended:hover {
  background: #ceead6;
}

.provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.provider-name {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
}

.free-badge {
  background: #34a853;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.provider-desc {
  font-size: 13px;
  color: #5f6368;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.provider-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  font-size: 11px;
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

/* API Key Input */
.provider-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #e8f0fe;
  border-radius: 8px;
  margin-bottom: 20px;
}

.selected-label {
  font-size: 13px;
  color: #5f6368;
}

.selected-provider {
  font-size: 14px;
  font-weight: 600;
  color: #1a73e8;
}

.api-key-instructions {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.api-key-instructions p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #5f6368;
}

.setup-link {
  display: block;
  color: #1a73e8;
  font-size: 13px;
  word-break: break-all;
  margin-bottom: 12px;
}

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

.key-format {
  font-size: 12px !important;
  color: #80868b !important;
  margin: 0 !important;
}

.key-format code {
  background: #e8eaed;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.api-key-input-group {
  margin-bottom: 20px;
}

.api-key-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #3c4043;
  margin-bottom: 8px;
}

.api-key-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid #e8eaed;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  font-family: monospace;
  box-sizing: border-box;
}

.api-key-input:focus {
  border-color: #1a73e8;
}

.api-key-input::placeholder {
  color: #9aa0a6;
  font-family: monospace;
}

.error-message {
  margin-top: 12px;
  padding: 12px;
  background: #fce8e6;
  color: #c5221f;
  border-radius: 8px;
  font-size: 13px;
}

/* Validating */
.validating-message {
  text-align: center;
  padding: 40px 0;
}

.validating-message p {
  color: #5f6368;
  font-size: 14px;
  margin-bottom: 20px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.loading-dots span {
  width: 10px;
  height: 10px;
  background: #1a73e8;
  border-radius: 50%;
  animation: loading-dot 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Success */
.success-message {
  text-align: center;
  padding: 20px 0;
}

.success-message p {
  color: #3c4043;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.success-provider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #e6f4ea;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #137333;
}

.success-icon {
  font-size: 24px;
}

/* Actions */
.setup-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-primary {
  padding: 12px 24px;
  background: #1a73e8;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #1557b0;
}

.btn-primary:disabled {
  background: #9aa0a6;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 12px 24px;
  background: transparent;
  color: #5f6368;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #f1f3f4;
  color: #3c4043;
}

.btn-back {
  padding: 12px 24px;
  background: transparent;
  color: #5f6368;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-back:hover {
  color: #202124;
}

/* Responsive */
@media (max-width: 480px) {
  .king-setup {
    border-radius: 0;
    max-width: 100%;
  }
  
  .setup-header {
    padding: 20px 16px;
  }
  
  .setup-content {
    padding: 20px 16px;
  }
  
  .setup-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-back {
    width: 100%;
  }
}

/* Voice Input Component Styles */
/* Modern microphone button with listening animation */

.voice-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.voice-input.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Main Button */
.voice-input-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.voice-input-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.voice-input-btn:active {
  transform: translateY(0);
}

.voice-input-btn.active {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
  animation: pulse-btn 1.5s infinite;
}

@keyframes pulse-btn {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
  }
  50% {
    box-shadow: 0 4px 25px rgba(231, 76, 60, 0.6);
  }
}

.mic-icon {
  font-size: 20px;
}

.mic-label {
  font-size: 14px;
}

/* Listening Indicator */
.listening-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pulse-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(231, 76, 60, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 1.5s infinite;
}

.pulse-ring.delay-1 {
  animation-delay: 0.3s;
}

.pulse-ring.delay-2 {
  animation-delay: 0.6s;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Transcript Preview */
.transcript-preview {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  animation: fade-in 0.2s ease;
}

.transcript-preview::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 400px solid transparent;
  border-top: 8px solid #1a1a2e;
}

.transcript-text {
  font-style: italic;
  color: #a0a0c0;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Error Message */
.voice-error {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #fce8e6;
  color: #c5221f;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  max-width: 280px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Unsupported Browser */
.voice-input-unsupported {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #dadce0;
  border-radius: 8px;
  color: #5f6368;
  font-size: 13px;
}

.unsupported-icon {
  font-size: 20px;
  opacity: 0.5;
}

.unsupported-text {
  flex: 1 1;
  line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .voice-input-btn {
    padding: 14px 16px;
  }
  
  .mic-label {
    display: none;
  }
  
  .mic-icon {
    font-size: 24px;
  }
  
  .transcript-preview {
    max-width: 200px;
    font-size: 13px;
  }
}

/**
 * Voice Player Styles
 */

.voice-player {
  margin-top: 12px;
}

.voice-play-button,
.voice-stop-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.voice-play-button:hover,
.voice-stop-button:hover {
  background: #3367d6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
}

.voice-play-button:active,
.voice-stop-button:active {
  transform: translateY(0);
}

.voice-stop-button {
  background: #ea4335;
}

.voice-stop-button:hover {
  background: #d33b2c;
}

.voice-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
}

.voice-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.voice-player-unsupported {
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  font-size: 13px;
  margin-top: 12px;
}

/**
 * King Assistant Modal Styles
 * Alexa-style interface with modern design
 */

.king-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* King assistant modal overlay - normalized from 10000 */
  animation: king-fade-in 0.2s ease;
  pointer-events: none; /* Allow drag events to pass through overlay */
}

@keyframes king-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.king-modal {
  /* CRITICAL CHANGE: Safe beige background - NOT WHITE */
  background: #f5f5dc; /* Bege suave - seguro para motoristas */
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: king-slide-up 0.3s ease;
  pointer-events: auto; /* Modal content captures events */
}

@keyframes king-slide-up {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.king-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.king-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
}

.king-crown {
  font-size: 28px;
}

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

.king-settings-btn,
.king-close-btn,
.king-reconfigure-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.king-settings-btn:hover,
.king-close-btn:hover,
.king-reconfigure-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Setup Modal Variant */
.king-modal-setup {
  max-width: 500px;
  position: relative;
}

.king-close-btn-floating {
  position: absolute;
  top: 16px;
  right: 400px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 10;
}

.king-close-btn-floating:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* History Button */
.king-history-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.king-history-btn:hover,
.king-history-btn.active {
  background: rgba(255, 255, 255, 0.3);
}

.king-history-btn.active {
  background: rgba(255, 215, 0, 0.3);
}

.history-badge {
  background: #ff6b6b;
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Conversation History Panel */
.king-history-panel {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #e0e0e0;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #eee;
}

.history-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

.clear-history-btn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.clear-history-btn:hover {
  background: #ffc107;
  color: #212529;
}

/* Empty History State */
.history-empty {
  padding: 30px 20px;
  text-align: center;
  color: #888;
}

.history-empty .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

.history-empty p {
  margin: 0;
  font-size: 14px;
}

/* History Messages List */
.history-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.history-entry {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.history-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.history-user-msg,
.history-assistant-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.history-user-msg .msg-icon,
.history-assistant-msg .msg-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.history-user-msg {
  background: #e3f2fd;
  padding: 10px 12px;
  border-radius: 12px 12px 12px 4px;
}

.history-user-msg .msg-text {
  font-size: 13px;
  color: #1565c0;
  line-height: 1.4;
}

.history-assistant-msg {
  background: #f5f5f5;
  padding: 10px 12px;
  border-radius: 12px 12px 4px 12px;
}

.history-assistant-msg .msg-content {
  flex: 1 1;
}

.history-assistant-msg .msg-text {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  display: block;
}

.history-assistant-msg .msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.history-assistant-msg .query-type {
  background: #667eea;
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.history-assistant-msg .msg-time {
  font-size: 11px;
  color: #999;
}

/* Modal with History - larger size */
.king-modal-with-history {
  max-height: 90vh;
}

/* Settings Panel */
.king-settings-panel {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.king-settings-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.setting-group {
  margin-bottom: 16px;
}

.setting-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.setting-group select,
.setting-group input[type="range"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

.setting-group input[type="checkbox"] {
  margin-right: 400px;
}

/* Content */
.king-modal-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
}

/* Input Area */
.king-welcome {
  text-align: center;
  margin-bottom: 24px;
}

.king-wave {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  animation: king-wave 1s ease infinite;
}

@keyframes king-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-20deg); }
}

.king-welcome p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.king-question-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.king-question-input:focus {
  outline: none;
  border-color: #667eea;
}

.king-error {
  margin-top: 12px;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  font-size: 14px;
}

.king-input-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.king-input-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.king-send-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.king-send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.king-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.king-spinner {
  animation: king-spin 1s linear infinite;
}

@keyframes king-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Response Area */
.king-question-echo {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 20px;
}

.king-question-echo strong {
  display: block;
  margin-bottom: 8px;
  color: #667eea;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.king-question-echo p {
  margin: 0;
  color: #555;
  font-size: 15px;
}

.king-response-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
}

.king-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.king-crown-small {
  font-size: 20px;
}

.king-query-type {
  margin-left: auto;
  padding: 4px 12px;
  background: #e8eaf6;
  color: #5e35b1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.king-response-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.king-response-meta {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 13px;
  color: #888;
}

.king-response-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.king-new-question-btn {
  padding: 12px 24px;
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.king-new-question-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .king-modal {
    width: 95%;
    max-height: 90vh;
  }

  .king-modal-content {
    padding: 16px;
  }

  .king-welcome p {
    font-size: 14px;
  }
}

/* ============================================================
 * Expandable Search Panel - KingRoad GPS (TomTom Dark Theme)
 * File-ID: expandable-search-panel-css-001
 * Owner: King Group Tech
 * Summary: Two-column search panel with dark theme
 * Created: 2026-02-12
 * ============================================================ */

/* Overlay - covers the map area */
.expandable-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Main Panel - Dark theme */
.expandable-search-panel {
  background: #1a1a2e;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}

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

/* Header */
.search-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-panel-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  font-size: 20px;
}

.search-panel-header .close-panel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-panel-header .close-panel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Content - Two columns */
.search-panel-content {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  min-height: 400px;
}

/* Left Sidebar - Mode List */
.search-modes-sidebar {
  width: 200px;
  min-width: 200px;
  background: #16213e;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
}

.sidebar-title {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  letter-spacing: 0.5px;
}

.modes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
  color: rgba(255, 255, 255, 0.7);
}

.mode-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.mode-item.active {
  background: rgba(26, 115, 232, 0.2);
  border-left: 3px solid #1a73e8;
  color: #ffffff;
}

.mode-item.main-mode {
  font-weight: 500;
}

.mode-icon {
  font-size: 18px;
}

.mode-label {
  font-size: 14px;
}

/* Right Area - Forms */
.search-forms-area {
  flex: 1 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #1a1a2e;
}

/* Form Card - Dark */
.search-form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-icon {
  font-size: 20px;
}

.form-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

/* Form Fields */
.form-fields {
  padding: 16px;
}

/* Address Grid - # | Street | City | Prov | Country | Search */
.address-grid {
  display: grid;
  grid-template-columns: 70px 1fr 120px 80px 120px 50px;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

/* Coordinates Grid - Lat | Long | Search */
.coords-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 50px;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

/* Postal Grid - # | Postal Code | Search */
.postal-grid {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

/* POI Grid */
.poi-grid {
  display: grid;
  grid-template-columns: 1fr 50px;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

/* Field Group */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
}

.field-group input {
  height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-group input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
  outline: none;
}

.field-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Search Button */
.search-btn {
  height: 40px;
  width: 50px;
  background: linear-gradient(135deg, #1a73e8 0%, #1565c0 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
}

.search-btn:active {
  transform: scale(0.98);
}

/* Point on Map Instructions */
.form-instructions {
  padding: 24px 16px;
  text-align: center;
}

.instruction-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.instruction-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px;
  line-height: 1.5;
}

.instruction-tip {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 20px;
  font-style: italic;
}

.start-selection-btn {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.start-selection-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* Empty State */
.empty-state {
  padding: 32px 16px;
  text-align: center;
}

.empty-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.empty-hint {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Recent List */
.recent-list {
  list-style: none;
  margin: 0;
  padding: 8px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  color: rgba(255, 255, 255, 0.8);
}

.recent-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.recent-icon {
  font-size: 16px;
}

.recent-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
}

.recent-name {
  font-size: 14px;
  color: #ffffff;
}

.recent-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .expandable-search-overlay {
    padding: 60px 10px 10px;
  }
  
  .expandable-search-panel {
    max-height: calc(100vh - 80px);
  }
  
  .search-panel-content {
    flex-direction: column;
    min-height: auto;
  }
  
  .search-modes-sidebar {
    width: 100%;
    min-width: 100%;
    max-height: 140px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .modes-list {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 6px;
  }
  
  .mode-item {
    padding: 8px 12px;
    border-bottom: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  
  .mode-item.active {
    border-left: none;
  }
  
  .address-grid,
  .coords-grid,
  .postal-grid,
  .poi-grid {
    grid-template-columns: 1fr;
  }
  
  .search-btn {
    width: 100%;
    margin-top: 8px;
  }
}

/* ============================================================
 * Compact Search Bar - TomTom EXACT Replica
 * Measurements taken from TomTom GPS screenshot
 * ============================================================ */

.compact-search-bar {
  position: fixed;
  top: 103px;
  left: 15px;
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

/* TomTom EXACT measurements */
.search-button-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  
  /* Width aligned with dropdown button below */
  min-width: 170px;
  height: 50px;
  padding: 0 20px;
  
  /* TomTom exact colors */
  background: #F5F5F5;
  border: 2px solid #2196F3; /* Blue border like left icons */
  border-radius: 25px; /* Pill shape - half of height */
  
  /* TomTom exact shadow */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  pointer-events: auto;
}

.search-button-compact:hover {
  box-shadow: 0 3px 6px rgba(33, 150, 243, 0.25);
  transform: scale(1.01);
  border-color: #1976D2;
}

.search-button-compact:active {
  transform: scale(0.99);
}

/* TomTom exact icon - 24x24px SVG */
.search-button-compact .search-icon-svg {
  width: 24px;
  height: 24px;
  color: #555555;
  flex-shrink: 0;
}

/* TomTom exact text - 17px, dark grey */
.search-button-compact .search-text {
  font-size: 17px;
  font-weight: 400;
  color: #555555;
  flex: 1 1;
  text-align: left;
}

/* Mobile adjustments - maintain proportions */
@media (max-width: 768px) {
  .compact-search-bar {
    top: 75px;
    left: 10px;
  }
  
  .search-button-compact {
    width: 280px;
    height: 46px;
    padding: 0 12px;
    border-radius: 23px;
  }
  
  .search-button-compact .search-icon-svg {
    width: 22px;
    height: 22px;
  }
  
  .search-button-compact .search-text {
    font-size: 15px;
  }
}

/* ============================================================
 * EXPANDABLE SEARCH MODES PANEL - REMOVED (now in ExpandableSearchPanel)
 * ============================================================ */


/* ============================================================
 * KingRoad GPS - Upcoming Truck Stops (Trucker Path Style)
 * Position: LEFT SIDE - 300px above the expand map button (bottom-left)
 * Layout: 3 HORIZONTAL tabs + Dropdown arrow
 * ============================================================ */

.upcoming-truck-stops-container {
  position: fixed;
  left: 20px;
  bottom: 482px; /* 12px above future-icon-btn (418 + 52 + 12) */
  z-index: 750;
  
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
}

/* Main container - HORIZONTAL layout */
.truck-stops-main {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
}

.truck-stops-main.horizontal {
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
}

/* Individual truck stop tab - FIXED HEIGHT - Trucker Path style */
.truck-stop-rectangle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #2196F3;
  border-radius: 12px;
  padding: 10px 14px;
  
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.2);
  
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  
  /* Increased height for larger icons */
  height: 85px;
  min-width: 80px;
}

.truck-stop-rectangle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.35);
  border-color: #1976D2;
}

/* Brand circles container */
.stop-brands {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
}

/* Brand circle - Trucker Path style - LARGER - Blue border */
.brand-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #2196F3;
  background: white;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 12px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(33, 150, 243, 0.25);
  overflow: hidden;
}

/* Brand logo image inside circle */
.brand-circle .brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

/* Brand abbreviation fallback */
.brand-circle .brand-abbr {
  font-size: 12px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

/* Multiple brands grouped - side by side */
.stop-brands.grouped {
  gap: 6px;
}

.stop-brands.grouped .brand-circle {
  width: 32px;
  height: 32px;
  font-size: 10px;
  margin-left: 0;
  border-width: 2.5px;
  border-color: #2196F3;
}

/* Stop info - distance and name */
.stop-info-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

/* Distance - prominent - Trucker Path style */
.stop-distance-compact {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
  line-height: 1.2;
}

/* Exit/Location name - TomTom style: same color as distance + 20% larger */
.stop-exit-name {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-width: 75px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Arrow icon pointing up-right at 45 degrees */
.stop-exit-name::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1a1a1a;
  border-top: 2px solid #1a1a1a;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* More Button - WHITE with BLUE border */
.truck-stops-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #2196F3;
  border-radius: 12px;
  padding: 10px 16px;
  
  cursor: pointer;
  transition: all 0.15s ease;
  
  /* FIXED HEIGHT - Same as tabs */
  height: 85px;
  min-width: 48px;
  
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.2);
}

.truck-stops-more-btn:hover {
  background: rgba(245, 245, 245, 1);
  border-color: #1976D2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.truck-stops-more-btn .more-icon {
  display: none; /* Hide the +N text */
}

.truck-stops-more-btn .more-label {
  display: none; /* Hide the "More" label */
}

/* Arrow icon via CSS - smaller */
.truck-stops-more-btn::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #1a1a1a;
  border-bottom: 2.5px solid #1a1a1a;
  transform: rotate(45deg);
  margin-top: -3px;
}

.truck-stops-more-btn.open::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* ===== DROPDOWN BACKDROP - Covers everything behind the dropdown ===== */
.truck-stops-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000010;
  cursor: pointer;
}

/* ===== DROPDOWN - List of ALL truck stops - OPENS DOWNWARD ===== */
.truck-stops-dropdown {
  position: fixed;
  top: 260px; /* Opens just below the truck stop tabs */
  left: 20px; /* Fixed left position - expands to the right only */
  bottom: 85px; /* Extended down to footer to fit 4 items */
  
  background: #ffffff;
  border-radius: 12px;
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Fixed width to show names up to "...Stop" */
  width: 780px;
  
  overflow: hidden;
  z-index: 1000011; /* Extremely high z-index to overlay ALL elements */
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 16px 20px;
  background: #2196F3;
  color: white;
}

.dropdown-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.dropdown-close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.dropdown-close-btn:hover {
  opacity: 1;
}

.dropdown-list {
  height: calc(100% - 50px); /* Fill available space minus header */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth touch scrolling on iOS */
  overscroll-behavior: contain; /* Prevents scroll chaining */
  padding: 10px 10px 10px 0; /* Moved content 15px to the left */
  margin-left: -5px;
  background: #ffffff;
}

/* List Item Style - Horizontal: Icon | Name | Distance | Time | Exit */
.dropdown-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  
  padding: 16px 18px;
  background: #f5f5f5;
  border-radius: 10px;
  margin-bottom: 10px;
  
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.dropdown-list-item:hover {
  background: #e3f2fd;
}

.dropdown-list-item:last-child {
  margin-bottom: 0;
}

/* 1. Icon/Brand */
.list-item-brands {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 72px;
}

.list-brand-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid #2196F3;
  background: white;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 24px; /* Adjusted to fit 3 letters like IRV */
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  letter-spacing: -1px;
  
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
  position: relative;
}

.list-brand-circle + .list-brand-circle {
  margin-left: -16px;
}

.more-brands {
  font-size: 17px;
  font-weight: 600;
  color: #666;
  margin-left: 6px;
}

/* 2. Name */
.list-item-name {
  flex: 1 1;
  min-width: 0;
  font-size: 32px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  display: flex;
  align-items: center;
  height: 100%;
}

.favorite-star {
  margin-right: 6px;
}

/* 3. Distance */
.list-item-distance {
  font-size: 28px; /* Same height as name */
  font-weight: 700;
  color: #1a5f2a;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
  text-align: right;
}

/* 4. Time remaining */
.list-item-time {
  font-size: 26px; /* Increased to match */
  font-weight: 600;
  color: #2196F3;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 95px;
  text-align: center;
}

/* 5. Exit number */
.list-item-exit {
  font-size: 24px; /* Increased to match */
  font-weight: 700;
  color: #555;
  background: #e8e8e8;
  padding: 10px 16px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Loading state */
.truck-stops-loading {
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  color: #666;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: -webkit-fit-content;
  width: fit-content;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .upcoming-truck-stops-container {
    left: 10px;
    top: 25%;
  }
  
  .truck-stops-main.horizontal {
    gap: 6px;
  }
  
  .truck-stop-rectangle {
    padding: 6px 8px;
    min-width: 60px;
    max-width: 75px;
  }
  
  .brand-circle {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }
  
  .stop-brands.grouped .brand-circle {
    width: 20px;
    height: 20px;
    font-size: 7px;
  }
  
  .stop-distance-compact {
    font-size: 11px;
  }
  
  .stop-exit-name {
    font-size: 8px;
    max-width: 55px;
  }
  
  .truck-stops-more-btn {
    padding: 6px 10px;
    min-width: 45px;
    min-height: 55px;
  }
  
  .truck-stops-dropdown {
    width: 280px;
    left: 0;
    right: auto;
  }
}

@media (max-width: 480px) {
  .upcoming-truck-stops-container {
    left: 8px;
  }
  
  .truck-stop-rectangle {
    padding: 5px 6px;
    min-width: 55px;
    max-width: 65px;
  }
  
  .truck-stops-dropdown {
    position: fixed;
    left: 8px;
    right: 400px;
    width: auto;
    top: auto;
    bottom: 80px;
  }
}

/* Custom scrollbar */
.dropdown-list::-webkit-scrollbar {
  width: 5px;
}

.dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.dropdown-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
 * Context Menu - Add Waypoint / Add Favorite
 * ============================================================ */

.dropdown-list-item-wrapper {
  margin-bottom: 6px;
}

.dropdown-list-item-wrapper:last-child {
  margin-bottom: 0;
}

.dropdown-list-item.selected {
  background: #e3f2fd;
  border: 2px solid #2196F3;
}

.favorite-star {
  margin-right: 4px;
}

.stop-context-menu {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: #f0f4f8;
  border-radius: 0 0 8px 8px;
  margin-top: -4px;
  animation: slideDown 0.2s ease;
}

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

.context-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  
  font-size: 11px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-btn.add-waypoint {
  background: #4CAF50;
  color: white;
}

.context-btn.add-waypoint:hover {
  background: #43A047;
}

.context-btn.add-favorite {
  background: #FFC107;
  color: #333;
}

.context-btn.add-favorite:hover {
  background: #FFB300;
}

.context-btn.new-route {
  background: #2196F3;
  color: white;
}

.context-btn.new-route:hover {
  background: #1E88E5;
}

/* ============================================================
 * File-ID: arrival-side-badge-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: POI Arrival Side Community
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Styles for arrival side badge and vote UI
 * Trigger: KR_TRIG_ARRIVAL_SIDE_COMMUNITY_LAYERS_V1
 * ============================================================ */

/* Arrival Side Badge - shown on POI cards */
.arrival-side-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.arrival-side-badge--left {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(41, 128, 185, 0.2) 100%);
  border-color: rgba(52, 152, 219, 0.4);
  color: #3498db;
}

.arrival-side-badge--right {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(39, 174, 96, 0.2) 100%);
  border-color: rgba(46, 204, 113, 0.4);
  color: #2ecc71;
}

.arrival-side-badge--unknown {
  background: rgba(149, 165, 166, 0.2);
  border-color: rgba(149, 165, 166, 0.4);
  color: #95a5a6;
}

.arrival-side-badge__icon {
  font-size: 16px;
}

.arrival-side-badge__text {
  white-space: nowrap;
}

.arrival-side-badge__votes {
  font-size: 11px;
  opacity: 0.8;
}

.arrival-side-badge__confidence {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* Vote Buttons */
.arrival-side-vote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.arrival-side-vote__title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.arrival-side-vote__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.arrival-side-vote__buttons {
  display: flex;
  gap: 12px;
}

.arrival-side-vote__btn {
  flex: 1 1;
  padding: 14px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.arrival-side-vote__btn--left {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
}

.arrival-side-vote__btn--left:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.arrival-side-vote__btn--right {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
}

.arrival-side-vote__btn--right:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.arrival-side-vote__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.arrival-side-vote__btn-icon {
  font-size: 24px;
}

.arrival-side-vote__btn-label {
  font-size: 14px;
  font-weight: 600;
}

/* Disabled state message */
.arrival-side-vote__disabled-msg {
  text-align: center;
  padding: 12px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
  color: #e74c3c;
  font-size: 13px;
}

/* Loading state */
.arrival-side-vote__loading {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.7);
}

/* Success message */
.arrival-side-vote__success {
  text-align: center;
  padding: 16px;
  background: rgba(46, 204, 113, 0.1);
  border-radius: 8px;
  color: #2ecc71;
  font-size: 14px;
}

/* Route info banner when cannot fulfill recommended side */
.arrival-side-route-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(243, 156, 18, 0.15);
  border-left: 3px solid #f39c12;
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
}

.arrival-side-route-info__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.arrival-side-route-info__text {
  flex: 1 1;
  font-size: 13px;
  color: #f39c12;
  line-height: 1.4;
}

.arrival-side-route-info--success {
  background: rgba(46, 204, 113, 0.15);
  border-color: #2ecc71;
}

.arrival-side-route-info--success .arrival-side-route-info__text {
  color: #2ecc71;
}

/* Responsive */
@media (max-width: 480px) {
  .arrival-side-vote__buttons {
    flex-direction: column;
  }
  
  .arrival-side-vote__btn {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
 * POI Action Modal - TomTom GO Style
 * Dark blue theme with list options
 * ============================================================ */

/* Overlay */
.poi-action-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

/* Modal Container */
.poi-action-modal {
  width: 420px;
  max-width: 90vw;
  background: #1a4a6e;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modal-slide-down 0.2s ease-out;
}

@keyframes modal-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Action List */
.poi-action-list {
  padding: 8px 0;
}

/* Action Item */
.poi-action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  
  width: 100%;
  padding: 16px 20px;
  
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  color: #ffffff;
  font-size: 18px;
  text-align: left;
  
  cursor: pointer;
  transition: background 0.15s ease;
}

.poi-action-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.poi-action-item:last-child {
  border-bottom: none;
}

/* Action Icon */
.action-icon {
  width: 28px;
  font-size: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* Action Label */
.action-label {
  flex: 1 1;
  font-weight: 500;
}

/* Action Arrow (for submenus) */
.action-arrow {
  font-size: 24px;
  opacity: 0.6;
  margin-left: auto;
}

/* Report Item (warning style) */
.poi-action-item.report-item {
  color: #ffcc00;
}

.poi-action-item.report-item .action-icon {
  color: #ffcc00;
}

/* POI Info Footer */
.poi-action-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  
  padding: 16px 20px;
  background: #0d2b3e;
  border-top: 2px solid #00a8e8;
}

.poi-info {
  flex: 1 1;
  min-width: 0;
}

.poi-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poi-address {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* More Button (3 dots) */
.poi-more-btn {
  width: 44px;
  height: 44px;
  
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  
  color: #ffffff;
  font-size: 24px;
  
  cursor: pointer;
  transition: all 0.15s ease;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.poi-more-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Add Stop Button */
.poi-add-stop-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 12px 20px;
  
  background: #00a8e8;
  border: none;
  border-radius: 24px;
  
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.15s ease;
}

.poi-add-stop-btn:hover {
  background: #0090c8;
  transform: scale(1.02);
}

.add-stop-icon {
  font-size: 18px;
}

/* Submenu Header */
.poi-submenu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  
  padding: 14px 20px;
  background: #0d2b3e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu-back-btn {
  background: transparent;
  border: none;
  color: #00a8e8;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.submenu-back-btn:hover {
  background: rgba(0, 168, 232, 0.2);
}

.submenu-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

/* Report Info */
.poi-report-info {
  padding: 12px 20px;
  background: rgba(255, 204, 0, 0.1);
  color: #ffcc00;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .poi-action-modal-overlay {
    padding-top: 80px;
    align-items: flex-start;
  }
  
  .poi-action-modal {
    width: 95vw;
    margin: 0 10px;
  }
  
  .poi-action-item {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .action-icon {
    font-size: 20px;
  }
  
  .poi-name {
    font-size: 16px;
  }
  
  .poi-add-stop-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* 🗂️ Waypoints Manager - Drag & Drop Interface */

.waypoints-manager-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 700; /* Waypoints manager overlay - normalized from 10000 */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.waypoints-manager {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 450px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Header */
.manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.close-btn {
  background: rgba(244, 67, 54, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

/* Instructions */
.instructions {
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 8px;
  border-left: 3px solid #2196F3;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bbb;
  font-size: 12px;
  margin-bottom: 6px;
}

.instruction-item:last-child {
  margin-bottom: 0;
}

.instruction-icon {
  font-size: 14px;
}

/* Waypoints List */
.waypoints-list {
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.waypoint-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  position: relative;
}

.waypoint-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.waypoint-item.dragging {
  opacity: 0.7;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
  cursor: grabbing;
  z-index: 1000;
}

.waypoint-item.drag-over {
  border-top: 3px solid #2196F3;
  margin-top: 12px;
}

.waypoint-order {
  flex-shrink: 0;
}

.order-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #2196F3;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.waypoint-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Brand logo icon for truck stops */
.waypoint-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #2196F3;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.waypoint-brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
}

.waypoint-brand-fallback {
  font-size: 18px;
}

.waypoint-emoji-icon {
  font-size: 20px;
}

.waypoint-details {
  flex: 1 1;
}

.waypoint-name {
  color: white;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.3;
}

.waypoint-info {
  display: flex;
  gap: 12px;
  color: #bbb;
  font-size: 10px;
}

.waypoint-status {
  flex-shrink: 0;
  font-size: 16px;
}

.status-complete {
  color: #4CAF50;
}

.status-current {
  color: #2196F3;
  animation: pulse 1.5s ease-in-out infinite;
}

.status-pending {
  color: #9E9E9E;
}

.drag-handle {
  position: absolute;
  right: 400px;
  top: 50%;
  transform: translateY(-50%);
  color: #2196F3;
  font-size: 16px;
  font-weight: bold;
  opacity: 0.7;
}

/* Actions */
.manager-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.action-btn {
  flex: 1 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn {
  background: rgba(255, 152, 0, 0.8);
  color: white;
}

.reset-btn:hover {
  background: rgba(255, 152, 0, 1);
  transform: scale(1.02);
}

.apply-btn {
  background: rgba(76, 175, 80, 0.8);
  color: white;
}

.apply-btn:hover {
  background: rgba(76, 175, 80, 1);
  transform: scale(1.02);
}

/* Trip Summary */
.trip-summary {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #bbb;
  font-size: 11px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-weight: normal;
}

.summary-value {
  color: white;
  font-weight: bold;
  background: rgba(33, 150, 243, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .waypoints-manager {
    width: 95%;
    padding: 16px;
    max-height: 90vh;
  }
  
  .header-title {
    font-size: 14px;
  }
  
  .waypoint-item {
    padding: 10px;
    gap: 10px;
  }
  
  .waypoint-name {
    font-size: 12px;
  }
  
  .waypoint-info {
    font-size: 9px;
  }
  
  .order-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
}

/* Touch-friendly for mobile */
@media (hover: none) and (pointer: coarse) {
  .waypoint-item {
    padding: 16px 12px;
    touch-action: manipulation;
  }
  
  .instruction-item {
    font-size: 13px;
  }
}
/* 🗺️ Map Context Menu Styles */
/* TomTom-style dark theme for context menu */

.context-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 598; /* Context menu backdrop - normalized from 9998 */
}

.map-context-menu {
  position: fixed;
  background: #2C2C2C;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 280px;
  z-index: 600; /* Context menu - normalized from 9999 */
  overflow: hidden;
  animation: slideIn 0.2s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.context-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #1F1F1F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-title {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-close-btn {
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.menu-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.context-menu-items {
  padding: 8px 0;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  text-align: left;
}

.context-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.context-menu-item:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.98);
}

.item-icon {
  font-size: 22px;
  min-width: 28px;
  text-align: center;
}

.item-text {
  flex: 1 1;
  font-weight: 500;
}

/* Specific item colors */
.context-menu-item.navigate {
  border-left: 3px solid #2196F3;
}

.context-menu-item.navigate:hover {
  background: rgba(33, 150, 243, 0.1);
}

.context-menu-item.waypoint {
  border-left: 3px solid #FF9800;
}

.context-menu-item.waypoint:hover {
  background: rgba(255, 152, 0, 0.1);
}

.context-menu-item.force-route {
  border-left: 3px solid #2196F3;
}

.context-menu-item.force-route:hover {
  background: rgba(33, 150, 243, 0.1);
}

.context-menu-item.favorite {
  border-left: 3px solid #FFC107;
}

.context-menu-item.favorite:hover {
  background: rgba(255, 193, 7, 0.1);
}

/* NEW: Start Point button */
.context-menu-item.start-point {
  border-left: 3px solid #4CAF50;
}

.context-menu-item.start-point:hover {
  background: rgba(76, 175, 80, 0.1);
}

.context-menu-footer {
  padding: 10px 16px;
  background: #1F1F1F;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coordinates-display {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
  text-align: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .map-context-menu {
    min-width: 240px;
  }

  .context-menu-item {
    padding: 12px 14px;
    font-size: 14px;
  }

  .item-icon {
    font-size: 20px;
  }
}

/* Touch feedback for mobile */
@media (hover: none) {
  .context-menu-item:active {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Always Visible Controls - MapControls.css */

.map-controls-overlay {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

.map-controls-overlay > * {
  pointer-events: auto;
}

/* Route Controls - Left Side - HIDDEN by default for clean interface */
.route-controls {
  position: fixed;
  left: 20px;
  top: 120px;
  display: none;  /* HIDDEN - too cluttered */
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

.route-control-btn {
  width: 48px;  /* Round buttons - icon only */
  height: 48px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 50%;  /* Fully round */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  color: #333;
}

.route-control-btn .icon {
  font-size: 22px;
}

.route-control-btn .label {
  display: none;  /* Hide labels for clean look */
}

.route-control-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.route-control-btn.active {
  background: #FF9800;
  color: white;
  border-color: #F57C00;
}

.route-control-btn.active:hover {
  background: #F57C00;
}

.route-control-btn.recalculate {
  border-color: #2196F3;
  animation: pulse 2s ease-in-out infinite;
}

.route-control-btn.recalculate:hover {
  background: #2196F3;
  color: white;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.6);
  }
}



/* Highway Control with Dropdown */
.highway-control-wrapper {
  display: flex;
  gap: 2px;
}

.route-control-btn.highway-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1 1;
}

.route-control-dropdown-btn {
  width: 36px;
  height: 100%;
  background: white;
  border: 2px solid #2196F3;
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.route-control-dropdown-btn:hover {
  background: #E3F2FD;
  transform: translateX(2px);
}

.route-control-dropdown-btn .dropdown-icon {
  font-size: 12px;
  color: #2196F3;
  font-weight: bold;
}


/* Cancel Route Button */
.route-control-btn.cancel-route {
  border-color: #f44336;
  background: white;
  color: #333;
}

.route-control-btn.cancel-route:hover {
  background: #f44336;
  color: white;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

/* Expand Route Button */
.route-control-btn.expand-route {
  border-color: #FF9800;
  background: white;
  color: #333;
}

.route-control-btn.expand-route:hover {
  background: #FF9800;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.route-control-btn.expand-route.active {
  background: #FF9800;
  color: white;
  border-color: #F57C00;
}

/* Map Style Switcher - Corner between TopBar and Sidebar */
.map-style-switcher {
  position: fixed;
  right: calc(350px + 100px);
  right: calc(var(--sidebar-width, 350px) + 100px); /* Fora da sidebar */
  top: 75px;
  display: flex;
  gap: 8px;
  z-index: 1200;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Map Style Dropdown Container - Fixed Position - between TopBar and Sidebar */
/* ABSOLUTE LAW: Must stay INSIDE the USEFUL AREA */
/* Alignment: calc(350px sidebar + 100px margin) */
.map-style-dropdown-container {
  position: fixed !important;
  top: 90px !important;
  right: calc(350px + 100px) !important;
  right: calc(var(--sidebar-width, 350px) + 100px) !important;
  left: auto !important;
  z-index: 1200 !important;
}

/* Map Style Toggle Button - Square 90x90px - IMPROVED DESIGN */
.map-style-toggle-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 0;
  background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  cursor: pointer;
  color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}

.map-style-toggle-btn:hover {
  border-color: #2196F3;
  box-shadow: 0 6px 18px rgba(33, 150, 243, 0.4);
  background: linear-gradient(145deg, #ffffff 0%, #e3f2fd 100%);
  transform: scale(1.03);
}

.map-style-toggle-btn.active {
  border-color: #1565C0;
  background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%);
}

.map-style-toggle-btn .layers-icon {
  color: #1565C0;
  transition: all 0.2s;
  font-size: 64px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.map-style-toggle-btn:hover .layers-icon,
.map-style-toggle-btn.active .layers-icon {
  color: #0D47A1;
  transform: scale(1.05);
}

.map-style-toggle-btn .style-icon,
.map-style-toggle-btn .style-name,
.map-style-toggle-btn .dropdown-arrow {
  display: none; /* Hide text elements - icon only */
}

.map-style-toggle-btn.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Map Style Dropdown */
.map-style-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 260px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 1px solid #e0e0e0;
  overflow: hidden;
  z-index: 9999;
  animation: dropdown-fade-in 0.2s ease;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.dropdown-options {
  max-height: 320px;
  overflow-y: auto;
}

.dropdown-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background: #f5f9ff;
}

.dropdown-option.active {
  background: #e3f2fd;
}

.dropdown-option .option-icon {
  font-size: 24px;
  width: 32px;
  text-align: center;
}

.dropdown-option .option-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-option .option-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.dropdown-option .option-desc {
  font-size: 11px;
  color: #888;
}

.dropdown-option .check-icon {
  color: #2196F3;
  font-weight: bold;
  font-size: 16px;
}

/* Legacy: Map Style Switcher Content (for backwards compatibility) */
.map-style-switcher-content {
  display: none; /* Hidden - replaced by dropdown */
}


/* Volume Toggle Button - 3 States */
.volume-toggle-btn {
  position: fixed;
  right: 400px;
  bottom: 160px;
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

.volume-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.volume-toggle-btn .volume-icon {
  font-size: 24px;
  display: block;
}

.volume-toggle-btn .volume-label {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Volume States */
.volume-toggle-btn.normal {
  border-color: #4CAF50;
  background: #f1f8f4;
}

.volume-toggle-btn.normal:hover {
  border-color: #45a049;
  background: #e8f5e9;
}

.volume-toggle-btn.muted {
  border-color: #f44336;
  background: #ffebee;
}

.volume-toggle-btn.muted:hover {
  border-color: #d32f2f;
  background: #ffcdd2;
}

.volume-toggle-btn.alerts-only {
  border-color: #FF9800;
  background: #fff3e0;
}

.volume-toggle-btn.alerts-only:hover {
  border-color: #F57C00;
  background: #ffe0b2;
}

.style-btn {
  width: 44px;
  height: 44px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.style-btn:hover {
  transform: scale(1.1);
  border-color: #2196F3;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.style-btn.active {
  background: #2196F3;
  border-color: #1976D2;
  transform: scale(1.05);
}

/* Zoom Controls - HIDDEN for clean TomTom interface (can use pinch/scroll) */
.zoom-controls {
  display: none;  /* Hidden - use pinch to zoom like TomTom */
}

.zoom-btn {
  width: 40px;
  height: 40px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  color: #333;
}

.zoom-btn:hover {
  background: #2196F3;
  color: white;
  transform: scale(1.1);
}

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

/* Search Button - HIDDEN for clean interface (use menu instead) */
.search-button-float {
  display: none;  /* Hidden - search via menu for cleaner look */
}

.search-button-float:hover {
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  transform: scale(1.1);
  border-color: #2196F3;
}

.search-button-float .icon {
  font-size: 22px;
  color: #2196F3;
}

.search-button-float .text {
  display: none;  /* Hide text - icon only */
}

/* Hamburger Menu - Top Left Corner */
/* HIDDEN - Menu hamburger is now in the footer */
.menu-hamburger {
  display: none !important;
}

/* HIDDEN - Route planner FAB is duplicate functionality */
.route-planner-fab {
  display: none !important;
}

/* Current Location - Left Side */
/* My Location Button - Google Maps Style */
.current-location-btn {
  position: fixed;
  /* Aligned with Report (same X) - adjust to center 48px button with 60px ones */
  right: calc(350px + 80px + 6px);
  right: calc(var(--sidebar-width, 350px) + 80px + 6px);
  /* Above Report button: footer(75px) + margin(8px) + Report(60px) + gap(20px) */
  bottom: calc(75px + 8px + 60px + 20px);
  bottom: calc(var(--footer-height, 75px) + 8px + 60px + 20px);
  z-index: 1200;
  
  width: 48px;
  height: 48px;
  
  background: #FFFFFF;
  border: none;
  border-radius: 8px; /* More rounded corners */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.current-location-btn:hover {
  background: #F8F8F8;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

.current-location-btn:active {
  background: #EEEEEE;
  transform: scale(0.98);
}

.current-location-btn .icon {
  width: 26px;
  height: 26px;
  color: #4285F4; /* Google Blue - light and nice color */
  transition: all 0.2s ease;
}

.current-location-btn:hover .icon {
  color: #1a73e8; /* More intense blue on hover */
}

/* Indicador de Carregamento */
.loading-indicator {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 450; /* Loading indicator - normalized from 1002 */
  background: rgba(33, 150, 243, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.loading-indicator .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
  .route-controls {
    left: 10px;
    top: 80px;
    gap: 8px;
  }
  
  .route-control-btn {
    min-width: 100px;
    height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }
  
  .route-control-btn .icon {
    font-size: 18px;
  }
  
  .zoom-controls {
    right: 400px;
    bottom: 100px;
  }
  
  .zoom-btn {
    width: 40px;
    height: 40px;
  }
  
  .search-button-float {
    top: 10px;
    padding: 10px 20px;
  }
  
  .menu-hamburger {
    bottom: 10px;
    left: 10px;
  }
  
  .map-style-switcher {
    right: 400px;
    top: 10px;
    padding: 6px;
    gap: 6px;
  }
  
  .style-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .route-planner-fab {
    bottom: 100px;
    left: 10px;
    width: 48px;
    height: 48px;
  }
  
  .current-location-btn {
    right: 400px;
    bottom: 200px;
  }
  
  .volume-toggle-btn {
    right: 400px;
    bottom: 140px;
    width: 48px;
    height: 48px;
  }
  
  .volume-toggle-btn .volume-icon {
    font-size: 20px;
  }
  
  .volume-toggle-btn .volume-label {
    font-size: 8px;
  }
}


/* Rendezvous/Friend Meetup Button */
.rendezvous-btn {
  position: fixed;
  left: 20px; /* Moved to LEFT side to avoid sidebar */
  bottom: 180px;
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid #4CAF50;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

.rendezvous-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
  background: #f1f8e9;
  border-color: #388E3C;
}

.rendezvous-btn .icon {
  font-size: 24px;
  display: block;
}

.rendezvous-btn .label {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  color: #4CAF50;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Driving Time Calculator Button */
.driving-time-calculator-btn {
  position: fixed;
  left: 20px; /* Moved to LEFT side to avoid sidebar */
  bottom: 250px;
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid #9C27B0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

.driving-time-calculator-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
  background: #f3e5f5;
  border-color: #7B1FA2;
}

.driving-time-calculator-btn .icon {
  font-size: 24px;
  display: block;
}

.driving-time-calculator-btn .label {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  color: #9C27B0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Mobile responsive adjustments for new buttons */
@media (max-width: 768px) {
  .rendezvous-btn,
  .driving-time-calculator-btn {
    width: 48px;
    height: 48px;
  }
  
  .rendezvous-btn .icon,
  .driving-time-calculator-btn .icon {
    font-size: 20px;
  }
  
  .rendezvous-btn .label,
  .driving-time-calculator-btn .label {
    font-size: 8px;
  }


/* Show Sidebar Button - Appears when sidebar is hidden (after double-click) */
.show-sidebar-btn {
  position: fixed;
  right: 400px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: white;
  border: 2px solid #4CAF50;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  z-index: 300; /* Show sidebar button - normalized from 10000 */
  animation: pulseGreen 2s ease-in-out infinite;
}

.show-sidebar-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.5);
  background: #f1f8e9;
  border-color: #388E3C;
}

.show-sidebar-btn .icon {
  font-size: 28px;
}

@keyframes pulseGreen {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  50% {
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
  }
}

}



/* ========================================
   TOMTOM-STYLE DARK ROUND BUTTONS
   Bottom controls like TomTom GO
   ======================================== */

/* Update existing buttons to TomTom dark style */
.menu-hamburger,
.volume-toggle-btn,
.rendezvous-btn,
.driving-time-calculator-btn {
  background: rgba(44, 44, 44, 0.95) !important;  /* Dark like TomTom */
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
}

.menu-hamburger:hover,
.volume-toggle-btn:hover,
.rendezvous-btn:hover,
.driving-time-calculator-btn:hover {
  background: rgba(60, 60, 60, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.05) !important;
}

/* Position adjustments for CLEAN TomTom layout - ALL above footer */
.menu-hamburger {
  bottom: 120px; /* Above the footer */
  left: 20px;
}

/* Other buttons shifted right and above footer */
.volume-toggle-btn {
  bottom: 120px; /* Above the footer */
  left: 450px;  /* After NextStopWidget */
}

/* Rendezvous and Calculator buttons - HIDDEN by default, shown via JS when needed */
.rendezvous-btn,
.driving-time-calculator-btn {
  display: none; /* Hidden - functionality available in footer widgets */
}

/* Show buttons only when route is active (add .has-active-route to parent) */
.has-active-route .rendezvous-btn,
.has-active-route .driving-time-calculator-btn {
  display: flex;
  bottom: 120px;
}

.has-active-route .rendezvous-btn {
  left: 520px;
}

.has-active-route .driving-time-calculator-btn {
  left: 590px;
}

/* Icon styling for dark buttons */
.volume-toggle-btn .volume-icon,
.rendezvous-btn .icon,
.driving-time-calculator-btn .icon {
  font-size: 26px;
  filter: brightness(1.2);
}

/* Labels hidden on dark buttons for clean look */
.volume-toggle-btn .volume-label,
.rendezvous-btn .label,
.driving-time-calculator-btn .label {
  display: none;
}

/* Zoom buttons - also dark TomTom style */
.zoom-btn {
  background: rgba(44, 44, 44, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.zoom-btn:hover {
  background: rgba(60, 60, 60, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Search button - top right, dark style */
.search-button-float {
  background: rgba(44, 44, 44, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.search-button-float:hover {
  background: rgba(60, 60, 60, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.search-button-float .icon {
  color: white !important;
}

/* Where Am I button - MOVED to bottom row for clean interface */
.where-am-i-button {
  background: rgba(44, 44, 44, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  position: fixed !important;
  bottom: 20px !important;
  left: 660px !important;  /* After Calculator button */
  top: auto !important;
  transform: none !important;
  width: 56px !important;
  height: 56px !important;
}

.where-am-i-button:hover {
  background: rgba(60, 60, 60, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.05) !important;
}


/* ============================================================
   FLOATING CONTROL BUTTONS - Right Side near Sidebar
   Order from top to bottom: PIN (📍) -> EXPAND (⛶) -> REPORT (⚠️)
   ============================================================ */

.floating-control-btn {
  position: fixed !important;
  /* KR_EXPAND_MAP_001: Use safe-right-position = 400px from right edge 
     (sidebar 350px + safe margin 50px) to NEVER overlap sidebar */
  right: 400px !important;
  z-index: 1500 !important;
  
  width: 48px !important;
  height: 48px !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  background: rgba(40, 40, 40, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.floating-control-btn:hover {
  background: rgba(60, 60, 60, 0.98) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  transform: scale(1.05) !important;
}

.floating-control-btn .icon {
  font-size: 22px !important;
  color: white !important;
}

/* Current Location Button - TOP */
/* Style: White with blue border and blue icon */
/* Position: 12px above Report (yellow triangle) */
.current-location-btn.floating-control-btn {
  /* Same distance from sidebar as Layers and Report (80px) */
  right: calc(350px + 80px) !important;
  right: calc(var(--sidebar-width, 350px) + 80px) !important;
  /* Above Report: footer(75px) + margin(8px) + Report height(60px) + gap(12px) */
  bottom: calc(75px + 8px + 60px + 12px) !important;
  bottom: calc(var(--footer-height, 75px) + 8px + 60px + 12px) !important;
  /* Standard size same as Layers and Report */
  width: 60px !important;
  height: 60px !important;
  background: #FFFFFF !important;
  border: 2px solid #2196F3 !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}

.current-location-btn.floating-control-btn:hover {
  background: #F5F9FF !important;
  border-color: #1976D2 !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
}

.current-location-btn.floating-control-btn .icon {
  color: #2196F3 !important;
}

.current-location-btn.floating-control-btn:hover .icon {
  color: #1976D2 !important;
}

/* Expand Map Button - MIDDLE */
/* Expand Map Button - Canto INFERIOR ESQUERDO, 12px ACIMA do MileMarker */
.expand-map-btn.floating-control-btn {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  /* Moved 5px up: 285 + 5 = 290px */
  bottom: 290px !important;
  
  background: #FFFFFF !important;
  border: 2px solid #2196F3 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
  width: 52px !important;
  height: 52px !important;
  padding: 8px !important;
}

.expand-map-btn.floating-control-btn:hover {
  background: #F5F9FF !important;
  border-color: #1976D2 !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
  transform: scale(1.08);
}

/* Expand icon styling */
.expand-map-btn .icon {
  width: 32px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* KR_E2E_FIX_002: Allow click events to pass through SVG to button */
  pointer-events: none;
}

/* KR_E2E_FIX_002: Ensure SVG children don't intercept clicks */
.expand-map-btn svg,
.expand-map-btn svg * {
  pointer-events: none;
}



/* ============================================================
 * FIXED BUTTONS IN TOP RIGHT CORNER
 * Vertical stack: Layers → Amber Alert → (empty for old Mile Marker)
 * KR_FIXED_BUTTONS_STACK
 * ============================================================ */

/* Container for stacked fixed buttons */
.fixed-buttons-stack {
  position: fixed;
  /* Near sidebar with aesthetic margin */
  top: calc(89px + 8px);
  top: calc(var(--topbar-height, 89px) + 8px);
  right: calc(350px + 80px);
  right: calc(var(--sidebar-width, 350px) + 80px); /* 80px distance from sidebar */
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1200;
}

/* Standard round fixed button (same as carousel) */
.fixed-round-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(40, 40, 40, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.2);
  
  color: #ffffff;
  font-size: 28px;
  
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fixed-round-btn:hover {
  background: rgba(60, 60, 60, 0.98);
  border-color: rgba(59, 130, 246, 0.6);
  transform: scale(1.05);
}

.fixed-round-btn:active {
  transform: scale(0.95);
}

/* Layers Button - Beautiful blue color with colored icon */
.fixed-layers-btn {
  background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.4);
}

.fixed-layers-btn:hover {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 20px rgba(30, 136, 229, 0.6);
}

.fixed-layers-btn .layers-icon {
  width: 44px;
  height: 44px;
  fill: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Amber Alert Button (Red) */
.fixed-amber-btn {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  border: 2px solid rgba(255, 100, 100, 0.5);
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.4);
}

.fixed-amber-btn:hover {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  border-color: rgba(255, 150, 150, 0.6);
  box-shadow: 0 6px 20px rgba(229, 57, 53, 0.6);
}

/* Mile Marker Display - DEPRECATED: Use MileMarkerDisplay.css instead */
/* .mile-marker-fixed class no longer used - styles in component CSS */

/* ============================================
 * LEFT SIDE CONTROL BUTTONS - Stacked vertically
 * Order from bottom: Expand Map > Widgets Gallery > Future Icon > Truck Stops
 * ============================================ */

/* Widgets Gallery Button - Opens full-screen widget picker */
.widgets-gallery-btn.floating-control-btn {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 354px !important; /* 290 + 52 + 12 = 354px */
  
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #2196F3 !important;
  border-radius: 8px !important; /* Square with slight rounded corners */
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  cursor: pointer !important;
  z-index: 900 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}

.widgets-gallery-btn.floating-control-btn:hover {
  background: #F5F9FF !important;
  transform: scale(1.05) !important;
  border-color: #1976D2 !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
}

.widgets-gallery-btn .icon {
  font-size: 24px !important;
  color: #2196F3 !important;
  fill: #2196F3 !important;
}

/* Driving Time Calculator Button - Fixed left panel */
.calculator-fixed-btn.floating-control-btn {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 418px !important; /* 354 + 52 + 12 = 418px */
  
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #2196F3 !important;
  border-radius: 8px !important; /* Square with slight rounded corners */
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  cursor: pointer !important;
  z-index: 900 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}

.calculator-fixed-btn.floating-control-btn:hover {
  background: #F5F9FF !important;
  transform: scale(1.05) !important;
  border-color: #1976D2 !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
}

.calculator-fixed-btn .icon {
  font-size: 24px !important;
  color: #2196F3 !important;
}

/* ============================================
 * WIDGETS GALLERY MODAL - Full screen overlay
 * ============================================ */
.widgets-gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.widgets-gallery-modal {
  width: 90vw;
  height: 85vh;
  max-width: 1400px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 20px;
  border: 2px solid #d4b896;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.widgets-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(212, 184, 150, 0.3);
}

.widgets-gallery-header h2 {
  color: #d4b896;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.widgets-gallery-close-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.widgets-gallery-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.widgets-gallery-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 30px;
}

.widgets-gallery-category {
  margin-bottom: 40px;
}

.widgets-gallery-category h3 {
  color: #d4b896;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 184, 150, 0.2);
}

.widgets-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.widget-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(212, 184, 150, 0.2);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.widget-gallery-item:hover {
  background: rgba(212, 184, 150, 0.15);
  border-color: #d4b896;
  transform: translateY(-4px);
}

.widget-gallery-item .icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.widget-gallery-item .label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.widget-gallery-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.widget-gallery-item.disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(212, 184, 150, 0.2);
}

/* Category description */
.widgets-gallery-category .category-description {
  color: #999;
  font-size: 13px;
  margin-top: -10px;
  margin-bottom: 15px;
  font-style: italic;
}

/* Widget description */
.widget-gallery-item .description {
  color: #888;
  font-size: 11px;
  text-align: center;
  margin-top: 4px;
  line-height: 1.3;
  max-width: 120px;
}

/* ============================================
 * WIDGET DETAIL MODAL
 * ============================================ */
.widget-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.widget-detail-modal {
  width: 500px;
  max-width: 90vw;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 20px;
  border: 2px solid #d4b896;
  overflow: hidden;
}

.widget-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(212, 184, 150, 0.3);
}

.widget-icon-large {
  font-size: 64px;
  line-height: 1;
}

.widget-title-section {
  flex: 1 1;
}

.widget-title-section h2 {
  color: #d4b896;
  font-size: 24px;
  margin: 0 0 8px 0;
}

.widget-title-section .widget-description {
  color: #999;
  font-size: 14px;
  margin: 0;
}

.widget-detail-close-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.widget-detail-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.widget-detail-content {
  padding: 25px;
}

.widget-status-section,
.widget-info-section,
.widget-actions-section {
  margin-bottom: 25px;
}

.widget-detail-content h3 {
  color: #d4b896;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
}

.status-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* Status badges container */
.status-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Action type badges */
.status-badge.action-badge {
  background: #2196F3;
  color: white;
}

.status-badge.info-badge {
  background: #9E9E9E;
  color: white;
}

/* Info button style */
.action-btn.info {
  background: #9E9E9E;
  color: white;
}

.action-btn.info:hover {
  background: #757575;
}

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

.widget-info-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
}

.widget-info-table td:first-child {
  color: #888;
  width: 120px;
}

.widget-info-table code {
  background: rgba(212, 184, 150, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  color: #d4b896;
}

.widget-action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1 1;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.primary {
  background: #4CAF50;
  color: white;
}

.action-btn.primary:hover {
  background: #45a049;
  transform: translateY(-2px);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Status indicator in gallery items */
.widget-gallery-item .status-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
}

.widget-gallery-item {
  position: relative;
}

.widget-gallery-item.implemented {
  border-color: rgba(76, 175, 80, 0.5) !important;
}

.widget-gallery-item.partial {
  border-color: rgba(255, 152, 0, 0.5) !important;
}

.widget-gallery-item.not-implemented {
  border-color: rgba(244, 67, 54, 0.3) !important;
  opacity: 0.7;
}

/* File-ID: weather-layers-control-css-001 */
/* Owner: King Group Tech */
/* Weather Layers Control Panel Styles */

.weather-layers-control {
  position: absolute;
  top: 80px;
  right: 16px;
  z-index: 100;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 12px;
  min-width: 160px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.weather-layers-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.weather-icon {
  font-size: 18px;
}

.weather-title {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.weather-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  margin-left: auto;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.weather-layers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weather-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
}

.weather-layer-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.weather-layer-item.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.weather-layer-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.weather-layer-indicator {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.weather-layer-item.active .weather-layer-indicator {
  border-color: transparent;
  box-shadow: 0 0 8px currentColor;
}

.weather-layer-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.weather-layer-label {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 500;
  white-space: nowrap;
}

.weather-layer-item.active .weather-layer-label {
  color: #f1f5f9;
}

.weather-layers-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-update-info {
  font-size: 10px;
  color: #64748b;
  display: block;
  text-align: center;
}

/* API Warning State */
.weather-layers-control.api-warning {
  border-color: rgba(251, 191, 36, 0.3);
}

.weather-api-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  text-align: center;
}

.weather-api-warning .warning-icon {
  font-size: 24px;
}

.weather-api-warning p {
  font-size: 11px;
  color: #fbbf24;
  margin: 0;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .weather-layers-control {
    top: auto;
    bottom: 120px;
    right: 12px;
    min-width: 140px;
    padding: 10px;
  }
  
  .weather-layer-item {
    padding: 6px 8px;
  }
  
  .weather-layer-label {
    font-size: 11px;
  }
}

/* When sidebar is visible, adjust position */
.events-panel-right .weather-layers-control {
  right: 380px;
}

.events-panel-left .weather-layers-control {
  right: 16px;
}

/* File-ID: road-data-layers-control-css-001 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Road Data Layers Control Styles */
/* Status: stable */
/* Created-At: 2026-02-17 */
/* Last-Updated-At: 2026-02-17 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : RoadDataLayersControl.css */
/* Summary      : Styles for road data layers control panel */
/* TRIGGER      : KR_TELEMETRY_3D_METADATA_ONLY_HARDLOCK_V1 */
/* ============================================================ */

.road-data-layers-control {
  position: absolute;
  bottom: 120px;
  right: 16px;
  background: rgba(30, 30, 35, 0.95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 12px;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 100;
}

.road-data-layers-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.road-data-icon {
  font-size: 16px;
}

.road-data-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  flex: 1 1;
}

.road-data-loading-dot {
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  animation: road-data-pulse 1s ease-in-out infinite;
}

@keyframes road-data-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.road-data-layers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.road-data-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.road-data-layer-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.road-data-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4CAF50;
  cursor: pointer;
}

.road-data-layer-icon {
  font-size: 14px;
}

.road-data-layer-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  flex: 1 1;
}

.road-data-layer-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

/* ============================================================
 * Widget Modal Wrapper Styles
 * Generic modal for widget panels
 * ============================================================ */

.widget-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.widget-modal-container {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  animation: slideUp 0.3s ease;
  border: 1px solid rgba(212, 184, 150, 0.3);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.widget-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(212, 184, 150, 0.1);
  border-bottom: 1px solid rgba(212, 184, 150, 0.2);
}

.widget-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.widget-modal-icon {
  font-size: 28px;
}

.widget-modal-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #d4b896;
}

.widget-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-modal-close:hover {
  background: rgba(255, 59, 48, 0.8);
  transform: scale(1.1);
}

.widget-modal-content {
  padding: 20px;
  max-height: calc(80vh - 70px);
  overflow-y: auto;
}

/* Scrollbar styling */
.widget-modal-content::-webkit-scrollbar {
  width: 8px;
}

.widget-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.widget-modal-content::-webkit-scrollbar-thumb {
  background: rgba(212, 184, 150, 0.3);
  border-radius: 4px;
}

.widget-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 184, 150, 0.5);
}

/* ============================================================
 * Placeholder Panel Styles
 * ============================================================ */

.placeholder-panel {
  color: #fff;
}

.placeholder-panel p {
  color: #aaa;
  margin-bottom: 16px;
  line-height: 1.5;
}

.panel-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.panel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-btn.primary {
  background: #d4b896;
  color: #1a1a1a;
}

.panel-btn.primary:hover {
  background: #e5c9a7;
}

.panel-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.panel-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.panel-note {
  color: #666 !important;
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
}

/* Calculator Panel */
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-row label {
  color: #aaa;
}

.calc-row input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  color: #fff;
  text-align: right;
  width: 120px;
}

/* Preferences Panel */
.pref-option {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pref-option label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  cursor: pointer;
}

.pref-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #d4b896;
}

/* Toll Calculator */
.toll-summary {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
}

.toll-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.toll-value {
  font-weight: 600;
  color: #d4b896;
}

.toll-value.total {
  font-size: 18px;
}

/* Gamification Panel */
.level-display {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.level-badge {
  font-size: 48px;
}

.level-info {
  display: flex;
  flex-direction: column;
}

.level-title {
  font-size: 24px;
  font-weight: 700;
  color: #d4b896;
}

.level-name {
  color: #aaa;
}

.xp-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4b896, #e5c9a7);
  border-radius: 6px;
}

.xp-text {
  color: #aaa;
  font-size: 13px;
}

.achievements {
  margin-top: 24px;
}

.achievements h4 {
  color: #d4b896;
  margin-bottom: 12px;
}

.achievement {
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  color: #fff;
}

/* Weather Panel */
.weather-current {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 20px;
}

.weather-icon {
  font-size: 48px;
}

.weather-info {
  display: flex;
  flex-direction: column;
}

.weather-temp {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.weather-desc {
  color: #aaa;
}

.weather-alerts h4 {
  color: #d4b896;
  margin-bottom: 12px;
}

.no-alerts {
  color: #4CAF50 !important;
  text-align: center;
}

/* Share Panel */
.share-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Voice Panel */
.voice-panel {
  text-align: center;
}

.voice-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
}

.mic-icon {
  font-size: 48px;
}

.voice-status {
  color: #d4b896;
  font-weight: 600;
}

.voice-hint {
  color: #aaa !important;
}

.voice-examples {
  text-align: left;
  margin-top: 20px;
}

.voice-examples h4 {
  color: #d4b896;
  margin-bottom: 12px;
}

.voice-examples ul {
  list-style: none;
  padding: 0;
}

.voice-examples li {
  padding: 8px 0;
  color: #aaa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Help Panel */
.help-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}

.help-btn {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.help-btn:hover {
  background: rgba(212, 184, 150, 0.2);
  border-color: #d4b896;
}

.app-info {
  text-align: center;
  color: #666;
  font-size: 13px;
}

.app-info p {
  margin: 4px 0;
  color: #666 !important;
}

/* Report Alert Panel */
.alert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.alert-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-type-btn:hover {
  background: rgba(212, 184, 150, 0.2);
  border-color: #d4b896;
}

.alert-type-icon {
  font-size: 28px;
}

.alert-type-label {
  font-size: 12px;
  color: #aaa;
}

/* Amber Alert Panel */
.amber-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.amber-icon {
  font-size: 48px;
}

.amber-text {
  color: #4CAF50;
  font-weight: 600;
}

.driving-time-calculator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.calculator-header {
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px;
  border-radius: 15px 15px 0 0;
  color: white;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  flex: 1 1;
  text-align: center;
}

.calculator-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.calculator-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.95;
}

.free-nav-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  white-space: nowrap;
}

.free-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.calculator-form {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
  outline: none;
  border-color: #3498db;
}

.form-group input[type="text"]:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
}

.time-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 400px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.calculate-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.calculate-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
}

.calculate-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #95a5a6;
}

.input-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  color: #7f8c8d;
  font-style: italic;
}

.success-message {
  padding: 15px 20px;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

.error-message {
  padding: 15px 20px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

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

.urgent-warning {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.3);
}

.urgent-warning h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.results-container {
  margin-top: 30px;
}

.results-summary {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.results-summary h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3498db;
}

.recommendation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.recommendation h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.recommended-stop h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.recommended-stop p {
  font-size: 1rem;
  margin-bottom: 15px;
  opacity: 0.95;
}

.stop-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.95rem;
}

.stop-details span {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: 6px;
}

.truck-stops-list {
  margin-top: 30px;
}

.truck-stops-list h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.stops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.stop-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.stop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.stop-card.selected {
  border: 3px solid #3498db;
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.3);
}

.stop-rank {
  position: absolute;
  top: 10px;
  right: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.stop-card h4 {
  color: #2c3e50;
  font-size: 1.1rem;
  margin-bottom: 8px;
  margin-right: 400px;
}

.stop-brand {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.stop-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #555;
}

.stop-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.service-tag {
  background: #ecf0f1;
  color: #2c3e50;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.stop-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.create-route-button {
  width: 100%;
  padding: 10px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.create-route-button:hover {
  background: #2980b9;
}

.record-button {
  width: 100%;
  padding: 10px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.record-button:hover {
  background: #229954;
}

@media (max-width: 768px) {
  .calculator-header h1 {
    font-size: 2rem;
  }

  .time-inputs {
    grid-template-columns: 1fr;
  }

  .stops-grid {
    grid-template-columns: 1fr;
  }

  .summary-stats {
    grid-template-columns: 1fr;
  }
}

/* File-ID: traffic-controls-overlay-css-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Traffic Controls Overlay Styles
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : TrafficControlsOverlay.css
 * Summary      : Styles for traffic controls overlay
 * TRIGGER      : KR_NAV_TRAFFIC_CONTROLS_STANDARDIZE_OVERLAY_002
 * ============================================================
 */

.traffic-controls-overlay {
  position: absolute;
  top: 80px;
  right: 16px;
  z-index: 1000;
  
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  
  min-width: 200px;
  max-width: 280px;
  overflow: hidden;
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.tco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tco-header .tco-icon {
  font-size: 18px;
}

.tco-header .tco-title {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tco-header .tco-loading {
  font-size: 14px;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Error */
.tco-error {
  padding: 10px 16px;
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  font-size: 12px;
}

/* Summary */
.tco-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(52, 152, 219, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tco-summary-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tco-summary-item .tco-summary-icon {
  font-size: 14px;
}

.tco-summary-item .tco-summary-count {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.tco-summary-total {
  margin-left: auto;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
}

/* List */
.tco-list {
  max-height: 200px;
  overflow-y: auto;
}

.tco-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.tco-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tco-list-item:last-child {
  border-bottom: none;
}

.tco-list-item .tco-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.tco-list-item .tco-item-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tco-list-item .tco-item-distance {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.tco-list-item .tco-item-road {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tco-list-item .tco-item-time {
  font-size: 11px;
  color: #666;
  flex-shrink: 0;
}

/* Empty State */
.tco-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* Scrollbar */
.tco-list::-webkit-scrollbar {
  width: 4px;
}

.tco-list::-webkit-scrollbar-track {
  background: transparent;
}

.tco-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 480px) {
  .traffic-controls-overlay {
    top: auto;
    bottom: 120px;
    right: 8px;
    left: 8px;
    max-width: none;
  }
}

.map-container {
  flex: 1 1;
  position: relative;
  background: linear-gradient(135deg, #a8e6cf 0%, #7fcdcd 50%, #86a8e7 100%);
  overflow: hidden;
  z-index: 10;
}

/* ============================================================
 * USEFUL AREA: Native Mapbox controls must respect the sidebar
 * Sidebar = 350px, so minimum right = 370px (350 + 20 margin)
 * ============================================================ */
.mapboxgl-ctrl-bottom-right {
  right: 400px !important;
  bottom: 90px !important;
}

.mapboxgl-ctrl-top-right {
  right: 400px !important;
  top: 90px !important;
}

/* 🗺️ Mapbox GL JS Styles */
.map-view {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #c8c8c8; /* Light gray - placeholder until map loads */
}

/* Mapbox Map Container - Adapta dinamicamente com EventsPanel */
.mapbox-map {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - fixes mobile address bar */
  position: relative;
  transition: all 0.3s ease;
}

/* Adaptations when EventsPanel is visible in different positions */

/* Panel on RIGHT - Map occupies 2/3 LEFT */
.mapbox-map.events-panel-right {
  width: 66.667%;
  margin-right: 33.333%;
}

/* Panel on LEFT - Map occupies 2/3 RIGHT */
.mapbox-map.events-panel-left {
  width: 66.667%;
  margin-left: 33.333%;
}

/* Painel SUPERIOR - Mapa ocupa 2/3 INFERIOR */
.mapbox-map.events-panel-top {
  height: 66.667vh;
  margin-top: 33.333vh;
}

/* Loading Indicator para Mapbox */
.map-loading {
  position: absolute;
  /* Centralized in useful area (excluding right sidebar ~350px) */
  top: 50%;
  left: calc(50% - 175px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  z-index: 300;
  background: rgba(0, 0, 0, 0.6);
  padding: 24px 32px;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Controls Overlay */
.map-controls {
  position: absolute;
  bottom: 90px;
  right: 400px; /* Useful area: 350px sidebar + 20px margin */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200; /* Map controls - normalized from 1000 */
}

.map-control-btn {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-control-btn:hover {
  background: rgba(33, 150, 243, 0.8);
  transform: scale(1.05);
}

.toggle-btn {
  background: rgba(33, 150, 243, 0.8);
  padding: 10px 15px;
  font-size: 13px;
  white-space: nowrap;
}

/* Zoom Controls - REMOVED (pinch to zoom) */
.zoom-controls {
  display: none !important;
}

.zoom-btn, .reset-btn, .units-btn, .simulate-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.simulate-btn {
  background: rgba(255, 193, 7, 0.8) !important;
}

.simulate-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.simulate-btn:hover:not(:disabled) {
  background: rgba(255, 193, 7, 1) !important;
  transform: scale(1.1);
}

.style-btn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 193, 7, 0.9)) !important;
  font-size: 16px;
}

.style-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 1), rgba(255, 193, 7, 1)) !important;
  transform: scale(1.15) !important;
}

/* Map Style Selector - Main Button */
.map-style-selector {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 250; /* Map style selector - normalized from 1001 */
}

/* Map Style Toggle Button - MOVED TO MapControls.css for square button design */
/* .map-style-toggle-btn styles are now in /styles/MapControls.css */

.style-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.style-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.style-name {
  color: #FFD700;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
}

.style-hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* .map-style-toggle-btn:hover .style-hint - moved to MapControls.css */

/* Map Info Overlay - Adjusted to not overlap */
.map-info {
  position: absolute;
  top: 90px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 250; /* Map info - normalized from 1000 */
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 6px 12px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label {
  color: #bbb;
  font-size: 11px;
  font-weight: bold;
}

.info-value {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Route Waypoints Info Panel */
.route-info-panel {
  position: absolute;
  top: 90px;
  right: 400px; /* Useful area: 350px sidebar + 20px margin */
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 250; /* Route info panel - normalized from 1000 */
  min-width: 240px;
}

.route-header {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.manage-waypoints-btn {
  background: rgba(33, 150, 243, 0.8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manage-waypoints-btn:hover {
  background: rgba(33, 150, 243, 1);
  transform: scale(1.1);
}

.waypoints-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waypoint-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.waypoint-item.origin {
  border-left: 4px solid #4CAF50;
}

.waypoint-item.truck-stop {
  border-left: 4px solid #FF5722;
}

.waypoint-item.destination {
  border-left: 4px solid #F44336;
}

.waypoint-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
}

.waypoint-item.origin .waypoint-number {
  background: #4CAF50;
}

.waypoint-item.truck-stop .waypoint-number {
  background: #FF5722;
}

.waypoint-item.destination .waypoint-number {
  background: #F44336;
}

.waypoint-details {
  flex: 1 1;
}

.waypoint-name {
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

.waypoint-desc {
  color: #bbb;
  font-size: 10px;
  margin-top: 2px;
}

.route-arrow {
  color: #2196F3;
  font-size: 16px;
  text-align: center;
  opacity: 0.7;
}

/* Segment Navigation Styles */
.current-segment {
  margin-top: 8px;
}

.segment-name {
  color: #64B5F6;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(33, 150, 243, 0.2);
  border-radius: 6px;
}

.segment-progress {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #2196F3);
  transition: width 0.8s ease;
  border-radius: 3px;
}

.progress-text {
  color: white;
  font-size: 11px;
  text-align: center;
  margin-top: 6px;
  font-weight: bold;
}

.next-segment {
  margin-top: 10px;
  padding: 8px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 6px;
  border-left: 3px solid #FFC107;
}

.next-label {
  color: #FFC107;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 4px;
}

.next-name {
  color: white;
  font-size: 11px;
  font-weight: normal;
}

/* Optimization & Performance Styles */
.segment-stats {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  padding: 6px;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 6px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1;
}

.stat-label {
  font-size: 12px;
}

.stat-value {
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #bbb;
  font-size: 10px;
}

.progress-numbers {
  color: #2196F3;
  font-weight: bold;
}

.optimization-info {
  margin: 10px 0;
  padding: 8px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
}

.opt-label {
  color: #4CAF50;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 4px;
}

.opt-desc {
  color: #bbb;
  font-size: 9px;
  line-height: 1.3;
}

.opt-desc small {
  opacity: 0.7;
}

.next-stats {
  color: #bbb;
  font-size: 9px;
  margin-top: 2px;
}

.journey-complete {
  text-align: center;
  padding: 20px 10px;
}

.complete-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.complete-title {
  color: #4CAF50;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.complete-desc {
  color: #bbb;
  font-size: 11px;
}

/* Mapbox Attribution */
.mapbox-attribution {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 100; /* Mapbox attribution - normalized from 1000 */
  opacity: 0.6;
  font-size: 10px;
}

.mapbox-attribution a {
  color: white;
  text-decoration: none;
}

.mapbox-attribution a:hover {
  text-decoration: underline;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  /* Map Style Selector Mobile */
  .map-style-selector {
    top: 10px;
    left: 10px;
    right: 400px;
  }
  
  /* .map-style-toggle-btn styles moved to MapControls.css */
  
  .style-icon {
    font-size: 1.5rem;
  }
  
  .style-name {
    font-size: 0.9rem;
  }
  
  .style-hint {
    font-size: 0.7rem;
  }
  
  /* Map Info Mobile */
  .map-info {
    top: 70px;
    left: 10px;
    right: 400px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .info-item {
    flex: 1 1;
    min-width: calc(50% - 4px);
    padding: 4px 8px;
  }
  
  .info-label {
    font-size: 10px;
  }
  
  .info-value {
    font-size: 11px;
  }
  
  /* Route Info Panel Mobile */
  .route-info-panel {
    top: 120px;
    right: 400px;
    min-width: 200px;
    font-size: 11px;
  }
  
  .route-header {
    font-size: 12px;
  }
  
  .waypoint-name {
    font-size: 11px;
  }
  
  .waypoint-desc {
    font-size: 9px;
  }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  /* .map-style-toggle-btn styles moved to MapControls.css */
  
  .style-icon {
    font-size: 1.8rem;
  }
  
  .map-info {
    top: 80px;
  }
}

.map-background {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  z-index: 15;
}

.route-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  transform: translateY(-50%);
  border: 2px solid var(--border-primary);
}

.route-progress {
  height: 100%;
  background: linear-gradient(to right, var(--map-route), var(--accent-gold));
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px var(--accent-gold);
}

/* Rota em modo completo */
.route-line.full-map-route {
  transition: all 0.8s ease-in-out;
}

/* Full Map Toggle Button - Left Side */
.full-map-toggle-btn {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 16px 12px;
  cursor: pointer;
  z-index: 200 !important; /* Map toggle - normalized from 99999 */
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(251, 191, 36, 0.3);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 90px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: auto !important;
}

.full-map-toggle-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(251, 191, 36, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

.full-map-toggle-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.toggle-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: toggleFloat 3s ease-in-out infinite;
}

.toggle-text {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

@keyframes toggleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

/* Mobile Responsiveness for Toggle Button */
@media (max-width: 768px) {
  .full-map-toggle-btn {
    left: 15px;
    padding: 12px 8px;
    min-width: 70px;
    border-radius: 15px;
  }
  
  .toggle-icon {
    font-size: 1.5rem;
  }
  
  .toggle-text {
    font-size: 0.65rem;
  }
}

/* Units Toggle Button */
.control-btn.units-toggle {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  border: 2px solid rgba(59, 130, 246, 0.3);
  min-width: 45px;
}

.control-btn.units-toggle:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
}

.truck-position {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 10;
  transition: left 0.5s ease;
  cursor: pointer;
}

.truck-info {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.truck-position:hover .truck-info {
  opacity: 1;
}

.poi-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
}

.poi-icon {
  font-size: 1.5rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--shadow-soft);
  transition: transform 0.2s ease;
}

.poi-marker:hover .poi-icon {
  transform: scale(1.2);
}

.poi-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--button-text);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.poi-marker:hover .poi-tooltip {
  opacity: 1;
}

.alert-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.5rem;
  border-radius: 50%;
  border: 2px solid;
  background: #1a1a2e;
  animation: pulse 2s infinite;
  z-index: 6;
}

.severity-high {
  border-color: var(--alert-danger);
  color: var(--alert-danger);
}

.severity-medium {
  border-color: var(--alert-warning);
  color: var(--alert-warning);
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.distance-markers {
  position: absolute;
  top: 55%;
  left: 5%;
  right: 5%;
}

.marker {
  position: absolute;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  box-shadow: 0 1px 4px var(--shadow-soft);
}

/* Controles de Zoom Aprimorados */
.map-controls {
  position: absolute;
  bottom: 90px;
  right: 400px; /* Useful area: 350px sidebar + 20px margin */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 200 !important; /* Map controls - normalized from 99999 */
  background: rgba(26, 26, 46, 0.9);
  border-radius: 16px;
  padding: 12px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
}

.control-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  color: #FFD700;
  transition: all 0.3s ease;
  font-weight: bold;
}

.control-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border-color: #FFD700;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.control-btn:active {
  transform: translateY(0);
}

.zoom-level {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  text-align: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin: 4px 0;
  font-weight: 600;
}

/* Marcadores Customizados */
.custom-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 15;
  cursor: pointer;
  animation: markerPop 0.5s ease-out;
}

@keyframes markerPop {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2); 
  }
  100% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

.custom-marker-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

.custom-marker-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.custom-marker:hover .custom-marker-tooltip {
  opacity: 1;
}

/* Ponto Clicado */
.clicked-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 25;
  pointer-events: none;
}

.clicked-point-pulse {
  width: 20px;
  height: 20px;
  background: rgba(255, 215, 0, 0.6);
  border: 3px solid #FFD700;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Menu Contextual */
.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.1);
}

.context-menu {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 16px;
  min-width: 280px;
  z-index: 101;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  animation: contextMenuSlide 0.3s ease-out;
}

@keyframes contextMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.context-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  background: rgba(255, 215, 0, 0.1);
}

.context-menu-title {
  color: #FFD700;
  font-size: 1.1rem;
  font-weight: 700;
}

.close-context-menu {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-context-menu:hover {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.1);
}

.context-menu-content {
  padding: 20px;
}

.point-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.point-address {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
}

.point-coords {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.context-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.context-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.context-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.context-action.navigate {
  border-color: rgba(0, 123, 255, 0.4);
  background: rgba(0, 123, 255, 0.1);
}

.context-action.navigate:hover {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.2);
  color: #007bff;
}

.context-action.save {
  border-color: rgba(40, 167, 69, 0.4);
  background: rgba(40, 167, 69, 0.1);
}

.context-action.save:hover {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.context-action.waypoint {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.1);
}

.context-action.waypoint:hover {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

/* Responsividade */
@media (max-width: 768px) {
  .map-controls {
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 8px;
  }
  
  .control-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .context-menu {
    min-width: 250px;
    max-width: 90vw;
  }
  
  .context-menu-content {
    padding: 16px;
  }
  
  .context-action {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}

.route-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 16px var(--shadow-soft);
}

.route-progress-bar {
  height: 8px;
  background: rgba(196, 147, 75, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--map-route), var(--accent-gold));
  transition: width 0.5s ease;
}

.route-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Route Edit States */
.map-container.route-editing-mode {
  cursor: crosshair;
}

.map-container.route-editing-mode .route-line {
  animation: routeEditGlow 1s ease-in-out infinite alternate;
  cursor: grab;
}

.map-container.route-editing-mode .route-line:hover {
  cursor: grabbing;
}

@keyframes routeEditGlow {
  0% {
    box-shadow: 0 0 10px var(--accent-gold);
  }
  100% {
    box-shadow: 0 0 20px var(--accent-gold), 0 0 30px rgba(255, 215, 0, 0.5);
  }
}

/* Indicador de Long Press */
.long-press-indicator {
  position: absolute;
  z-index: 250;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.9);
  color: #FFD700;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #FFD700;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: longPressAppear 0.3s ease-out;
  transform: translate(-50%, -50%);
}

.long-press-indicator .indicator-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.long-press-indicator .indicator-icon {
  font-size: 1.5rem;
  animation: indicatorPulse 0.8s ease-in-out infinite;
}

.long-press-indicator .indicator-text {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

@keyframes longPressAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes indicatorPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Linha de Arrastar Rota */
.route-drag-line {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  stroke: #FF9800;
  stroke-width: 4;
  stroke-dasharray: 8, 4;
  animation: routeDragAnimation 1s ease-in-out infinite;
}

@keyframes routeDragAnimation {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 12;
  }
}

/* Destino de Drop da Rota */
.route-drop-target {
  position: absolute;
  z-index: 30;
  width: 16px;
  height: 16px;
  background: #FF9800;
  border: 3px solid #FFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dropTargetPulse 1s ease-in-out infinite;
}

@keyframes dropTargetPulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Route Edit Confirmation Toast - USEFUL AREA */
.route-edit-toast {
  position: fixed;
  top: 20px;
  right: calc(350px + 20px) !important;
  right: var(--safe-right-position, calc(350px + 20px)) !important;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 850;
  animation: toastSlideIn 0.4s ease-out;
  max-width: 350px;
  border-left: 4px solid #2E7D32;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.toast-message {
  flex: 1 1;
}

.toast-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.toast-details {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 2px;
}

.toast-stats {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: 500;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Suporte para gestos touch */
.map-background.touch-pan {
  cursor: move;
}

.map-background.touch-zoom {
  cursor: zoom-in;
}

/* Indicadores visuais para diferentes tipos de gestos */
.gesture-indicator {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #FFD700;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 60;
  animation: gestureIndicatorFade 2s ease-out forwards;
}

@keyframes gestureIndicatorFade {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Responsividade para funcionalidades touch */
@media (max-width: 768px) {
  .long-press-indicator {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  
  .long-press-indicator .indicator-icon {
    font-size: 1.3rem;
  }
  
  .route-edit-toast {
    top: 10px;
    right: 400px;
    left: 10px;
    max-width: none;
  }
  
  .gesture-indicator {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* Special states for different interaction types */
.map-container.pinch-zooming .route-line {
  pointer-events: none;
}

.map-container.panning .route-line {
  cursor: inherit;
}

.map-container.route-dragging {
  cursor: grabbing;
}

.map-container.route-dragging .route-line {
  cursor: grabbing;
}

/* Desabilitar pointer events durante sistema de drag */
.draggable-element.drag-mode-active * {
  pointer-events: none !important;
}

.draggable-element.drag-mode-active {
  pointer-events: auto !important;
}

/* Ensure critical controls always work */
.full-map-toggle-btn,
.map-controls,
.control-btn {
  pointer-events: auto !important;
  z-index: 200 !important; /* Critical controls - normalized from 99999 */
}

.full-map-toggle-btn *,
.map-controls *,
.control-btn * {
  pointer-events: auto !important;
  z-index: inherit !important;
}

/* Widgets que podem interferir com controles */
.truck-stops-widget,
.border-crossings-widget {
  pointer-events: auto;
  z-index: 1000;
}

/* Emergency OndeEstou Button - Fallback for long press */
.emergency-ondeestou-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.emergency-ondeestou-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
  background: linear-gradient(135deg, #ff3742 0%, #b83e5a 100%);
}

.emergency-ondeestou-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
/* ============================================================
   RECENTER BUTTON - Floating button when user moves the map
   ============================================================ */
.recenter-button {
  position: fixed;
  bottom: calc(75px + 20px);
  bottom: calc(var(--footer-height, 75px) + 20px);
  left: 50%;
  transform: translateX(-50%);
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 12px 24px;
  
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  border-radius: 30px;
  
  font-size: 15px;
  font-weight: 600;
  
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
  z-index: 1200;
  
  animation: recenterSlideUp 0.3s ease-out;
  transition: all 0.2s ease;
}

@keyframes recenterSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.recenter-button:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.5);
  background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
}

.recenter-button:active {
  transform: translateX(-50%) scale(0.98);
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
}

.recenter-icon {
  font-size: 18px;
}

.recenter-text {
  letter-spacing: 0.5px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .recenter-button {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .recenter-icon {
    font-size: 16px;
  }
}

/* ============================================================
 * Long Press Pin Styles
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Long-Press-Pin
 * Status: stable
 * Created-At: 2026-01-22
 * Last-Updated-At: 2026-01-22
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : LongPressPin.css
 * Summary      : Visual pin styles for long-press location marker
 * ============================================================ */

.long-press-pin {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
}

.long-press-pin .pin-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: pinDrop 0.3s ease-out;
}

.long-press-pin .pin-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(76, 175, 80, 0.3);
  border-radius: 50%;
  z-index: 1;
  animation: pulse 1.5s ease-out infinite;
}

/* Pin drop animation */
@keyframes pinDrop {
  0% {
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -40%);
  }
  80% {
    transform: translate(-50%, -55%);
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Selected state */
.long-press-pin.selected .pin-icon {
  animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -60%);
  }
}

/* Hover state */
.long-press-pin:hover .pin-icon {
  transform: translate(-50%, -55%) scale(1.1);
  transition: transform 0.2s ease;
}

/* Touch feedback */
.long-press-pin:active .pin-icon {
  transform: translate(-50%, -45%) scale(0.95);
}

/* File-ID: weather-alert-popup-css-001 */
/* Weather Alert Popup Styles */

.weather-alert-popup {
  z-index: 1000;
}

.weather-alert-popup .mapboxgl-popup-content {
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: none;
}

.weather-alert-popup .mapboxgl-popup-close-button {
  font-size: 20px;
  color: #94a3b8;
  padding: 8px 12px;
  right: 0;
  top: 0;
  background: transparent;
  border: none;
  transition: color 0.2s;
}

.weather-alert-popup .mapboxgl-popup-close-button:hover {
  color: #f1f5f9;
  background: rgba(0, 0, 0, 0.2);
}

.weather-alert-popup .mapboxgl-popup-tip {
  border-top-color: #f8fafc;
}

/* Animation */
.weather-alert-popup {
  animation: popupFadeIn 0.2s ease-out;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Severity-specific styles */
.weather-alert-popup.severe .mapboxgl-popup-tip {
  border-top-color: #FEE2E2;
}

.weather-alert-popup.moderate .mapboxgl-popup-tip {
  border-top-color: #FEF3C7;
}

/* Exit Markers Styles */

/* Pulsing animation for red X markers */
@keyframes pulseRedX {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.mapboxgl-marker.wrong-exit-marker {
  animation: pulseRedX 1.5s ease-in-out infinite;
}

/* Green lane highlight glow effect */
@keyframes glowGreen {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(0, 255, 0, 1));
  }
}

.correct-exit-lane {
  animation: glowGreen 2s ease-in-out infinite;
}

/* Ensure markers are always visible */
.mapboxgl-marker {
  z-index: 1000 !important;
}

/* Exit Popup Styles */

.exit-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 700; /* Exit popup overlay - normalized from 10000 */
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.exit-popup-container {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.exit-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.exit-number-large {
  background-color: #2e7d32;
  color: white;
  font-size: 48px;
  font-weight: bold;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
  min-width: 120px;
  text-align: center;
  font-family: 'Arial', 'Helvetica', sans-serif;
}

.exit-popup-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 0.2s;
}

.exit-popup-close:hover {
  color: #333;
}

.exit-popup-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.exit-popup-coordinates {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  font-family: monospace;
}

.exit-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exit-popup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button-icon {
  font-size: 20px;
}

.navigate-button {
  background-color: #1976d2;
  color: white;
}

.navigate-button:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.waypoint-button {
  background-color: #2e7d32;
  color: white;
}

.waypoint-button:hover {
  background-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.exit-popup-hint {
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 480px) {
  .exit-popup-container {
    padding: 20px;
    max-width: 95%;
  }

  .exit-number-large {
    font-size: 36px;
    padding: 12px 20px;
    min-width: 100px;
  }

  .exit-popup-button {
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ============================================================
 * File-ID: sidebar-container-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: TomTom Sidebar container, header, body and footer styles
 * ============================================================ */

/* ============================================================
 * TomTom-style Sidebar - EXACT COPY of measurements
 * Based on: Samsung A7 tablet 8.7" (1340x800 pixels)
 * 
 * DOCUMENTED MEASUREMENTS:
 * - Sidebar width: ~25% of screen (200-220px on 8.7" tablet)
 * - Transparency: rgba(30, 30, 30, 0.92) with blur
 * - Vertical line: 4-5px, cyan color #00BCD4
 * - POI icons: 44-48px circles
 * - ETA font: 42-48px bold
 * - Distance font: 16-18px
 * ============================================================ */

.tomtom-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 350px;
  background: transparent;
  display: flex;
  flex-direction: column;
  z-index: 1100;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== HEADER - SOLID DARK like TomTom ===== */
.sidebar-header {
  padding: 12px 16px 10px 16px;
  border-bottom: 2px solid #393E46;
  text-align: right;
  flex-shrink: 0;
  min-height: 58px; /* Aligned with main header */
  background: #222831;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-empty {
  height: 42px;
}

.header-eta {
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.5px;
}

.header-stats {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}

.header-distance {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.header-duration {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.header-destination {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== BODY - POI List - Semi-transparent like TomTom ===== */
.sidebar-body {
  flex: 1 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  padding-top: 20px;
  background: rgba(34, 40, 49, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
}

/* Cursor/Arrow at the top of vertical line */
.vertical-line-cursor {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #FFFFFF;
  z-index: 3;
}

/* Vertical line - EXACTLY CENTER */
.vertical-line {
  position: absolute;
  top: 14px;
  bottom: 100px;
  left: 50%;
  width: 10px;
  background: #3a3f47;
  transform: translateX(-50%);
  border-radius: 5px;
  z-index: 1;
}

/* Vehicle cursor/chevron */
.vehicle-cursor {
  position: absolute;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-cursor svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ===== FOOTER CONTROLS ===== */
.sidebar-footer-controls {
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
  padding: 0;
}

.sidebar-speed-widget {
  flex: 1 1;
  display: flex;
  align-items: center;
}

.sidebar-speed-widget.sidebar-speed-left {
  justify-content: center;
}

.sidebar-speed-widget.sidebar-speed-right {
  justify-content: center;
}

.sidebar-speed-widget .speed-limit-circle,
.sidebar-speed-widget .current-speed-circle {
  width: 90px;
  height: 90px;
}

.sidebar-speed-widget .speed-limit-circle {
  border-width: 7px;
}

.sidebar-speed-widget .current-speed-circle {
  border-width: 5px;
}

.sidebar-speed-widget .speed-limit-value,
.sidebar-speed-widget .current-speed-value {
  font-size: 34px;
}

.sidebar-speed-widget .speed-limit-unit,
.sidebar-speed-widget .current-speed-unit {
  font-size: 10px;
}

/* Cancel Route Circle Button */
.cancel-route-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid #2196F3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
  flex-shrink: 0;
}

.cancel-route-circle.active {
  background: #FFFFFF;
  border-color: #2196F3;
}

.cancel-route-circle.active:hover {
  background: #FFF0F0;
  transform: scale(1.05);
  border-color: #1976D2;
}

.cancel-route-circle.active:active {
  transform: scale(0.95);
}

.cancel-route-circle.active svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.cancel-route-circle.inactive {
  background: rgba(100, 100, 100, 0.6);
  border-color: #2196F3;
  cursor: not-allowed;
  opacity: 0.7;
}

.cancel-route-circle.inactive svg {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

/* Scrollbar */
.sidebar-body::-webkit-scrollbar {
  width: 4px;
}

.sidebar-body::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* ============================================================
 * File-ID: sidebar-poi-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: POI row, icon, bullet, and distance styling for sidebar
 * ============================================================ */

/* POI List */
.poi-list {
  position: relative;
  z-index: 2;
}

/* Single POI row */
.poi-row {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 4px 0;
}

/* POI sides */
.poi-side {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.poi-side-left {
  justify-content: flex-end;
  padding-right: 4px;
}

.poi-side-right {
  justify-content: flex-start;
  padding-left: 4px;
}

/* Line marker (center space) */
.poi-line-marker {
  width: 16px;
  flex-shrink: 0;
}

/* POI Icon Circle - TomTom style */
.poi-icon-circle {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: none;
  flex-shrink: 0;
  margin: 0 10px;
}

/* TomTom-style larger icon for RIGHT sidebar */
.poi-icon-circle.poi-icon-tomtom {
  width: 48px;
  height: 48px;
  margin: 0 4px;
  border: 3px solid #4a90e2;
}

.poi-icon-circle span {
  font-size: 20px;
  line-height: 1;
}

/* Icon content 80% of container size */
.poi-icon-circle.poi-icon-tomtom span {
  font-size: 32px;
}

/* Distance 10px away from icon */
.poi-distance.poi-distance-tomtom {
  margin-left: 10px;
}

.poi-icon-circle .poi-icon-emoji {
  position: relative;
  z-index: 1;
}

/* ============================================================
 * LEFT ACCESS ARROW OVERLAY
 * Trigger: KR_NAV_ACCESS_SIDE_VOICE_LANE_MASTER_002
 * Shows when: event.direction=forward AND event.road_side=LEFT
 * Alternates: 3s (far) -> 2s (medium) -> fixed (close)
 * NEVER hides the brand icon - arrow is overlay only
 * ============================================================ */
.poi-icon-circle.with-left-arrow {
  position: relative;
}

.left-access-arrow {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #FF9800;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 2px solid #FFFFFF;
  z-index: 2;
  animation: pulse-arrow 0.8s ease-in-out infinite;
}

@keyframes pulse-arrow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Bullet point - TomTom style: white 8px circle on vertical line */
.poi-bullet {
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* Bullet for LEFT side POIs */
.poi-side-left .poi-bullet {
  right: -12px;
}

/* Bullet for RIGHT side POIs */
.poi-side-right .poi-bullet {
  left: -12px;
}

/* Distance text - TomTom style */
.poi-distance {
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

/* TomTom-style larger distance text for RIGHT sidebar */
.poi-distance.poi-distance-tomtom {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 10px;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
 * File-ID: sidebar-weather-alert-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Weather alert styling for TomTom sidebar
 * ============================================================ */

/* Weather Alert Row */
.weather-alert-row {
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.1) 0%, rgba(255, 69, 0, 0.05) 100%);
  border-left: 4px solid #FF4500;
  margin: 8px 0;
  border-radius: 8px;
  padding: 0;
  min-height: auto;
}

.weather-alert-row.severe {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.15) 0%, rgba(139, 0, 0, 0.08) 100%);
  border-left-color: #8B0000;
  animation: criticalPulse 2s infinite;
}

.weather-alert-row.moderate {
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.12) 0%, rgba(255, 69, 0, 0.06) 100%);
  border-left-color: #FF4500;
}

.weather-alert-row.minor {
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.08) 0%, rgba(255, 165, 0, 0.04) 100%);
  border-left-color: #FFA500;
}

/* Weather Alert Content */
.weather-alert-content {
  padding: 12px 16px;
}

.weather-alert-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.weather-alert-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.weather-alert-row.severe .weather-alert-icon {
  background: rgba(139, 0, 0, 0.3);
  animation: shake 1s infinite;
}

.weather-alert-info {
  flex: 1 1;
  min-width: 0;
}

.weather-alert-name {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 2px;
  line-height: 1.2;
}

.weather-alert-distance {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.weather-alert-severity {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.weather-alert-severity.severe {
  background: #8B0000;
  animation: criticalPulse 2s infinite;
}

.weather-alert-severity.moderate {
  background: #FF4500;
}

.weather-alert-severity.minor {
  background: #FFA500;
  color: #333;
  text-shadow: none;
}

.weather-alert-details {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Animations */
@keyframes criticalPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.01);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

/* ============================================================
 * File-ID: sidebar-responsive-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Responsive media queries for TomTom sidebar
 * ============================================================ */

/* ===== RESPONSIVE - Large tablet / Desktop ===== */
@media (min-width: 1024px) {
  .tomtom-sidebar {
    width: 350px;
  }
  
  .header-eta {
    font-size: 52px;
  }
  
  .poi-icon-circle {
    width: 52px;
    height: 52px;
  }
  
  .poi-icon-circle span {
    font-size: 26px;
  }
  
  .poi-row {
    min-height: 68px;
  }
}

/* ===== RESPONSIVE - Small tablet ===== */
@media (max-width: 900px) {
  .tomtom-sidebar {
    width: 200px;
  }
  
  .header-eta {
    font-size: 40px;
  }
  
  .header-distance {
    font-size: 16px;
  }
  
  .poi-icon-circle {
    width: 42px;
    height: 42px;
  }
  
  .poi-icon-circle span {
    font-size: 20px;
  }
  
  /* Weather alerts tablet */
  .weather-alert-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .weather-alert-name {
    font-size: 13px;
  }
  
  .weather-alert-distance {
    font-size: 11px;
  }
  
  .weather-alert-severity {
    font-size: 9px;
    padding: 3px 6px;
  }
}

/* ===== RESPONSIVE - Phone ===== */
@media (max-width: 600px) {
  .tomtom-sidebar {
    width: 160px;
  }
  
  .header-eta {
    font-size: 32px;
  }
  
  .header-stats {
    flex-direction: column;
    gap: 2px;
  }
  
  .header-distance {
    font-size: 14px;
  }
  
  .header-duration {
    font-size: 12px;
  }
  
  .poi-icon-circle {
    width: 36px;
    height: 36px;
  }
  
  .poi-icon-circle span {
    font-size: 16px;
  }
  
  .poi-bullet {
    font-size: 20px;
  }
  
  .poi-distance {
    font-size: 12px;
  }
  
  .poi-row {
    min-height: 50px;
  }
  
  /* Weather alerts phone */
  .weather-alert-content {
    padding: 10px 12px;
  }
  
  .weather-alert-header {
    gap: 8px;
  }
  
  .weather-alert-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  
  .weather-alert-name {
    font-size: 12px;
  }
  
  .weather-alert-distance {
    font-size: 10px;
  }
  
  .weather-alert-details {
    font-size: 10px;
  }
}

/* ============================================================
 * File-ID: tomtom-sidebar-css-facade-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: FACADE - imports all modularized sidebar styles
 * Architecture: Modularization per KINGROAD_MODULARIZATION_V1
 * ============================================================ */

/* Module 1: Container, header, body, footer controls */

/* Module 2: POI rows, icons, bullets, distances */

/* Module 3: Weather alert styling */

/* Module 4: Responsive media queries */

/**
 * Speed Limit Widgets CSS
 * Circular speed displays styled like real traffic signs
 */

.speed-widgets-container {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.widget-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.widget-label {
  font-size: 10px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Speed Limit Circle - Red traffic sign style - LARGER size */
/* Speed sign: red rim, white center, black numbers */
.speed-limit-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: white; /* WHITE center */
  border: 6px solid #E31E24; /* RED rim */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.speed-limit-circle-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4px; /* Pushes content slightly down */
}

.speed-limit-value {
  font-size: 32px; /* LARGER number */
  font-weight: 900; /* BOLDER */
  color: #000000; /* BLACK number */
  line-height: 1;
  font-family: 'Arial Black', 'Arial', sans-serif;
  min-width: 54px;
  text-align: center;
}

.speed-limit-unit {
  font-size: 8px;
  font-weight: 600;
  color: #000000;
  margin-top: 0px;
  text-transform: lowercase;
}

/* Current Speed Circle - Always black border, white background, black numbers */
.current-speed-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: white; /* WHITE background */
  border: 4px solid #333333; /* BLACK border */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

/* Normal state - same styles */
.current-speed-circle.normal {
  background: white;
  border: 4px solid #333333;
}

.current-speed-circle.normal .current-speed-value,
.current-speed-circle.normal .current-speed-unit {
  color: #000000;
}

/* Speeding state - keeps black border, white background, but red numbers to alert */
.current-speed-circle.speeding {
  background: white;
  border: 4px solid #333333;
}

.current-speed-circle.speeding .current-speed-value {
  color: #E31E24; /* RED number when exceeding */
}

.current-speed-circle.speeding .current-speed-unit {
  color: #000000;
}

.current-speed-circle-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4px; /* Pushes content slightly down */
}

.current-speed-value {
  font-size: 32px; /* LARGER number */
  font-weight: 900; /* BOLDER */
  line-height: 1;
  font-family: 'Arial Black', 'Arial', sans-serif;
  min-width: 54px;
  text-align: center;
}

.current-speed-unit {
  font-size: 8px;
  font-weight: 600;
  margin-top: 0px;
  text-transform: lowercase;
}

/* Pulse animation for speeding */
@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(227, 30, 36, 0.8);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .speed-widgets-container {
    gap: 15px;
  }
  
  .speed-limit-circle,
  .current-speed-circle {
    width: 80px;
    height: 80px;
  }
  
  .speed-limit-value,
  .current-speed-value {
    font-size: 32px;
  }
  
  .speed-limit-unit,
  .current-speed-unit {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .speed-widgets-container {
    gap: 10px;
  }
  
  .speed-limit-circle,
  .current-speed-circle {
    width: 70px;
    height: 70px;
    border-width: 4px;
  }
  
  .speed-limit-value,
  .current-speed-value {
    font-size: 28px;
  }
  
  .speed-limit-unit,
  .current-speed-unit {
    font-size: 8px;
  }
  
  .widget-label {
    font-size: 10px;
  }
}

/* ============================================================
 * File-ID: timeline-core-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Core timeline container, axis, and event styles
 * Trigger: KR_CUES_SIDEBAR_DISTANCE_TIMELINE_FISHEYE_0_20KM_ADAPTIVE_V2
 * ============================================================ */

/* ============================================================
 * TIMELINE CONTAINER
 * ============================================================ */
.timeline-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 12px 0;
  overflow: hidden;
}

/* Central vertical line - TomTom style: 10px width, dark gray */
.timeline-axis {
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 100px;
  width: 10px;
  background: #3a3f47;
  transform: translateX(-50%);
  border-radius: 5px;
  z-index: 1;
}

/* Scale indicator marks */
.timeline-scale-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
}

.timeline-scale-label {
  position: absolute;
  left: calc(50% + 16px);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%);
  white-space: nowrap;
  /* Hidden - distance is shown on POI items, not on scale */
  display: none;
}

/* ============================================================
 * TIMELINE EVENTS
 * ============================================================ */
.timeline-event {
  position: absolute;
  display: flex;
  align-items: center;
  transition: top 0.3s ease-out, opacity 0.3s ease-out;
  z-index: 10;
}

/* Left side events (road_side: LEFT) */
.timeline-event--left {
  right: calc(50% + 8px);
  flex-direction: row;
  justify-content: flex-end;
}

/* Right side events (road_side: RIGHT) - TomTom layout: icon near line, distance after */
.timeline-event--right {
  left: calc(50% + 8px);
  flex-direction: row;
  justify-content: flex-start;
}

/* Event icon container - TomTom style */
.timeline-event-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: none;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* TomTom-style larger icon */
.timeline-event-icon.timeline-event-icon-tomtom {
  width: 48px;
  height: 48px;
  font-size: 32px;
  border: 3px solid #4a90e2;
}

/* Bullet notch icon container */
.timeline-event-icon-bullet {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-event-icon:hover {
  transform: scale(1.1);
}

/* Event connector to axis - HIDDEN (was showing white dashes on vertical line) */
.timeline-event-connector {
  display: none;
}

/* Event distance label - TomTom style: bold white */
.timeline-event-distance {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  padding: 0 4px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

/* TomTom-style larger distance text */
.timeline-event-distance.timeline-event-distance-tomtom {
  font-size: 20px;
  font-weight: 600;
  padding: 0 8px;
  letter-spacing: 0.5px;
  margin-left: 10px;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* White bullet on timeline axis - TomTom style */
.timeline-event-bullet {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
}

/* Bullet position for LEFT events - bullet on the right side touching line */
.timeline-event--left .timeline-event-bullet {
  right: -12px;
}

/* Bullet position for RIGHT events - bullet on the left side touching line */
.timeline-event--right .timeline-event-bullet {
  left: -12px;
}

/* ============================================================
 * VEHICLE POSITION MARKER
 * Positioned at BOTTOM of timeline (point zero = current position)
 * ============================================================ */
.timeline-vehicle-marker {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 16px solid #FFFFFF;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  z-index: 20;
}

/* ============================================================
 * File-ID: timeline-segment-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Segment events (congestion/construction) with snake animation
 * ============================================================ */

/* ============================================================
 * SEGMENT EVENTS (Stretches like congestion)
 * With animated snake pattern matching map visualization
 * ============================================================ */
.timeline-segment {
  position: absolute;
  width: 24px;
  border-radius: 4px;
  border: 2px solid #dc3545;
  z-index: 5;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* Snake pattern inside segment - matches map snake */
.timeline-segment-snake {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    #ffffff 0%,
    #ffffff 25%,
    #dc3545 25%,
    #dc3545 50%,
    #ffffff 50%,
    #ffffff 75%,
    #dc3545 75%,
    #dc3545 100%
  );
  background-size: 24px 20px;
  animation: snakeMoveVerticalTimeline 1.5s linear infinite;
}

@keyframes snakeMoveVerticalTimeline {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

/* Left side segment */
.timeline-segment--left {
  right: calc(50% + 4px);
}

/* Right side segment */
.timeline-segment--right {
  left: calc(50% + 4px);
}

/* Active segment (currently inside) - orange snake */
.timeline-segment--active {
  border-color: #FF9800;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.5);
}

.timeline-segment--active .timeline-segment-snake {
  background: linear-gradient(
    0deg,
    #ffffff 0%,
    #ffffff 25%,
    #FF9800 25%,
    #FF9800 50%,
    #ffffff 50%,
    #ffffff 75%,
    #FF9800 75%,
    #FF9800 100%
  );
  background-size: 24px 20px;
  animation: snakeMoveVerticalTimelineActive 1s linear infinite;
}

@keyframes snakeMoveVerticalTimelineActive {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

/* Construction segment - red/white stripes */
.timeline-segment--construction {
  border-color: #dc3545;
}

/* Congestion segment - orange/yellow based on severity */
.timeline-segment--congestion {
  border-color: #F57C00;
}

.timeline-segment--congestion .timeline-segment-snake {
  background: linear-gradient(
    0deg,
    #ffffff 0%,
    #ffffff 25%,
    #F57C00 25%,
    #F57C00 50%,
    #ffffff 50%,
    #ffffff 75%,
    #F57C00 75%,
    #F57C00 100%
  );
  background-size: 24px 20px;
}

/* Severe congestion - dark red */
.timeline-segment--severe .timeline-segment-snake {
  background: linear-gradient(
    0deg,
    #ffffff 0%,
    #ffffff 25%,
    #E53935 25%,
    #E53935 50%,
    #ffffff 50%,
    #ffffff 75%,
    #E53935 75%,
    #E53935 100%
  );
  background-size: 24px 20px;
}

/* Passed segment - greyed out */
.timeline-segment--passed {
  opacity: 0.4;
  border-color: #9E9E9E;
}

.timeline-segment--passed .timeline-segment-snake {
  animation: none;
  background: linear-gradient(
    0deg,
    #f5f5f5 0%,
    #f5f5f5 25%,
    #9E9E9E 25%,
    #9E9E9E 50%,
    #f5f5f5 50%,
    #f5f5f5 75%,
    #9E9E9E 75%,
    #9E9E9E 100%
  );
  background-size: 24px 20px;
}

/* Segment label */
.timeline-segment-label {
  position: absolute;
  font-size: 10px;
  color: white;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-segment--left .timeline-segment-label {
  right: 100%;
  margin-right: 4px;
}

.timeline-segment--right .timeline-segment-label {
  left: 100%;
  margin-left: 4px;
}

/* ============================================================
 * File-ID: timeline-stack-fisheye-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Stacked events, fisheye indicator, and debug overlay
 * ============================================================ */

/* ============================================================
 * STACKED EVENTS - TomTom style
 * ============================================================ */
.timeline-stack {
  position: absolute;
  z-index: 15;
  cursor: pointer;
}

.timeline-stack-indicator {
  position: relative;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: none;
}

.timeline-stack-count {
  font-size: 14px;
  font-weight: bold;
  color: #1565C0;
}

/* Stacked icons preview (behind main indicator) */
.timeline-stack-preview {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #42A5F5;
  border: 2px solid white;
}

.timeline-stack-preview:nth-child(1) {
  top: -4px;
  left: -4px;
  z-index: -1;
}

.timeline-stack-preview:nth-child(2) {
  top: -8px;
  left: 0;
  z-index: -2;
}

/* Expanded stack */
.timeline-stack--expanded {
  z-index: 100;
}

.timeline-stack--expanded .timeline-stack-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.timeline-stack-events {
  display: none;
}

/* ============================================================
 * FISHEYE INDICATOR
 * ============================================================ */
.timeline-fisheye-zone {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  pointer-events: none;
  z-index: 0;
}

.timeline-fisheye-label {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 9px;
  color: rgba(33, 150, 243, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================
 * DEBUG OVERLAY (Development only)
 * ============================================================ */
.timeline-debug {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #4CAF50;
  font-family: monospace;
  font-size: 10px;
  padding: 8px;
  border-radius: 4px;
  z-index: 1000;
  max-width: 200px;
}

.timeline-debug-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.timeline-debug-label {
  color: #90CAF9;
}

.timeline-debug-value {
  color: #4CAF50;
  font-weight: bold;
}

/* ============================================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================================ */
@media (max-width: 768px) {
  .timeline-event-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .timeline-event-distance {
    font-size: 11px;
  }
  
  .timeline-segment {
    width: 20px;
  }
}

/* ============================================================
 * ACCESSIBILITY
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .timeline-event,
  .timeline-segment,
  .timeline-segment--active {
    transition: none;
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .timeline-event-icon {
    border-width: 3px;
  }
  
  .timeline-axis {
    background: white;
    width: 4px;
  }
  
  .timeline-segment {
    border-left-width: 4px;
  }
}

/* ============================================================
 * File-ID: timeline-styles-facade-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Navigation-Sidebar
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: FACADE - imports all modularized timeline styles
 * Trigger: KR_CUES_SIDEBAR_DISTANCE_TIMELINE_FISHEYE_0_20KM_ADAPTIVE_V2
 * Architecture: Modularization per KINGROAD_MODULARIZATION_V1
 * ============================================================ */

/* Module 1: Core timeline container, axis, events */

/* Module 2: Segment events (congestion/construction) with snake */

/* Module 3: Stacked events, fisheye, debug, responsive, accessibility */

/* 🚛 KingRoad GPS - Painel de Eventos (1/3 da Tela)
   Layout: Ocupa 1/3 direita da tela, mapa fica com 2/3 esquerda */

.events-panel {
  position: fixed;
  z-index: 400; /* Events panel - normalized from 9999 - above widgets, below modals */
  
  /* Default: right position */
  top: 0;
  right: 0;
  width: 33.333%; /* 1/3 da tela */
  height: 100vh;
  
  background: linear-gradient(180deg, 
    rgba(26, 26, 46, 0.95) 0%, 
    rgba(16, 33, 62, 0.95) 50%, 
    rgba(15, 20, 25, 0.95) 100%
  );
  
  border-left: 3px solid rgba(255, 215, 0, 0.6);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  
  display: flex;
  flex-direction: column;
  
  transition: all 0.3s ease;
}

/* DYNAMIC POSITIONING BASED ON EVENT DIRECTION */

/* Exit RIGHT - Panel RIGHT */
.events-panel.position-right {
  top: 0;
  right: 0;
  width: 33.333%;
  height: 100vh;
  border-left: 3px solid rgba(255, 215, 0, 0.6);
  border-right: none;
}

/* Exit LEFT - Panel LEFT */
.events-panel.position-left {
  top: 0;
  left: 0;
  right: auto;
  width: 33.333%;
  height: 100vh;
  border-right: 400px solid rgba(255, 215, 0, 0.6);
  border-left: none;
}

/* Exit STRAIGHT AHEAD - Panel TOP */
.events-panel.position-top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 33.333%; /* 1/3 da altura */
  border-bottom: 3px solid rgba(255, 215, 0, 0.6);
  border-left: none;
  border-right: none;
}

/* Header do Painel */
.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.1);
}

/* ALERT STAGE COLORS - 3-stage system for highways */
.events-panel.alert-prepare .events-header {
  background: rgba(59, 130, 246, 0.2); /* Blue - Prepare (2km) */
  border-bottom: 2px solid rgba(59, 130, 246, 0.5);
}

.events-panel.alert-approaching .events-header {
  background: rgba(251, 191, 36, 0.2); /* Amber - Approaching (1km) */
  border-bottom: 2px solid rgba(251, 191, 36, 0.5);
}

.events-panel.alert-now .events-header {
  background: rgba(239, 68, 68, 0.3); /* Red - NOW (200m) */
  border-bottom: 2px solid rgba(239, 68, 68, 0.6);
  animation: pulse-alert 1s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 1.2rem;
}

.title-text {
  font-size: 1rem;
  font-weight: bold;
  color: #FFD700;
}

.panel-controls {
  display: flex;
  gap: 8px;
}

.minimize-btn,
.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.minimize-btn:hover,
.close-btn:hover {
  background: rgba(255, 215, 0, 0.3);
  transform: scale(1.1);
}

/* Timer de Auto-Hide */
.auto-hide-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 68, 68, 0.2);
  border: 1px solid rgba(255, 68, 68, 0.4);
  border-radius: 12px;
  padding: 4px 8px;
  margin-right: 400px;
}

.timer-icon {
  font-size: 0.8rem;
}

.timer-count {
  font-size: 0.8rem;
  font-weight: bold;
  color: #FF4444;
  min-width: 20px;
  text-align: center;
}

/* Navigation Tabs */
.events-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.tab-btn {
  flex: 1 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.tab-btn:hover {
  background: rgba(255, 215, 0, 0.1);
}

.tab-btn.active {
  background: rgba(255, 215, 0, 0.2);
  border-bottom: 3px solid #FFD700;
}

.tab-icon {
  font-size: 1.1rem;
}

.tab-label {
  font-size: 0.7rem;
  color: white;
  font-weight: 600;
}

.tab-badge {
  position: absolute;
  top: 4px;
  right: 400px;
  background: #FF4444;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Lista de Eventos */
.events-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.events-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
  
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.5) transparent;
}

.events-list::-webkit-scrollbar {
  width: 6px;
}

.events-list::-webkit-scrollbar-track {
  background: transparent;
}

.events-list::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.5);
  border-radius: 3px;
}

/* Items de Eventos */
.event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.event-item:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  transform: translateX(-2px);
}

/* Tipos de eventos */
.exit-item.priority-high {
  border-left: 4px solid #FFD700;
  background: rgba(255, 215, 0, 0.1);
}

/* Long duration events - Special style for "CONTINUE STRAIGHT FOR XX KM" */
.exit-item.long-duration-event {
  border-left: 4px solid #00BCD4;
  background: linear-gradient(135deg, 
    rgba(0, 188, 212, 0.15) 0%, 
    rgba(0, 150, 136, 0.1) 100%
  );
  border: 2px solid rgba(0, 188, 212, 0.3);
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 16px;
}

.exit-item.long-duration-event .event-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00BCD4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stop-item {
  border-left: 4px solid #4CAF50;
}

.traffic-item.severity-high {
  border-left: 4px solid #FF4444;
  background: rgba(255, 68, 68, 0.1);
}

.traffic-item.severity-medium {
  border-left: 4px solid #FF8800;
  background: rgba(255, 136, 0, 0.1);
}

.border-item {
  border-left: 4px solid #2196F3;
}

/* Event icons */
.event-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.exit-number {
  background: #FFD700;
  color: black;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 20px;
  text-align: center;
}

/* Detalhes dos eventos */
.event-details {
  flex: 1 1;
  min-width: 0;
}

.event-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-distance {
  font-size: 0.75rem;
  color: #FFD700;
  font-weight: 600;
}

.event-lane {
  font-size: 0.7rem;
  color: #4CAF50;
  margin-top: 2px;
}

/* Specific elements for long duration events */
.time-to-next {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 188, 212, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(0, 188, 212, 0.3);
}

.time-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.time-value {
  font-size: 0.8rem;
  color: #00BCD4;
  font-weight: bold;
}

.next-event {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: rgba(0, 150, 136, 0.15);
  border-radius: 8px;
  border: 1px solid rgba(0, 150, 136, 0.3);
}

.next-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.next-value {
  font-size: 0.75rem;
  color: #4CAF50;
  font-weight: 600;
}

/* Icon for long duration events */
.long-duration-icon {
  background: linear-gradient(135deg, #00BCD4, #0097A7);
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

.event-delay,
.event-wait {
  font-size: 0.7rem;
  color: #FF8800;
  margin-top: 2px;
}

/* Amenidades dos truck stops */
.event-amenities {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.amenity {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Directions and status */
.event-direction {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.direction-arrow {
  font-size: 1.2rem;
  color: #FFD700;
}

.event-rating {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.rating {
  font-size: 0.75rem;
  color: #FFD700;
}

.event-time {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.duration {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.border-status {
  font-size: 1rem;
}

/* Estado sem eventos */
.no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 150px;
  text-align: center;
}

.no-events-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}

.no-events-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* Painel Minimizado */
.minimized-indicator {
  padding: 16px 8px;
  text-align: center;
}

.indicator-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-icon {
  font-size: 1.2rem;
}

.stat-count {
  font-size: 0.8rem;
  font-weight: bold;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
}

/* Responsividade */
@media (max-width: 1024px) {
  .events-panel.expanded {
    width: 40%; /* More space on tablets */
  }
}

@media (max-width: 768px) {
  .events-panel.expanded {
    width: 100%; /* Tela cheia em mobile */
    left: 0;
    right: 0;
  }
  
  .events-panel.minimized {
    width: 60px;
  }
  
  .tab-label {
    display: none; /* Only icons on mobile */
  }
  
  .title-text {
    display: none; /* Smaller title on mobile */
  }
}

/* Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.events-panel {
  animation: slideInRight 0.3s ease-out;
}
/* 📍 KingRoad GPS - Mile Marker Display Styles */
/* DYNAMIC SIZE - Adjusts to content automatically */
/* Font style matching CustomFooter clock (Arial, bold) */

/* ========================================
   MILE MARKER WRAPPER - DYNAMIC SIZE
   ======================================== */

.mile-marker-wrapper {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 155px !important;
  
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  
  /* DYNAMIC SIZE - Let content determine width */
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  
  overflow: visible !important;
  
  z-index: 1500 !important;
  cursor: move !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  
  /* Smooth size transitions */
  transition: all 0.3s ease !important;
}

/* Golden Ring - Changed to Blue Ring */
.mile-marker-golden-ring {
  padding: 4px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #2196F3, #1976D2, #2196F3) !important;
  box-shadow: 
    0 0 12px rgba(33, 150, 243, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  
  /* DYNAMIC SIZE */
  display: inline-block !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  
  transition: all 0.3s ease !important;
}

/* Active state - brighter blue glow */
.mile-marker-wrapper.has-route .mile-marker-golden-ring {
  background: linear-gradient(135deg, #2196F3, #42A5F5, #2196F3) !important;
  box-shadow: 
    0 0 20px rgba(33, 150, 243, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Inactive state - muted blue, smaller */
.mile-marker-wrapper.no-route .mile-marker-golden-ring {
  background: linear-gradient(135deg, #1565C0, #0D47A1, #1565C0) !important;
  box-shadow: 
    0 0 8px rgba(21, 101, 192, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* European-style Mile Marker (Blue sign with white text) */
.mile-marker-display.mile-marker-european {
  /* European highway blue background */
  background: #0053A0 !important;
  border: 3px solid #FFFFFF !important;
  border-radius: 12px !important;
  
  /* Padding adjusts with content */
  padding: 10px 16px !important;
  color: #FFFFFF !important;
  
  /* FONT MATCHING FOOTER CLOCK */
  font-family: 'Arial', 'Helvetica Neue', sans-serif !important;
  
  /* DYNAMIC SIZE - content determines width */
  display: inline-block !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  
  text-align: center !important;
  
  transition: all 0.3s ease !important;
}

/* Active state */
.mile-marker-display.mile-marker-european.active {
  background: #0053A0 !important;
  border-color: #FFFFFF !important;
}

/* Inactive state - grayed out but SAME SIZE */
.mile-marker-display.mile-marker-european.inactive {
  background: #6B7B8A !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  /* SAME padding as active - maintain size */
  padding: 10px 16px !important;
}

/* European Marker Container */
.euro-marker-container {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  /* DYNAMIC SIZE */
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* Highway Name (Top - e.g., "BR 364" or "A1") */
.euro-highway-name {
  font-family: 'Arial', 'Helvetica Neue', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  /* DYNAMIC SIZE */
  width: auto !important;
  max-width: none !important;
}

/* Inactive state - SAME font size to maintain height */
.mile-marker-display.inactive .euro-highway-name {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* White Divider Line */
.euro-divider {
  width: 100% !important;
  min-width: 30px !important;
  height: 2px !important;
  background: #FFFFFF !important;
  opacity: 0.9 !important;
  margin: 3px 0 !important;
}

.mile-marker-display.inactive .euro-divider {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Kilometer Number (Center - e.g., "1027" or "9" or "--") */
/* MATCHES FOOTER CLOCK: Arial Bold */
.euro-kilometer {
  font-family: 'Arial', 'Helvetica Neue', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: #FFFFFF !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  /* DYNAMIC SIZE */
  width: auto !important;
  max-width: none !important;
}

/* Inactive state - SAME font size to maintain height */
.mile-marker-display.inactive .euro-kilometer {
  font-size: 32px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Unit Label INSIDE the box (Bottom - e.g., "km") */
.euro-unit-label {
  font-family: 'Arial', 'Helvetica Neue', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: lowercase !important;
  letter-spacing: 1px !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

.euro-unit-label.inactive {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
}

/* Hover effect */
.mile-marker-wrapper:hover .mile-marker-golden-ring {
  transform: scale(1.05) !important;
  box-shadow: 
    0 0 25px rgba(33, 150, 243, 0.8),
    0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .mile-marker-wrapper {
    left: 8px !important;
    bottom: calc(75px + 100px) !important;
    bottom: calc(var(--footer-height, 75px) + 100px) !important;
  }
  
  .mile-marker-display.mile-marker-european {
    padding: 8px 12px !important;
  }
  
  .euro-highway-name {
    font-size: 12px !important;
  }
  
  .euro-kilometer {
    font-size: 24px !important;
  }
  
  .euro-unit-label {
    font-size: 10px !important;
  }
}

/* Animation - only when has route */
@keyframes markerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.mile-marker-wrapper.has-route .mile-marker-golden-ring {
  animation: markerPulse 3s ease-in-out infinite;
}

/* No animation when no route */
.mile-marker-wrapper.no-route .mile-marker-golden-ring {
  animation: none !important;
}

/* Lane Visualization Component Styles */

.lane-visualization-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lane-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #2c2c2c;
}

.lane-info {
  margin-top: 15px;
  padding: 15px;
  background: #2c2c2c;
  border-radius: 8px;
  color: #ffffff;
}

.lane-stat {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #3a3a3a;
}

.lane-stat:last-child {
  border-bottom: none;
}

.lane-stat strong {
  min-width: 120px;
  color: #d4af37;
}

.lane-stat .icon {
  margin-right: 400px;
  font-size: 18px;
}

.divider-indicator {
  color: #ff9800;
  font-weight: 500;
}

.oneway-indicator {
  color: #2196f3;
  font-weight: 500;
}

.lane-visualization-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #ffffff;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(212, 175, 55, 0.3);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

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

.lane-visualization-error {
  padding: 20px;
  background: #ffebee;
  border: 2px solid #f44336;
  border-radius: 8px;
  color: #c62828;
  text-align: center;
}

.error-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .lane-visualization-container {
    max-width: 100%;
    padding: 15px;
  }

  .lane-info {
    padding: 10px;
  }

  .lane-stat {
    font-size: 12px;
  }

  .lane-stat strong {
    min-width: 100px;
  }
}

/* Prohibited Segments Overlay Styles */

.prohibited-segments-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.prohibited-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.prohibited-segment {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* Alert Modal */
.prohibited-alert-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700; /* Prohibited alert modal - normalized from 10000 */
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
}

.alert-content {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(255, 102, 178, 0.3);
  border: 3px solid #FF66B2;
  color: #ffffff;
}

.alert-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 15px;
}

.alert-message {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #FF66B2;
}

.alert-details {
  margin: 15px 0;
  padding: 10px;
  background: #2c2c2c;
  border-radius: 6px;
  font-size: 14px;
}

.alert-details strong {
  color: #d4af37;
}

.alert-tags {
  margin: 15px 0;
  padding: 10px;
  background: #2c2c2c;
  border-radius: 6px;
  font-size: 13px;
}

.alert-tags ul {
  margin: 10px 0 0 20px;
  padding: 0;
}

.alert-tags li {
  margin: 5px 0;
}

.alert-close-btn {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  background: #FF66B2;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.alert-close-btn:hover {
  background: #FF77C2;
}

/* Prohibited Indicator Badge */
.prohibited-indicator {
  position: absolute;
  top: 20px;
  right: 400px;
  z-index: 350; /* Prohibited indicator - normalized from 1001 */
  animation: slideInRight 0.5s ease-out;
}

.prohibited-badge {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #FF66B2 0%, #FF4499 100%);
  color: #ffffff;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 102, 178, 0.4);
  animation: pulse 2s infinite;
}

/* Loading State */
.prohibited-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spinner-small {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 102, 178, 0.3);
  border-top-color: #FF66B2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Error State */
.prohibited-error {
  padding: 10px;
  background: #ffebee;
  border: 1px solid #f44336;
  border-radius: 6px;
  color: #c62828;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-icon-small {
  font-size: 16px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

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

/* Night Mode Auto-Contrast */
@media (prefers-color-scheme: dark) {
  .alert-content {
    background: #0a0a0a;
  }

  .alert-details,
  .alert-tags {
    background: #1a1a1a;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .alert-content {
    padding: 20px;
    max-width: 90%;
  }

  .alert-message {
    font-size: 16px;
  }

  .prohibited-indicator {
    top: 10px;
    right: 400px;
  }

  .prohibited-badge {
    padding: 8px 15px;
    font-size: 12px;
  }
}

.style-switcher {
  padding: 20px;
  /* CRITICAL CHANGE: Safe beige background - NOT WHITE */
  background: #f5f5dc; /* Soft beige - safe for drivers */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.style-switcher h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #2c3e50;
}

.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.style-card {
  padding: 16px;
  /* CHANGE: Darker beige background */
  background: #e8e8dc; /* Soft dark beige */
  border: 2px solid #d3d3d3; /* Soft light gray */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.style-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #3498db;
}

.style-card.active {
  /* CHANGE: Soft blue background */
  background: #d6e8f0; /* Very light grayish blue */
  border-color: #4a90a4; /* Soft grayish blue */
  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.2);
}

.style-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #3498db;
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.style-card.active .style-badge {
  background: #2196f3;
}

.style-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.style-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.style-desc {
  font-size: 11px;
  color: #7f8c8d;
  line-height: 1.4;
}

.style-switcher.loading {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}

.style-info {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px 0;
  padding: 12px;
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}

.default-style {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.usage-badge {
  position: absolute;
  top: 8px;
  right: 400px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.style-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  color: #666;
}

.style-footer small {
  display: block;
  margin: 4px 0;
}

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

.route-planner {
  padding: 2rem;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-jupiter);
}

.planner-header {
  text-align: center;
  margin-bottom: 2rem;
}

.planner-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.planner-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.planner-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.planning-form {
  padding: 2rem;
}

.planning-form h2 {
  color: var(--text-primary);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.form-section {
  margin-bottom: 2rem;
}

.form-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(196, 147, 75, 0.1);
}

.waypoint-group {
  border-left: 3px solid var(--accent-gold);
  padding-left: 1rem;
  margin: 1rem 0;
}

.waypoint-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.waypoint-input .form-input {
  flex: 1 1;
}

.remove-waypoint {
  background: var(--alert-danger);
  border: none;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.remove-waypoint:hover {
  transform: scale(1.1);
}

.add-waypoint-btn {
  background: var(--accent-gold);
  color: var(--button-text);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: all 0.2s ease;
}

.add-waypoint-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.checkbox-label:hover {
  background: rgba(196, 147, 75, 0.05);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-gold);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-primary);
}

.preview-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent-gold);
  background: transparent;
  color: var(--accent-gold);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.saved-routes {
  padding: 2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  height: -webkit-fit-content;
  height: fit-content;
}

.saved-routes h2 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.routes-list {
  margin-bottom: 2rem;
}

.route-item {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-primary);
}

.route-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.route-details {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.route-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
  border-color: var(--accent-gold);
}

.action-btn.danger:hover {
  background: var(--alert-danger);
  border-color: var(--alert-danger);
}

@media (max-width: 1024px) {
  .planner-content {
    grid-template-columns: 1fr;
  }
}

/* Rotas Alternativas */
.route-alternatives {
  grid-column: 1 / -1;
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8));
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.alternatives-header {
  text-align: center;
  margin-bottom: 2rem;
}

.alternatives-header h2 {
  color: #FFD700;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.route-summary-info {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.route-option {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.route-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
}

.route-option.fastest {
  border-left: 5px solid #28a745;
}

.route-option.shortest {
  border-left: 5px solid #007bff;
}

.route-option.economic {
  border-left: 5px solid #ffc107;
}

.route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.route-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.route-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.route-title h3 {
  color: #fff;
  font-size: 1.3rem;
  margin: 0;
  font-weight: 700;
}

.route-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0.25rem 0 0 0;
}

.select-route-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.select-route-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

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

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position: relative;
}

.metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
}

.metric-value {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.metric-diff {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-diff.positive {
  background: #28a745;
  color: #fff;
}

.metric-diff.negative {
  background: #dc3545;
  color: #fff;
}

.route-details-expand {
  margin-bottom: 1rem;
}

.highways-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.highways-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
}

.highways-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.highway-tag {
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.route-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.action-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
}

.alternatives-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
}

.gradient-button.calculating {
  background: linear-gradient(45deg, #6c757d, #adb5bd);
  cursor: not-allowed;
  opacity: 0.7;
}

.gradient-button.calculating:hover {
  transform: none;
}

@media (max-width: 1200px) {
  .routes-grid {
    grid-template-columns: 1fr;
  }
  
  .route-summary-info {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Truck Restriction Validation */
.truck-validation-info {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
}

.truck-validation-info h4 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.validation-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.check-item {
  font-size: 0.8rem;
  color: #22c55e;
  font-weight: 600;
}

.validation-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
}

.route-validation-section {
  margin: 2rem 0;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
}

.validation-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.validation-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.validation-status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.validation-status.valid {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.validation-status.invalid {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.validation-blockers,
.validation-warnings,
.validation-recommendations {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.validation-blockers:last-child,
.validation-warnings:last-child,
.validation-recommendations:last-child {
  border-bottom: none;
}

.validation-blockers h3,
.validation-warnings h3,
.validation-recommendations h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.blocker-item,
.warning-item {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
}

.blocker-item.critical {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
}

.warning-item.high {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: #f59e0b;
}

.warning-item.medium {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
}

.blocker-message,
.warning-message {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.blocker-solution {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
}

.warning-conditions {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.recommendation-item {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
}

.recommendation-item.priority-high {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.rec-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rec-icon {
  font-size: 1.2rem;
}

.rec-title {
  font-weight: 700;
  color: var(--text-primary);
}

.rec-description {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.rec-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-item {
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .route-planner {
    padding: 1rem;
  }
  
  .planner-content {
    grid-template-columns: 1fr;
  }
  
  .planner-header h1 {
    font-size: 2rem;
  }
  
  .input-row {
    flex-direction: column;
  }
  
  .waypoint-input {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .waypoint-input .form-input {
    margin-right: 0;
  }
  
  .route-alternatives {
    padding: 1rem;
    margin-top: 2rem;
  }
  
  .routes-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .route-option {
    padding: 1rem;
  }
  
  .route-metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .alternatives-footer {
    flex-direction: column;
    align-items: center;
  }
}
.route-history {
  padding: 2rem;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-jupiter);
}

.history-header {
  text-align: center;
  margin-bottom: 2rem;
}

.history-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.history-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  padding: 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent-gold);
  line-height: 1;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.history-content {
  max-width: 1200px;
  margin: 0 auto;
}

.filters-section {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.filters-header h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.filters-controls {
  display: flex;
  gap: 2rem;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-select {
  padding: 0.5rem;
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.export-btn {
  margin-left: auto;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

.trips-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trip-item {
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.trip-item:hover {
  transform: translateY(-2px);
}

.trip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.trip-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.trip-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.trip-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-jupiter);
  border-radius: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.detail-icon {
  font-size: 1.1rem;
}

.detail-label {
  color: var(--text-secondary);
}

.detail-value {
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

.trip-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .filters-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .trip-details {
    grid-template-columns: 1fr;
  }

  .trip-actions {
    flex-direction: column;
  }
}
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-modal {
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  box-shadow: 0 20px 40px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.settings-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--bg-primary), var(--bg-jupiter));
  border-radius: 16px 16px 0 0;
}

.settings-header h2 {
  font-size: 1.5rem;
}

.close-btn {
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
}

.close-btn:hover {
  color: var(--text-primary);
  background: rgba(196, 147, 75, 0.1);
}

.settings-content {
  display: flex;
  flex: 1 1;
  min-height: 400px;
}

.settings-nav {
  width: 150px;
  background: var(--bg-jupiter);
  border-right: 400px solid var(--border-primary);
  padding: 1rem 0;
}

.nav-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: rgba(196, 147, 75, 0.1);
  color: var(--text-primary);
}

.nav-btn.active {
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  font-weight: 600;
}

.settings-form {
  flex: 1 1;
  padding: 2rem;
  overflow-y: auto;
}

.form-section h3 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-row {
  display: flex;
  gap: 1rem;
}

.input-row .input-group {
  flex: 1 1;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(196, 147, 75, 0.1);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.checkbox-label:hover {
  background: rgba(196, 147, 75, 0.05);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-gold);
}

.settings-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-primary);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  background: var(--bg-jupiter);
  border-radius: 0 0 16px 16px;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: var(--border-primary);
  color: var(--button-text);
}

.gradient-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Styles for NA Height Validation */
.height-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.units-toggle-small {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
}

.units-toggle-small:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: scale(1.05);
}

.height-conversion {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 5px;
  font-weight: 600;
}

.height-validation {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.validation-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.validation-message.success {
  color: #22c55e;
}

.validation-message.warning {
  color: #f59e0b;
}

.validation-message.critical {
  color: #ef4444;
  font-weight: 700;
}

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

.warning-text {
  flex: 1 1;
}

.height-recommendation {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  color: #d97706;
  font-size: 0.85rem;
  font-weight: 600;
}

.na-standard {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  color: #6366f1;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .settings-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .settings-content {
    flex-direction: column;
  }
  
  .settings-nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }
  
  .nav-btn {
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
  
  .settings-form {
    padding: 1rem;
  }
  
  .input-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .height-input-container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .units-toggle-small {
    align-self: flex-start;
    min-width: 60px;
  }

}

/* ============================================================
 * Clearance Validation Styles (TRIGGER 09)
 * ============================================================ */

.form-input.input-error {
  border-color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.1);
}

.clearance-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(231, 76, 60, 0.15);
  border-radius: 6px;
  border-left: 3px solid #e74c3c;
}

.clearance-error .error-icon {
  font-size: 16px;
}

.clearance-error .error-text {
  font-size: 12px;
  color: #e74c3c;
  font-weight: 600;
}

.clearance-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 193, 7, 0.15);
  border-radius: 6px;
  border-left: 3px solid #ffc107;
}

.clearance-warning .warning-icon {
  font-size: 14px;
}

.clearance-warning .warning-text {
  font-size: 12px;
  color: #ffc107;
}

.clearance-policy-info {
  margin-top: 16px;
  padding: 12px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.clearance-policy-info .policy-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.clearance-policy-info .policy-limits {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.clearance-policy-info .policy-blocked-warning {
  margin-top: 10px;
  padding: 8px;
  background: rgba(231, 76, 60, 0.2);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #e74c3c;
  text-align: center;
}
.maps-downloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.maps-downloader-modal {
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  box-shadow: 0 20px 40px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.maps-header {
  padding: 1.5rem;
  border-bottom: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--bg-primary), var(--bg-jupiter));
}

.maps-header h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  color: var(--text-primary);
  background: rgba(196, 147, 75, 0.1);
}

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

/* Providers Section */
.providers-section {
  margin-bottom: 2rem;
}

.providers-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.provider-card {
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-jupiter);
  transition: all 0.2s ease;
}

.provider-card.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

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

.provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.provider-name {
  font-weight: 600;
  color: var(--text-primary);
}

.provider-status {
  font-size: 0.9rem;
  font-weight: 500;
}

.provider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.provider-cost {
  color: var(--text-secondary);
}

.api-key-input {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-size: 0.8rem;
  width: 120px;
}

/* Map Type Section */
.map-type-section {
  margin-bottom: 2rem;
}

.map-type-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.map-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.map-type-card {
  padding: 1.5rem;
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-jupiter);
}

.map-type-card.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.map-type-card.inactive {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
  opacity: 0.7;
}

.map-type-card:hover.active {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.map-type-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.map-type-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.map-type-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.map-type-card.active .map-type-desc {
  color: #059669;
}

.map-type-card.inactive .map-type-desc {
  color: #dc2626;
}

/* Region Section */
.region-section {
  margin-bottom: 2rem;
}

.region-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.region-tabs {
  display: flex;
  gap: 1rem;
}

.region-tab {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.region-tab:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.region-tab.active {
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  border-color: var(--accent-gold);
}

/* Maps Section */
.maps-section {
  margin-bottom: 2rem;
}

.maps-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.maps-controls h3 {
  color: var(--text-primary);
  margin: 0;
}

.selection-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-all-btn, .clear-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.select-all-btn:hover, .clear-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.selection-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(196, 147, 75, 0.05);
}

.map-item {
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.map-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.map-item.selected {
  border-color: var(--accent-gold);
  background: rgba(196, 147, 75, 0.1);
}

.map-item.downloaded {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.map-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.downloaded-badge {
  font-size: 1.2rem;
}

.download-progress {
  margin-top: 0.5rem;
}

.progress-bar {
  height: 4px;
  background: rgba(196, 147, 75, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Download Section */
.download-section {
  border-top: 2px solid var(--border-primary);
  padding-top: 2rem;
}

.download-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.download-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-soft);
}

.download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.download-info {
  background: rgba(196, 147, 75, 0.1);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
}

.download-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Downloaded Section */
.downloaded-section {
  border-top: 2px solid var(--border-primary);
  padding-top: 2rem;
}

.downloaded-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.downloaded-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.downloaded-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-jupiter);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.downloaded-name {
  font-weight: 500;
  color: var(--text-primary);
}

.downloaded-region {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.downloaded-size {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.delete-map-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.delete-map-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .maps-downloader-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .providers-grid {
    grid-template-columns: 1fr;
  }
  
  .region-tabs {
    flex-direction: column;
  }
  
  .maps-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .selection-controls {
    justify-content: center;
  }
  
  .maps-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.navigation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 750; /* Offline navigation view - normalized from 3000 */
  animation: fadeIn 0.3s ease;
}

.navigation-modal {
  background: var(--bg-primary);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  width: 95%;
  max-width: 800px;
  max-height: 95vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s ease;
  overflow: hidden;
}

.navigation-header {
  padding: 2rem;
  border-bottom: 3px solid var(--accent-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-jupiter), var(--border-primary));
}

.navigation-header h2 {
  font-size: 2rem;
  color: var(--accent-gold);
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.close-btn {
  background: var(--alert-danger);
  border: none;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

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

/* Cache Status */
.cache-status {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid #22c55e;
  border-radius: 12px;
}

.cache-status h3 {
  color: #22c55e;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.cache-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid #22c55e;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #22c55e;
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Route Setup */
.route-setup h3 {
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.address-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  background: var(--bg-jupiter);
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.address-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 75, 0.2);
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid var(--alert-danger);
  color: var(--alert-danger);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 500;
}

.route-options {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(196, 147, 75, 0.1);
  border: 1px solid var(--accent-gold);
  border-radius: 10px;
}

.route-options h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
}

.truck-specs {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.start-navigation-btn {
  width: 100%;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.start-navigation-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

.start-navigation-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.navigation-info {
  background: rgba(196, 147, 75, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--accent-gold);
}

.navigation-info p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Active Navigation */
.active-navigation {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
  border: 2px solid #22c55e;
  border-radius: 16px;
  padding: 2rem;
}

.navigation-display h3 {
  color: #22c55e;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.route-progress {
  margin-bottom: 2rem;
}

.progress-bar {
  height: 12px;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #22c55e, #16a34a);
  transition: width 0.5s ease;
}

.progress-text {
  font-weight: 600;
  color: #22c55e;
  font-size: 0.9rem;
}

.current-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.status-item {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #22c55e;
  text-align: center;
}

.status-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.status-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #22c55e;
}

.next-instruction {
  background: var(--bg-primary);
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--accent-gold);
  margin-bottom: 2rem;
}

.next-instruction h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

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

.instruction-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.instruction-distance {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.eta-display {
  background: rgba(196, 147, 75, 0.2);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.eta-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.eta-time {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.navigation-controls {
  text-align: center;
}

.stop-navigation-btn {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--alert-danger), #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stop-navigation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Example Destinations */
.example-destinations {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(196, 147, 75, 0.05);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.example-destinations h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.example-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.example-country {
  font-size: 0.9rem;
  line-height: 1.4;
}

.example-country strong {
  color: var(--accent-gold);
  display: inline-block;
  margin-bottom: 0.25rem;
  width: 100px;
}

.example-country span {
  color: var(--text-secondary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .navigation-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .navigation-header {
    padding: 1rem;
  }
  
  .navigation-header h2 {
    font-size: 1.5rem;
  }
  
  .navigation-content {
    padding: 1rem;
  }
  
  .cache-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .truck-specs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .instruction-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
/* 📍 KingRoad GPS - Recent Destinations Styles */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeIn 0.3s ease-out;
}

.recent-destinations-modal {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.4s ease-out;
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0; 
    transform: translateY(-30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Header */
.modal-header {
  padding: 24px 28px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
}

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

.modal-title {
  color: #FFD700;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.destinations-count {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.close-button {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFD700;
  color: #FFD700;
  transform: scale(1.1);
}

/* Search and Filter */
.search-filter-section {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-bar {
  flex: 1 1;
  min-width: 250px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #FFD700;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.category-filter {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
}

.category-filter:focus {
  outline: none;
  border-color: #FFD700;
  background: rgba(255, 255, 255, 0.15);
}

.category-filter option {
  background: #1a1a2e;
  color: #fff;
}

/* Bulk Actions */
.bulk-actions {
  padding: 16px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bulk-select {
  display: flex;
  align-items: center;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  gap: 8px;
  -webkit-user-select: none;
          user-select: none;
}

.checkbox-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.bulk-buttons {
  display: flex;
  gap: 12px;
}

.bulk-delete-btn, .clear-all-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulk-delete-btn {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  color: #dc3545;
}

.bulk-delete-btn:hover {
  background: #dc3545;
  color: #fff;
  transform: translateY(-2px);
}

.clear-all-btn {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
  color: #ffc107;
}

.clear-all-btn:hover {
  background: #ffc107;
  color: #000;
  transform: translateY(-2px);
}

/* Destinations List */
.destinations-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px 28px;
  max-height: 500px;
}

.destinations-list::-webkit-scrollbar {
  width: 6px;
}

.destinations-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb {
  background: #FFD700;
  border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb:hover {
  background: #FFA500;
}

.loading-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.loading-spinner {
  font-size: 3rem;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
  color: #FFD700;
}

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

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

/* Destination Card */
.destination-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.destination-card:hover {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.card-content {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.destination-select {
  margin-top: 4px;
}

.destination-info {
  flex: 1 1;
}

.destination-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.category-icon {
  font-size: 1.2rem;
}

.destination-name {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.favorite-star {
  color: #FFD700;
  font-size: 1.1rem;
}

.destination-address {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.destination-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.status-badge, .frequency-badge, .date-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-entered {
  background: rgba(108, 117, 125, 0.3);
  color: #6c757d;
}

.status-navigated {
  background: rgba(0, 123, 255, 0.3);
  color: #007bff;
}

.status-completed {
  background: rgba(40, 167, 69, 0.3);
  color: #28a745;
}

.status-cancelled {
  background: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

.frequency-badge {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
}

.date-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.coordinates {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-family: monospace;
}

.destination-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  transition: all 0.3s ease;
}

/* Desktop: hover effect */
@media (hover: hover) and (pointer: fine) {
  .destination-actions {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
  }

  .destination-card:hover .destination-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Mobile/Tablet: expandable menu system */
@media (hover: none) or (pointer: coarse) {
  .destination-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
  }
  
  .mobile-only {
    display: flex;
  }
  
  .actions-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: absolute;
    right: 0;
    top: 100%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 0;
    z-index: 10;
  }
  
  .destination-actions.expanded .actions-group {
    max-height: 200px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .destination-actions {
    position: relative;
  }
}

/* Desktop: hide menu button */
@media (hover: hover) and (pointer: fine) {
  .mobile-only {
    display: none;
  }
  
  .actions-group {
    display: contents;
  }
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.action-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.favorite-btn {
  border-color: rgba(255, 215, 0, 0.6);
  color: rgba(255, 215, 0, 0.8);
}

.favorite-btn.favorited {
  border-color: #FFD700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.2);
}

.favorite-btn:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: #FFD700;
  color: #FFD700;
}

.save-btn {
  border-color: rgba(76, 175, 80, 0.6);
  color: rgba(76, 175, 80, 0.9);
}

.save-btn:hover {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
}

.share-btn {
  border-color: rgba(33, 150, 243, 0.6);
  color: rgba(33, 150, 243, 0.9);
}

.share-btn:hover {
  background: rgba(33, 150, 243, 0.3);
  border-color: #2196F3;
  color: #2196F3;
}

.delete-btn {
  border-color: rgba(220, 53, 69, 0.6);
  color: rgba(220, 53, 69, 0.8);
}

.delete-btn:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
  color: #dc3545;
}

.navigate-btn {
  border-color: rgba(255, 193, 7, 0.6);
  color: rgba(255, 193, 7, 0.9);
}

.navigate-btn:hover {
  background: rgba(255, 193, 7, 0.3);
  border-color: #FFC107;
  color: #FFC107;
}

.menu-toggle-btn {
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  letter-spacing: 1px;
}

.menu-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  color: #fff;
}

/* Delete Confirmation Modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Delete confirm overlay - normalized from 1100 */
}

.delete-confirm-modal {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 16px;
  border: 2px solid rgba(220, 53, 69, 0.5);
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease-out;
}

.delete-confirm-modal h3 {
  color: #dc3545;
  margin-bottom: 16px;
  font-size: 1.4rem;
}

.delete-confirm-modal p {
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.5;
}

.warning-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-style: italic;
}

.confirm-buttons {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  justify-content: center;
}

.cancel-btn, .confirm-delete-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cancel-btn {
  background: rgba(108, 117, 125, 0.2);
  border-color: #6c757d;
  color: #6c757d;
}

.cancel-btn:hover {
  background: #6c757d;
  color: #fff;
}

.confirm-delete-btn {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  color: #dc3545;
}

.confirm-delete-btn:hover {
  background: #dc3545;
  color: #fff;
}

/* Footer */
.modal-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.footer-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .recent-destinations-modal {
    width: 95%;
    max-height: 95vh;
    margin: 20px;
  }
  
  .modal-header {
    padding: 20px;
  }
  
  .modal-title {
    font-size: 1.5rem;
  }
  
  .search-filter-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-bar, .category-filter {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }
  
  .bulk-actions {
    padding: 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .destinations-list {
    padding: 16px 20px;
  }
  
  .card-content {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .destination-actions {
    flex-direction: row;
    align-self: center;
  }
  
  .destination-meta {
    justify-content: center;
    text-align: center;
  }
  
  .confirm-buttons {
    flex-direction: column;
  }
}
/* POI Filter Settings Component */
.poi-filter-settings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1A1A1A;
  z-index: 1000;
  overflow-y: auto;
  color: white;
}

/* Header */
.poi-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 1px solid #3A3A3A;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.poi-filter-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.back-button,
.save-button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button {
  background: transparent;
  color: #4A90E2;
}

.back-button:hover {
  background: rgba(74, 144, 226, 0.1);
}

.save-button {
  background: #4A90E2;
  color: white;
}

.save-button:hover {
  background: #357ABD;
}

.save-button:active {
  background: #2868A8;
}

/* User Context Section */
.user-context {
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 1px solid #3A3A3A;
}

.context-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.context-label {
  font-size: 14px;
  color: #B0B0B0;
}

.context-value {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

/* Show All Toggle */
.show-all-toggle {
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 2px solid #4A90E2;
  margin-bottom: 8px;
}

.toggle-container {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.toggle-container input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-right: 400px;
  cursor: pointer;
}

.toggle-label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.toggle-icon {
  font-size: 20px;
  margin-right: 400px;
}

/* POI Sections */
.poi-sections {
  padding: 16px;
}

.poi-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #3A3A3A;
}

.section-icon {
  font-size: 20px;
}

.section-title {
  flex: 1 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.section-count {
  font-size: 14px;
  color: #B0B0B0;
}

/* Category List */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  background: #2A2A2A;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-user-select: none;
          user-select: none;
}

.category-item:hover {
  background: #333333;
}

.category-item.active {
  background: rgba(74, 144, 226, 0.15);
  border: 1px solid #4A90E2;
}

/* Custom Checkbox */
.category-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.category-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.checkmark {
  width: 24px;
  height: 24px;
  background: #3A3A3A;
  border: 2px solid #4A90E2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.category-checkbox input[type="checkbox"]:checked ~ .checkmark {
  background: #4A90E2;
}

.category-checkbox input[type="checkbox"]:checked ~ .checkmark::after {
  content: '✓';
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* Category Icon */
.category-icon {
  font-size: 28px;
  min-width: 40px;
  text-align: center;
}

/* Category Info */
.category-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-label {
  font-size: 16px;
  font-weight: 500;
  color: white;
  line-height: 1.2;
}

.category-description {
  font-size: 12px;
  color: #B0B0B0;
  line-height: 1.3;
}

/* Footer */
.poi-filter-footer {
  padding: 16px;
  background: #2A2A2A;
  border-top: 1px solid #3A3A3A;
}

.info-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 8px;
  border-left: 3px solid #4A90E2;
}

.info-icon {
  font-size: 20px;
  margin-top: 2px;
}

.info-text {
  flex: 1 1;
  font-size: 14px;
  color: #B0B0B0;
  line-height: 1.4;
}

/* Loading State */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 16px;
  color: #B0B0B0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .poi-filter-header h2 {
    font-size: 18px;
  }

  .context-value {
    font-size: 14px;
  }

  .category-item {
    min-height: 52px;
  }

  .category-icon {
    font-size: 24px;
    min-width: 36px;
  }

  .category-label {
    font-size: 15px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .category-item,
  .back-button,
  .save-button,
  .checkmark {
    transition: none;
  }
}

/* Focus States for Keyboard Navigation */
.back-button:focus,
.save-button:focus,
.toggle-container:focus-within,
.category-item:focus-within {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* ============================================================
 * Gamification Badge CSS
 * ABSOLUTE LAW: MUST stay inside the USEFUL AREA
 * ============================================================ */

/* Compact Badge */
.gamification-badge {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 850;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gamification-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.gamification-badge.top-right {
  /* Positioned more to the left to not interfere */
  top: 100px;
  right: calc(350px + 150px) !important; /* Mais para esquerda */
}

.gamification-badge.top-left {
  top: 80px;
  left: 20px;
}

.gamification-badge.hover-only {
  opacity: 0.6;
}

.gamification-badge.hover-only:hover {
  opacity: 1;
}

.gamification-badge .level-icon {
  font-size: 20px;
}

.gamification-badge .level-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.gamification-badge .points {
  font-size: 0.75rem;
  color: #ffd700;
  font-weight: 500;
}

/* New Badge Popup */
.new-badge-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  animation: badge-popup 0.5s ease-out;
}

@keyframes badge-popup {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.badge-earned {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.4);
}

.badge-earned .badge-icon {
  font-size: 48px;
}

.badge-earned .badge-info {
  display: flex;
  flex-direction: column;
}

.badge-earned .badge-title {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.badge-earned .badge-name {
  font-size: 1.3rem;
  color: #1a1a2e;
  font-weight: 700;
}

/* Expanded Panel Overlay */
.gamification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gamification-panel {
  position: relative;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

.gamification-panel .close-btn {
  position: absolute;
  top: 16px;
  right: 400px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}

.gamification-panel .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Level Section */
.level-section {
  margin-bottom: 24px;
}

.current-level {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.level-icon-large {
  font-size: 48px;
}

.level-details {
  display: flex;
  flex-direction: column;
}

.level-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.level-name-large {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffd700;
}

.level-progress {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px;
}

.level-progress .progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.level-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ffaa00);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.level-progress .progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.next-level-hint {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Stats Section */
.stats-section {
  margin-bottom: 24px;
}

.stats-section h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* Badges Section */
.badges-section h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 12px;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.badge-item:hover {
  transform: scale(1.05);
}

.badge-item.locked {
  opacity: 0.4;
  filter: grayscale(100%);
}

.badge-item.earned {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.badge-item .badge-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.badge-item .badge-name {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* Responsive */
@media (max-width: 500px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .badges-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .gamification-panel {
    padding: 16px;
  }
}

/* 🚨 KingRoad GPS - Direction Alerts & Chevron System */

.direction-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: alertFadeIn 0.5s ease-out;
}

.direction-alert.prepare {
  opacity: 0.4;
}

.direction-alert.warning {
  opacity: 0.7;
}

.direction-alert.critical {
  opacity: 0.95;
}

/* CHEVRON GIGANTE - Toma a Tela Toda */
.chevron-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}

/* Chevron Pattern - Divisa de Sargento Gigante */
.chevron-pattern {
  font-size: 25vw; /* 25% da largura da viewport - GIGANTE */
  font-weight: 900;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.6),
    0 0 60px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
}

/* ANIMATIONS BY DIRECTION */

/* Exit RIGHT - Chevron runs LEFT → RIGHT */
.chevron-overlay.right .chevron-pattern {
  color: #22c55e; /* Verde */
  animation: slideRightChevron 2s ease-in-out infinite;
}

.chevron-overlay.right.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: slideRightChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.right.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: slideRightChevron 0.6s ease-in-out infinite;
}

/* Exit LEFT - Chevron runs RIGHT → LEFT */
.chevron-overlay.left .chevron-pattern {
  color: #22c55e; /* Verde */
  animation: slideLeftChevron 2s ease-in-out infinite;
}

.chevron-overlay.left.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: slideLeftChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.left.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: slideLeftChevron 0.6s ease-in-out infinite;
}

/* Seguir em FRENTE - Chevron pulsa no centro */
.chevron-overlay.straight .chevron-pattern {
  color: #3b82f6; /* Azul */
  animation: pulseStraightChevron 2s ease-in-out infinite;
}

.chevron-overlay.straight.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: pulseStraightChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.straight.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: pulseStraightChevron 0.6s ease-in-out infinite;
}

/* KEYFRAMES - CHEVRON CORRENDO PELA TELA */

/* Direita: Esquerda → Direita */
@keyframes slideRightChevron {
  0% {
    transform: translateX(-120vw);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(120vw);
    opacity: 0;
  }
}

/* Esquerda: Direita → Esquerda */
@keyframes slideLeftChevron {
  0% {
    transform: translateX(120vw) scaleX(-1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-120vw) scaleX(-1);
    opacity: 0;
  }
}

/* Frente: Pulsar no centro */
@keyframes pulseStraightChevron {
  0%, 100% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) rotate(0deg);
    opacity: 1;
  }
}

/* EXIT INFORMATION */
.exit-info {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  z-index: 450; /* Direction distance display - normalized from 1001 */
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 30px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.distance-display {
  font-size: 4rem;
  font-weight: 900;
  color: #fbbf24; /* Dourado */
  text-shadow: 
    0 0 10px rgba(251, 191, 36, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.exit-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}

.exit-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* BARRA DE PROGRESSO */
.alert-progress {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* MODO NOTURNO - Mais Intenso */
.direction-alert.night-mode .chevron-pattern {
  font-size: 30vw; /* Even larger at night */
  text-shadow: 
    0 0 30px rgba(255, 255, 255, 1),
    0 0 60px rgba(255, 255, 255, 0.8),
    0 0 90px rgba(255, 255, 255, 0.6);
  filter: 
    drop-shadow(0 0 50px rgba(255, 255, 255, 0.9))
    brightness(1.3)
    contrast(1.2);
}

.direction-alert.night-mode .exit-info {
  background: rgba(0, 0, 0, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(255, 255, 255, 0.3);
}

.direction-alert.night-mode .distance-display {
  font-size: 5rem;
  text-shadow: 
    0 0 20px rgba(251, 191, 36, 1),
    0 0 40px rgba(251, 191, 36, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.5);
}

/* MODO DIURNO - Mais Sutil */
.direction-alert.day-mode .chevron-overlay {
  background: rgba(0, 0, 0, 0.05);
}

.direction-alert.day-mode .chevron-pattern {
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .chevron-pattern {
    font-size: 35vw; /* Ainda maior no mobile */
  }
  
  .direction-alert.night-mode .chevron-pattern {
    font-size: 40vw;
  }
  
  .exit-info {
    top: 15%;
    padding: 15px 20px;
  }
  
  .distance-display {
    font-size: 3rem;
  }
  
  .exit-name {
    font-size: 1.4rem;
  }
  
  .exit-description {
    font-size: 1rem;
  }
}

/* ENTRY ANIMATION */
@keyframes alertFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* SPECIAL EFFECTS FOR CRITICAL ALERTS */
.direction-alert.critical .chevron-overlay {
  animation: criticalPulse 0.5s ease-in-out infinite alternate;
}

@keyframes criticalPulse {
  0% {
    background: rgba(239, 68, 68, 0.1);
  }
  100% {
    background: rgba(239, 68, 68, 0.2);
  }
}
/* 🚛 KingRoad GPS - Smart Reroute Alert Styles */

.smart-reroute-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 850; /* Smart reroute alert - normalized from 2000 */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.smart-reroute-alert {
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  color: white;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(251, 191, 36, 0.3);
  animation: slideUp 0.4s ease-out;
}

/* Header */
.alert-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
  color: #000;
  border-radius: 17px 17px 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alert-icon {
  font-size: 2.5rem;
  animation: pulse 2s ease-in-out infinite;
}

.alert-title h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.countdown {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
  animation: countdownPulse 1s ease-in-out infinite;
}

/* Strategy Sections */
.reroute-strategy {
  padding: 1.5rem;
}

.strategy-section {
  margin-bottom: 1.5rem;
}

.strategy-section h3 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid rgba(251, 191, 36, 0.3);
  padding-bottom: 0.5rem;
}

/* Return Point */
.return-point {
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  padding: 1rem;
}

.point-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.point-distance {
  font-size: 0.9rem;
  color: #a1a1aa;
  margin-bottom: 0.5rem;
}

.point-instructions {
  font-size: 0.9rem;
  color: #e4e4e7;
  font-style: italic;
}

.no-return-point {
  background: rgba(245, 158, 11, 0.1);
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 1rem;
  color: #f59e0b;
  font-weight: 600;
}

/* Phases */
.phases {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.phase {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  padding: 1rem;
}

.phase-1 {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}

.phase-2 {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.1);
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.phase-number {
  background: var(--accent-gold);
  color: #000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.phase-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.phase-description {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.phase-time {
  font-size: 0.8rem;
  color: var(--accent-gold);
  font-weight: 600;
}

/* Impact Grid */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.impact-item {
  background: rgba(99, 102, 241, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.impact-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.impact-label {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin-bottom: 0.25rem;
}

.impact-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
}

/* Safety Philosophy */
.safety-philosophy {
  background: rgba(251, 191, 36, 0.1);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.philosophy-icon {
  font-size: 2rem;
}

.philosophy-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #f1f5f9;
}

.philosophy-text strong {
  color: var(--accent-gold);
}

/* Action Buttons */
.alert-actions {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 1rem;
  justify-content: stretch;
}

.btn-accept,
.btn-dismiss {
  flex: 1 1;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-accept {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-accept:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.btn-dismiss {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-dismiss:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

/* Immediate Instructions */
.immediate-instructions {
  background: rgba(15, 23, 42, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  margin-top: 1rem;
}

.immediate-instructions h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.instruction-step {
  background: var(--accent-gold);
  color: #000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.instruction-text {
  font-size: 0.9rem;
  color: #e4e4e7;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(50px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes countdownPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
  .smart-reroute-alert {
    width: 95%;
    max-height: 95vh;
  }
  
  .alert-header {
    padding: 1rem;
  }
  
  .alert-icon {
    font-size: 2rem;
  }
  
  .alert-title h2 {
    font-size: 1.2rem;
  }
  
  .reroute-strategy {
    padding: 1rem;
  }
  
  .impact-grid {
    grid-template-columns: 1fr;
  }
  
  .alert-actions {
    flex-direction: column;
    padding: 1rem;
  }
  
  .safety-philosophy {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}
/* 🚫 KingRoad GPS - Prohibited Exit Alert Styles */

.prohibited-exit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Do not block interactions */
  z-index: 880; /* Prohibited exit alert - normalized from 2900 */
}

/* CONTEXTUAL ALERT POSITIONING */

/* Exit to the RIGHT - Alert in the upper right corner */
.alert-position-right {
  position: absolute;
  top: 8%;
  right: 3%;
  transform: none;
}

/* Exit to the LEFT - Alert in the upper left corner */
.alert-position-left {
  position: absolute;
  top: 8%;
  left: 3%;
  transform: none;
}

/* Continue STRAIGHT - Alert at the top center */
.alert-position-center {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

/* MAIN PROHIBITED EXIT ALERT */
.prohibited-exit-alert {
  /* CRITICAL: Position at BOTTOM to never block navigation instructions */
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;  /* Lower z-index - navigation has priority */
  
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.95), /* Pink */
    rgba(255, 20, 147, 0.90)   /* Darker pink */
  );
  border: 4px solid #FF1493;
  border-radius: 20px;
  box-shadow: 
    0 15px 40px rgba(255, 20, 147, 0.4),
    0 0 30px rgba(255, 105, 180, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: slideUpAlert 0.5s ease-out, alertPulse 2s ease-in-out infinite;
  width: 320px;
  padding: 16px;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes slideUpAlert {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.alert-close {
  position: absolute;
  top: 8px;
  right: 400px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.alert-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Auto-hide progress bar */
.prohibited-exit-alert .auto-hide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.prohibited-exit-alert .auto-hide-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: #ffffff;
  animation: progressBar 4s linear;
}

/* PULSING RED X ICON */
.prohibited-x-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem auto;
  background: radial-gradient(circle, #FF0000, #CC0000);
  border-radius: 50%;
  box-shadow: 
    0 8px 25px rgba(255, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.x-symbol {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  animation: xPulse 1s ease-in-out infinite;
}

.pulse-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid rgba(255, 0, 0, 0.6);
  border-radius: 50%;
  animation: pulseRing 2s ease-in-out infinite;
}

/* INFORMATION PANEL */
.exit-info-panel {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  color: white;
}

.exit-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exit-icon {
  font-size: 1.5rem;
}

.exit-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prohibition-info {
  margin-bottom: 1rem;
}

.parkway-name {
  font-size: 1rem;
  font-weight: 700;
  color: #FFE4E1;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.prohibition-reason {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.distance-info {
  font-size: 0.85rem;
  color: #FFFF99;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.warning-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.fine-warning {
  font-size: 0.8rem;
  color: #FFFF99;
  font-weight: 600;
}

.severity-badge {
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* DIRECTION INDICATOR */
.direction-indicator {
  position: absolute;
  top: -15px;
  right: -15px;
  background: rgba(255, 215, 0, 0.9);
  border: 3px solid #FFD700;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
  animation: directionPulse 1.5s ease-in-out infinite;
}

.direction-arrow {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* PREVENTIVE ALERTS (HIGH SPEED) */
.preventive-alert {
  background: linear-gradient(135deg, 
    rgba(255, 165, 0, 0.9), /* Orange */
    rgba(255, 140, 0, 0.85)
  );
  border: 3px solid #FF8C00;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 
    0 10px 25px rgba(255, 140, 0, 0.3),
    0 0 20px rgba(255, 165, 0, 0.4);
  animation: preventiveEntrance 0.4s ease-out, preventivePulse 1.5s ease-in-out infinite;
  width: 220px;
}

.preventive-x {
  font-size: 2rem;
  font-weight: 900;
  color: #FF0000;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: xPulse 1s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

.preventive-info {
  text-align: center;
  color: white;
}

.preventive-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.25rem;
}

.preventive-distance {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFF99;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* HIGH SPEED INDICATOR */
.high-speed-indicator {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 20, 60, 0.9);
  border: 2px solid #DC143C;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  text-align: center;
  color: white;
  animation: speedIndicatorPulse 2s ease-in-out infinite;
  box-shadow: 0 8px 20px rgba(220, 20, 60, 0.4);
}

.speed-warning {
  font-size: 0.9rem;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.25rem;
}

.preventive-mode {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* ANIMATIONS */

@keyframes alertEntrance {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alertPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 15px 40px rgba(255, 20, 147, 0.4),
      0 0 30px rgba(255, 105, 180, 0.6);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 
      0 20px 50px rgba(255, 20, 147, 0.6),
      0 0 40px rgba(255, 105, 180, 0.8);
  }
}

@keyframes xPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes directionPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes preventiveEntrance {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preventivePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes speedIndicatorPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  .prohibited-exit-alert {
    width: 280px;
  }
  
  .alert-position-right {
    right: 2%;
  }
  
  .alert-position-left {
    left: 2%;
  }
  
  .prohibited-x-icon {
    width: 60px;
    height: 60px;
  }
  
  .x-symbol {
    font-size: 2rem;
  }
  
  .exit-name {
    font-size: 1rem;
  }
  
  .preventive-alert {
    width: 180px;
  }
  
  .direction-indicator {
    width: 40px;
    height: 40px;
    top: -10px;
    right: -10px;
  }
  
  .direction-arrow {
    font-size: 1.1rem;
  }
}

/* NIGHT MODE - More intense */
@media (prefers-color-scheme: dark) {
  .prohibited-exit-alert {
    box-shadow: 
      0 20px 50px rgba(255, 20, 147, 0.6),
      0 0 40px rgba(255, 105, 180, 0.8),
      inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }
  
  .prohibited-x-icon {
    box-shadow: 
      0 10px 30px rgba(255, 0, 0, 0.7),
      inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }
  
  .preventive-alert {
    box-shadow: 
      0 15px 35px rgba(255, 140, 0, 0.5),
      0 0 30px rgba(255, 165, 0, 0.6);
  }
}
/* ============================================================
 * KingRoad GPS - Current Road Display (Trucker Path Style)
 * ABSOLUTE LAW: Centered in useful area, above the footer
 * Shows the current street/road where the truck is
 * TomTom-style: Semi-transparent matching sidebar body
 * ============================================================ */

.current-road-display {
  position: fixed;
  /* CENTERED horizontally in useful area (excluding sidebar) */
  left: calc((100vw - 350px) / 2);
  left: calc((100vw - var(--sidebar-width, 350px)) / 2);
  transform: translateX(-50%);
  /* Above the footer */
  bottom: calc(75px + 12px);
  bottom: calc(var(--footer-height, 75px) + 12px);
  z-index: 800;
  
  /* TomTom-style: Semi-transparent matching sidebar body (65% opacity) */
  background: rgba(34, 40, 49, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 8px 16px;
  
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  
  min-width: 160px;
  max-width: 360px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.current-road-display.loading { opacity: 0.7; }

.road-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

/* Main line: Street/road name + direction */
.highway-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
}

.highway-number {
  font-size: 16.5px; /* 15px + 10% = 16.5px */
  font-weight: 700;
  color: #FFFFFF;
}

.direction {
  font-size: 15.4px; /* 14px + 10% = 15.4px */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
}

/* Secondary line: Neighborhood (when available) */
.neighborhood-line { 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.4px; /* 14px + 10% */
  color: #FFFFFF;
}

.neighborhood { 
  font-weight: 700; 
  color: #FFFFFF; 
  font-size: 15.4px; /* 14px + 10% */
}

/* Tertiary line: City + State */
.location-line {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.4px; /* 14px + 10% */
  color: #FFFFFF;
  gap: 4px;
}

.city { 
  font-weight: 700; 
  color: #FFFFFF; 
  font-size: 15.4px; /* 14px + 10% */
}

.region { 
  font-weight: 700; 
  color: #FFFFFF; 
  font-size: 15.4px; /* 14px + 10% */
}

/* No separator between city and state - just space */
.location-line .city::after { 
  content: ''; 
}

.loading-text, .no-data { 
  font-size: 13.2px; /* 12px + 10% */
  color: rgba(255, 255, 255, 0.7); 
}

.vehicle-indicator, .current-road-display::before { display: none; }

@media (max-width: 768px) {
  .current-road-display {
    bottom: calc(70px + 10px);
    bottom: calc(var(--footer-height, 70px) + 10px);
    left: calc((100vw - 350px) / 2);
    left: calc((100vw - var(--sidebar-width, 350px)) / 2);
    transform: translateX(-50%);
    padding: 6px 12px;
    min-width: 140px;
    max-width: 280px;
  }
  
  .highway-number {
    font-size: 15.4px; /* 14px + 10% */
  }
  
  .location-line, .city, .region {
    font-size: 12.1px; /* 11px + 10% */
  }
}

/* KingRoad GPS - Custom POI Creator */

.add-custom-poi-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Add custom POI overlay - normalized from 10000 */
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.add-custom-poi-modal {
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.98), 
    rgba(17, 17, 35, 0.98)
  );
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.3);
  color: white;
  animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.title-icon {
  font-size: 1.5rem;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Steps Indicator */
.steps-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: black;
}

.step-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.step.active .step-label {
  color: var(--accent-gold);
}

/* Content */
.modal-content {
  padding: 24px;
  min-height: 300px;
}

.step-content h3 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 20px;
  font-weight: 700;
}

/* Form */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #E0E0E0;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.05);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Star Rating */
.rating-stars {
  display: flex;
  gap: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.2s ease;
}

.star-btn:hover,
.star-btn.active {
  opacity: 1;
  transform: scale(1.1);
}

/* Icon Preview */
.icon-preview-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.preview-label {
  font-weight: 600;
  color: var(--accent-gold);
}

.preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.icon-preview {
  font-size: 1.8rem;
  text-align: center;
}

.icon-preview.emoji-preview {
  font-size: 2rem;
}

/* Icon Type Selector */
.icon-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.type-btn {
  flex: 1 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

.type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.type-btn.active {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Shape and Color Selectors */
.shape-color-selector {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selector-section label {
  margin-bottom: 12px;
}

.shapes-grid,
.colors-grid,
.emojis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.shape-btn,
.color-btn,
.emoji-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.shape-btn {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.color-btn {
  border-radius: 50%;
}

.emoji-btn {
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.4rem;
}

.shape-btn:hover,
.color-btn:hover,
.emoji-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent-gold);
}

.shape-btn.active,
.color-btn.active,
.emoji-btn.active {
  border-color: var(--accent-gold);
  border-width: 3px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Emoji selector */
.emoji-selector label {
  margin-bottom: 12px;
}

.emojis-grid {
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
}

.emojis-grid .emoji-btn {
  width: 45px;
  height: 45px;
  font-size: 1.6rem;
}

/* Final Preview */
.final-preview {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.preview-poi-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.poi-icon {
  flex-shrink: 0;
}

.poi-details {
  flex: 1 1;
}

.poi-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.poi-category {
  font-size: 0.85rem;
  color: #4CAF50;
  margin-bottom: 6px;
  font-weight: 600;
}

.poi-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.poi-location {
  font-size: 0.8rem;
  color: #FF9800;
  font-family: monospace;
  margin-bottom: 6px;
}

.poi-rating {
  font-size: 0.9rem;
}

/* Footer */
.modal-footer {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 12px;
}

.footer-spacer {
  flex: 1 1;
}

.btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold), #DAA520);
  color: black;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

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

/* Custom Scrollbar */
.add-custom-poi-modal::-webkit-scrollbar {
  width: 6px;
}

.add-custom-poi-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.add-custom-poi-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 3px;
}

/* Responsiveness */
@media (max-width: 768px) {
  .add-custom-poi-modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 16px;
  }
  
  .steps-indicator {
    padding: 16px;
    gap: 16px;
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  
  .step-label {
    font-size: 0.7rem;
  }
  
  .shapes-grid,
  .colors-grid {
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
  }
  
  .shape-btn,
  .color-btn,
  .emoji-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  .emojis-grid .emoji-btn {
    width: 40px;
    height: 40px;
  }
}
/* 🚛 KingRoad GPS - Smart POI Display for Trucks */

.smart-poi-display {
  position: fixed;
  right: 400px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95), 
    rgba(17, 17, 35, 0.95)
  );
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  padding: 16px;
  z-index: 998;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 215, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Header */
.smart-poi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

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

.title-icon {
  font-size: 1.2rem;
}

.title-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.direction-badge {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.direction-badge[data-direction="northbound"] {
  background: linear-gradient(135deg, #2196F3, #1976D2);
}

.direction-badge[data-direction="southbound"] {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.direction-badge[data-direction="eastbound"] {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.direction-badge[data-direction="westbound"] {
  background: linear-gradient(135deg, #F44336, #D32F2F);
}

.poi-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.stat {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.stat.visited {
  color: #4CAF50;
  font-weight: 600;
}

.stat.custom {
  color: #FFD700;
  font-weight: 600;
}

/* POI Controls */
.poi-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.control-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  font-weight: 600;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.add-poi-btn {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  color: var(--accent-gold);
}

.add-poi-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  transform: translateY(-1px);
}

.view-mode-btn.all {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.view-mode-btn.favorites_only {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  color: var(--accent-gold);
}

.view-mode-btn.hide_all {
  background: rgba(244, 67, 54, 0.1);
  border-color: rgba(244, 67, 54, 0.3);
  color: #F44336;
}

/* Processing indicator */
.processing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 152, 0, 0.2);
  border-radius: 12px;
  margin-bottom: 16px;
  color: #FF9800;
  font-size: 0.9rem;
}

.processing-icon {
  animation: spin 1s linear infinite;
}

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

/* Lista de POIs */
.smart-poi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-pois {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-secondary);
  font-style: italic;
}

.no-pois-icon {
  font-size: 2rem;
  opacity: 0.5;
}

/* Item de POI */
.smart-poi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.smart-poi-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-2px);
}

.smart-poi-item.visited {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.3);
}

.smart-poi-item[data-side="left"] {
  border-left: 4px solid #4CAF50;
}

.smart-poi-item[data-side="right"] {
  border-left: 4px solid #2196F3;
}

.smart-poi-item[data-side="behind"] {
  border-left: 4px solid #FF5722;
  opacity: 0.6;
}

/* Brand and side */
.poi-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 40px;
}

.brand-icon {
  font-size: 1.5rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.side-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.custom-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: customPulse 2s ease-in-out infinite;
}

@keyframes customPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* POI Information */
.poi-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poi-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.crossover-badge {
  font-size: 0.8rem;
  opacity: 0.8;
}

.poi-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.poi-distance {
  color: var(--accent-gold);
  font-weight: 600;
}

.poi-amenities {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.truck-parking-indicator {
  font-size: 0.75rem;
  color: #4CAF50;
  font-weight: 600;
  margin-top: 2px;
}

/* Status and actions */
.poi-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}

.visited-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.visited-icon {
  font-size: 1.2rem;
  color: #4CAF50;
}

.unmark-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.unmark-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.detection-radius {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: center;
  opacity: 0.8;
}

/* Visit notifications - USEFUL AREA */
.visit-notifications {
  position: fixed;
  top: calc(89px + 10px);
  top: calc(var(--topbar-height, 89px) + 10px);
  right: calc(350px + 20px);
  right: calc(var(--sidebar-width, 350px) + 20px); /* To the left of the sidebar */
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 450; /* Visit notifications - normalized from 1001 */
}

.visit-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  animation: visitNotificationSlide 0.4s ease-out;
  max-width: 280px;
}

.visit-icon {
  font-size: 1.2rem;
}

.visit-text {
  font-size: 0.9rem;
  font-weight: 600;
}

@keyframes visitNotificationSlide {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Legend */
.poi-legend {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  font-size: 0.7rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Responsiveness */
@media (max-width: 1200px) {
  .smart-poi-display {
    right: 400px;
    width: 280px;
  }
  
  .visit-notifications {
    right: calc(350px + 80px);
    right: calc(var(--sidebar-width, 350px) + 80px);
  }
}

@media (max-width: 768px) {
  .smart-poi-display {
    right: 400px;
    top: 60px;
    transform: none;
    width: 260px;
    max-height: 50vh;
  }
  
  .smart-poi-item {
    padding: 10px;
    gap: 10px;
  }
  
  .poi-name {
    font-size: 0.85rem;
  }
  
  .poi-details {
    font-size: 0.75rem;
  }
  
  .visit-notifications {
    right: 400px;
    top: 10px;
  }
  
  .visit-notification {
    max-width: 250px;
  }
}

/* Custom scrollbar */
.smart-poi-display::-webkit-scrollbar {
  width: 6px;
}

.smart-poi-display::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.smart-poi-display::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 3px;
}

.smart-poi-display::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.6);
}

/* Entrance animations */
.smart-poi-display {
  animation: poiDisplayEntrance 0.5s ease-out;
}

@keyframes poiDisplayEntrance {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.smart-poi-item {
  animation: poiItemEntrance 0.3s ease-out;
}

@keyframes poiItemEntrance {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Special states */
.smart-poi-item.new-visit {
  animation: newVisitHighlight 2s ease-out;
}

@keyframes newVisitHighlight {
  0% {
    background: rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
  }
  100% {
    background: rgba(76, 175, 80, 0.15);
    transform: scale(1);
  }
}

/* Cancel Route Button - TomTom Style */
.cancel-route-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 8px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.cancel-route-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.cancel-route-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

.cancel-route-btn:active {
  transform: scale(0.95);
}

.cancel-x {
  font-size: 32px;
  font-weight: 900;
  color: #D32F2F;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
          user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Button entrance animation */
.cancel-route-container {
  animation: cancelButtonSlideUp 0.4s ease-out;
}

@keyframes cancelButtonSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 🛣️ KingRoad GPS - Roundabout System with Exit Numbering */

.roundabout-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95), 
    rgba(17, 17, 35, 0.95)
  );
  border: 3px solid var(--accent-gold);
  border-radius: 24px;
  padding: 24px;
  z-index: 900; /* Roundabout alert - normalized from 50000 */
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  color: white;
  min-width: 400px;
  max-width: 500px;
  opacity: 0;
  transform: translateX(-50%) translateY(-100px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roundabout-alert.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Roundabout states */
.roundabout-alert.approaching {
  border-color: #FF9800;
}

.roundabout-alert.entering {
  border-color: #FFD700;
  animation: roundaboutPulse 1.5s ease-in-out infinite;
}

.roundabout-alert.exiting {
  border-color: #4CAF50;
}

@keyframes roundaboutPulse {
  0%, 100% {
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 45px rgba(255, 215, 0, 0.6);
  }
}

/* Roundabout header */
.roundabout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.roundabout-icon {
  font-size: 2rem;
  margin-right: 400px;
  animation: rotateIcon 3s linear infinite;
}

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

.roundabout-info {
  flex: 1 1;
}

.roundabout-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.roundabout-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.roundabout-distance {
  text-align: right;
}

.distance-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFD700;
}

.distance-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Roundabout visualization */
.roundabout-visualization {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  position: relative;
  height: 200px;
}

.roundabout-container {
  position: relative;
  width: 180px;
  height: 180px;
}

/* Main roundabout circle */
.roundabout-circle {
  width: 100px;
  height: 100px;
  border: 4px solid var(--accent-gold);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.1), 
    rgba(255, 215, 0, 0.05)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Exit number in the center */
.exit-number-center {
  text-align: center;
}

.exit-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFD700;
  line-height: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.exit-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Entry arrow */
.entry-arrow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow-shaft {
  width: 3px;
  height: 20px;
  background: #FFD700;
  border-radius: 2px;
}

.arrow-head {
  color: #FFD700;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: -2px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Exit points */
.exit-point {
  position: absolute;
  z-index: 10;
}

.exit-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.regular-exit .exit-dot {
  background: linear-gradient(135deg, #666, #555);
  color: #CCC;
  border: 2px solid #888;
}

.target-exit .exit-dot {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: 3px solid #2E7D32;
  animation: targetExitPulse 1.5s ease-in-out infinite;
  transform: scale(1.2);
}

@keyframes targetExitPulse {
  0%, 100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(76, 175, 80, 0.7);
  }
}

.exit-dot-number {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Target exit arrow */
.exit-arrow {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  color: #4CAF50;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
  animation: exitArrowBounce 1s ease-in-out infinite;
}

@keyframes exitArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* Exit street name */
.target-exit-indicator {
  position: absolute;
  z-index: 15;
}

.target-street-name {
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 35px;
  text-align: center;
  border: 1px solid #2E7D32;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Instructions */
.roundabout-instructions {
  text-align: center;
  margin: 20px 0;
}

.instruction-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #FFD700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.exit-details {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

.exit-street {
  display: flex;
  align-items: center;
  background: rgba(76, 175, 80, 0.2);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.exit-icon {
  margin-right: 400px;
  font-size: 1rem;
}

.street-name {
  font-weight: 600;
  color: #4CAF50;
}

/* Close button */
.roundabout-close-btn {
  position: absolute;
  top: 12px;
  right: 400px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.roundabout-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.1);
}

/* Progress indicator */
.roundabout-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
  position: relative;
}

.progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 215, 0, 0.2);
}

.progress-step.active::after,
.progress-step.completed::after {
  background: var(--accent-gold);
}

.step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 6px;
}

.progress-step.active .step-dot {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  animation: stepDotPulse 1s ease-in-out infinite;
}

.progress-step.completed .step-dot {
  background: #4CAF50;
  border-color: #4CAF50;
}

@keyframes stepDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.step-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}

.progress-step.active .step-label {
  color: var(--accent-gold);
  font-weight: 600;
}

.progress-step.completed .step-label {
  color: #4CAF50;
}

/* Responsiveness */
@media (max-width: 768px) {
  .roundabout-alert {
    min-width: 320px;
    max-width: 90vw;
    padding: 20px;
    top: 10px;
  }
  
  .roundabout-header {
    margin-bottom: 16px;
  }
  
  .roundabout-title {
    font-size: 1.1rem;
  }
  
  .distance-value {
    font-size: 1.2rem;
  }
  
  .roundabout-visualization {
    height: 160px;
    margin: 20px 0;
  }
  
  .roundabout-container {
    width: 150px;
    height: 150px;
  }
  
  .roundabout-circle {
    width: 80px;
    height: 80px;
  }
  
  .exit-number {
    font-size: 1.8rem;
  }
  
  .exit-dot {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }
  
  .instruction-text {
    font-size: 1rem;
  }
}

/* State-specific entrance animations */
.roundabout-alert.approaching.active {
  animation: approachingEntrance 0.6s ease-out;
}

.roundabout-alert.entering.active {
  animation: enteringEntrance 0.4s ease-out;
}

.roundabout-alert.exiting.active {
  animation: exitingEntrance 0.5s ease-out;
}

@keyframes approachingEntrance {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes enteringEntrance {
  0% {
    border-color: #FF9800;
  }
  100% {
    border-color: #FFD700;
  }
}

@keyframes exitingEntrance {
  0% {
    border-color: #FFD700;
  }
  100% {
    border-color: #4CAF50;
  }
}
/**
 * Project      : KingRoad
 * File-ID      : nav-stack-css-001
 * File         : ChainedInstructions.css
 * Owner        : King Group Tech
 * Feature      : Navigation UI
 * Layer        : frontend/styles
 * Status       : active
 * Summary      : Dynamic Position Navigation Instructions CSS
 * Created-At   : 2025-12-12
 * Last-Updated : 2026-01-25
 * 
 * TRIGGER: KR_NAV_STACKED_MANEVERS_001
 * 
 * Position Rules:
 * - RIGHT maneuvers → right side of screen
 * - LEFT maneuvers → left side of screen
 * - CENTER maneuvers → center of screen
 */

/* ============================================================
   MAIN CONTAINER - Dynamic Positioning
   ============================================================ */

.nav-stack {
  position: fixed;
  top: 80px;
  z-index: 9999; /* Higher z-index to overlay everything */
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  animation: navSlideIn 0.3s ease-out;
}

/* Position variants */
.nav-stack-left {
  left: 60px; /* Offset from sidebar */
  align-items: flex-start;
}

.nav-stack-right {
  right: 60px; /* Offset from sidebar */
  align-items: flex-end;
}

.nav-stack-center {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

@keyframes navSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-stack-center {
  animation: navSlideInCenter 0.3s ease-out;
}

@keyframes navSlideInCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   MAIN INSTRUCTION CARD
   ============================================================ */

.nav-main-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 20, 30, 0.92);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  min-width: 180px;
  max-width: 320px;
  pointer-events: auto;
}

/* Arrow icon */
.nav-main-arrow {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
  min-width: 45px;
  text-align: center;
  line-height: 1;
}

/* Content area */
.nav-main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Metrics row - Distance + Time */
.nav-main-metrics {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Distance - Bold and prominent */
.nav-main-distance {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
}

/* Time estimate - Secondary */
.nav-main-time {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* Street/Instruction text */
.nav-main-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Lane guidance - separate line */
.nav-main-lane {
  font-size: 11px;
  font-weight: 600;
  color: #4CAF50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ============================================================
   PRE-INSTRUCTIONS (M2, M3) - Compact cards below main
   ============================================================ */

.nav-pre-instructions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-pre-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(30, 30, 45, 0.88);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

/* Pre-instruction arrow - smaller */
.nav-pre-arrow {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 28px;
  text-align: center;
  line-height: 1;
}

/* Pre-instruction distance */
.nav-pre-distance {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* Third instruction - even more subtle */
.nav-pre-card-third {
  background: rgba(40, 40, 55, 0.82);
}

.nav-pre-card-third .nav-pre-arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
}

.nav-pre-card-third .nav-pre-distance {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   POSITION-SPECIFIC STYLES
   ============================================================ */

/* Right-side cards get green accent for exit/turn right */
.nav-stack-right .nav-main-card {
  border-left: 4px solid #4CAF50;
}

.nav-stack-right .nav-pre-card {
  border-left: 3px solid rgba(76, 175, 80, 0.6);
}

/* Left-side cards get blue accent for turn left */
.nav-stack-left .nav-main-card {
  border-right: 4px solid #2196F3;
}

.nav-stack-left .nav-pre-card {
  border-right: 3px solid rgba(33, 150, 243, 0.6);
}

/* Center cards - neutral */
.nav-stack-center .nav-main-card {
  border-bottom: 4px solid #FFD700;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .nav-stack {
    top: 60px;
  }

  .nav-main-card {
    padding: 10px 14px;
    min-width: 160px;
    max-width: 280px;
  }

  .nav-main-arrow {
    font-size: 30px;
    min-width: 38px;
  }

  .nav-main-distance {
    font-size: 20px;
  }

  .nav-main-text {
    font-size: 12px;
    max-width: 160px;
  }

  .nav-pre-card {
    padding: 6px 10px;
  }

  .nav-pre-arrow {
    font-size: 18px;
    min-width: 24px;
  }

  .nav-pre-distance {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .nav-stack {
    top: 50px;
  }

  .nav-stack-left {
    left: 8px;
  }

  .nav-stack-right {
    right: 8px;
  }

  .nav-main-card {
    padding: 8px 12px;
    min-width: 140px;
    max-width: 240px;
  }

  .nav-main-arrow {
    font-size: 26px;
    min-width: 32px;
  }

  .nav-main-distance {
    font-size: 18px;
  }

  .nav-main-text {
    font-size: 11px;
    max-width: 140px;
  }

  .nav-pre-arrow {
    font-size: 16px;
  }

  .nav-pre-distance {
    font-size: 13px;
  }
}

/* ============================================================
   CRITICAL ALERT STATE - More prominent
   ============================================================ */

.nav-stack[data-critical="true"] .nav-main-card {
  background: rgba(20, 20, 30, 0.98);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.2);
}

.nav-stack[data-critical="true"] .nav-main-arrow {
  animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ============================================================
   HIDE ANIMATION (when instruction completed)
   ============================================================ */

.nav-stack.hiding {
  animation: navSlideOut 0.25s ease-in forwards;
}

@keyframes navSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-15px);
  }
}

.nav-stack-center.hiding {
  animation: navSlideOutCenter 0.25s ease-in forwards;
}

@keyframes navSlideOutCenter {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -15px);
  }
}

/* ============================================================
 * File-ID: delivery-access-alert-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Delivery Access Corridor
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Styles for Delivery Access Corridor alert component
 * Trigger: KR_MOBILE_DESTINATION_ACCESS_CORRIDOR_POLICY__GOLDEN_LOCKED
 * ============================================================ */

.delivery-access-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  z-index: 10000;
  
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Overlay backdrop */
.delivery-access-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9999;
}

/* Header */
.delivery-access-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.delivery-access-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.delivery-access-alert--allowed .delivery-access-icon {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
}

.delivery-access-alert--warning .delivery-access-icon {
  background: linear-gradient(135deg, #fdcb6e 0%, #f39c12 100%);
}

.delivery-access-alert--blocked .delivery-access-icon {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.delivery-access-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.delivery-access-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.delivery-access-alert--allowed .delivery-access-tag {
  background: rgba(0, 184, 148, 0.3);
  color: #00b894;
}

.delivery-access-alert--warning .delivery-access-tag {
  background: rgba(253, 203, 110, 0.3);
  color: #fdcb6e;
}

.delivery-access-alert--blocked .delivery-access-tag {
  background: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

/* Body */
.delivery-access-body {
  padding: 16px 20px;
}

.delivery-access-zone-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 12px;
}

.delivery-access-zone-name span {
  color: #dfe6e9;
  font-size: 14px;
}

.delivery-access-exception-text {
  padding: 12px 14px;
  background: rgba(0, 184, 148, 0.1);
  border-left: 3px solid #00b894;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}

.delivery-access-exception-text p {
  margin: 0;
  color: #b2bec3;
  font-size: 14px;
  line-height: 1.5;
}

/* Warnings list */
.delivery-access-warnings {
  margin: 16px 0;
}

.delivery-access-warnings h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #fdcb6e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.delivery-access-warnings ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-access-warnings li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #dfe6e9;
  font-size: 13px;
}

.delivery-access-warnings li:last-child {
  border-bottom: none;
}

.warning-icon {
  flex-shrink: 0;
}

/* Alternative route info */
.alternative-route-info {
  padding: 12px 14px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 8px;
  margin-top: 12px;
}

.alternative-route-info h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #3498db;
  text-transform: uppercase;
}

.alternative-route-stats {
  display: flex;
  gap: 16px;
}

.alt-stat {
  display: flex;
  flex-direction: column;
}

.alt-stat-label {
  font-size: 11px;
  color: #b2bec3;
}

.alt-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #3498db;
}

/* Actions */
.delivery-access-actions {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.confirmation-required {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(253, 203, 110, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.confirmation-required span {
  color: #fdcb6e;
  font-size: 13px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: center;
}

.btn-proceed {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  color: #ffffff;
}

.btn-proceed:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.btn-reroute {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: #ffffff;
}

.btn-reroute:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #b2bec3;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-report {
  background: transparent;
  color: #74b9ff;
  font-size: 13px;
  padding: 10px;
}

.btn-report:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
  .delivery-access-alert {
    width: 95%;
    max-height: 90vh;
  }
  
  .delivery-access-header {
    padding: 12px 16px;
  }
  
  .delivery-access-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  .delivery-access-title h3 {
    font-size: 16px;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ============================================================
 * File-ID: conflict-reports-admin-styles-001
 * Owner: King Group Tech
 * Layer: frontend
 * Feature: Delivery Access Corridor - Admin
 * Status: stable
 * Created-At: 2026-02-16
 * Last-Updated-At: 2026-02-16
 * Summary: Admin panel styles for reviewing restriction conflict reports
 * Trigger: KR_FRONTEND_RESTRICTION_ADMIN_EXCEPTION_REVIEW__GOLDEN_LOCKED
 * ============================================================ */

.conflict-reports-admin {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.conflict-reports-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.conflict-reports-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
}

.conflict-reports-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  min-width: 150px;
}

.refresh-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.refresh-btn:hover {
  background: #2980b9;
}

/* Stats row */
.conflict-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.stat-card-value {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a2e;
}

.stat-card-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.stat-card--pending .stat-card-value { color: #f39c12; }
.stat-card--reviewed .stat-card-value { color: #3498db; }
.stat-card--resolved .stat-card-value { color: #27ae60; }
.stat-card--rejected .stat-card-value { color: #e74c3c; }

/* Reports list */
.conflict-reports-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.conflict-report-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.conflict-report-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.report-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.report-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.report-type-badge--GHOST_RESTRICTION {
  background: #fff3cd;
  color: #856404;
}

.report-type-badge--MISSING_RESTRICTION {
  background: #f8d7da;
  color: #721c24;
}

.report-type-badge--INCORRECT_EXCEPTION {
  background: #cce5ff;
  color: #004085;
}

.report-type-badge--ACCESS_DENIED_INCORRECTLY {
  background: #d4edda;
  color: #155724;
}

.report-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.report-status-badge--pending {
  background: #fff3cd;
  color: #856404;
}

.report-status-badge--reviewed {
  background: #cce5ff;
  color: #004085;
}

.report-status-badge--resolved {
  background: #d4edda;
  color: #155724;
}

.report-status-badge--rejected {
  background: #f8d7da;
  color: #721c24;
}

.report-card-body {
  padding: 20px;
}

.report-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #666;
  font-size: 13px;
}

.report-description {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.report-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.report-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #ddd;
}

.report-photo:hover {
  opacity: 0.9;
}

.report-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.report-card-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.action-btn--review {
  background: #3498db;
  color: white;
}

.action-btn--review:hover {
  background: #2980b9;
}

.action-btn--resolve {
  background: #27ae60;
  color: white;
}

.action-btn--resolve:hover {
  background: #219a52;
}

.action-btn--reject {
  background: #e74c3c;
  color: white;
}

.action-btn--reject:hover {
  background: #c0392b;
}

.action-btn--view-map {
  background: white;
  color: #3498db;
  border: 1px solid #3498db;
}

.action-btn--view-map:hover {
  background: #f0f8ff;
}

/* Admin notes */
.admin-notes-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #ddd;
}

.admin-notes-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: #666;
}

/* Loading state */
.loading-state {
  text-align: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .conflict-reports-admin {
    padding: 16px;
  }
  
  .conflict-reports-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .conflict-reports-filters {
    width: 100%;
  }
  
  .filter-select {
    flex: 1 1;
    min-width: 120px;
  }
  
  .report-card-actions {
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1 1;
    min-width: 100px;
    text-align: center;
  }
}

/* ============================================================
   Draggable Widget - Snap-to-Grid System with Icon Spec
   Triggers: KR_FIX_SNAP_GRID_DRAG_001, KR_UI_ICON_SPEC_001
   ============================================================ */

/* ============================================================
   KR_UI_ICON_SPEC_001: CSS Custom Properties (Defaults)
   These are overridden by inline styles from the component
   ============================================================ */
.draggable-widget {
  /* Default values - overridden by inline style */
  --icon-size: 48px;
  --icon-font-size: 24px;
  --icon-touch-area: 44px;
  
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-widget:active {
  cursor: grabbing;
}

/* ============================================================
   Widget in Footer (Carousel) - KR_UI_ICON_SPEC_001 Standard
   ============================================================ */
.draggable-widget.footer-btn {
  /* KR_UI_ICON_SPEC_001: Size from CSS variable */
  width: 48px;
  width: var(--icon-size, 48px);
  height: 48px;
  height: var(--icon-size, 48px);
  
  /* Ensure minimum touch area for accessibility */
  min-width: 44px;
  min-width: var(--icon-touch-area, 44px);
  min-height: 44px;
  min-height: var(--icon-touch-area, 44px);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* KR_UI_ICON_SPEC_001: Standard background and border */
  background: rgba(40, 40, 40, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  
  flex-shrink: 0;
  
  transition: all 0.2s ease;
}

.draggable-widget.footer-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.05);
}

.draggable-widget.footer-btn:active {
  transform: scale(0.95);
}

/* ============================================================
   Floating Widget on Map - KR_UI_ICON_SPEC_001 Floating
   ============================================================ */
.draggable-widget.floating {
  /* KR_UI_ICON_SPEC_001: Floating size from CSS variable */
  width: 60px;
  width: var(--icon-size, 60px);
  height: 60px;
  height: var(--icon-size, 60px);
  
  /* Ensure minimum touch area */
  min-width: 60px;
  min-width: var(--icon-touch-area, 60px);
  min-height: 60px;
  min-height: var(--icon-touch-area, 60px);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* KR_UI_ICON_SPEC_001: Floating background with blur */
  background: rgba(40, 40, 40, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  
  /* KR_FIX_SNAP_GRID_DRAG_001: Smooth snap transition */
  transition: left 0.25s ease-out, top 0.25s ease-out, transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-widget.floating:hover {
  background: rgba(50, 50, 50, 0.98);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.draggable-widget.floating:active {
  transform: scale(0.95);
  cursor: grabbing;
}

/* ============================================================
   Widget Icon - KR_UI_ICON_SPEC_001 Font Size
   ============================================================ */
.widget-icon {
  /* KR_UI_ICON_SPEC_001: Font size from CSS variable */
  font-size: 24px;
  font-size: var(--icon-font-size, 24px);
  color: #ffffff;
  line-height: 1;
}

/* Floating widgets have larger icons */
.draggable-widget.floating .widget-icon {
  font-size: 28px;
  font-size: var(--icon-font-size, 28px);
}

/* ============================================================
   KR_FIX_SNAP_GRID_DRAG_001: Visual Feedback During Drag
   ============================================================ */

/* Active drag state - elevated with golden glow */
.draggable-widget.dragging {
  opacity: 0.7;
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.5);
  cursor: grabbing !important;
  z-index: 9999 !important;
}

/* Snap bounce animation when dropped */
.draggable-widget.floating:not(.dragging) {
  animation: snapBounce 0.3s ease-out;
}

@keyframes snapBounce {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/* Success highlight when widget snaps to valid position */
.draggable-widget.snap-success {
  animation: snapHighlight 0.4s ease-out;
}

@keyframes snapHighlight {
  0% {
    box-shadow: 0 0 0 4px rgba(0, 255, 0, 0.6);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Invalid zone indicator - shake animation */
.draggable-widget.invalid-zone {
  animation: shakeInvalid 0.3s ease;
}

@keyframes shakeInvalid {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ============================================================
   Drop Zone Highlights (Invisible Grid)
   Shown during drag to indicate valid drop positions
   ============================================================ */
.drop-zone-active {
  position: fixed;
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(59, 130, 246, 0.5);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
  z-index: 899;
  animation: pulseDropZone 1s ease infinite;
}

@keyframes pulseDropZone {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* ============================================================
   Custom Content Widget (e.g., Map Style Switcher)
   ============================================================ */
.draggable-widget.custom-content {
  /* Custom widgets maintain their internal styling */
  /* but receive the drag behavior */
}

.draggable-widget.custom-content.dragging {
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.4);
}

/* ============================================================
   Responsive Adjustments
   ============================================================ */
@media (max-width: 768px) {
  .draggable-widget.footer-btn {
    /* Slightly smaller on tablets */
    --icon-size: 44px;
    --icon-font-size: 20px;
  }
  
  .draggable-widget.floating {
    /* Maintain touch area on mobile */
    --icon-size: 56px;
    --icon-font-size: 24px;
  }
}

@media (max-width: 480px) {
  .draggable-widget.footer-btn {
    /* Compact on phones but maintain accessibility */
    --icon-size: 40px;
    --icon-font-size: 18px;
    --icon-touch-area: 44px; /* Never below 44px for touch */
  }
}

/* 🚪 KingRoad GPS - Exit Direction Lock Styles */

.exit-direction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeInOverlay 0.4s ease-out;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exit-direction-modal {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
  border: 3px solid rgba(255, 215, 0, 0.4);
  border-radius: 24px;
  min-width: 500px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  animation: slideInModal 0.5s ease-out;
}

@keyframes slideInModal {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.exit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08));
}

.exit-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exit-icon {
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.exit-title h3 {
  color: #FFD700;
  font-size: 1.5rem;
  margin: 0 0 4px 0;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.exit-title p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 1rem;
}

.close-exit {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-exit:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFD700;
  color: #FFD700;
  transform: scale(1.1);
}

/* Status */
.exit-status {
  padding: 20px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.status-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-info.locked {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.status-value {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Direction Selection */
.direction-selection {
  padding: 28px;
}

.selection-header {
  text-align: center;
  margin-bottom: 28px;
}

.selection-header h4 {
  color: #FFD700;
  font-size: 1.4rem;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.selection-header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 1rem;
}

.direction-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.direction-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
  min-width: 180px;
  position: relative;
  overflow: hidden;
}

.direction-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.5s ease;
}

.direction-btn:hover::before {
  left: 100%;
}

.direction-btn.left {
  border-color: rgba(40, 167, 69, 0.4);
}

.direction-btn.right {
  border-color: rgba(0, 123, 255, 0.4);
}

.direction-btn:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.direction-btn.left:hover {
  border-color: #28a745;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
}

.direction-btn.right:hover {
  border-color: #007bff;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.2), rgba(0, 123, 255, 0.1));
}

.direction-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.direction-label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.direction-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.3;
}

.direction-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.truck-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.current-location {
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 120px;
  line-height: 1.2;
}

/* Locked Direction */
.direction-locked {
  padding: 28px;
}

.locked-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 16px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.locked-icon {
  font-size: 2.5rem;
  color: #FFD700;
  animation: lockShake 2s ease-in-out infinite;
}

@keyframes lockShake {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.locked-header h4 {
  color: #FFD700;
  margin: 0 0 4px 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.locked-header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

.locked-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.direction-arrow {
  font-size: 5rem;
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.locked-text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

.locked-text span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.progress-info {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.moving-indicator {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  border: 2px solid rgba(40, 167, 69, 0.3);
  padding: 12px;
  border-radius: 12px;
}

.waiting-indicator {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid rgba(255, 193, 7, 0.3);
  padding: 12px;
  border-radius: 12px;
}

.moving-icon, .waiting-icon {
  font-size: 1.2rem;
  margin-right: 400px;
}

.locked-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.confirm-btn, .unlock-btn {
  padding: 16px 24px;
  border-radius: 12px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.confirm-btn {
  background: rgba(40, 167, 69, 0.2);
  border-color: #28a745;
  color: #28a745;
}

.confirm-btn:hover:not(:disabled) {
  background: #28a745;
  color: #fff;
  transform: translateY(-2px);
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.unlock-btn {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
  color: #ffc107;
}

.unlock-btn:hover {
  background: #ffc107;
  color: #000;
  transform: translateY(-2px);
}

.auto-confirm-info {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/* Help e Footer */
.help-text {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.4;
}

.exit-footer {
  padding: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.footer-tip {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Responsivo */
@media (max-width: 768px) {
  .exit-direction-modal {
    min-width: 0;
    min-width: initial;
    width: 95%;
    margin: 20px;
  }

  .exit-header {
    padding: 20px;
  }

  .direction-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .direction-btn {
    min-width: 0;
    min-width: initial;
    width: 100%;
    max-width: 250px;
  }

  .locked-visual {
    flex-direction: column;
    gap: 16px;
  }

  .direction-arrow {
    font-size: 4rem;
  }

  .exit-status {
    padding: 16px 20px;
  }

  .direction-selection, .direction-locked {
    padding: 20px;
  }
}
/* 🌍 WhereAmI - Onde Estou? Component Styles */

/* Floating button */
.where-am-i-button {
  position: fixed;
  top: 50%;  /* Vertically centered */
  left: 20px;  /* Left side */
  transform: translateY(-50%);  /* Center adjustment */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2196F3;  /* Solid blue circle */
  color: white;  /* White question mark */
  border: 3px solid white;  /* White border */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
  transition: all 0.3s ease;
  z-index: 300; /* WhereAmI button - normalized from 9999 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.where-am-i-button:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.6);
  background: #1976D2;  /* Darker blue on hover */
  border: 3px solid white;
}

.where-am-i-button:active {
  transform: translateY(-50%) scale(0.95);
}

/* Modal Overlay */
.where-am-i-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  z-index: 700; /* Where am I overlay - normalized from 10000 */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

.where-am-i-modal {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.98), rgba(30, 30, 30, 0.98));
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

/* Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  background: rgba(244, 67, 54, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

/* Loading */
.loading-section {
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner {
  font-size: 48px;
  animation: spin 2s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  color: #bbb;
  font-size: 14px;
}

/* Error */
.error-section {
  text-align: center;
  padding: 30px 20px;
}

.error-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.error-text {
  color: #FF5722;
  font-size: 14px;
  margin-bottom: 16px;
}

.retry-btn {
  background: rgba(33, 150, 243, 0.8);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  background: rgba(33, 150, 243, 1);
  transform: scale(1.02);
}

/* Location Content */
.location-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  color: #2196F3;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(33, 150, 243, 0.3);
}

/* Current Location */
.current-location {
  background: rgba(33, 150, 243, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #2196F3;
}

.location-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.location-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.location-info {
  flex: 1 1;
}

.location-primary {
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}

.location-secondary {
  color: #bbb;
  font-size: 12px;
}

.coordinates-section, .road-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coordinates-label, .road-label {
  color: #64B5F6;
  font-size: 11px;
  font-weight: bold;
}

.coordinates-value {
  color: white;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coordinates-value:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.01);
}

.road-value {
  color: white;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
}

/* Nearby Cities */
.nearby-cities {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #4CAF50;
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.city-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s ease;
}

.city-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.city-direction {
  color: #4CAF50;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.city-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.city-name {
  color: white;
  font-size: 13px;
  font-weight: bold;
}

.city-state {
  color: #bbb;
  font-size: 10px;
}

.city-distance {
  color: #4CAF50;
  font-size: 10px;
  font-weight: bold;
}

/* Sharing Section */
.sharing-section {
  background: rgba(255, 193, 7, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #FFC107;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1 1;
  min-width: 100px;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.emergency-btn {
  background: linear-gradient(135deg, #F44336, #D32F2F);
  color: white;
}

.emergency-btn:hover {
  background: linear-gradient(135deg, #D32F2F, #B71C1C);
  transform: scale(1.02);
}

.maps-btn {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: white;
}

.maps-btn:hover {
  background: linear-gradient(135deg, #388E3C, #2E7D32);
  transform: scale(1.02);
}

.copy-btn {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.copy-btn:hover {
  background: linear-gradient(135deg, #1976D2, #1565C0);
  transform: scale(1.02);
}

/* Sharing Options */
.sharing-options {
  margin-bottom: 16px;
}

.sharing-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.sharing-row:last-child {
  margin-bottom: 0;
}

.share-btn {
  flex: 1 1;
  padding: 8px 4px;
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.whatsapp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.whatsapp-btn:hover {
  background: linear-gradient(135deg, #128C7E, #075E54);
  transform: scale(1.02);
}

.email-btn {
  background: linear-gradient(135deg, #1976D2, #1565C0);
}

.email-btn:hover {
  background: linear-gradient(135deg, #1565C0, #0D47A1);
  transform: scale(1.02);
}

.sms-btn {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.sms-btn:hover {
  background: linear-gradient(135deg, #F57C00, #E65100);
  transform: scale(1.02);
}

.telegram-btn {
  background: linear-gradient(135deg, #0088CC, #006BA6);
}

.telegram-btn:hover {
  background: linear-gradient(135deg, #006BA6, #005580);
  transform: scale(1.02);
}

.twitter-btn {
  background: linear-gradient(135deg, #1DA1F2, #1991DA);
}

.twitter-btn:hover {
  background: linear-gradient(135deg, #1991DA, #1681C2);
  transform: scale(1.02);
}

.facebook-btn {
  background: linear-gradient(135deg, #4267B2, #365899);
}

.facebook-btn:hover {
  background: linear-gradient(135deg, #365899, #2D4A80);
  transform: scale(1.02);
}

/* Emergency Section */
.emergency-section {
  background: rgba(244, 67, 54, 0.1);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.emergency-header {
  color: #F44336;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.emergency-description {
  color: #bbb;
  font-size: 10px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.emergency-options {
  display: flex;
  gap: 6px;
}

.emergency-share-btn {
  flex: 1 1;
  padding: 8px 4px;
  border: none;
  border-radius: 6px;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.email-emergency {
  background: linear-gradient(135deg, #F44336, #D32F2F);
}

.email-emergency:hover {
  background: linear-gradient(135deg, #D32F2F, #B71C1C);
  transform: scale(1.02);
}

.sms-emergency {
  background: linear-gradient(135deg, #FF5722, #E64A19);
}

.sms-emergency:hover {
  background: linear-gradient(135deg, #E64A19, #D84315);
  transform: scale(1.02);
}

.copy-emergency {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.copy-emergency:hover {
  background: linear-gradient(135deg, #7B1FA2, #6A1B9A);
  transform: scale(1.02);
}

/* Additional Info */
.additional-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.info-label {
  color: #bbb;
  font-size: 11px;
  font-weight: bold;
}

.info-value {
  color: white;
  font-size: 11px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .where-am-i-button {
    bottom: 100px;
    right: 400px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
  
  .where-am-i-overlay {
    padding: 10px;
  }
  
  .where-am-i-modal {
    padding: 16px;
    max-height: 90vh;
  }
  
  .header-title {
    font-size: 16px;
  }
  
  .cities-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .location-primary {
    font-size: 14px;
  }
  
  .coordinates-value, .road-value {
    font-size: 12px;
  }

  /* Sharing responsive */
  .quick-actions {
    flex-direction: column;
    gap: 6px;
  }
  
  .action-btn {
    min-width: auto;
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .sharing-row {
    flex-direction: column;
    gap: 6px;
  }
  
  .share-btn {
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .emergency-options {
    flex-direction: column;
    gap: 6px;
  }
  
  .emergency-share-btn {
    padding: 10px 16px;
    font-size: 11px;
  }
}

/* Touch-friendly for mobile */
@media (hover: none) and (pointer: coarse) {
  .where-am-i-button {
    width: 55px;
    height: 55px;
  }
  
  .city-item {
    padding: 16px 12px;
    touch-action: manipulation;
  }
  
  .coordinates-value {
    padding: 10px 12px;
  }

  /* Touch-friendly sharing buttons */
  .action-btn, .share-btn, .emergency-share-btn {
    touch-action: manipulation;
    min-height: 44px;
  }
  
  .share-btn {
    padding: 14px 12px;
  }
  
  .emergency-share-btn {
    padding: 12px 10px;
  }
}
/* ============================================================
 * Highway Control CSS
 * ABSOLUTE LAW: MUST stay inside the USEFUL AREA
 * ============================================================ */

/* Always Visible Floating Button */
.highway-control-button {
  position: fixed;
  bottom: calc(70px + 20px);
  bottom: calc(var(--footer-height, 70px) + 20px);
  right: calc(350px + 20px) !important;
  right: var(--safe-right-position, calc(350px + 20px)) !important;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  border: 3px solid var(--border-primary);
  border-radius: 16px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 500;
  transition: all 0.3s ease;
  min-width: 140px;
  -webkit-user-select: none;
          user-select: none;
}

.highway-control-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-gold);
}

.highway-control-button:active {
  transform: translateY(-2px);
}

.highway-icon {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.highway-status {
  text-align: center;
}

.status-text {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--button-text);
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.segments-count {
  display: block;
  font-size: 0.7rem;
  color: var(--button-text);
  opacity: 0.9;
  margin-top: 2px;
}

/* Modal de Controle */
.highway-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

.highway-modal {
  background: var(--bg-primary);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.highway-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 3px solid var(--accent-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-jupiter), var(--border-primary));
}

.highway-modal-header h3 {
  color: var(--accent-gold);
  margin: 0;
  font-size: 1.4rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.close-modal-btn {
  background: var(--alert-danger);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-modal-btn:hover {
  transform: scale(1.1);
}

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

/* Controle Geral */
.general-control {
  margin-bottom: 2rem;
}

.avoid-all-section {
  text-align: center;
}

.avoid-all-btn {
  width: 100%;
  padding: 1.5rem;
  border: 3px solid;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.avoid-all-btn:not(.active) {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #22c55e;
  color: white;
}

.avoid-all-btn.active {
  background: linear-gradient(135deg, var(--alert-danger), #dc2626);
  border-color: var(--alert-danger);
  color: white;
}

.avoid-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.avoid-all-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Controle de Segmentos */
.segments-control {
  margin-bottom: 2rem;
}

.segments-control h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.segments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.segment-item {
  border: 2px solid;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.segment-item.enabled {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.segment-item.disabled {
  border-color: var(--alert-danger);
  background: rgba(239, 68, 68, 0.05);
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.segment-info {
  flex: 1 1;
}

.segment-name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.segment-distance {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.segment-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  min-width: 80px;
  transition: all 0.2s ease;
}

.segment-toggle.on {
  background: #22c55e;
  color: white;
}

.segment-toggle.off {
  background: var(--alert-danger);
  color: white;
}

.segment-toggle:hover {
  transform: scale(1.05);
}

.segment-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.segment-benefits {
  display: flex;
  gap: 1rem;
}

.time-savings {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.toll-cost {
  background: rgba(239, 68, 68, 0.2);
  color: var(--alert-danger);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.avoiding {
  background: rgba(120, 120, 120, 0.2);
  color: #666;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.segment-restrictions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tolls, .restriction {
  background: rgba(196, 147, 75, 0.2);
  color: var(--accent-gold);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Resumo da Rota */
.route-summary {
  background: rgba(196, 147, 75, 0.1);
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.route-summary h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-item {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
}

.stat-value.time {
  color: #22c55e;
}

.stat-value.cost {
  color: var(--alert-danger);
}

.stat-value.count {
  color: var(--accent-gold);
}

/* Action Buttons */
.modal-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.apply-btn, .reset-btn {
  flex: 1 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.reset-btn {
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
}

.apply-btn:hover, .reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Information */
.highway-info {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  border-radius: 8px;
  padding: 1.5rem;
}

.highway-info h5 {
  color: #22c55e;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.highway-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.highway-info li {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.highway-info strong {
  color: var(--text-primary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .highway-control-button {
    bottom: 80px;
    right: calc(350px + 20px) !important;
    right: var(--safe-right-position, calc(350px + 20px)) !important;
    min-width: 120px;
    padding: 10px 12px;
  }
  
  .highway-icon {
    font-size: 1.5rem;
  }
  
  .status-text {
    font-size: 0.7rem;
  }
  
  .highway-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .highway-modal-header {
    padding: 1rem;
  }
  
  .highway-modal-content {
    padding: 1rem;
  }
  
  .segment-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .segment-benefits {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .summary-stats {
    grid-template-columns: 1fr;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}
/* Toll Segment Selector - Dropdown Panel */
.toll-segment-selector {
  position: fixed;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  max-height: 80vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 550; /* Toll segment selector - normalized from 1002 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Header */
.toll-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border-bottom: 3px solid #1565C0;
}

.toll-selector-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Summary Stats */
.toll-summary {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.toll-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.stat-value.active {
  color: #4CAF50;
}

.stat-value.avoided {
  color: #f44336;
}

/* Toggle All Section */
.toggle-all-section {
  padding: 16px;
  background: white;
  border-bottom: 2px solid #e0e0e0;
}

.toggle-all-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 600;
}

.toggle-all-btn.enabled {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-color: #388E3C;
  color: white;
}

.toggle-all-btn.disabled {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  border-color: #c62828;
  color: white;
}

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

.toggle-all-btn .icon {
  font-size: 24px;
}

.toggle-all-btn .label {
  flex: 1 1;
  text-align: left;
}

.toggle-all-btn .action {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
}

/* Segments List */
.toll-segments-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  background: #fafafa;
}

.list-header {
  margin-bottom: 12px;
}

.list-header h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.list-header .hint {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.no-tolls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #999;
  text-align: center;
}

.no-tolls .icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Individual Toll Segment */
.toll-segment-item {
  background: white;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid;
  transition: all 0.3s ease;
}

.toll-segment-item.enabled {
  border-color: #4CAF50;
  background: #f1f8f4;
}

.toll-segment-item.disabled {
  border-color: #f44336;
  background: #ffebee;
  opacity: 0.7;
}

.toll-segment-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.segment-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.segment-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.segment-icon {
  font-size: 18px;
}

.segment-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.segment-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Toggle Segment Button */
.toggle-segment-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.toggle-segment-btn.enabled {
  background: #4CAF50;
  color: white;
}

.toggle-segment-btn.disabled {
  background: #f44336;
  color: white;
}

.toggle-segment-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.toggle-icon {
  font-size: 14px;
}

/* Footer */
.toll-selector-footer {
  padding: 16px;
  background: white;
  border-top: 2px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-cost {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-cost .label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-cost .value {
  font-size: 20px;
  font-weight: 700;
  color: #4CAF50;
}

.apply-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .toll-segment-selector {
    left: 10px;
    right: 400px;
    width: calc(100% - 20px);
    max-height: 70vh;
  }

  .toll-summary {
    flex-direction: column;
    gap: 12px;
  }

  .toll-stats {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .toll-segment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .toggle-segment-btn {
    width: 100%;
    justify-content: center;
  }

  .toll-selector-footer {
    flex-direction: column;
    gap: 12px;
  }

  .apply-btn {
    width: 100%;
  }
}

/* Rendezvous Widget - Meet up with friends */

.rendezvous-widget {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 450px;
  max-width: 90vw;
  max-height: 80vh;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 350; /* Rendezvous widget - normalized from 9000 */
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  pointer-events: auto; /* Widget captures events, doesn't interfere with drag */
}

.rendezvous-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.rendezvous-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.rendezvous-tabs {
  display: flex;
  gap: 0;
  background: rgba(20, 20, 20, 0.8);
  padding: 0;
}

.tab-btn {
  flex: 1 1;
  padding: 12px;
  
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.tab-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.rendezvous-content {
  flex: 1 1;
  padding: 20px;
  overflow-y: auto;
}

.section-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Invite Section */
.invite-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.my-code-display {
  width: 100%;
  padding: 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  text-align: center;
}

.code-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.code-value {
  color: #3b82f6;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

/* Join Section */
.join-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.code-input {
  width: 100%;
  padding: 15px;
  
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  color: #ffffff;
  font-size: 18px;
  font-family: 'Courier New', monospace;
  text-align: center;
  letter-spacing: 2px;
  
  transition: all 0.2s ease;
}

.code-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(50, 50, 50, 0.8);
}

.code-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  letter-spacing: normal;
}

/* Active Section */
.active-section {
  min-height: 200px;
}

.no-friends {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.no-friends-icon {
  font-size: 64px;
  margin-bottom: 15px;
  opacity: 0.3;
}

.no-friends p {
  color: rgba(255, 255, 255, 0.7);
  margin: 5px 0;
}

.no-friends-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  transition: all 0.2s ease;
}

.friend-item:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(59, 130, 246, 0.3);
}

.friend-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.friend-info {
  flex: 1 1;
}

.friend-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.friend-code {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Courier New', monospace;
  margin-bottom: 8px;
}

.friend-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.remove-btn {
  width: 32px;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(239, 68, 68, 0.2);
  border: none;
  border-radius: 50%;
  
  color: #ef4444;
  font-size: 16px;
  font-weight: bold;
  
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.remove-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.1);
}

/* Primary Button */
.primary-btn {
  width: 100%;
  padding: 15px 30px;
  
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.primary-btn:active {
  transform: translateY(0);
}

/* 🔍 KingRoad GPS - Address Search Styles */
/* Light theme for compact search bar */

.address-search {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Input styling */
.address-input {
  flex: 1 1;
  padding: 0;
  background: transparent;
  border: none;
  color: #202124;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  min-width: 0;
}

.address-input::placeholder {
  color: #5f6368;
}

.address-input:focus {
  outline: none;
}

/* Clear button and loading */
.search-clear,
.search-loading {
  flex-shrink: 0;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: #5f6368;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.search-clear:hover {
  color: #202124;
}

.search-loading {
  animation: spin 1s linear infinite;
}

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

/* Suggestions Dropdown - Light Theme */
.suggestions-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.2s ease-out forwards;
  opacity: 1;
}

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

.suggestions-dropdown::-webkit-scrollbar {
  width: 6px;
}

.suggestions-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.suggestions-dropdown::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 3px;
}

.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6;
}

/* Section styling */
.suggestions-section {
  border-bottom: 1px solid #f1f3f4;
}

.suggestions-section:last-child {
  border-bottom: none;
}

.section-header {
  padding: 12px 16px 8px;
  color: #5f6368;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8f9fa;
}

/* Suggestion item */
.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  border-left: 3px solid transparent;
}

.suggestion-item:hover {
  background: #f8f9fa;
  border-left-color: #1a73e8;
}

.suggestion-item.city:hover,
.suggestion-item.locality:hover {
  border-left-color: #34a853;
}

.suggestion-item.street_address:hover,
.suggestion-item.route:hover {
  border-left-color: #4285f4;
}

.suggestion-item.postal_code:hover {
  border-left-color: #9334ea;
}

.suggestion-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.suggestion-content {
  flex: 1 1;
  min-width: 0;
}

.suggestion-name {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta {
  font-size: 12px;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Search footer */
.search-footer {
  padding: 10px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e8eaed;
}

.search-tip {
  font-size: 12px;
  color: #5f6368;
}

/* No results state */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.no-results-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.no-results-text {
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  margin: 0 0 4px 0;
}

.no-results-tip {
  font-size: 12px;
  color: #9aa0a6;
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .address-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .suggestions-dropdown {
    max-height: 300px;
  }
  
  .suggestion-item {
    padding: 14px 12px;
  }
}

/* ============================================================
 * PONTO EXATO - Coordinate Detection Styles
 * LEI ABSOLUTA: Coordenadas sempre no TOPO da lista
 * ============================================================ */

.exact-point-section {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-bottom: 2px solid #4caf50 !important;
}

.exact-point-header {
  background: #4caf50 !important;
  color: white !important;
  font-weight: 700 !important;
}

.exact-point-item {
  background: rgba(255, 255, 255, 0.9) !important;
  border-left: 4px solid #4caf50 !important;
  position: relative;
}

.exact-point-item:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-left-color: #2e7d32 !important;
}

.exact-point-icon {
  font-size: 24px !important;
  color: #4caf50;
}

.exact-point-name {
  font-weight: 700 !important;
  color: #1b5e20 !important;
  font-size: 15px !important;
}

.exact-point-meta {
  color: #388e3c !important;
  font-style: italic;
}

.exact-point-badge {
  position: absolute;
  right: 400px;
  top: 50%;
  transform: translateY(-50%);
  background: #4caf50;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Emission Zone Banner */

.emission-zone-banner {
  position: fixed;
  /* CRITICAL: BOTTOM position to NEVER block navigation instructions */
  bottom: 80px;  /* Above footer, below navigation instructions */
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;  /* Lower z-index - navigation has priority */
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.95), rgba(255, 107, 0, 0.95));
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(255, 69, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  min-width: 300px;
  max-width: 500px;
}

.banner-icon {
  font-size: 28px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.banner-text {
  flex: 1 1;
}

.banner-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.banner-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.4;
}

.banner-close {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.banner-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Auto-hide progress bar */
.auto-hide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.auto-hide-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: #ffffff;
  animation: progressBar 4s linear;
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@media (max-width: 768px) {
  .emission-zone-banner {
    bottom: 70px;  /* Adjusted for mobile */
    left: 10px;
    right: 400px;
    transform: none;
  }

  .banner-content {
    min-width: auto;
    padding: 12px 16px;
  }

  .banner-icon {
    font-size: 24px;
  }

  .banner-title {
    font-size: 14px;
  }

  .banner-message {
    font-size: 12px;
  }
}

/* Toggle Switch Component - TomTom Style */

.toggle-switch-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.toggle-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

/* Toggle Switch Button */
.toggle-switch {
  position: relative;
  width: 56px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Slider Track */
.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(120, 120, 120, 0.5); /* Gray when OFF */
  border: 2px solid rgba(150, 150, 150, 0.6);
  border-radius: 32px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* Knob */
.toggle-knob {
  position: absolute;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked State (Blue - TomTom Style) */
.toggle-switch.checked .toggle-slider {
  background: rgba(0, 150, 255, 0.9); /* Blue when ON */
  border-color: rgba(0, 180, 255, 1);
}

.toggle-switch.checked .toggle-knob {
  transform: translateX(24px);
  box-shadow: 0 2px 6px rgba(0, 150, 255, 0.5);
}

/* Hover Effect */
.toggle-switch:not(.disabled):hover .toggle-slider {
  background: rgba(140, 140, 140, 0.6);
}

.toggle-switch.checked:not(.disabled):hover .toggle-slider {
  background: rgba(0, 170, 255, 1);
}

/* Active/Pressed Effect */
.toggle-switch:not(.disabled):active .toggle-knob {
  width: 28px;
}

/* Disabled State */
.toggle-switch.disabled .toggle-slider {
  background: rgba(80, 80, 80, 0.4);
  border-color: rgba(100, 100, 100, 0.4);
}

.toggle-switch.disabled .toggle-knob {
  background: #999999;
}

/* Focus State (Accessibility) */
.toggle-switch:focus {
  outline: none;
}

.toggle-switch:focus .toggle-slider {
  box-shadow: 0 0 0 3px rgba(0, 150, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .toggle-switch {
    width: 50px;
    height: 28px;
  }

  .toggle-knob {
    width: 22px;
    height: 22px;
  }

  .toggle-switch.checked .toggle-knob {
    transform: translateX(22px);
  }
}

/* Dangerous Cargo Selector Styles */

.dangerous-cargo-selector {
  margin: 12px 0;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 8px;
  overflow: hidden;
}

.cargo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.cargo-header:hover {
  background: rgba(40, 40, 40, 0.8);
}

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

.expand-icon {
  color: #00d4ff;
  font-size: 12px;
  transition: transform 0.2s;
}

.cargo-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.cargo-summary {
  color: #00d4ff;
  font-size: 14px;
  font-weight: 500;
}

.cargo-content {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 20, 20, 0.4);
}

/* Display Mode Selector */
.display-mode-selector {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.display-mode-label {
  display: block;
  color: #cccccc;
  font-size: 13px;
  margin-bottom: 8px;
}

.display-mode-options {
  display: flex;
  gap: 8px;
}

.mode-btn {
  flex: 1 1;
  padding: 8px 12px;
  background: rgba(50, 50, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(0, 212, 255, 0.4);
}

.mode-btn.active {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  border-color: #00d4ff;
  font-weight: 600;
}

/* Categories List */
.categories-list {
  margin-top: 12px;
}

.categories-header {
  margin-bottom: 12px;
}

.categories-header h4 {
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.categories-info {
  color: #999999;
  font-size: 12px;
  margin: 0;
}

.category-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(40, 40, 40, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-item:hover {
  background: rgba(50, 50, 50, 0.6);
  transform: translateX(4px);
}

.category-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #00d4ff;
}

.category-info {
  flex: 1 1;
}

.category-label-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.category-code {
  display: inline-block;
  min-width: 45px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  /* Background and text colors are applied inline (MANDATORY) */
}

.category-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.category-description {
  color: #999999;
  font-size: 12px;
  line-height: 1.4;
}

/* Selected Preview */
.selected-preview {
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
}

.selected-preview strong {
  display: block;
  color: #00d4ff;
  font-size: 13px;
  margin-bottom: 8px;
}

.selected-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  /* Background and text colors are applied inline (MANDATORY UN/ADR colors) */
}

/* Responsive */
@media (max-width: 768px) {
  .cargo-header {
    padding: 10px 12px;
  }

  .cargo-content {
    padding: 12px;
  }

  .display-mode-options {
    flex-direction: column;
  }

  .mode-btn {
    width: 100%;
  }

  .category-item {
    padding: 8px;
  }

  .category-code {
    min-width: 35px;
    font-size: 12px;
  }
}

/* My Vehicle Panel - TomTom Style */

.my-vehicle-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* My vehicle panel overlay - normalized from 10000 */
  padding: 20px;
}

.my-vehicle-panel {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: rgba(25, 25, 25, 0.98);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.vehicle-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(30, 30, 30, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vehicle-panel-header h2 {
  flex: 1 1;
  text-align: center;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.back-btn,
.close-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.back-btn:hover,
.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Content */
.vehicle-panel-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.vehicle-panel-content::-webkit-scrollbar {
  width: 6px;
}

.vehicle-panel-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.vehicle-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Config Row (TomTom Style) */
.config-row {
  margin-bottom: 12px;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 8px;
  overflow: hidden;
}

.config-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.config-row-header:hover {
  background: rgba(40, 40, 40, 0.8);
}

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

.expand-icon {
  color: #00d4ff;
  font-size: 11px;
  min-width: 12px;
  transition: transform 0.2s;
}

.row-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.row-value {
  color: #00d4ff;
  font-size: 15px;
  font-weight: 600;
}

.config-row-content {
  padding: 12px 16px;
  background: rgba(20, 20, 20, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Vehicle Type Options */
.vehicle-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vehicle-type-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.vehicle-type-btn:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(0, 212, 255, 0.3);
}

.vehicle-type-btn.active {
  background: rgba(0, 150, 255, 0.2);
  border-color: #00d4ff;
  color: #00d4ff;
}

/* Options List (Engine Type, Fuel Type) */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(50, 50, 50, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.option-btn:hover {
  background: rgba(60, 60, 60, 0.7);
  border-color: rgba(0, 212, 255, 0.3);
}

.option-btn.active {
  background: rgba(0, 150, 255, 0.15);
  border-color: #00d4ff;
  color: #00d4ff;
  font-weight: 600;
}

/* Config Section (Dimensions, Weights, Speed) */
.config-section {
  margin-bottom: 14px;
}

.section-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

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

.dimension-input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
}

.dimension-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Weights Grid */
.weights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.weight-input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
}

.weight-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Speed Input */
.speed-input {
  width: 100%;
  max-width: 120px;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
  float: right;
}

.speed-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Year and Axles Select */
.year-select,
.axles-select {
  width: 100%;
  max-width: 180px;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  float: right;
}

.year-select:focus,
.axles-select:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

.year-select option,
.axles-select option {
  background: #2a2a2a;
  color: #ffffff;
}

/* Emission Info */
.emission-info {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.3);
  border-radius: 6px;
  color: #ffaa00;
  font-size: 12px;
  line-height: 1.4;
}

/* Metadata Form */
.metadata-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Footer */
.vehicle-panel-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(30, 30, 30, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.save-btn {
  flex: 1 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  background: rgba(100, 100, 100, 0.4);
  color: #ffffff;
}

.cancel-btn:hover {
  background: rgba(120, 120, 120, 0.6);
}

.save-btn {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #ffffff;
}

.save-btn:hover {
  background: linear-gradient(135deg, #00e5ff, #00aadd);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .my-vehicle-panel-overlay {
    padding: 0;
  }

  .my-vehicle-panel {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .vehicle-panel-header {
    padding: 14px 16px;
  }

  .vehicle-panel-content {
    padding: 12px 16px;
  }

  .dimensions-grid {
    gap: 8px;
  }

  .weights-grid {
    gap: 8px;
  }

  .dimension-input,
  .weight-input {
    font-size: 14px;
  }
}

/* Accessibility */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Vehicle Type Selector Styles */

.vehicle-type-selector {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.selector-header {
  text-align: center;
  margin-bottom: 24px;
}

.selector-header h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.selector-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.95rem;
}

.vehicle-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.vehicle-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid #ecf0f1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.vehicle-option:hover {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.vehicle-option.selected {
  border-color: #27ae60;
  background-color: #e8f5e8;
}

.vehicle-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.vehicle-info {
  flex: 1 1;
}

.vehicle-info h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.vehicle-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.vehicle-features li {
  padding: 4px 0;
  color: #27ae60;
  font-size: 0.9rem;
}

.truck-settings-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.truck-settings-btn:hover {
  background: #2980b9;
}

.car-note {
  margin-top: 8px;
}

.car-note small {
  color: #7f8c8d;
  font-style: italic;
}

.selection-indicator {
  position: absolute;
  top: 16px;
  right: 400px;
  font-size: 1.5rem;
  color: #27ae60;
}

.selector-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #ecf0f1;
}

.current-selection {
  font-size: 1rem;
}

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

.mode-badge.truck {
  background: #e8f5e8;
  color: #27ae60;
}

.mode-badge.car {
  background: #e3f2fd;
  color: #1976d2;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vehicle-type-selector {
    padding: 16px;
    margin: 16px;
  }
  
  .vehicle-option {
    padding: 16px;
  }
  
  .vehicle-icon {
    font-size: 2.5rem;
  }
  
  .vehicle-info h4 {
    font-size: 1.1rem;
  }
  
  .vehicle-features li {
    font-size: 0.85rem;
  }
}
/* Truck Configuration Panel Styles */

.truck-config-panel {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

/* Section Navigation */
.section-nav {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  overflow-x: auto;
}

.section-nav-btn {
  flex: 1 1;
  min-width: 120px;
  padding: 16px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 3px solid transparent;
}

.section-nav-btn:hover {
  background: #e9ecef;
}

.section-nav-btn.active {
  background: white;
  border-bottom-color: #007bff;
}

.section-icon {
  font-size: 1.5rem;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
}

.section-nav-btn.active .section-label {
  color: #007bff;
  font-weight: bold;
}

/* Section Content */
.section-content {
  flex: 1 1;
  padding: 24px;
  overflow-y: auto;
}

.config-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-description {
  margin: 0 0 24px 0;
  color: #7f8c8d;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #2c3e50;
  font-weight: 500;
  font-size: 0.95rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
}

.form-group input.error {
  border-color: #dc3545;
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: #6c757d;
  font-size: 0.8rem;
}

.error-text {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* Checkbox Groups */
.checkbox-group {
  margin: 20px 0;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.checkbox-label:hover {
  background: #f8f9fa;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #007bff;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 2px;
  color: #007bff;
  font-weight: bold;
  font-size: 14px;
}

/* Grids */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.preferences-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.preference-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
}

.preference-info {
  flex: 1 1;
}

.preference-info strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 4px;
}

.preference-info small {
  color: #6c757d;
}

.fuel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

/* Dimension Preview */
.dimension-preview {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.dimension-preview h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.truck-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.truck-icon {
  font-size: 3rem;
}

.truck-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  font-family: monospace;
  font-size: 0.9rem;
  color: #495057;
}

/* Fuel Section */
.fuel-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
}

.fuel-section h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

/* Compliance Info */
.compliance-info {
  margin-top: 24px;
}

.info-card {
  background: #e8f4fd;
  border: 1px solid #bee5eb;
  border-radius: 8px;
  padding: 16px;
}

.info-card h4 {
  margin: 0 0 12px 0;
  color: #0c5460;
  font-size: 1rem;
}

.info-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.info-card li {
  padding: 4px 0;
  color: #0c5460;
  font-size: 0.9rem;
}

/* Action Buttons */
.config-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.back-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-btn:hover {
  background: #5a6268;
}

.save-config-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.save-config-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .section-nav-btn {
    min-width: 100px;
    padding: 12px 8px;
  }
  
  .section-content {
    padding: 16px;
  }
  
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
  
  .fuel-grid {
    grid-template-columns: 1fr;
  }
  
  .compliance-grid {
    grid-template-columns: 1fr;
  }
  
  .truck-visual {
    flex-direction: column;
    gap: 12px;
  }
  
  .truck-specs {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
  
  .config-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .action-buttons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .section-nav-btn {
    min-width: 80px;
    padding: 10px 6px;
  }
  
  .section-icon {
    font-size: 1.2rem;
  }
  
  .section-label {
    font-size: 0.75rem;
  }
  
  .truck-specs {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* Vehicle Status Indicator Styles */

.vehicle-status-indicator {
  position: fixed;
  top: 90px; /* Below TopBar */
  right: 400px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}

.vehicle-status-main {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vehicle-status-main:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.vehicle-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.vehicle-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #2c3e50;
  line-height: 1.2;
}

.vehicle-restrictions {
  font-size: 0.75rem;
  color: #7f8c8d;
  line-height: 1.2;
}

.change-indicator {
  font-size: 1rem;
  color: #7f8c8d;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.vehicle-status-main:hover .change-indicator {
  opacity: 1;
}

.truck-config-btn {
  background: #3498db;
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.truck-config-btn:hover {
  background: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Vehicle status modal overlay - normalized from 10000 */
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vehicle-selector-modal {
  max-width: 700px;
  width: 100%;
}

.truck-config-modal {
  max-width: 900px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #7f8c8d;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vehicle-status-indicator {
    top: 80px;
    right: 400px;
  }
  
  .vehicle-status-main {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .vehicle-icon {
    font-size: 1.3rem;
  }
  
  .vehicle-info {
    min-width: 100px;
  }
  
  .vehicle-name {
    font-size: 0.8rem;
  }
  
  .vehicle-restrictions {
    font-size: 0.7rem;
  }
  
  .truck-config-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-header {
    padding: 16px 20px;
  }
  
  .modal-header h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .vehicle-status-indicator {
    position: relative;
    top: auto;
    right: auto;
    margin: 10px;
    justify-content: center;
  }
  
  .vehicle-info {
    min-width: 80px;
  }
  
  .vehicle-name {
    font-size: 0.75rem;
  }
  
  .vehicle-restrictions {
    font-size: 0.65rem;
  }
}

/* Compact mode for small screens */
@media (max-width: 360px) {
  .vehicle-status-main {
    padding: 4px 8px;
  }
  
  .vehicle-icon {
    font-size: 1.2rem;
  }
  
  .vehicle-info {
    display: none; /* Hide text on very small screens, show only icon */
  }
  
  .change-indicator {
    font-size: 0.9rem;
  }
}
/* ============================================================
 * File-ID: custom-footer-base-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Base Styles
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterBase.css
 * Summary      : Base container and layout styles for TomTom-style footer
 * ============================================================ */

/* Custom Footer - TomTom Style Navigation Footer */
/* ABSOLUTE LAW: Footer ENDS where sidebar STARTS - NEVER invades */

.custom-footer {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom, 0); /* Safe area for notched devices */
  left: 0;
  left: env(safe-area-inset-left, 0); /* Safe area for notched devices */
  /* Footer MUST end BEFORE sidebar - 350px = TomTomSidebar width */
  right: 350px !important;
  width: auto !important;
  height: 63px;
  height: var(--footer-height, 63px);
  
  display: flex;
  align-items: center;
  gap: 0;
  
  background: #d4b896;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  
  /* Brown coffee border 5px on all sides */
  border: 5px solid #4a3728 !important;
  
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  
  z-index: 998;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; /* CRITICAL: Hides any content that overflows */
}

/* ============================================================
 * File-ID: custom-footer-hamburger-btn-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Hamburger Menu Button
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterHamburgerButton.css
 * Summary      : Hamburger menu button styles - BLACK CIRCLE WITH WHITE LINES
 * ============================================================ */

/* Hamburger Menu Button - Left Corner - BLACK CIRCLE WITH WHITE LINES */
.footer-hamburger-btn {
  width: 80px;
  height: 80px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  
  background: transparent;
  border: none;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  flex-shrink: 0;
  
  position: relative;
}

.footer-hamburger-btn::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: #4a3728; /* Coffee background same as other buttons */
  border: 2px solid #FFD700; /* Golden ring */
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.footer-hamburger-btn:hover::before {
  background: #5d4637; /* Lighter coffee on hover */
  border-color: #FFC107; /* More intense gold */
  transform: scale(1.05);
}

.footer-hamburger-btn:active::before {
  background: #4a3728;
  transform: scale(0.98);
}

.hamburger-line {
  width: 24px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.footer-hamburger-btn:hover .hamburger-line {
  background: #fbbf24;
}

/* ============================================================
 * File-ID: custom-footer-info-bar-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Info Bar (TIME, DISTANCE, DURATION, ETA)
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterInfoBar.css
 * Summary      : Info bar with navigation metrics display
 * ============================================================ */

/* Black Info Bar - Time, Distance, Duration, ETA + WIDGETS */
/* All in a single line, left to right */
.footer-info-bar {
  flex: 1 1;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* Reduced spacing between cards */
  
  background: #d4b896;
  padding: 6px 15px; /* Trigger: footer_padding_vertical_px: 6 */
  
  border-left: none;
  border-right: none;
  
  position: relative;
  overflow: hidden; /* CRITICAL: Nothing can overflow */
}

/* Yellow separator between info items */
.info-separator {
  display: none;
}

/* KR_DASHBOARD_RESTORE_LAYOUT_PIXEL_PERFECT: footer_item_spec */
/* MEASUREMENTS BASED ON USER REFERENCE SCREENSHOT */
.info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  /* Black window/panel inside beige footer */
  background: rgba(0, 0, 0, 0.95);
  padding: 8px 12px; /* Padding adjusted for 60px height */
  border-radius: 10px; /* Trigger: border_radius_px: 10 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  
  /* BASE MEASUREMENTS */
  height: 60px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  flex-shrink: 0;
}

/* Rectangle 1: TIME - Icon + Time + Toggle with comfortable space */
.info-item[data-testid="KR_FOOTER_TIME"],
.info-item.info-item-time {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  gap: 10px !important;
  padding: 6px 36px 6px 4px !important; /* moved content 10px left total */
}

/* 24h/AM-PM toggle button */
.time-format-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  
  min-width: 38px;
  height: 34px;
  padding: 2px 8px;
  
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.time-format-toggle:hover {
  background: rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.6);
}

.time-format-toggle:active {
  transform: scale(0.95);
}

/* Rectangle 2: DISTANCE - Prepared for 5 digits (9.999 km) with space */
.info-item.info-item-distance,
.info-item[data-testid="KR_FOOTER_DISTANCE"] {
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
  gap: 10px !important;
  padding-right: 16px !important; /* padding right for content */
}

/* Rectangle 3: DURATION - Hour format HH:MM + Toggle 24h/AM */
.info-item.info-item-duration,
.info-item[data-testid="KR_FOOTER_DURATION"] {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  gap: 8px !important;
  padding: 6px 13px 6px 11px !important; /* moved content 3px right */
}

/* Rectangle 4: ETA - Hour format HH:MM + Toggle 24h/AM */
.info-item-eta,
.info-item[data-testid="KR_FOOTER_ETA"] {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  gap: 8px !important;
  padding: 6px 13px 6px 11px !important; /* moved content 3px right */
  border-radius: 10px !important;
}

/* Force all corners rounded */
.info-item-eta::after,
.info-item[data-testid="KR_FOOTER_ETA"]::after {
  content: none;
}

.info-icon {
  font-size: 28px; /* LARGE icons to match large numbers */
  opacity: 0.95;
  flex-shrink: 0;
  line-height: 1;
}

.info-label {
  font-size: 11px; /* REFERENCE: ~10-12px */
  font-weight: 400; /* REFERENCE: regular */
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

/* TOMTOM STYLE: LARGE numbers taking almost all rectangle height */
.info-value {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: 42px !important; /* Almost all rectangle height (60px) */
  font-weight: 700 !important; /* Bold */
  letter-spacing: -0.5px; /* Mais compacto para caber */
  color: #ffffff !important;
  line-height: 1;
  /* Condensed font to fit more digits */
  font-stretch: condensed;
}

/* Multiple Stops Feature */
.info-item-eta.has-multiple-stops {
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 10px !important; /* Garantir cantos arredondados */
}

.info-item-eta.has-multiple-stops:hover {
  background: rgba(20, 20, 20, 0.95);
}

.stops-indicator {
  font-size: 18px;
  font-weight: 700;
  color: #4CAF50;
  margin-left: 8px;
  animation: pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================================
 * File-ID: custom-footer-waypoints-dropup-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Waypoints Dropup Panel
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterWaypointsDropup.css
 * Summary      : Waypoints dropup panel - Dark theme for footer integration
 * ============================================================ */

/* ============================================================
 * WAYPOINTS DROPUP PANEL - Redesigned (Dark Theme)
 * Position: Bottom-right, above footer, beside sidebar
 * Style: Based on UpcomingTruckStops - Dark theme for footer integration
 * z-index: 1000010+ to overlay ALL elements when expanded
 * ============================================================ */

/* Backdrop - covers screen behind panel */
.waypoints-dropup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000010;
  cursor: pointer;
}

/* Main Panel - Bottom right, above footer */
.waypoints-dropup-panel {
  position: fixed;
  right: 370px; /* Right of the sidebar (350px + 20px gap) */
  bottom: calc(63px + 15px);
  bottom: calc(var(--footer-height, 63px) + 15px);
  
  width: 680px;
  max-height: 450px;
  
  background: rgba(20, 20, 20, 0.98);
  border: 2px solid #4CAF50;
  border-radius: 12px;
  
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
  
  overflow: hidden;
  z-index: 1000011;
  
  animation: waypoints-slide-up 0.25s ease-out forwards;
}

@keyframes waypoints-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header - Dark green accent */
.waypoints-dropup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 14px 20px;
  background: #1b5e20;
  color: white;
}

.waypoints-dropup-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.waypoints-close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
  border-radius: 4px;
}

.waypoints-close-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* List Container */
.waypoints-list {
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px;
  background: rgba(25, 25, 25, 1);
}

/* Scrollbar styling */
.waypoints-list::-webkit-scrollbar {
  width: 6px;
}

.waypoints-list::-webkit-scrollbar-track {
  background: transparent;
}

.waypoints-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.waypoints-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Empty state when no stops are planned */
.waypoints-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.waypoints-empty-state p {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.waypoints-empty-state span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Individual Waypoint Item - Horizontal layout */
.waypoint-item {
  display: flex;
  align-items: center;
  gap: 14px;
  
  padding: 14px 16px;
  background: rgba(40, 40, 40, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 10px;
  
  transition: all 0.15s ease;
}

.waypoint-item:hover {
  background: rgba(50, 50, 50, 1);
  border-color: rgba(76, 175, 80, 0.4);
}

.waypoint-item:last-child {
  margin-bottom: 0;
}

/* First item (next stop) - highlighted */
.waypoint-item.next-stop {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.5);
}

/* 1. Stop Number Circle */
.waypoint-icon {
  flex-shrink: 0;
}

.waypoint-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #4CAF50;
  background: rgba(76, 175, 80, 0.2);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 22px;
  font-weight: 700;
  color: #4CAF50;
  
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Brand Logo Container - for truck stops with logos */
.waypoint-brand-logo-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #4CAF50;
  background: #FFFFFF;
  
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.waypoint-brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.waypoint-circle.fallback {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 24px;
}

/* Address subtitle */
.waypoint-name-text {
  display: block;
}

.waypoint-address {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

/* 2. Stop Name */
.waypoint-name {
  flex: 1 1;
  min-width: 0;
  
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.next-badge {
  display: inline-block;
  padding: 3px 10px;
  background: #4CAF50;
  border-radius: 4px;
  
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  flex-shrink: 0;
}

/* 3. Distance */
.waypoint-distance {
  font-size: 20px;
  font-weight: 600;
  color: #81c784;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
  text-align: right;
}

/* 4. ETA */
.waypoint-eta {
  font-size: 18px;
  font-weight: 500;
  color: #90caf9;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
}

/* 5. Remove Button */
.waypoint-remove-btn {
  flex-shrink: 0;
  
  width: 36px;
  height: 36px;
  
  background: #ffffff;
  border: 2px solid rgba(244, 67, 54, 0.6);
  border-radius: 50%;
  
  color: #f44336;
  font-size: 22px;
  font-weight: 900;
  
  cursor: pointer;
  transition: all 0.15s ease;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.waypoint-remove-btn:hover {
  background: #fff5f5;
  border-color: #f44336;
  transform: scale(1.1);
}

/* Footer note */
.waypoints-dropup-footer {
  padding: 10px 20px;
  background: rgba(15, 15, 15, 1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-style: italic;
}

/* ============================================
 * WAYPOINTS DROPUP BUTTON - Between ETA and Carousel
 * ============================================ */
.waypoints-dropup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(0, 0, 0, 0.95);
  border: none;
  border-radius: 10px;
  
  padding: 8px 12px;
  margin-left: -97px; /* Moved 105px total to the left */
  margin-right: 8px;
  height: 60px; /* Mesma altura dos cards */
  min-width: 60px; /* Cabe até 2 dígitos: "99▲" */
  
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.waypoints-dropup-btn:hover {
  background: rgba(40, 40, 40, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
 * File-ID: custom-footer-stops-dropup-legacy-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Stops Dropup Panel (Legacy)
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterStopsDropupLegacy.css
 * Summary      : Legacy stops dropup panel - keeping for compatibility
 * ============================================================ */

/* ============================================================
 * LEGACY STYLES - stops-dropup-panel (keeping for compatibility)
 * ============================================================ */

/* Dropup Panel (opens upward from footer) */
.stops-dropup-panel {
  position: fixed;
  bottom: calc(63px + 15px);
  bottom: calc(var(--footer-height, 63px) + 15px);
  /* Centered in useful area (excluding 350px sidebar) */
  left: calc((100vw - 350px) / 2 - 200px);
  
  width: 400px;
  max-height: 500px;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid #2196F3;
  border-radius: 12px;
  
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  
  overflow: hidden;
  z-index: 99999; /* Very high z-index to appear above everything */
  
  animation: dropup-slide 0.3s ease-out forwards;
}

@keyframes dropup-slide {
  from {
    opacity: 0;
    margin-bottom: -20px;
  }
  to {
    opacity: 1;
    margin-bottom: 0;
  }
}

.stops-dropup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 15px 20px;
  background: rgba(76, 175, 80, 0.2);
  border-bottom: 1px solid rgba(76, 175, 80, 0.3);
  
  color: #4CAF50;
  font-size: 16px;
  font-weight: 700;
}

.dropup-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.dropup-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.stops-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.stop-item {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  margin-bottom: 8px;
  
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  transition: all 0.2s ease;
}

.stop-item:hover {
  background: rgba(50, 50, 50, 0.9);
  border-color: rgba(76, 175, 80, 0.5);
}

.stop-item.current-stop {
  background: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.5);
}

.stop-number {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 35px;
  height: 35px;
  
  background: rgba(76, 175, 80, 0.3);
  border-radius: 50%;
  
  color: #4CAF50;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.stop-info {
  flex: 1 1;
  min-width: 0;
}

.stop-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stop-eta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.stop-badge {
  padding: 4px 12px;
  background: rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  color: #4CAF50;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.stop-distance {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.stops-dropup-footer {
  padding: 12px 20px;
  background: rgba(20, 20, 20, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-style: italic;
}

/* Remove stop button */
.stop-remove-btn {
  width: 28px;
  height: 28px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid rgba(244, 67, 54, 0.5);
  border-radius: 50%;
  
  color: #f44336;
  font-size: 14px;
  font-weight: bold;
  
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.stop-remove-btn:hover {
  background: rgba(244, 67, 54, 0.4);
  border-color: #f44336;
  transform: scale(1.1);
}

/* ============================================================
 * File-ID: custom-footer-widgets-carousel-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Widgets Carousel
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterWidgetsCarousel.css
 * Summary      : Action buttons and widgets carousel for footer
 * ============================================================ */

/* Action Buttons - WIDGETS DO FOOTER */
/* Ficam entre o ETA e o final do footer */
/* MUST show exactly 4 icons */
.footer-actions {
  /* Relative position INSIDE the footer */
  position: relative;
  
  display: flex;
  align-items: center;
  gap: 4px;
  
  /* Carousel height - SAME as rectangles (60px) */
  height: 60px;
  
  /* FIXED WIDTH for 4 48px icons + nav buttons */
  /* 4 x 48px icons + 3 x 6px gaps + 2 x 24px nav + padding = ~280px */
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  
  /* Gaps entre ETA e carrossel, carrossel e borda */
  margin-left: 15px;
  margin-right: 10px;
  
  /* Subtle background to delimit carousel area */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 4px 6px;
  
  /* Border 5px - same color as sidebar header (#222831) */
  border: 5px solid #222831;
  
  /* CANNOT GROW - fixed width */
  flex-shrink: 0;
  flex-grow: 0;
}

/* Container interno do carrossel - mostra 4 widgets */
.footer-widgets-carousel {
  display: flex;
  align-items: center;
  gap: 6px;
  
  /* Largura para 4 widgets (4 x 48px + 3 gaps de 6px = 210px) */
  width: 210px;
  min-width: 210px;
  
  overflow: hidden;
  
  /* Esconde scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.footer-widgets-carousel::-webkit-scrollbar {
  display: none;
}

/* Cada widget no carrossel deve ter snap */
.footer-widgets-carousel > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Wrapper do widget no carrossel - tamanho fixo 48px */
.carousel-widget-wrapper {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.carousel-widget-wrapper.dragging {
  transform: scale(1.1);
  opacity: 0.7;
  z-index: 10;
}

/* Active reorder mode */
.footer-widgets-carousel.reorder-mode {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.footer-widgets-carousel.reorder-mode .carousel-widget-wrapper {
  cursor: grab;
  animation: wiggle 0.3s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

/* Carousel navigation buttons */
.carousel-nav-btn {
  width: 24px;
  height: 40px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 6px;
  
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  
  flex-shrink: 0;
  
  transition: all 0.2s ease;
}

.carousel-nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.carousel-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.footer-action-btn {
  width: 70px;
  height: 70px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(40, 40, 40, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.footer-action-btn:hover {
  background: rgba(60, 60, 60, 0.95);
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.footer-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.action-icon {
  font-size: 32px;
}

/* Optional buttons - always visible if space allows */
.footer-action-btn.optional {
  display: flex;
}

/* ============================================================
 * File-ID: custom-footer-responsive-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Responsive Media Queries
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : customFooterResponsive.css
 * Summary      : Responsive breakpoints for footer components
 * ============================================================ */

/* ============================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================ */

/* Mobile responsive - Waypoints Dropup */
@media (max-width: 1200px) {
  .waypoints-dropup-panel {
    right: 20px;
    width: 500px;
  }
}

@media (max-width: 768px) {
  .waypoints-dropup-panel {
    right: 10px;
    left: 10px;
    width: auto;
  }
  
  .waypoint-name {
    font-size: 18px;
  }
  
  .waypoint-distance,
  .waypoint-eta {
    font-size: 14px;
    min-width: 60px;
  }
  
  .waypoint-circle {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  /* Footer action buttons */
  .footer-action-btn.optional {
    display: none;
  }
  
  .footer-info-bar {
    gap: 8px;
    padding: 0 12px;
  }
  
  .info-item {
    font-size: 12px;
    gap: 4px;
  }
  
  .info-icon {
    font-size: 14px;
  }
  
  .info-value {
    font-size: 13px;
  }
}

/* Small screens - compact layout */
@media (max-width: 480px) {
  .custom-footer {
    height: 50px;
  }
  
  .footer-hamburger-btn {
    width: 50px;
    height: 50px;
  }
  
  .footer-info-bar {
    gap: 6px;
    padding: 0 8px;
  }
  
  .info-separator {
    margin: 0 2px;
  }
  
  .footer-action-btn {
    width: 40px;
    height: 40px;
  }
  
  .action-icon {
    font-size: 16px;
  }
}

/* ============================================================
 * File-ID: custom-footer-index-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - Module Index (FACADE)
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : index.css
 * Summary      : FACADE - Imports all CustomFooter style modules
 * ============================================================ */

/* ============================================================
 * CUSTOM FOOTER - MODULARIZED STYLES
 * 
 * This file acts as a FACADE that imports all footer style modules.
 * Each module handles a specific responsibility following
 * FEATURE-BASED architecture principles.
 * 
 * Original: CustomFooter.css (1097 lines)
 * Modularized: 7 files (< 400 lines each)
 * ============================================================ */

/* 1. Base container and layout */

/* 2. Hamburger menu button */

/* 3. Info bar (TIME, DISTANCE, DURATION, ETA) */

/* 4. Waypoints dropup panel */

/* 5. Legacy stops dropup (compatibility) */

/* 6. Widgets carousel */

/* 7. Responsive breakpoints */

/* ============================================================
 * File-ID: custom-footer-facade-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: CustomFooter - FACADE (Entry Point)
 * Status: stable
 * Created-At: 2025-12-XX
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : CustomFooter.css
 * Summary      : FACADE - Entry point for modularized footer styles
 * ============================================================ */

/* ============================================================
 * CUSTOM FOOTER - MODULARIZED ARCHITECTURE
 * 
 * This file acts as a FACADE that imports all footer style modules.
 * Original monolithic file (1097 lines) has been refactored into
 * FEATURE-BASED modules following KingRoad modularization standards.
 * 
 * Modules:
 * - customFooterBase.css          (45 lines)  - Container and layout
 * - customFooterHamburgerButton.css (72 lines)  - Hamburger menu
 * - customFooterInfoBar.css       (197 lines) - Info bar metrics
 * - customFooterWaypointsDropup.css (373 lines) - Waypoints panel
 * - customFooterStopsDropupLegacy.css (210 lines) - Legacy compatibility
 * - customFooterWidgetsCarousel.css (181 lines) - Widgets carousel
 * - customFooterResponsive.css    (102 lines) - Media queries
 * 
 * Total: 7 modules, all under 400 lines each
 * ============================================================ */

.street-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Street view modal overlay - normalized from 10000 */
  padding: 20px;
}

.street-view-modal {
  /* CRITICAL CHANGE: Safe beige background - NOT WHITE */
  background: #f5f5dc; /* Bege suave - seguro para motoristas */
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.street-view-options {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 2px solid #e5e5e5;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.close-btn:hover {
  background: #f0f0f0;
}

.modal-body {
  padding: 24px;
}

.modal-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 24px;
  text-align: center;
}

.option-card {
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.option-card:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.option-free {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.option-integrated {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

.option-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.option-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #333;
  text-align: center;
}

.option-card p {
  color: #666;
  margin-bottom: 16px;
  text-align: center;
}

.option-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.option-card ul li {
  padding: 8px 0;
  font-size: 14px;
  color: #555;
}

.btn-primary,
.btn-secondary {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn-link {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 8px;
  transition: background 0.2s;
}

.btn-link:hover {
  background: #0056b3;
}

.street-view-container {
  padding: 24px;
  background: #f8f9fa;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 24px;
  border-top: 2px solid #e5e5e5;
}

.modal-footer button {
  flex: 1 1;
}

/* Tutorial Styles */
.tutorial-body {
  max-height: 70vh;
  overflow-y: auto;
}

.tutorial-body h3 {
  margin: 0 0 24px 0;
  color: #333;
  text-align: center;
  font-size: 22px;
}

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  gap: 16px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #007bff;
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.step-content {
  flex: 1 1;
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.step-content p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.step-note {
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: #856404;
}

.api-key-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  font-family: monospace;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.api-key-input:focus {
  outline: none;
  border-color: #007bff;
}

.tutorial-footer {
  padding: 20px 0 0 0;
  border-top: 2px solid #e5e5e5;
  margin-top: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .street-view-modal {
    max-width: 100%;
    max-height: 95vh;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  .modal-header h2 {
    font-size: 20px;
  }

  .option-icon {
    font-size: 36px;
  }

  .option-card h3 {
    font-size: 18px;
  }

  .step {
    flex-direction: column;
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .modal-footer {
    flex-direction: column;
  }
}

/* POI Context Menu Styles */

.poi-context-menu {
  position: fixed;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 280px;
  z-index: 620; /* POI context menu - normalized from 10000 */
  animation: fadeInScale 0.2s ease-out;
  overflow: hidden;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.poi-context-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.poi-icon {
  font-size: 24px;
}

.poi-name {
  font-weight: 600;
  font-size: 16px;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poi-context-menu-options {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.poi-context-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: left;
  width: 100%;
}

.poi-context-option:hover {
  background-color: #f5f5f5;
}

.poi-context-option:active {
  background-color: #e8e8e8;
}

.option-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.option-text {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.poi-context-menu-footer {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.poi-context-close {
  padding: 8px 20px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  transition: all 0.2s;
}

.poi-context-close:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

.poi-context-coordinates {
  padding: 8px 16px;
  background-color: #f9f9f9;
  border-top: 1px solid #e0e0e0;
  font-size: 12px;
  color: #666;
  font-family: monospace;
  text-align: center;
}

/* Overlay to close menu when clicking outside */
.poi-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600; /* Context menu overlay - normalized from 9999 */
  background: transparent;
}

/* Add POI Modal Styles */

.add-poi-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 710; /* Add POI modal overlay - normalized from 10001 */
  animation: fadeIn 0.2s ease-out;
}

.add-poi-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 720; /* Add POI modal - normalized from 10002 */
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.add-poi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.add-poi-icon {
  font-size: 28px;
}

.add-poi-header h2 {
  flex: 1 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.add-poi-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.add-poi-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.add-poi-form {
  padding: 24px;
}

.add-poi-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.add-poi-coordinates {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: monospace;
  color: #666;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
}

.form-group input[type="text"]:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

.form-group-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.checkbox-label:hover {
  background-color: #f5f5f5;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 14px;
  color: #333;
}

.add-poi-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary,
.btn-secondary {
  flex: 1 1;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #999;
}

.add-poi-note {
  margin-top: 16px;
  padding: 12px;
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  border-radius: 4px;
  font-size: 13px;
  color: #0d47a1;
}

.route-cutting-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Route cutting modal overlay - normalized from 10000 */
  padding: 20px;
}

.route-cutting-modal {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #eee;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.cut-point-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cut-point-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.cut-point-info .coordinates {
  font-family: monospace;
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.cut-point-info .description {
  font-size: 16px;
  color: #444;
  font-weight: 500;
  margin: 10px 0 0 0;
}

.time-input-section {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.time-input-section h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.time-inputs {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.input-group {
  flex: 1 1;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.input-group input[type="number"] {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border: 2px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
}

.traffic-toggle {
  margin-bottom: 15px;
}

.traffic-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

.traffic-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.recalculate-btn {
  width: 100%;
  padding: 12px;
  background: #FFD700;
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.recalculate-btn:hover {
  background: #FFC700;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.recalculate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  padding: 15px;
  color: #c33;
  text-align: center;
  margin-bottom: 20px;
}

.loading-message {
  text-align: center;
  padding: 40px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #FFD700;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.results-section {
  margin-top: 20px;
}

.summary {
  background: #f0f8ff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.summary h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.summary-item {
  background: white;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.summary-item.highlight {
  background: #FFD700;
  border-color: #FFC700;
}

.summary-item .label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.summary-item .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.truck-stops-list h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 16px;
}

.stops-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.stop-card {
  background: white;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

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

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

.stop-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
  flex: 1 1;
}

.stop-header .distance {
  font-size: 14px;
  font-weight: bold;
  color: #FFD700;
  background: #FFF9E6;
  padding: 4px 12px;
  border-radius: 12px;
}

.stop-details {
  font-size: 14px;
  color: #666;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.occupancy {
  margin-top: 8px;
}

.occupancy-bar {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.occupancy-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336);
  transition: width 0.3s;
}

.occupancy span {
  font-size: 12px;
  color: #999;
}

.recommendation {
  background: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.recommendation h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #2e7d32;
}

.recommendation-card {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
}

.recommendation-card h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.recommendation-card p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .route-cutting-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .time-inputs {
    flex-direction: column;
  }
}

/* Risk Area Modal CSS */

.risk-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.risk-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 193, 7, 0.3);
  
  overflow: hidden;
  z-index: 2001;
  
  display: flex;
  flex-direction: column;
  
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Header */
.risk-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 193, 7, 0.1);
  border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

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

.header-icon {
  font-size: 28px;
}

.risk-modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFC107;
}

.poi-name-badge {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

/* Content */
.risk-modal-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.instruction-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.error-message {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid rgba(244, 67, 54, 0.5);
  color: #f44336;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Risk Categories */
.risk-category {
  margin-bottom: 20px;
}

.category-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #d4af37;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.risk-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risk-item {
  display: flex;
  align-items: center;
  gap: 6px;
  
  padding: 8px 12px;
  
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.risk-item:hover {
  background: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

.risk-item.selected {
  background: rgba(255, 193, 7, 0.2);
  border-color: #FFC107;
}

.risk-item input[type="checkbox"] {
  display: none;
}

.risk-emoji {
  font-size: 16px;
}

.risk-label {
  font-size: 0.8rem;
  color: #fff;
}

/* Custom Risk Section */
.custom-risk-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-custom-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 10px 16px;
  
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.add-custom-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.custom-risk-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-title-input,
.custom-desc-input {
  width: 100%;
  padding: 10px 14px;
  
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  color: #fff;
  font-size: 0.9rem;
  
  transition: border-color 0.2s ease;
}

.custom-title-input:focus,
.custom-desc-input:focus {
  outline: none;
  border-color: #FFC107;
}

.custom-title-input::placeholder,
.custom-desc-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.custom-desc-input {
  resize: vertical;
  min-height: 80px;
}

.char-count {
  text-align: right;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Location Info */
.location-info {
  display: flex;
  align-items: center;
  gap: 8px;
  
  margin-top: 16px;
  padding: 10px 14px;
  
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.coord-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.coord-value {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
}

/* Footer */
.risk-modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.submit-btn {
  flex: 1 1;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: rgba(100, 100, 100, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cancel-btn:hover:not(:disabled) {
  background: rgba(100, 100, 100, 0.5);
}

.submit-btn {
  background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
  border: none;
  color: #000;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%);
  transform: translateY(-1px);
}

.submit-btn:disabled,
.cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar */
.risk-modal-content::-webkit-scrollbar {
  width: 6px;
}

.risk-modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.risk-modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 193, 7, 0.5);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 500px) {
  .risk-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .risk-items {
    gap: 6px;
  }
  
  .risk-item {
    padding: 6px 10px;
  }
  
  .risk-label {
    font-size: 0.75rem;
  }
}

/* POI Comment Modal CSS */

.comment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.comment-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  border: 1px solid rgba(76, 175, 80, 0.3);
  
  overflow: hidden;
  z-index: 2001;
  
  display: flex;
  flex-direction: column;
  
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Header */
.comment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(76, 175, 80, 0.1);
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.comment-modal-header .header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-modal-header .header-icon {
  font-size: 28px;
}

.comment-modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #4CAF50;
}

.comment-modal-header .poi-name-badge {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.comment-modal-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-modal-header .close-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

/* Content */
.comment-modal-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.comment-modal-content .error-message {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid rgba(244, 67, 54, 0.5);
  color: #f44336;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Star Rating */
.rating-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.rating-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.star-rating {
  display: flex;
  gap: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  padding: 0;
}

.star-btn:hover {
  transform: scale(1.2);
}

.star-btn.active {
  color: #FFD700;
}

/* Tag Categories */
.tag-category {
  margin-bottom: 16px;
}

.tag-category .category-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  
  padding: 8px 12px;
  
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
}

.tag-item.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.tag-item input[type="checkbox"] {
  display: none;
}

.tag-emoji {
  font-size: 16px;
}

.tag-label {
  font-size: 0.8rem;
  color: #fff;
}

/* Comment Text Section */
.comment-text-section {
  margin-top: 16px;
}

.comment-label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.comment-textarea {
  width: 100%;
  padding: 12px 14px;
  
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  color: #fff;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 100px;
  
  transition: border-color 0.2s ease;
}

.comment-textarea:focus {
  outline: none;
  border-color: #4CAF50;
}

.comment-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.comment-text-section .char-count {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* Footer */
.comment-modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-modal-footer .cancel-btn,
.comment-modal-footer .submit-btn {
  flex: 1 1;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-modal-footer .cancel-btn {
  background: rgba(100, 100, 100, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.comment-modal-footer .cancel-btn:hover:not(:disabled) {
  background: rgba(100, 100, 100, 0.5);
}

.comment-modal-footer .submit-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  border: none;
  color: #fff;
}

.comment-modal-footer .submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
  transform: translateY(-1px);
}

.comment-modal-footer .submit-btn:disabled,
.comment-modal-footer .cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar */
.comment-modal-content::-webkit-scrollbar {
  width: 6px;
}

.comment-modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.comment-modal-content::-webkit-scrollbar-thumb {
  background: rgba(76, 175, 80, 0.5);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 500px) {
  .comment-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .tag-items {
    gap: 6px;
  }
  
  .tag-item {
    padding: 6px 10px;
  }
  
  .tag-label {
    font-size: 0.75rem;
  }
  
  .star-btn {
    font-size: 24px;
  }
}

/* SmartLocationPrompt.css */
/* Styles for the smart location component */

.smart-location-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

/* When detecting has timed out, allow clicks through to buttons only */
.smart-location-prompt.detecting.with-timeout {
  pointer-events: none;
}

.smart-location-prompt.detecting.with-timeout .prompt-content {
  pointer-events: auto;
}

.prompt-content {
  max-width: 480px;
  width: 100%;
  text-align: center;
  color: #fff;
}

/* Detecting Animation */
.detecting-animation {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid rgba(76, 175, 80, 0.3);
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.location-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}

/* Error State */
.smart-location-prompt.error .error-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.suggestion-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}

.suggestion-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
}

.visual-guide {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}

.guide-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #4CAF50;
}

.steps-list {
  margin: 0;
  padding-left: 20px;
}

.steps-list li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.device-instructions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.instruction-card {
  flex: 1 1;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.instruction-card .device-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}

.instruction-card strong {
  display: block;
  margin-bottom: 4px;
}

.instruction-card p {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* Download Prompt */
.smart-location-prompt.download-prompt .success-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.location-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(76, 175, 80, 0.2);
  padding: 10px 20px;
  border-radius: 24px;
  margin-bottom: 24px;
}

.location-pin {
  font-size: 20px;
}

.location-name {
  font-size: 16px;
  font-weight: 500;
}

.map-download-section {
  margin: 24px 0;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}

.download-card .card-icon {
  font-size: 40px;
}

.download-card .card-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.download-card .card-content p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.neighbors-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.neighbors-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
}

.notice-icon {
  font-size: 18px;
}

.neighbor-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.neighbor-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
  background: #43A047;
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.btn-text {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

.btn-text:hover {
  color: #fff;
}

.download-note {
  margin-top: 20px;
  font-size: 12px;
  opacity: 0.6;
}

/* Headings */
h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
}

.subtle-text {
  font-size: 14px;
  opacity: 0.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .prompt-content {
    padding: 0 10px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .download-card {
    flex-direction: column;
    text-align: center;
  }
  
  .device-instructions {
    flex-direction: column;
  }
}

/* ============================================================
 * File-ID: urban-telemetry-consent-modal-css-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: Urban Telemetry Consent Modal
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : UrbanTelemetryConsentModal.css
 * Summary      : Styles for Urban Telemetry consent modal
 * TRIGGER      : KR_URBAN_3D_TELEMETRY_PIPELINE_V1
 * ============================================================ */

/* Backdrop */
.urban-consent-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

/* Modal Container */
.urban-consent-modal {
  width: 100%;
  max-width: 480px;
  background: #1a1a1a;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: urban-modal-enter 0.3s ease-out;
}

@keyframes urban-modal-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.urban-consent-header {
  position: relative;
  padding: 24px 24px 16px;
  text-align: center;
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
}

.urban-consent-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
}

.urban-consent-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: white;
}

.urban-consent-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.urban-consent-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Content */
.urban-consent-content {
  padding: 20px 24px;
}

.urban-consent-intro {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

/* Benefits List */
.urban-consent-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.urban-consent-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.urban-consent-benefit svg {
  color: #4CAF50;
  flex-shrink: 0;
  margin-top: 2px;
}

.urban-consent-benefit strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
}

.urban-consent-benefit span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* Privacy Section */
.urban-consent-privacy {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.urban-consent-privacy h4 {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 8px;
}

.urban-consent-privacy h4:not(:first-child) {
  margin-top: 12px;
}

.urban-consent-privacy ul {
  margin: 0;
  padding-left: 20px;
}

.urban-consent-privacy li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

/* Note */
.urban-consent-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
}

/* Actions */
.urban-consent-actions {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.urban-consent-decline {
  flex: 1 1;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.urban-consent-decline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.urban-consent-accept {
  flex: 1.5 1;
  padding: 14px 20px;
  background: #4CAF50;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.urban-consent-accept:hover {
  background: #43A047;
  transform: translateY(-1px);
}

.urban-consent-accept:active {
  transform: translateY(0);
}

/* ============================================================
 * File-ID: urban-telemetry-toggle-css-001
 * Owner: King Group Tech
 * Layer: frontend/styles
 * Feature: Urban Telemetry Toggle
 * Status: stable
 * Created-At: 2026-02-17
 * Last-Updated-At: 2026-02-17
 * ============================================================
 * Project      : KingRoad / Family King
 * File         : UrbanTelemetryToggle.css
 * Summary      : Styles for Urban Telemetry settings toggle
 * TRIGGER      : KR_URBAN_3D_TELEMETRY_PIPELINE_V1
 * ============================================================ */

/* Container */
.urban-toggle-container {
  padding: 16px;
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 12px;
  margin-bottom: 12px;
}

.urban-toggle-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Info Section */
.urban-toggle-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.urban-toggle-icon {
  width: 40px;
  height: 40px;
  background: rgba(76, 175, 80, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4CAF50;
  flex-shrink: 0;
}

.urban-toggle-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.urban-toggle-title {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.urban-toggle-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* Controls */
.urban-toggle-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.urban-toggle-info-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.urban-toggle-info-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Toggle Switch */
.urban-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.urban-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.urban-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  transition: all 0.3s ease;
}

.urban-toggle-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.urban-toggle-switch input:checked + .urban-toggle-slider {
  background: #4CAF50;
}

.urban-toggle-switch input:checked + .urban-toggle-slider::before {
  transform: translateX(24px);
}

.urban-toggle-switch input:disabled + .urban-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status Indicator */
.urban-toggle-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.urban-toggle-status-dot {
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  animation: urban-status-pulse 2s ease-in-out infinite;
}

@keyframes urban-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.urban-toggle-status-text {
  font-size: 12px;
  color: rgba(76, 175, 80, 0.9);
}

.app-container {
  display: flex;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - fixes mobile address bar */
  width: 100vw;
  background: var(--bg-jupiter);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.main-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 100%;
}

.main-area.with-menu {
  margin: 0;
  padding: 0;
}

.navigation-content {
  flex: 1 1;
  display: flex;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - fixes mobile address bar */
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.main-map-area {
  flex: 1 1;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - fixes mobile address bar */
  margin: 0;
  padding: 0;
  background: #1a1a1a;
}

.dashboard-overview {
  padding: 2rem;
  flex: 1 1;
  overflow-y: auto;
}

.overview-header {
  margin-bottom: 2rem;
  text-align: center;
}

.overview-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.overview-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.stat-card {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-icon {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent-gold);
  line-height: 1;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.coming-soon {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.coming-soon-content {
  padding: 3rem;
}

.coming-soon-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.coming-soon h2 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.coming-soon p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Test Buttons (remove in production) */
.test-buttons {
  position: fixed;
  top: 120px;
  right: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10500; /* HIGHER than other widgets to avoid overlap */
}

.test-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  min-width: 160px;
  text-align: center;
}

.test-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.test-btn.reroute-test {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.test-btn.reroute-test:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.test-btn.parkway-test {
  background: linear-gradient(135deg, #FF69B4, #FF1493); /* Pink */
}

.test-btn.parkway-test:hover {
  background: linear-gradient(135deg, #FF1493, #DC143C);
}

.test-btn.floating-test {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}

.test-btn.floating-test:hover {
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
}

.test-btn.add-poi-test {
  background: linear-gradient(135deg, #10b981, #059669);
}

.test-btn.add-poi-test:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

/* Specific buttons for EventsPanel - Must always be accessible */
.simulate-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  border: 2px solid rgba(139, 92, 246, 0.3) !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  min-width: 160px !important;
  text-align: center !important;
  z-index: 10600 !important; /* Even higher for EventsPanel test buttons */
  position: relative !important;
}

.simulate-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
}

/* Responsive for test buttons */
@media (max-width: 768px) {
  .test-buttons {
    top: 80px;
    right: 400px;
  }
  
  .test-btn {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-width: 140px;
  }
}

/* KM/MI Toggle Button for Direction Alerts */
.units-toggle-button {
  position: fixed;
  top: 20px;
  right: 400px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 2px solid rgba(59, 130, 246, 0.5);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 1500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  min-width: 80px;
}

.units-toggle-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  border-color: #3b82f6;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .main-area {
    margin-left: 0;
  }
  
  .main-area.with-menu {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .main-menu {
    position: static;
    width: 100%;
    height: auto;
  }
  
  .navigation-content {
    height: auto;
    min-height: calc(100vh - 200px);
  }
  
  .content-area {
    display: block;
  }
  
  .sidebar {
    width: 100%;
    max-height: 300px;
  }
  
  .test-buttons {
    top: 80px;
    right: 400px;
  }
  
  .test-btn {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-width: 140px;
  }
}

/* Rest Areas Section Styles */
.rest-areas-section {
  padding: 2rem;
  flex: 1 1;
  overflow-y: auto;
  background: linear-gradient(135deg, 
    rgba(46, 125, 50, 0.05) 0%, 
    rgba(56, 142, 60, 0.03) 100%
  );
}

.rest-areas-section .section-header {
  margin-bottom: 2rem;
  text-align: center;
}

.rest-areas-section .section-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #2E7D32, #4CAF50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rest-areas-section .section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.rest-areas-content {
  max-width: 1200px;
  margin: 0 auto;
}

.rest-areas-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.rest-areas-section .info-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #4CAF50;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 
    0 8px 32px rgba(46, 125, 50, 0.1),
    0 0 20px rgba(76, 175, 80, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.rest-areas-section .info-card h3 {
  color: #2E7D32;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.rest-areas-section .info-card p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.rest-areas-section .info-card ul,
.rest-areas-section .info-card ol {
  color: #333;
  line-height: 1.6;
  padding-left: 1.5rem;
}

.rest-areas-section .info-card li {
  margin-bottom: 0.5rem;
}

.rest-areas-section .info-card ul li {
  list-style: none;
  position: relative;
}

.rest-areas-section .info-card ul li::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background: #4CAF50;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .rest-areas-section {
    padding: 1rem;
  }
  
  .rest-areas-section .section-header h1 {
    font-size: 2rem;
  }
  
  .rest-areas-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .rest-areas-section .info-card {
    padding: 1.5rem;
  }
}
/* Clean Route Footer - Essential Info Only */
.route-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.95));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 2px solid rgba(255, 215, 0, 0.3);
  padding: 12px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.footer-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.footer-value {
  font-size: 1.1rem;
  color: #FFD700;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .route-footer {
    padding: 10px 12px;
  }
  
  .footer-label {
    font-size: 0.65rem;
  }
  
  .footer-value {
    font-size: 0.95rem;
  }
}

/* Map Drop Zone - Invisible drop area for widgets */
/* KR_FIX_SNAP_GRID_DRAG_001: Drop zone covers usable map area */
.map-drop-zone {
  position: fixed;
  top: 89px;
  top: var(--topbar-height, 89px); /* Below top bar */
  left: 0;
  right: calc(350px + 50px);
  right: calc(var(--sidebar-width, 350px) + 50px); /* Before sidebar + margin */
  bottom: 75px;
  bottom: var(--footer-height, 75px); /* Above footer */
  pointer-events: none; /* Only active during drag via JS */
  z-index: 500; /* Above map but below floating widgets */
  /* Invisible by default */
  background: transparent;
}

/* Activated via class when drag is in progress */
.map-drop-zone.drag-active,
.map-drop-zone:has(~ [dragging="true"]) {
  pointer-events: all !important;
  background: rgba(59, 130, 246, 0.08);
  border: 2px dashed rgba(59, 130, 246, 0.4);
}

/* 🖱️ KingRoad GPS - Draggable Elements Styles */

/* Default state of draggable elements */
.draggable-element {
  cursor: grab;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Estado durante long press */
.draggable-element:active {
  cursor: grabbing;
}

/* Modo drag ativo */
.draggable-element.drag-mode-active {
  cursor: grabbing !important;
  z-index: 800 !important; /* Dragging element - normalized from 9998 */
  transform: scale(1.05) !important;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(251, 191, 36, 0.6),
    inset 0 0 0 3px rgba(251, 191, 36, 0.8) !important;
  animation: dragPulse 1s ease-in-out infinite;
  filter: brightness(1.1);
}

/* Feedback animation during drag */
@keyframes dragPulse {
  0%, 100% {
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(251, 191, 36, 0.6),
      inset 0 0 0 3px rgba(251, 191, 36, 0.8);
  }
  50% {
    box-shadow: 
      0 25px 70px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(251, 191, 36, 0.8),
      inset 0 0 0 4px rgba(251, 191, 36, 1);
  }
}

/* Drag instructions overlay */
#drag-instructions-overlay {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.drag-instructions {
  max-width: 400px;
  text-align: center;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drag-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: dragIconFloat 2s ease-in-out infinite;
}

@keyframes dragIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.drag-text h3 {
  color: #fbbf24;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.drag-text p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* Hover states for draggable elements */
@media (hover: hover) {
  .draggable-element:hover {
    transform: scale(1.02);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.2),
      0 0 15px rgba(251, 191, 36, 0.2);
  }
  
  .draggable-element:hover::after {
    content: '🖱️ Pressione e segure por 5s para mover';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 820; /* Tooltip - normalized from 10000 */
    animation: tooltipFadeIn 0.3s ease-out;
    pointer-events: none;
  }
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Feedback visual para long press */
.draggable-element.long-press-active::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 3px solid #fbbf24;
  border-radius: inherit;
  animation: longPressProgress 5s linear;
  z-index: -1;
}

@keyframes longPressProgress {
  from {
    border-color: transparent;
    transform: scale(0.9);
  }
  to {
    border-color: #fbbf24;
    transform: scale(1);
  }
}

/* Specific styles for elements in drag mode */

/* Mile Marker em drag */
.mile-marker-display.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Test buttons in drag */
.test-buttons.drag-mode-active {
  background: rgba(251, 191, 36, 0.2) !important;
}

/* Toggle de mapa em drag */
.full-map-toggle-btn.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Controles de mapa em drag */
.map-controls.drag-mode-active {
  border: 3px solid #fbbf24 !important;
}

/* Navigation footer in drag */
.navigation-footer.drag-mode-active {
  border-top: 3px solid #fbbf24 !important;
}

/* Truck Stops Widget em drag */
.truck-stops-widget.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Rest Areas Widget em drag */
.rest-areas-widget.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Responsividade mobile */
@media (max-width: 768px) {
  .drag-instructions {
    max-width: 90%;
    padding: 1.5rem;
  }
  
  .drag-icon {
    font-size: 2.5rem;
  }
  
  .drag-text h3 {
    font-size: 1.2rem;
  }
  
  .drag-text p {
    font-size: 0.9rem;
  }
  
  .draggable-element:hover::after {
    content: '👆 Toque e segure 5s para mover';
    font-size: 0.7rem;
    bottom: -30px;
  }
}

/* Modo landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .drag-instructions {
    padding: 1rem;
  }
  
  .drag-icon {
    font-size: 2rem;
  }
  
  .drag-text h3 {
    font-size: 1rem;
  }
  
  .drag-text p {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
}

/* Estados para telas touch */
@media (pointer: coarse) {
  .draggable-element {
    cursor: pointer;
  }
  
  .draggable-element.drag-mode-active {
    cursor: pointer;
  }
}

/* Selection prevention during drag */
.draggable-element.drag-mode-active * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Reset button styles */
.drag-reset-button {
  position: fixed;
  top: 20px;
  right: 400px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 830; /* Drag reset button - normalized from 1600 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  opacity: 0.7;
}

.drag-reset-button:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

/* Indicador de que elemento pode ser arrastado */
.draggable-element::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 400px;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  opacity: 0.6;
  z-index: 100;
  animation: dragIndicator 3s ease-in-out infinite;
}

@keyframes dragIndicator {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Indicador de Modo Drag Ativo */
.drag-mode-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(251, 191, 36, 0.95),
    rgba(245, 158, 11, 0.90)
  );
  border: 3px solid #fbbf24;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  z-index: 850; /* Drag mode indicator - normalized from 9997 */
  color: #000;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(251, 191, 36, 0.6);
  animation: dragModeEntrance 0.5s ease-out;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.drag-mode-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.drag-mode-icon {
  font-size: 2.5rem;
  animation: dragModeIconFloat 2s ease-in-out infinite;
}

.drag-mode-indicator > .drag-mode-text > div:nth-child(2) {
  font-size: 1.2rem;
  font-weight: 800;
  color: #000;
  letter-spacing: 1px;
}

.drag-mode-hint {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
}

@keyframes dragModeEntrance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dragModeIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Responsividade para indicador de drag */
@media (max-width: 768px) {
  .drag-mode-indicator {
    padding: 1rem 1.5rem;
    max-width: 90%;
  }
  
  .drag-mode-icon {
    font-size: 2rem;
  }
  
  .drag-mode-indicator > .drag-mode-text > div:nth-child(2) {
    font-size: 1rem;
  }
  
  .drag-mode-hint {
    font-size: 0.8rem;
  }
}
/* Hide unwanted widgets that user didn't request */

/* Navigation status widget (speedometer) - NOW VISIBLE
   Previously hidden, but user requested it to be always visible */

/* Hide any floating panels in bottom left - except required widgets */
.floating-panel-left {
  display: none !important;
}

/* Navigation footer - KEEP VISIBLE (should always show during navigation) */
/* Removed display: none - this should be visible! */

/* REMOVED - These classes are needed! They were hiding the navigation footer incorrectly */
/* The mile marker display will be styled separately below */

/* Bottom bar - KEEP VISIBLE during navigation */
/* Removed display: none - navigation footer should be visible! */

/* Hide all default map control buttons (they're in wrong position) */
.map-controls .map-control-btn {
  display: none !important;
}

.map-controls .units-btn {
  display: none !important;
}

.map-controls .zoom-btn {
  display: none !important;
}

.map-controls .reset-btn {
  display: none !important;
}

/* Hide the entire map-controls div */
.map-controls {
  display: none !important;
}

/* REMOVED - This was hiding the navigation footer incorrectly */
/* Navigation footer should be visible during navigation */

/* Hide any fixed elements in bottom left */
.fixed-bottom-left {
  display: none !important;
}

/* Ensure our custom KM button stays visible */
.units-btn-left {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========================================
   MILE MARKER - Styles consolidated in MileMarkerDisplay.css
   Only override positioning if needed here
   ======================================== */

/* Override old .mile-marker-display positioning - ONLY POSITIONING */
.mile-marker-display {
  /* Remove old positioning - now controlled by wrapper */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  overflow: visible !important;
}

/* Hide old marker elements (not used in European style) */
.mile-marker-display .marker-container,
.mile-marker-display .marker-info,
.mile-marker-display .marker-location,
.mile-marker-display .next-milestone,
.mile-marker-display .update-indicator,
.mile-marker-display .update-time,
.mile-marker-display .marker-icon,
.mile-marker-display .marker-main,
.mile-marker-display .marker-number,
.mile-marker-display .marker-unit {
  /* Hide old elements - European style uses euro-* classes */
  display: none !important;
}

/* But keep time display in navigation footer visible */
.navigation-footer .time-display {
  display: block !important;
}

.navigation-footer .eta-display {
  display: block !important;
}

/* Hide KM button in top right (keep only the one in bottom left) */
button[style*="position: absolute"][style*="right: 400px"]:not(.units-btn-left) {
  display: none !important;
}

/* Hide units toggle button in top right */
.units-toggle-button {
  display: none !important;
}

/* Hide Mapbox default controls (zoom, compass) in bottom right corner */
.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-zoom-out,
.mapboxgl-ctrl-compass {
  display: none !important;
}

.mapboxgl-ctrl-group {
  display: none !important;
}

/* Remove any left margin/padding from layout - map should be full width */
.app-container,
.main-area,
.navigation-content,
.main-map-area,
.map-view {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Ensure map container is full width */
.mapboxgl-map,
.map-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force main menu to be completely hidden when closed */
.main-menu:not(.open) {
  left: -400px !important;
  width: 0 !important;
  display: none !important;
}

/* Ensure main-area starts at left edge */
.main-area,
.main-area.full-width {
  margin-left: 0 !important;
  padding-left: 0 !important;
  left: 0 !important;
}

.moderation-panel {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

/* Header */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

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

.severity-filter {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.btn-refresh {
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-refresh:hover {
  background: #45a049;
}

/* Loading & Error States */
.loading-state,
.error-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h3 {
  color: #f44336;
  margin-bottom: 12px;
}

.btn-retry {
  padding: 10px 24px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
}

.empty-state p:first-child {
  font-size: 32px;
  margin-bottom: 8px;
}

.empty-subtitle {
  color: #666;
  font-size: 14px;
}

/* Reports Layout */
.reports-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-gap: 20px;
  gap: 20px;
  min-height: 600px;
}

/* Reports Queue */
.reports-queue {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: -webkit-fit-content;
  height: fit-content;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.reports-queue h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Report Card */
.report-card {
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.report-card:hover {
  border-color: #4CAF50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-card.selected {
  border-color: #4CAF50;
  background: #f1f8f4;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.severity-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.severity-critical {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #f44336;
}

.severity-high {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ff9800;
}

.severity-medium {
  background: #fff9c4;
  color: #f57f17;
  border: 1px solid #fbc02d;
}

.severity-low {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.severity-unknown {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ccc;
}

.report-type {
  font-size: 12px;
  color: #666;
  text-transform: capitalize;
}

.report-title {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.report-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

/* Report Details */
.report-details {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
}

.details-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.report-id {
  font-size: 12px;
  color: #999;
  font-family: 'Courier New', monospace;
}

.details-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-row.full-width {
  grid-column: 1 / -1;
}

.detail-row label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}

.detail-row span {
  font-size: 14px;
  color: #333;
}

/* Moderator Notes */
.moderator-notes-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moderator-notes-section label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.moderator-notes-input {
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}

.moderator-notes-input:focus {
  outline: none;
  border-color: #4CAF50;
}

.notes-hint {
  font-size: 11px;
  color: #999;
  margin: 0;
}

/* Action Buttons */
.details-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #e0e0e0;
}

.btn-approve,
.btn-reject {
  flex: 1 1;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-approve {
  background: #4CAF50;
  color: white;
}

.btn-approve:hover:not(:disabled) {
  background: #45a049;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-reject {
  background: #f44336;
  color: white;
}

.btn-reject:hover:not(:disabled) {
  background: #da190b;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.btn-approve:disabled,
.btn-reject:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* No Selection State */
.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #999;
  font-size: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .reports-layout {
    grid-template-columns: 1fr;
  }

  .reports-queue {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .panel-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .severity-filter,
  .btn-refresh {
    width: 100%;
  }

  .details-content {
    grid-template-columns: 1fr;
  }

  .details-actions {
    flex-direction: column;
  }
}

.stats-dashboard {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

/* Header */
.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.btn-refresh-stats {
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-refresh-stats:hover {
  background: #45a049;
}

/* Loading & Error */
.stats-loading,
.stats-error {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

/* Stat Card */
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 4px solid #ccc;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 48px;
  line-height: 1;
}

.stat-content {
  flex: 1 1;
}

.stat-content h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  margin: 0;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.stat-subtitle {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #999;
}

/* Stat Card Colors */
.stat-total {
  border-left-color: #2196F3;
}

.stat-pending {
  border-left-color: #FF9800;
}

.stat-approved {
  border-left-color: #4CAF50;
}

.stat-rejected {
  border-left-color: #f44336;
}

.stat-critical {
  border-left-color: #E91E63;
}

.stat-alerts {
  border-left-color: #FF5722;
}

.stat-time {
  border-left-color: #9C27B0;
}

.stat-progress {
  border-left-color: #00BCD4;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 6px;
  transition: width 0.6s ease;
}

/* Charts Section */
.stats-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-card h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

/* Pie Chart Placeholder */
.pie-chart-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.pie-slice {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: transform 0.2s;
}

.pie-slice:hover {
  transform: translateX(4px);
}

.pie-slice::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pie-slice.pending::before {
  background: #FF9800;
}

.pie-slice.approved::before {
  background: #4CAF50;
}

.pie-slice.rejected::before {
  background: #f44336;
}

/* Insights List */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
}

.insight-label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.insight-value {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* Footer */
.stats-footer {
  text-align: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.last-updated {
  margin: 0;
  font-size: 12px;
  color: #999;
}

/* Responsive */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .stats-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .btn-refresh-stats {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-icon {
    font-size: 36px;
  }

  .stat-value {
    font-size: 28px;
  }

  .insight-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* File-ID: f2a3b4c5-d6e7-8f9a-0b1c-2d3e4f5a6b7c */
/* Owner: King Group Tech */
/* Feature: Exclusion Zone Admin */
/* Summary: Exclusion zone admin styles (extracted from inline) */

.exclusion-zone-admin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.exclusion-zone-admin-panel {
  background: white;
  border-radius: 16px;
  padding: 30px;
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #E0E0E0;
}

.admin-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.close-button {
  background: #F44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

.close-button:hover {
  background: #D32F2F;
}

.create-zone-button-container {
  margin-bottom: 20px;
}

.create-zone-button {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.create-zone-button:hover {
  background: #45a049;
}

.zone-form {
  background: #F5F5F5;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.zone-form h3 {
  margin-top: 0;
  color: #333;
}

.preset-buttons-section {
  margin-bottom: 20px;
}

.preset-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.preset-button {
  padding: 8px 16px;
  border: 2px solid #2196F3;
  background: white;
  color: #2196F3;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.preset-button:hover {
  background: #2196F3;
  color: white;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #555;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #DDD;
  border-radius: 6px;
  font-size: 14px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #2196F3;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
}

.form-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.submit-button {
  background: #2196F3;
  color: white;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
}

.submit-button:hover {
  background: #1976D2;
}

.submit-button:disabled {
  background: #BDBDBD;
  cursor: not-allowed;
}

.zones-list-section h3 {
  color: #333;
  margin-bottom: 20px;
}

.zones-list {
  display: grid;
  grid-gap: 15px;
  gap: 15px;
}

.zone-card {
  background: white;
  border: 2px solid #E0E0E0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s;
}

.zone-card.active {
  border-color: #4CAF50;
  background: #F1F8F4;
}

.zone-card.inactive {
  border-color: #FF9800;
  background: #FFF8E1;
  opacity: 0.8;
}

.zone-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.zone-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.zone-info {
  flex: 1 1;
}

.zone-name {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-status-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.zone-status-badge.active {
  background: #4CAF50;
  color: white;
}

.zone-status-badge.inactive {
  background: #FF9800;
  color: white;
}

.zone-description {
  color: #666;
  margin: 0 0 12px 0;
}

.zone-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 13px;
  color: #777;
}

.detail-item {
  display: inline-block;
}

.zone-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.activate-button {
  background: #4CAF50;
  color: white;
}

.deactivate-button {
  background: #FF9800;
  color: white;
}

.delete-button {
  background: #F44336;
  color: white;
}

.action-button:hover {
  opacity: 0.8;
}

.loading-message,
.empty-message {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 16px;
}

.poi-safety-admin-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.admin-page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.header-content h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.header-subtitle {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e2e8f0;
}

.tab-button {
  background: none;
  border: none;
  padding: 15px 25px;
  font-size: 1rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s ease;
  position: relative;
}

.tab-button:hover {
  background-color: #f1f5f9;
  color: #334155;
}

.tab-button.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.admin-tab-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid #e2e8f0;
}

.admin-page-footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: #64748b;
  font-size: 0.9rem;
}

.admin-page-footer a {
  color: #3b82f6;
  text-decoration: none;
}

.admin-page-footer a:hover {
  text-decoration: underline;
}

/* Moderation Panel Styles */
.moderation-panel {
  min-height: 400px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.panel-header h2 {
  margin: 0;
  color: #1e293b;
  font-size: 1.5rem;
}

.refresh-btn {
  background: #10b981;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

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

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  font-size: 1.1rem;
}

.reports-list {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.report-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: #fafafa;
  transition: box-shadow 0.2s ease;
}

.report-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

.report-id {
  font-weight: 700;
  color: #3b82f6;
  font-size: 0.9rem;
}

.report-date {
  color: #64748b;
  font-size: 0.9rem;
}

.report-content {
  margin-bottom: 20px;
}

.report-content p {
  margin: 8px 0;
  color: #374151;
}

.report-actions {
  display: flex;
  gap: 10px;
}

.approve-btn {
  background: #10b981;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

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

.reject-btn {
  background: #ef4444;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.reject-btn:hover {
  background: #dc2626;
}

/* Stats Panel Styles */
.stats-panel {
  min-height: 400px;
}

.stats-panel h2 {
  margin: 0 0 30px 0;
  color: #1e293b;
  font-size: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 500;
}

.refresh-section {
  text-align: center;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 1.1rem;
}

.error {
  color: #ef4444;
}

.loading {
  color: #64748b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .poi-safety-admin-page {
    padding: 15px;
  }
  
  .admin-page-header {
    padding: 20px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .admin-tabs {
    flex-direction: column;
  }
  
  .tab-button {
    border-radius: 8px;
    margin-bottom: 5px;
  }
  
  .admin-tab-content {
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .report-actions {
    flex-direction: column;
  }
}
/**
 * FILE: AdminDashboard.css
 * LAYER: frontend
 * FEATURE: admin
 * RESPONSIBILITY: Styles for Admin Dashboard
 * OWNER: King Group Tech
 * VERSION: 3.0.0
 */

/* Reset e Base */
.admin-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #0f0f0f 100%);
  color: #ffffff;
  overflow-x: hidden;
}

/* Loading */
.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #0f0f0f;
}

.admin-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ========== HEADER ========== */
.admin-header {
  background: rgba(20, 20, 30, 0.98);
  border-bottom: 2px solid #d4af37;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-crown {
  font-size: 2rem;
}

.admin-header-left h1 {
  font-size: 1.5rem;
  color: #d4af37;
  margin: 0;
  font-weight: 700;
}

.admin-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* App Engine Toggle */
.admin-appengine-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* App Engine Status Indicator (replaces toggle) */
.admin-appengine-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.admin-appengine-status .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse-green 2s ease-in-out infinite;
}

.admin-appengine-status .status-indicator.on {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.admin-appengine-status .status-text {
  font-size: 0.85rem;
  color: #10b981;
  font-weight: 500;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.toggle-label {
  font-size: 0.85rem;
  color: #999;
}

.toggle-btn {
  width: 50px;
  height: 26px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-btn.on {
  background: linear-gradient(90deg, #10b981, #059669);
}

.toggle-btn.off {
  background: #4a4a4a;
}

.toggle-btn.loading {
  opacity: 0.6;
  cursor: wait;
}

.toggle-slider {
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.toggle-btn.on .toggle-slider {
  left: 26px;
}

.toggle-status {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 30px;
}

.toggle-status.on {
  color: #10b981;
}

.toggle-status.off {
  color: #ef4444;
}

/* User Section */
.admin-user-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-badge {
  background: linear-gradient(135deg, #d4af37, #8b6914);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  color: #000;
  font-size: 0.9rem;
}

.admin-btn-logout {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  color: #ef4444;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.admin-btn-logout:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* ========== TABS ========== */
.admin-tabs {
  display: flex;
  gap: 0;
  background: rgba(20, 20, 30, 0.8);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding: 0 1rem;
  overflow-x: auto;
}

.admin-tab {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.admin-tab:hover {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
}

.admin-tab.active {
  color: #d4af37;
  border-bottom-color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
}

/* Preview Site Button - Special styling */
.admin-tab.admin-tab-preview {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  margin: 0.5rem 0.5rem 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
}

.admin-tab.admin-tab-preview:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ========== CONTENT ========== */
.admin-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-section {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-section h2 {
  font-size: 1.5rem;
  color: #d4af37;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.section-desc {
  color: #888;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ========== STATS GRID ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: #d4af37;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.stat-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d4af37;
}

.stat-label {
  color: #888;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ========== INFO BOX ========== */
.info-box {
  background: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.info-box h3, .info-box h4 {
  color: #d4af37;
  margin-bottom: 1rem;
}

.info-box p {
  color: #ccc;
  margin: 0.5rem 0;
}

.info-box.warning {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.1);
}

.info-box.warning h4 {
  color: #f59e0b;
}

.info-box .info-small {
  font-size: 0.85rem;
  color: #888;
  margin: 0.25rem 0 0.75rem 0;
  font-style: italic;
}

/* ========== SEARCH BOX ========== */
.search-box {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.search-box input {
  flex: 1 1;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
}

.search-box input:focus {
  outline: none;
  border-color: #d4af37;
}

.search-box button {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #d4af37, #8b6914);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.search-box button:hover {
  transform: translateY(-2px);
}

.search-box button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ========== USERS TABLE ========== */
.users-table-container {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

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

.users-table th {
  background: rgba(212, 175, 55, 0.2);
  padding: 1rem;
  text-align: left;
  color: #d4af37;
  font-weight: 600;
}

.users-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.users-table tr:hover {
  background: rgba(212, 175, 55, 0.05);
}

.empty-row {
  text-align: center;
  color: #666;
  padding: 2rem !important;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

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

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

/* ========== VISIBILITY CONTROLS ========== */
.visibility-controls {
  margin-bottom: 2rem;
}

.bulk-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.bulk-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: #d4af37;
  cursor: pointer;
  transition: all 0.3s;
}

.bulk-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
}

.apps-visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.app-visibility-card {
  background: rgba(30, 30, 45, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.app-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-icon {
  font-size: 1.5rem;
}

.app-name {
  font-weight: 600;
  color: #fff;
}

.app-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #888;
}

.mini-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.mini-toggle.on {
  background: #10b981;
}

.mini-toggle.off {
  background: #4a4a4a;
}

.mini-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mini-toggle-slider {
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}

.mini-toggle.on .mini-toggle-slider {
  left: 18px;
}

.no-apk {
  font-size: 0.7rem;
  color: #666;
}

/* ========== PREVIEW ========== */
.preview-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.preview-section h3 {
  color: #d4af37;
  margin-bottom: 1rem;
}

.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.preview-card {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.preview-icon {
  font-size: 1.5rem;
}

.preview-name {
  font-weight: 600;
}

.preview-download {
  background: #10b981;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.preview-empty {
  color: #666;
  font-style: italic;
}

/* ========== UPDATES CONTROL ========== */
.updates-control {
  max-width: 800px;
}

.update-toggle-box {
  background: rgba(30, 30, 45, 0.8);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.update-toggle-info h3 {
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.update-toggle-info p {
  color: #888;
  font-size: 0.9rem;
}

.big-toggle {
  width: 100px;
  height: 50px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
}

.big-toggle.on {
  background: linear-gradient(90deg, #10b981, #059669);
}

.big-toggle.off {
  background: #4a4a4a;
  justify-content: flex-start;
}

.big-toggle-slider {
  position: absolute;
  width: 42px;
  height: 42px;
  background: white;
  border-radius: 50%;
  left: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.big-toggle.on .big-toggle-slider {
  left: 54px;
}

.big-toggle-label {
  font-weight: 700;
  color: white;
  font-size: 0.9rem;
  z-index: 1;
}

.version-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.version-card {
  background: rgba(30, 30, 45, 0.8);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.version-card.stable {
  border-color: rgba(16, 185, 129, 0.5);
}

.version-card.beta {
  border-color: rgba(245, 158, 11, 0.5);
}

.version-card h4 {
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.version-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0.5rem 0;
}

.version-date {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.version-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .admin-header-right {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .admin-tabs {
    justify-content: flex-start;
  }
  
  .admin-tab {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .admin-content {
    padding: 1rem;
  }
  
  .update-toggle-box {
    flex-direction: column;
    text-align: center;
  }
  
  .app-visibility-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ========== SAVING INDICATOR ========== */
.saving-indicator {
  display: inline-block;
  color: #d4af37;
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.big-toggle.loading {
  opacity: 0.7;
  cursor: wait;
}

.big-toggle:disabled {
  cursor: not-allowed;
}

/* ========== EMAILS TAB ========== */
.emails-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.email-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(30, 30, 45, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
}

.email-card:hover {
  background: linear-gradient(135deg, rgba(40, 40, 60, 0.95) 0%, rgba(30, 30, 50, 1) 100%);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
}

.email-card.superadmin {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, rgba(50, 40, 20, 0.9) 0%, rgba(30, 25, 15, 0.95) 100%);
}

.email-card.superadmin:hover {
  border-color: rgba(255, 215, 0, 0.7);
  background: linear-gradient(135deg, rgba(60, 50, 25, 0.95) 0%, rgba(40, 35, 20, 1) 100%);
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.2);
}

.email-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  flex-shrink: 0;
}

.email-card.superadmin .email-icon {
  background: rgba(255, 215, 0, 0.15);
}

.email-info {
  flex: 1 1;
}

.email-info h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1.15rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.email-card.superadmin .email-info h3 {
  color: #ffd700;
}

.email-info p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.email-arrow {
  font-size: 1.5rem;
  color: rgba(212, 175, 55, 0.5);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.email-card:hover .email-arrow {
  color: #d4af37;
  transform: translateX(5px);
}

.email-card.superadmin:hover .email-arrow {
  color: #ffd700;
}

/* Responsive for emails */
@media (max-width: 600px) {
  .email-card {
    padding: 1rem;
    gap: 1rem;
  }
  
  .email-icon {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
  
  .email-info h3 {
    font-size: 0.95rem;
    word-break: break-all;
  }
  
  .email-info p {
    font-size: 0.8rem;
  }
}

/* Admin Roles Panel CSS */
/* File-ID: admin-roles-panel-css */

.admin-roles-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.admin-roles-panel {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-radius: 16px;
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.admin-roles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.admin-roles-header h2 {
  margin: 0;
  color: #ffd700;
  font-size: 1.3rem;
  font-weight: 600;
}

.admin-roles-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-roles-header .close-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

.admin-roles-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Bootstrap Notice */
.bootstrap-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: 10px;
  margin-bottom: 16px;
}

.bootstrap-notice span {
  font-size: 1.5rem;
}

.bootstrap-notice strong {
  color: #4CAF50;
  display: block;
  margin-bottom: 4px;
}

.bootstrap-notice p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

/* Error Message */
.error-message {
  padding: 12px 16px;
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 8px;
  color: #F44336;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Sections */
.panel-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-section h3 {
  color: #ffd700;
  font-size: 1rem;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

/* Input Groups */
.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  outline: none;
  border-color: #ffd700;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.input-group select option {
  background: #1a1a2e;
  color: #fff;
}

/* Buttons */
.promote-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  border: none;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.promote-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe135 0%, #ffc107 100%);
  transform: translateY(-1px);
}

.promote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.refresh-btn {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.refresh-btn:disabled {
  opacity: 0.5;
}

/* Admin List */
.admins-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  width: -webkit-fit-content;
  width: fit-content;
}

.role-badge.superadmin {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.role-badge.admin {
  background: rgba(33, 150, 243, 0.2);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

.admin-email {
  color: #fff;
  font-size: 0.95rem;
}

.admin-date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

.revoke-btn {
  width: 36px;
  height: 36px;
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 8px;
  color: #F44336;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.revoke-btn:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.25);
}

.revoke-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.no-admins {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 20px;
  font-style: italic;
}

.loading {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 20px;
}

/* Info Section */
.info-section {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.2);
}

.info-section h3 {
  color: #2196F3;
  border-bottom-color: rgba(33, 150, 243, 0.3);
}

.info-section ul {
  margin: 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.6;
}

.info-section ul li {
  margin-bottom: 6px;
}

.info-section strong {
  color: #fff;
}

/* Scrollbar */
.admin-roles-content::-webkit-scrollbar {
  width: 6px;
}

.admin-roles-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.admin-roles-content::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 600px) {
  .admin-roles-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  
  .admin-roles-header h2 {
    font-size: 1.1rem;
  }
  
  .admin-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .revoke-btn {
    align-self: flex-end;
  }
}

/* Admin Control Panel CSS */
/* File-ID: admin-control-panel-css */

.admin-control-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.admin-control-panel {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-radius: 16px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.admin-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.admin-control-header h2 {
  margin: 0;
  color: #d4af37;
  font-size: 1.2rem;
  font-weight: 600;
}

.admin-control-header .close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-control-header .close-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

/* Tabs */
.control-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.control-tab {
  flex: 1 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-tab:hover {
  background: rgba(212, 175, 55, 0.1);
}

.control-tab.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
  color: #d4af37;
}

.admin-control-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Mode Selector */
.mode-selector {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.mode-selector label {
  display: block;
  color: #d4af37;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.mode-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 70px;
}

.mode-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

.mode-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #d4af37;
}

.mode-btn.has-config::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
}

.config-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #4CAF50;
  color: #fff;
  font-size: 0.65rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-info {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.mode-info strong {
  color: #d4af37;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.setting-group {
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.setting-group label {
  display: block;
  color: #fff;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.setting-group input[type="number"],
.setting-group select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}

.setting-group input[type="number"]:focus,
.setting-group select:focus {
  outline: none;
  border-color: #d4af37;
}

.setting-group select option {
  background: #1a1a2e;
}

.setting-group input[type="range"] {
  width: calc(100% - 50px);
  height: 6px;
  -webkit-appearance: none;
  background: #333;
  border-radius: 3px;
  outline: none;
}

.setting-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #d4af37;
  border-radius: 50%;
  cursor: pointer;
}

.value-display {
  display: inline-block;
  min-width: 45px;
  text-align: right;
  color: #d4af37;
  font-weight: 600;
  margin-left: 8px;
}

.hint {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-top: 6px;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
}

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

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: 0.3s;
  border-radius: 26px;
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #666;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .slider {
  background-color: #4CAF50;
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(24px);
  background-color: #fff;
}

/* Reason Section */
.reason-section {
  margin-top: 20px;
  padding: 16px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 10px;
}

.reason-section label {
  display: block;
  color: #FFC107;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.reason-section textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  resize: vertical;
}

/* Scope Prompt */
.scope-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  padding: 24px;
  border-radius: 16px;
  border: 2px solid #d4af37;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  z-index: 100;
  text-align: center;
  min-width: 350px;
}

.scope-prompt h3 {
  color: #d4af37;
  margin: 0 0 20px 0;
  font-size: 1.1rem;
}

.scope-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.scope-btn {
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scope-btn.global {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  color: #fff;
}

.scope-btn.global:hover:not(:disabled) {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
}

.scope-btn.mode {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: #fff;
}

.scope-btn.mode:hover:not(:disabled) {
  background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%);
}

.scope-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scope-prompt .cancel-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}

/* Footer */
.admin-control-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.changes-indicator {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.save-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #d4af37 0%, #b8963c 100%);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e5c158 0%, #d4af37 100%);
}

.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading & Error */
.loading-state {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.6);
}

.error-message {
  padding: 12px 16px;
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 8px;
  color: #F44336;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 700px) {
  .admin-control-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  
  .settings-grid {
    grid-template-columns: 1fr;
  }
  
  .mode-btn {
    min-width: 60px;
    padding: 8px 10px;
  }
  
  .scope-prompt {
    min-width: auto;
    width: 90%;
  }
}

/* ============================================================
   Project      : KingRoad / Family King
   File         : RoadProfile3DPage.css
   Feature      : 3D Road Profile Collection & Aggregation
   Layer        : frontend
   Summary      : Styles for road profile 3D feature components.
                  Dark theme consistent with KingRoad GPS design.
   Created-At   : 2025-12-19
   Last-Updated : 2025-12-19
   ============================================================ */

.road-profile-3d-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  color: #e2e8f0;
}

.profile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: #94a3b8;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
}

.profile-header .header-icon {
  color: #06b6d4;
}

.profile-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.profile-header p {
  margin: 4px 0 0 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
  margin-bottom: 16px;
}

/* Tabs */
.profile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #334155;
  padding-bottom: 8px;
}

.tab-button {
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s;
}

.tab-button:hover:not(:disabled) {
  background-color: #1e293b;
  color: #e2e8f0;
}

.tab-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-button.active {
  background-color: #1e293b;
  color: #06b6d4;
  border-bottom: 2px solid #06b6d4;
}

/* Collection Status */
.collection-status {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.header-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.header-info h2 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}

.header-info p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #334155;
  border: none;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.9rem;
  cursor: pointer;
}

.refresh-btn:hover {
  background-color: #475569;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #06b6d4;
}

.stat-label {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 4px;
}

.config-section,
.data-flow-section,
.vehicle-classes-note {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 1rem;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.config-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: #0f172a;
  border-radius: 8px;
}

.config-label {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 4px;
}

.config-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* Pipeline */
.pipeline-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #0f172a;
  border-radius: 8px;
  flex: 1 1;
}

.step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #06b6d4;
  border-radius: 50%;
  font-weight: 700;
  color: white;
}

.step-info {
  display: flex;
  flex-direction: column;
}

.step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e2e8f0;
}

.step-desc {
  font-size: 0.75rem;
  color: #64748b;
}

.pipeline-arrow {
  color: #64748b;
  font-size: 1.5rem;
  padding: 0 8px;
}

/* Vehicle Classes */
.vehicle-classes-note h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.class-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
}

.class-item.heavy {
  background-color: rgba(249, 115, 22, 0.1);
  border: 1px solid #f97316;
}

.class-item.light {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
}

.class-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
}

.class-item.heavy .class-badge {
  background-color: #f97316;
}

.class-item.light .class-badge {
  background-color: #3b82f6;
}

.class-desc {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
}

/* Aggregation Panel */
.aggregation-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.panel-header h2 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}

.panel-header p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.trigger-section {
  padding: 24px;
  background-color: #1e293b;
  border-radius: 12px;
}

.trigger-section h3 {
  margin: 0 0 20px 0;
  font-size: 1.1rem;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 8px;
}

.form-group.checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-group textarea {
  width: 100%;
  padding: 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-family: monospace;
  resize: vertical;
}

.form-group textarea:focus {
  outline: none;
  border-color: #06b6d4;
}

.road-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.road-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.road-type-btn:hover {
  border-color: #06b6d4;
  color: #e2e8f0;
}

.road-type-btn.selected {
  background-color: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #06b6d4;
}

.trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background-color: #06b6d4;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.trigger-btn:hover:not(:disabled) {
  background-color: #0891b2;
}

.trigger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.result-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  border-radius: 8px;
}

.result-icon {
  font-size: 1.5rem;
}

.result-info {
  display: flex;
  flex-direction: column;
}

.result-title {
  font-weight: 600;
  color: #22c55e;
}

.result-detail {
  font-size: 0.85rem;
  color: #94a3b8;
}

.aggregation-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background-color: rgba(234, 179, 8, 0.1);
  border: 1px solid #eab308;
  border-radius: 8px;
  color: #fde047;
}

.aggregation-note strong {
  color: #fde047;
}

.aggregation-note p {
  margin: 8px 0 0 0;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Segment Profile Viewer */
.segment-profile-viewer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.viewer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background-color: #1e293b;
  border-radius: 12px;
  color: #64748b;
}

.viewer-empty .empty-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.viewer-empty h3 {
  margin: 0 0 8px 0;
  color: #94a3b8;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.viewer-header .header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.viewer-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.segment-id {
  font-family: monospace;
  font-size: 0.85rem;
  color: #64748b;
}

.close-btn {
  padding: 8px;
  background-color: #334155;
  border: none;
  border-radius: 6px;
  color: #e2e8f0;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #475569;
}

.profile-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background-color: #1e293b;
  border-radius: 12px;
  color: #eab308;
  text-align: center;
}

.profile-not-found h3 {
  margin: 16px 0 8px 0;
}

.profile-not-found p {
  margin: 0;
  color: #94a3b8;
  max-width: 400px;
}

.profile-content {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.profile-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 0.85rem;
  color: #64748b;
}

.summary-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
}

.summary-value.status {
  color: #22c55e;
}

.geometry-section h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.geometry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.geometry-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background-color: #0f172a;
  border-radius: 8px;
}

.geometry-item svg {
  color: #06b6d4;
}

.geo-label {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

.geo-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* Vehicle Stats */
.vehicle-stats-section {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.vehicle-stats-section h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.vehicle-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.vehicle-stat-card {
  padding: 20px;
  border-radius: 12px;
}

.vehicle-stat-card.heavy {
  background-color: rgba(249, 115, 22, 0.1);
  border: 1px solid #f97316;
}

.vehicle-stat-card.light {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
}

.vehicle-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.vehicle-stat-card.heavy .vehicle-header {
  color: #f97316;
}

.vehicle-stat-card.light .vehicle-header {
  color: #3b82f6;
}

.vehicle-header span {
  font-weight: 600;
}

.safety-badge {
  margin-left: auto;
  padding: 4px 8px;
  background-color: rgba(34, 197, 94, 0.2);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #22c55e;
}

.vehicle-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.metric {
  text-align: center;
}

.metric-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #e2e8f0;
}

.metric-label {
  font-size: 0.75rem;
  color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
  .stats-grid,
  .config-grid,
  .geometry-grid,
  .vehicle-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pipeline-steps {
    flex-direction: column;
    gap: 8px;
  }

  .pipeline-arrow {
    transform: rotate(90deg);
  }

  .profile-tabs {
    flex-wrap: wrap;
  }
}

/* Deviations Panel */
.deviations-panel,
.aggregation-history,
.segments-needing-data {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.deviations-loading,
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: #94a3b8;
}

.deviations-summary,
.history-stats,
.segments-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.summary-card.warning {
  border: 1px solid #eab308;
}

.summary-card.critical {
  border: 1px solid #ef4444;
}

.summary-card.completed {
  border: 1px solid #22c55e;
}

.summary-card.failed {
  border: 1px solid #ef4444;
}

.no-deviations,
.no-history,
.no-segments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background-color: #1e293b;
  border-radius: 12px;
  color: #64748b;
  text-align: center;
}

.no-deviations svg,
.no-history svg,
.no-segments svg {
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-deviations p,
.no-history p,
.no-segments p {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #94a3b8;
}

.no-deviations span,
.no-history span,
.no-segments span {
  color: #64748b;
  font-size: 0.9rem;
}

/* Tables */
.deviations-list,
.history-list,
.segments-list {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
  overflow-x: auto;
}

.deviations-table,
.history-table,
.segments-table {
  width: 100%;
  border-collapse: collapse;
}

.deviations-table th,
.history-table th,
.segments-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1px solid #334155;
}

.deviations-table td,
.history-table td,
.segments-table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #e2e8f0;
  border-bottom: 1px solid #1e293b;
}

.deviations-table tbody tr:hover,
.history-table tbody tr:hover,
.segments-table tbody tr:hover {
  background-color: #0f172a;
}

/* Severity Badges */
.severity-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.severity-critical {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.severity-warning {
  background-color: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.severity-low {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

/* Status Badges */
.status-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.status-raw {
  background-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.status-badge.status-in_validation {
  background-color: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.status-badge.status-ready_3d {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-badge.status-provisional_3d {
  background-color: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

/* Priority Badges */
.priority-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.priority-badge.priority-high {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.priority-badge.priority-normal {
  background-color: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.priority-badge.priority-low {
  background-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* Progress Bar */
.progress-bar-container {
  position: relative;
  height: 20px;
  background-color: #0f172a;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-bar.progress-high {
  background-color: #22c55e;
}

.progress-bar.progress-medium {
  background-color: #06b6d4;
}

.progress-bar.progress-low {
  background-color: #eab308;
}

.progress-bar.progress-minimal {
  background-color: #64748b;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

/* Action Buttons */
.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: #334155;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #475569;
  color: #e2e8f0;
}

/* Status Cell */
.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-completed {
  color: #22c55e;
}

.status-failed {
  color: #ef4444;
}

.status-running {
  color: #06b6d4;
}

.status-pending {
  color: #eab308;
}

/* History Row Status */
.history-table tbody tr.status-completed {
  border-left: 3px solid #22c55e;
}

.history-table tbody tr.status-failed {
  border-left: 3px solid #ef4444;
}

.history-table tbody tr.status-running {
  border-left: 3px solid #06b6d4;
}

/* Load More */
.load-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.load-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: #334155;
  border: none;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.9rem;
  cursor: pointer;
}

.load-more-btn:hover:not(:disabled) {
  background-color: #475569;
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Filters */
.filters {
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: #1e293b;
  border-radius: 12px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.filter-group select {
  padding: 8px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.9rem;
}

.filter-group select:focus {
  outline: none;
  border-color: #06b6d4;
}

/* Modal */
.deviation-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 600px;
  background-color: #1e293b;
  border-radius: 12px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #334155;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-body {
  padding: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: #0f172a;
  border-radius: 8px;
}

.detail-item label {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 4px;
}

.detail-item span {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
}

.recommendations {
  padding: 16px;
  background-color: rgba(6, 182, 212, 0.1);
  border: 1px solid #06b6d4;
  border-radius: 8px;
}

.recommendations h4 {
  margin: 0 0 12px 0;
  color: #06b6d4;
}

.recommendations ul {
  margin: 0;
  padding-left: 20px;
  color: #94a3b8;
}

.recommendations li {
  margin-bottom: 6px;
}

/* Error Message */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
}

/* Animation */
.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* ============================================================
   Project      : KingRoad / Family King
   File         : CurveSafetyPage.css
   Feature      : Curve Safety Analytics
   Layer        : frontend
   Summary      : Styles for curve safety feature components.
                  Dark theme consistent with KingRoad GPS design.
   Created-At   : 2025-12-19
   Last-Updated : 2025-12-19
   ============================================================ */

.curve-safety-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  color: #e2e8f0;
}

.curve-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: #94a3b8;
}

.curve-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
}

.curve-header .header-icon {
  color: #f97316;
}

.curve-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.curve-header p {
  margin: 4px 0 0 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
  margin-bottom: 16px;
}

/* Tabs */
.curve-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #334155;
  padding-bottom: 8px;
}

.tab-button {
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s;
}

.tab-button:hover {
  background-color: #1e293b;
  color: #e2e8f0;
}

.tab-button.active {
  background-color: #1e293b;
  color: #f97316;
  border-bottom: 2px solid #f97316;
}

/* Risk Level Display */
.risk-level-display {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.risk-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.risk-intro h2 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.risk-intro p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.risk-levels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.risk-level-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
  border-left: 4px solid;
}

.risk-icon-wrapper {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.risk-info {
  flex: 1 1;
}

.risk-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.risk-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
}

.priority-badge {
  font-size: 0.8rem;
  font-weight: 500;
}

.risk-description {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.risk-notes {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.risk-notes h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.risk-notes ul {
  margin: 0;
  padding-left: 20px;
  color: #94a3b8;
}

.risk-notes li {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

/* Curve List */
.curve-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.curve-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background-color: #1e293b;
  border-radius: 12px;
  color: #64748b;
}

.curve-list-empty .empty-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.curve-list-empty h3 {
  margin: 0 0 8px 0;
  color: #94a3b8;
}

.list-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.curves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.curve-card {
  background-color: #1e293b;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.curve-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.curve-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.risk-indicator {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.curve-id {
  font-family: monospace;
  font-size: 0.85rem;
  color: #64748b;
}

.curve-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.detail-item svg {
  color: #64748b;
}

.incident-stats {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid #334155;
}

.stat-item {
  font-size: 0.85rem;
  color: #94a3b8;
}

.stat-item.major {
  color: #ef4444;
}

/* Search Panel */
.search-panel {
  background-color: #1e293b;
  border-radius: 12px;
  padding: 24px;
}

.search-panel h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.search-panel > p {
  margin: 0 0 20px 0;
  color: #94a3b8;
}

.search-form {
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.form-group input {
  padding: 10px 14px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.95rem;
}

.form-group input:focus {
  outline: none;
  border-color: #f97316;
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background-color: #f97316;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-button:hover:not(:disabled) {
  background-color: #ea580c;
}

.search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.search-results {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #334155;
}

.search-results h3 {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
}

.no-results {
  color: #64748b;
  text-align: center;
  padding: 20px;
}

/* Stats */
.curve-safety-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.stats-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.stats-header p {
  margin: 0;
  color: #94a3b8;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
  border-left: 4px solid transparent;
}

.stat-card.total {
  border-color: #3b82f6;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #e2e8f0;
}

.stat-card.total .stat-value {
  color: #3b82f6;
}

.stat-label {
  font-size: 0.85rem;
  color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
  .risk-levels-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .curves-grid {
    grid-template-columns: 1fr;
  }

  .curve-tabs {
    flex-wrap: wrap;
  }
}

/* Curve Detail View Modal */
.curve-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.curve-detail-modal {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background-color: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #334155;
}

.detail-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.detail-header .curve-id {
  display: block;
  font-size: 0.85rem;
  color: #64748b;
  font-family: monospace;
}

.detail-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
}

.detail-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.detail-tab:hover {
  background-color: #334155;
  color: #e2e8f0;
}

.detail-tab.active {
  background-color: #334155;
  color: #f97316;
}

.detail-loading {
  padding: 48px;
  text-align: center;
  color: #94a3b8;
}

.detail-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

/* Speed Cards */
.speed-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.speed-card {
  padding: 20px;
  border-radius: 12px;
}

.speed-card.heavy {
  background-color: rgba(249, 115, 22, 0.1);
  border: 1px solid #f97316;
}

.speed-card.light {
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid #3b82f6;
}

.speed-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.speed-card.heavy .card-header {
  color: #f97316;
}

.speed-card.light .card-header {
  color: #3b82f6;
}

.speed-card .safety-badge {
  margin-left: auto;
  padding: 4px 8px;
  background-color: rgba(34, 197, 94, 0.2);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #22c55e;
}

.speed-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #e2e8f0;
  text-align: center;
  margin-bottom: 16px;
}

.speed-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.speed-stats .stat {
  text-align: center;
}

.speed-stats .label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
}

.speed-stats .value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* Weather Adjustments */
.weather-adjustments {
  padding: 20px;
  background-color: #0f172a;
  border-radius: 12px;
  margin-bottom: 24px;
}

.weather-adjustments h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.weather-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.weather-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background-color: #1e293b;
  border-radius: 8px;
}

.weather-item svg {
  color: #06b6d4;
  margin-bottom: 8px;
}

.weather-item .condition {
  font-size: 0.85rem;
  color: #94a3b8;
}

.weather-item .adjustment {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ef4444;
}

/* Curve Geometry */
.curve-geometry {
  padding: 20px;
  background-color: #0f172a;
  border-radius: 12px;
}

.curve-geometry h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.geometry-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.geo-stat {
  text-align: center;
  padding: 12px;
  background-color: #1e293b;
  border-radius: 8px;
}

.geo-stat .label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 4px;
}

.geo-stat .value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #06b6d4;
}

/* Incidents Section */
.no-incidents {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  text-align: center;
  color: #64748b;
}

.no-incidents svg {
  color: #22c55e;
  margin-bottom: 16px;
}

.no-incidents p {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #94a3b8;
}

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

.incidents-table th {
  text-align: left;
  padding: 12px;
  font-size: 0.85rem;
  color: #64748b;
  border-bottom: 1px solid #334155;
}

.incidents-table td {
  padding: 12px;
  font-size: 0.9rem;
  color: #e2e8f0;
  border-bottom: 1px solid #1e293b;
}

.severity-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.severity-critical {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.severity-grave {
  background-color: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.severity-moderate {
  background-color: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.severity-light {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

/* Region Stats */
.region-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.region-stats .panel-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.region-stats .filters {
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: #1e293b;
  border-radius: 12px;
  align-items: flex-end;
}

.region-stats .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.region-stats .filter-group label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.region-stats .filter-group input,
.region-stats .filter-group select {
  padding: 8px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.9rem;
}

.filter-btn {
  padding: 8px 16px;
  background-color: #f97316;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.filter-btn:hover {
  background-color: #ea580c;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.stats-summary .summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.stats-summary .summary-card svg {
  color: #06b6d4;
}

.stats-summary .summary-card.warning svg {
  color: #eab308;
}

.stats-summary .summary-value {
  font-size: 2rem;
  font-weight: 700;
  color: #e2e8f0;
}

.stats-summary .summary-label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.risk-distribution,
.top-regions {
  padding: 20px;
  background-color: #1e293b;
  border-radius: 12px;
}

.risk-distribution h3,
.top-regions h3 {
  margin: 0 0 16px 0;
  font-size: 1rem;
}

.distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.level-name {
  color: #94a3b8;
  text-transform: capitalize;
}

.level-count {
  color: #e2e8f0;
  font-weight: 600;
}

.bar-container {
  height: 8px;
  background-color: #0f172a;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

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

.regions-table th {
  text-align: left;
  padding: 12px;
  font-size: 0.85rem;
  color: #64748b;
  border-bottom: 1px solid #334155;
}

.regions-table td {
  padding: 12px;
  font-size: 0.9rem;
  color: #e2e8f0;
  border-bottom: 1px solid #1e293b;
}

.region-code {
  font-family: monospace;
  font-weight: 600;
}

.dangerous-count {
  color: #ef4444;
  font-weight: 600;
}

.risk-score {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.risk-score.risk-0 {
  background-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.risk-score.risk-1 {
  background-color: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.risk-score.risk-2 {
  background-color: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.risk-score.risk-3 {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.no-stats,
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  background-color: #1e293b;
  border-radius: 12px;
  color: #64748b;
  text-align: center;
}

.no-stats svg,
.loading-state svg {
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-stats p {
  margin: 0 0 8px 0;
  color: #94a3b8;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
}

/* Animation */
.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* DEPLOYED BY: MANUS AI (NOT EMERGENT AI) */
/* ============================================================
   Filename     : ConflictReviewDashboard.css
   Date         : 2026-01-15
   Author/Agent : Manus AI
   Purpose      : Styles for conflict review dashboard
   Responsibility: Provide clean admin UI styling
   Dependencies : None
   Note         : Crowd Truck Reality Routing feature
   Project      : KingRoad GPS
   Layer        : frontend
   Feature      : crowd_intelligence
   Status       : active
   ============================================================ */

.conflict-dashboard {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.conflict-dashboard h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #111827;
}

.conflict-dashboard h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #374151;
}

/* Filters */
.filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

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

.filter-group label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.btn-refresh {
  align-self: flex-end;
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-refresh:hover {
  background: #2563eb;
}

/* Conflict List */
.conflict-list {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.no-conflicts {
  text-align: center;
  color: #6b7280;
  padding: 48px;
}

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

.conflict-list thead {
  background: #f9fafb;
}

.conflict-list th {
  text-align: left;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.conflict-list td {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #374151;
}

.severity-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.btn-view {
  padding: 6px 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.btn-view:hover {
  background: #2563eb;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.conflict-detail p {
  margin-bottom: 12px;
  font-size: 14px;
  color: #374151;
}

.conflict-detail pre {
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  margin: 12px 0;
}

.conflict-detail textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.action-buttons button {
  flex: 1 1;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-confirm {
  background: #10b981;
  color: white;
}

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

.btn-incorrect {
  background: #ef4444;
  color: white;
}

.btn-incorrect:hover {
  background: #dc2626;
}

.btn-adjusted {
  background: #f59e0b;
  color: white;
}

.btn-adjusted:hover {
  background: #d97706;
}

.btn-cancel {
  background: #6b7280;
  color: white;
}

.btn-cancel:hover {
  background: #4b5563;
}

/* Loading & Error States */
.conflict-dashboard.loading,
.conflict-dashboard.error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  font-size: 16px;
  color: #6b7280;
}

.conflict-dashboard.error {
  color: #ef4444;
}

/* DEPLOYED BY: MANUS AI (NOT EMERGENT AI) */
/* ============================================================
   Filename     : TruthDashboard.css
   Date         : 2026-01-15
   Author/Agent : Manus AI
   Purpose      : Styles for truth engine dashboard
   Responsibility: Provide clean dashboard UI styling
   Dependencies : None
   Note         : Crowd Truck Reality Routing feature
   Project      : KingRoad GPS
   Layer        : frontend
   Feature      : crowd_intelligence
   Status       : active
   ============================================================ */

.truth-dashboard {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.truth-dashboard h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #111827;
}

.truth-dashboard h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #374151;
}

/* Region Selector */
.region-selector {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.region-selector label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.region-selector select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.btn-refresh {
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-refresh:hover {
  background: #2563eb;
}

/* Stats Cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Truth Table */
.truth-table {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.no-data {
  text-align: center;
  color: #6b7280;
  padding: 48px;
}

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

.truth-table thead {
  background: #f9fafb;
}

.truth-table th {
  text-align: left;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.truth-table td {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #374151;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
}

.conflict-indicator {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
}

.no-conflict {
  color: #10b981;
  font-size: 16px;
}

/* Loading & Error States */
.truth-dashboard.loading,
.truth-dashboard.error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  font-size: 16px;
  color: #6b7280;
}

.truth-dashboard.error {
  color: #ef4444;
}

/* ============================================================
   Project      : KingRoad / Family King
   File         : POIPublishing.css
   Summary      : POI Publishing Component Styles
   Owner        : King Group Tech
   Layer        : frontend
   Date         : 2026-01-15
   Author/Agent : Manus AI
   Responsibility: Styling for POI package publishing interface
   Dependencies : King Family color palette
   Trigger      : KR_FRONTEND_ADMIN_POI_PUBLISHING_AND_SYNC_MONITOR
   ============================================================ */

.poi-publishing-container {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #d4af37 100%);
  min-height: 100vh;
  color: #ffffff;
}

.poi-publishing-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #d4af37;
  text-align: center;
}

.poi-publishing-error {
  background: #dc2626;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.poi-publishing-success {
  background: #10b981;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.poi-publishing-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.poi-publishing-form-section,
.poi-publishing-regions-section {
  background: #2c2c2c;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.poi-publishing-form-section h3,
.poi-publishing-regions-section h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #d4af37;
}

.poi-publishing-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #f5f5f0;
}

.form-group input {
  padding: 10px 12px;
  border: 1px solid #8b4513;
  border-radius: 6px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.btn-publish {
  padding: 12px 24px;
  background: linear-gradient(135deg, #965a38, #8b4513);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-publish:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(212, 175, 55, 0.4);
}

.btn-publish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.regions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.region-card {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #8b4513;
}

.region-card h4 {
  font-size: 16px;
  font-weight: bold;
  color: #d4af37;
  margin-bottom: 8px;
}

.region-card p {
  font-size: 14px;
  color: #f5f5f0;
  margin: 4px 0;
}

.region-card strong {
  color: #965a38;
}

@media (max-width: 768px) {
  .poi-publishing-content {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Project      : KingRoad / Family King
   File         : SyncMonitor.css
   Summary      : Sync Monitor Component Styles
   Owner        : King Group Tech
   Layer        : frontend
   Date         : 2026-01-15
   Author/Agent : Manus AI
   Responsibility: Styling for sync monitoring dashboard
   Dependencies : King Family color palette
   Trigger      : KR_FRONTEND_ADMIN_POI_PUBLISHING_AND_SYNC_MONITOR
   ============================================================ */

.sync-monitor-container {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #d4af37 100%);
  min-height: 100vh;
  color: #ffffff;
}

.sync-monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sync-monitor-title {
  font-size: 28px;
  font-weight: bold;
  color: #d4af37;
}

.sync-monitor-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.auto-refresh-toggle,
.resolved-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f5f5f0;
  font-size: 14px;
  cursor: pointer;
}

.auto-refresh-toggle input[type='checkbox'],
.resolved-toggle input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.btn-refresh {
  padding: 10px 20px;
  background: linear-gradient(135deg, #965a38, #8b4513);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-refresh:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sync-monitor-error {
  background: #dc2626;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.sync-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: #2c2c2c;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid #8b4513;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.stat-card.stat-warning {
  border-color: #f59e0b;
}

.stat-card.stat-error {
  border-color: #dc2626;
}

.stat-card.stat-success {
  border-color: #10b981;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #d4af37;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #f5f5f0;
}

.conflicts-section {
  background: #2c2c2c;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.conflicts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.conflicts-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #d4af37;
}

.loading-text,
.no-conflicts-text {
  text-align: center;
  color: #f5f5f0;
  padding: 20px;
}

.conflicts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 600px;
  overflow-y: auto;
}

.conflict-card {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.conflict-card.resolved {
  border-left-color: #10b981;
  opacity: 0.7;
}

.conflict-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.conflict-id {
  font-size: 14px;
  font-weight: bold;
  color: #d4af37;
  font-family: monospace;
}

.conflict-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.conflict-status.unresolved {
  background: #f59e0b;
  color: #1a1a1a;
}

.conflict-status.resolved {
  background: #10b981;
  color: #1a1a1a;
}

.conflict-details p {
  font-size: 14px;
  color: #f5f5f0;
  margin: 6px 0;
}

.conflict-details strong {
  color: #965a38;
}

@media (max-width: 1024px) {
  .sync-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sync-monitor-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .sync-stats-grid {
    grid-template-columns: 1fr;
  }
}

.country-flag-selector {
  margin: 12px 0;
  padding: 12px;
  background-color: #fff9e6;
  border-radius: 8px;
  border: 1px solid #ffd700;
}

.country-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: #fff3cd;
  border-left: 4px solid #ff9800;
  border-radius: 4px;
}

.warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.warning-text {
  font-size: 13px;
  color: #856404;
  line-height: 1.4;
}

.country-selection-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.country-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.country-flag-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 70px;
  padding: 10px 8px;
  background-color: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.country-flag-button:hover {
  border-color: #4a90e2;
  background-color: #f0f8ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.country-flag-button.selected {
  border-color: #4caf50;
  background-color: #e8f5e9;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.flag-emoji {
  font-size: 32px;
  line-height: 1;
}

.country-code {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

.confidence-badge {
  position: absolute;
  top: 2px;
  right: 400px;
  background-color: #4a90e2;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}

.selected-country-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: #e8f5e9;
  border-radius: 6px;
  font-size: 13px;
  color: #2e7d32;
}

.checkmark {
  color: #4caf50;
  font-size: 16px;
  font-weight: 700;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .country-flag-button {
    min-width: 60px;
    padding: 8px 6px;
  }
  
  .flag-emoji {
    font-size: 28px;
  }
  
  .country-code {
    font-size: 10px;
  }
}

/* Border Crossings Widget - Border Crossings */

.border-crossings-widget {
  position: fixed;
  left: 640px; /* After TrafficControlWidget */
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  background: linear-gradient(135deg, 
    rgba(63, 81, 181, 0.95),
    rgba(57, 73, 171, 0.92)
  );
  border: 2px solid #3F51B5;
  border-radius: 12px;
  box-shadow: 
    0 8px 32px rgba(63, 81, 181, 0.4),
    0 0 20px rgba(57, 73, 171, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: white;
  z-index: 1000;
  overflow: hidden;
  animation: slideInFromLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.widget-header {
  background: rgba(0, 0, 0, 0.2);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.header-icon {
  font-size: 22px;
}

.header-title {
  font-size: 15px;
  font-weight: 600;
}

/* Borders List */
.borders-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}

.border-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.border-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.border-item:last-child {
  margin-bottom: 0;
}

.border-flags {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flag {
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.border-info {
  flex: 1 1;
  min-width: 0;
}

.border-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.2;
}

.border-location {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

.distance {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.highway {
  opacity: 0.9;
  font-size: 11px;
}

.border-cities {
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 4px;
  line-height: 1.2;
}

.wait-time {
  display: flex;
  align-items: center;
}

.wait-indicator {
  font-size: 11px;
  font-weight: 600;
}

.border-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.crossing-type {
  font-size: 18px;
}

.operating-hours {
  font-size: 9px;
  opacity: 0.8;
  font-weight: 500;
}

/* More Button */
.more-borders-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  margin: 6px 10px 10px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: calc(100% - 20px);
}

.more-borders-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Modal Styles */
.border-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* Border crossings modal overlay - normalized from 10000 */
  padding: 20px;
}

.border-modal {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  color: #333;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(135deg, #3F51B5, #3949AB);
  color: white;
}

.modal-title {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.modal-flags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-flag {
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-title h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-title p {
  margin: 0 0 4px 0;
  font-size: 13px;
  opacity: 0.9;
}

.border-cities {
  font-size: 12px !important;
  opacity: 0.8 !important;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Modal Content */
.modal-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 20px;
}

.modal-section {
  margin-bottom: 20px;
}

.modal-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #3F51B5;
  border-bottom: 2px solid #E8EAF6;
  padding-bottom: 6px;
}

.modal-section h5 {
  margin: 10px 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

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

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F0F0F0;
}

.info-label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

/* Wait Times */
.wait-times {
  display: flex;
  gap: 12px;
}

.wait-item {
  flex: 1 1;
  background: #F8F9FA;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.wait-label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.wait-value {
  font-size: 14px;
  font-weight: 700;
}

.wait-value.current {
  color: #4CAF50;
}

.wait-value.peak {
  color: #F44336;
}

/* Documents */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 12px;
}

.doc-item.accepted {
  background: #E8F5E8;
  color: #2E7D32;
}

.doc-item.not-accepted {
  background: #FFEBEE;
  color: #C62828;
}

.doc-icon {
  font-size: 14px;
}

.doc-name {
  font-weight: 500;
}

/* Truck Requirements */
.truck-requirements {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.req-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #F8F9FA;
  border-radius: 8px;
}

.req-icon {
  font-size: 18px;
  width: 30px;
  text-align: center;
}

.req-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.req-status {
  font-size: 12px;
  color: #666;
}

/* Facilities */
.facilities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.facility-tag {
  background: #E3F2FD;
  color: #1976D2;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.restaurants-section {
  margin-top: 12px;
}

.restaurants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.restaurant-tag {
  background: rgba(255, 193, 7, 0.2);
  color: #F57C00;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

/* Contact Info */
.contact-info {
  font-size: 13px;
  line-height: 1.6;
  background: #F8F9FA;
  padding: 12px;
  border-radius: 8px;
}

.contact-info p {
  margin: 4px 0;
}

.verification-info {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  background: #F9F9F9;
  padding: 12px;
  border-radius: 8px;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: #F8F9FA;
  border-top: 1px solid #E0E0E0;
}

.action-btn {
  flex: 1 1;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.navigate-btn {
  background: linear-gradient(135deg, #4CAF50, #45A049);
  color: white;
}

.action-btn.navigate-btn:hover {
  background: linear-gradient(135deg, #45A049, #4CAF50);
  transform: translateY(-1px);
}

.action-btn.info-btn {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.action-btn.info-btn:hover {
  background: linear-gradient(135deg, #1976D2, #2196F3);
  transform: translateY(-1px);
}

.action-btn.alert-btn {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
}

.action-btn.alert-btn:hover {
  background: linear-gradient(135deg, #F57C00, #FF9800);
  transform: translateY(-1px);
}

/* Responsiveness */
@media (max-width: 768px) {
  .border-crossings-widget {
    left: 10px;
    width: 300px;
  }
  
  .border-modal {
    margin: 10px;
    max-width: none;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .info-grid,
  .documents-grid {
    grid-template-columns: 1fr;
  }
  
  .wait-times {
    flex-direction: column;
  }
}

/* Custom Scroll */
.borders-list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 4px;
}

.borders-list::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.borders-list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.borders-list::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.border-modal {
  animation: modalFadeIn 0.3s ease-out;
}
/* First Time Setup Styles - SAFE FOR PROFESSIONAL DRIVERS */

.first-time-setup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* CRITICAL CHANGE: Dark background safe for drivers */
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  z-index: 990; /* First time setup overlay - normalized from 10000 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-time-setup-container {
  /* CRITICAL CHANGE: Beige/dark gray container - NOT WHITE */
  background: #f5f5dc; /* Bege suave - seguro para os olhos */
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress Indicator */
.setup-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 40px 20px;
  /* CHANGE: Darker and softer background */
  background: #e8e8dc; /* Bege mais escuro */
  border-radius: 20px 20px 0 0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* CHANGE: Softer colors */
  background: #d3d3d3; /* Cinza claro suave */
  color: #555555; /* Cinza escuro para contraste */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.progress-step.active .step-number {
  /* CHANGE: Softer blue */
  background: #4a90a4; /* Azul acinzentado suave */
  color: white;
}

.progress-step.completed .step-number {
  /* CHANGE: Softer green */
  background: #6b8e23; /* Verde oliva suave */
  color: white;
}

.step-label {
  font-size: 0.85rem;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-weight: 500;
}

.progress-step.active .step-label {
  color: #4a90a4; /* Azul acinzentado suave */
  font-weight: bold;
}

.progress-step.completed .step-label {
  color: #6b8e23; /* Verde oliva suave */
}

.progress-line {
  width: 60px;
  height: 2px;
  background: #d3d3d3; /* Cinza claro suave */
  margin: 0 20px;
}

/* Setup Content */
.setup-content {
  padding: 40px;
}

/* Welcome Step */
.welcome-step {
  text-align: center;
}

.welcome-header {
  margin-bottom: 40px;
}

.app-logo {
  font-size: 4rem;
  margin-bottom: 16px;
}

.welcome-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50; /* Keep dark color for contrast */
  font-size: 2.5rem;
  font-weight: bold;
}

.welcome-subtitle {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 1.2rem;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 16px;
  /* CHANGE: Darker beige background */
  background: #e8e8dc; /* Bege escuro suave */
  border-radius: 12px;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature-text h3 {
  margin: 0 0 4px 0;
  color: #2c3e50; /* Keep dark color for contrast */
  font-size: 1.1rem;
}

.feature-text p {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 0.9rem;
}

.welcome-message {
  margin: 30px 0;
  padding: 20px;
  /* CHANGE: Beige background with soft blue touch */
  background: #f0f0e8; /* Bege claro */
  border-radius: 12px;
  border-left: 4px solid #4a90a4; /* Azul acinzentado suave */
}

.welcome-message p {
  margin: 0;
  color: #2c3e50; /* Cor escura para contraste */
  font-size: 1rem;
  line-height: 1.5;
}

.continue-btn {
  /* CHANGE: Softer and darker gradient */
  background: linear-gradient(135deg, #4a90a4 0%, #2c3e50 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 144, 164, 0.4);
}

.continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 164, 0.6);
}

/* Vehicle Selection Step */
.vehicle-selection-step .step-header {
  text-align: center;
  margin-bottom: 40px;
}

.step-header h2 {
  margin: 0 0 8px 0;
  color: #2c3e50; /* Keep dark color for contrast */
  font-size: 2rem;
}

.step-header p {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 1rem;
}

.vehicle-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 30px;
}

.vehicle-option {
  border: 3px solid #d3d3d3; /* Cinza claro suave */
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  /* CRITICAL CHANGE: Light beige background - NOT WHITE */
  background: #f0f0e8; /* Bege muito claro */
}

.vehicle-option:hover {
  border-color: #4a90a4; /* Azul acinzentado suave */
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(74, 144, 164, 0.15);
}

.vehicle-visual {
  margin-bottom: 20px;
}

.vehicle-icon {
  font-size: 4rem;
  margin-bottom: 8px;
}

.vehicle-label {
  font-size: 1rem;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-weight: 500;
}

.vehicle-details h3 {
  margin: 0 0 16px 0;
  color: #2c3e50; /* Keep dark color for contrast */
  font-size: 1.3rem;
}

.vehicle-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.benefit-item {
  color: #6b8e23; /* Verde oliva suave */
  font-size: 0.9rem;
  text-align: left;
}

.next-step-info {
  padding: 12px;
  background: #e8e8dc; /* Bege escuro suave */
  border-radius: 8px;
  margin-top: 16px;
}

.next-step-info small {
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-style: italic;
}

/* Step Footer */
.step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #d3d3d3; /* Cinza claro suave */
}

.back-btn {
  background: #708090; /* Soft slate gray */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-btn:hover {
  background: #5f6f7f; /* Darker slate gray */
}

/* Truck Config Step */
.truck-config-step .step-header {
  text-align: center;
  margin-bottom: 30px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .first-time-setup-overlay {
    padding: 10px;
  }
  
  .setup-content {
    padding: 20px;
  }
  
  .setup-progress {
    padding: 20px;
  }
  
  .progress-line {
    width: 40px;
    margin: 0 10px;
  }
  
  .welcome-header h1 {
    font-size: 2rem;
  }
  
  .welcome-subtitle {
    font-size: 1rem;
  }
  
  .vehicle-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vehicle-option {
    padding: 20px;
  }
  
  .vehicle-icon {
    font-size: 3rem;
  }
  
  .feature-item {
    padding: 12px;
  }
  
  .feature-icon {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .app-logo {
    font-size: 3rem;
  }
  
  .welcome-header h1 {
    font-size: 1.8rem;
  }
  
  .step-header h2 {
    font-size: 1.5rem;
  }
  
  .vehicle-details h3 {
    font-size: 1.1rem;
  }
}
/* Splash Screen Styles */

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #F5EAD2 0%, #E8D5B7 50%, #D4C4A8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Splash screen - max priority - normalized from 10000 */
  overflow: hidden;
}

.splash-content {
  text-align: center;
  z-index: 2;
  position: relative;
  max-width: 400px;
  padding: 20px;
}

.splash-logo {
  margin-bottom: 24px;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-image {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(90, 59, 31, 0.3);
  background: white;
  padding: 16px;
}

.app-name {
  font-size: 2.5rem;
  font-weight: 800;
  color: #5A3B1F;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(90, 59, 31, 0.2);
  animation: textGlow 2s ease-in-out infinite alternate;
}

.app-subtitle {
  font-size: 1.1rem;
  color: #8B6F47;
  margin: 0 0 32px 0;
  font-weight: 500;
}

.progress-container {
  width: 100%;
  height: 6px;
  background: rgba(90, 59, 31, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin: 24px 0;
  box-shadow: inset 0 2px 4px rgba(90, 59, 31, 0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #5A3B1F, #8B6F47, #5A3B1F);
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  animation: progressShimmer 2s linear infinite;
}

.loading-text {
  font-size: 1rem;
  color: #5A3B1F;
  margin: 16px 0 0 0;
  font-weight: 600;
  min-height: 24px;
  animation: textPulse 1.5s ease-in-out infinite;
}

.device-info {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(90, 59, 31, 0.1);
  padding: 8px 12px;
  border-radius: 12px;
  font-family: monospace;
}

.device-info small {
  color: #8B6F47;
  font-size: 0.8rem;
}

/* Background Pattern */
.splash-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: 1;
}

.road-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(90, 59, 31, 0.1) 20px,
      rgba(90, 59, 31, 0.1) 40px
    );
  animation: roadMove 10s linear infinite;
}

/* Animations */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes textGlow {
  0% {
    text-shadow: 0 2px 4px rgba(90, 59, 31, 0.2);
  }
  100% {
    text-shadow: 0 4px 8px rgba(90, 59, 31, 0.4), 0 0 16px rgba(90, 59, 31, 0.2);
  }
}

@keyframes progressShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes textPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes roadMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .splash-content {
    padding: 16px;
    max-width: 90vw;
  }

  .logo-image {
    width: 100px;
    height: 100px;
  }

  .app-name {
    font-size: 2rem;
  }

  .app-subtitle {
    font-size: 1rem;
  }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .splash-content {
    max-width: 600px;
  }

  .logo-image {
    width: 80px;
    height: 80px;
  }

  .app-name {
    font-size: 1.8rem;
    margin-bottom: 4px;
  }

  .app-subtitle {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}
/* Country Tier Indicator */

.country-tier-indicator {
  position: fixed;
  top: 80px;
  right: 400px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid;
  border-radius: 20px;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tier-badge {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier-level {
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.tier-zones {
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .country-tier-indicator {
    top: 60px;
    right: 400px;
    padding: 6px 10px;
  }

  .tier-badge {
    min-width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .tier-level {
    font-size: 10px;
  }

  .tier-zones {
    font-size: 8px;
  }
}

/**
 * FILE: src/features/institutional/styles/base.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: CSS variables and base styles
 * DEPENDS_ON: none
 * EXPOSES: CSS variables, base styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

:root {
  --gold-primary: #d4af37;
  --gold-dark: #8b4513;
  --bg-dark: #1a1a1a;
  --bg-card: #2c2c2c;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #a0a0a0;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --purple-accent: #8b5cf6;
  --sidebar-width: 280px;
}

.institutional-landing {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #d4af37 100%);
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 50%, var(--gold-primary) 100%);
  color: #ffffff;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

.inst-main-container {
  display: flex;
  margin-top: 80px;
  min-height: calc(100vh - 80px);
}

.inst-content {
  flex: 1 1;
  margin-left: 280px;
  margin-left: var(--sidebar-width);
  padding: 2rem;
  max-width: calc(100% - 280px);
  max-width: calc(100% - var(--sidebar-width));
}

.inst-section-content {
  display: none;
  animation: instFadeIn 0.3s ease;
}

.inst-section-content.active {
  display: block;
}

@keyframes instFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.inst-category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.inst-category-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d4af37, #8b4513);
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.inst-category-info h2 {
  font-size: 1.75rem;
  color: #d4af37;
  color: var(--gold-primary);
  margin-bottom: 0.25rem;
}

.inst-category-info p {
  color: #a0a0a0;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.inst-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.inst-btn-primary {
  background: linear-gradient(135deg, #d4af37, #8b4513);
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  border: none;
  color: white;
}

.inst-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.inst-btn-secondary {
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid #d4af37;
  border: 1.5px solid var(--gold-primary);
  color: #d4af37;
  color: var(--gold-primary);
}

.inst-btn-secondary:hover {
  background: rgba(212, 175, 55, 0.2);
}

@media (max-width: 768px) {
  .inst-sidebar {
    display: none;
  }
  
  .inst-content {
    margin-left: 0;
    max-width: 100%;
    padding: 1rem;
  }
  
  .inst-hero-title {
    font-size: 1.75rem;
  }
  
  .inst-apps-grid {
    grid-template-columns: 1fr;
  }
}

/**
 * FILE: src/features/institutional/styles/header.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Header and auth buttons styles
 * DEPENDS_ON: base.css
 * EXPOSES: header styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

.inst-header {
  background: rgba(26, 26, 26, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.inst-header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inst-logo-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.inst-logo {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
}

.inst-brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-primary), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.inst-auth-buttons {
  display: flex;
  gap: 0.75rem;
}

.inst-btn-login {
  padding: 0.5rem 1.25rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid var(--gold-primary);
  border-radius: 6px;
  color: var(--gold-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.95rem;
}

.inst-btn-login:hover {
  background: rgba(212, 175, 55, 0.2);
}

.inst-btn-register {
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.95rem;
}

.inst-btn-register:hover {
  transform: translateY(-2px);
}

.inst-user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.inst-user-info-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid var(--gold-primary);
  border-radius: 8px;
}

.inst-user-photo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  border: 2px solid var(--gold-primary);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.inst-user-name {
  color: var(--gold-primary);
  font-weight: 600;
  font-size: 1rem;
}

.inst-user-role-badge {
  background: var(--gold-primary);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.inst-btn-logout {
  padding: 0.5rem 1.25rem;
  background: rgba(244, 67, 54, 0.1);
  border: 1.5px solid var(--warning);
  border-radius: 6px;
  color: var(--warning);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.95rem;
}

.inst-btn-logout:hover {
  background: rgba(244, 67, 54, 0.2);
}

/**
 * FILE: src/features/institutional/styles/sidebar.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Sidebar navigation styles
 * DEPENDS_ON: base.css
 * EXPOSES: sidebar styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

.inst-sidebar {
  width: var(--sidebar-width);
  background: rgba(44, 44, 44, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-right: 1px solid rgba(212, 175, 55, 0.3);
  padding: 1.5rem 0;
  position: fixed;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.inst-sidebar-content {
  padding: 0 1rem;
}

.inst-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inst-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-secondary);
}

.inst-nav-item:hover {
  background: rgba(212, 175, 55, 0.1);
  transform: translateX(4px);
}

.inst-nav-item.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(139, 69, 19, 0.2));
  border-left: 3px solid var(--gold-primary);
  color: var(--gold-primary);
}

.inst-nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.inst-nav-text {
  font-weight: 500;
  flex: 1 1;
  font-size: 0.95rem;
}

.inst-nav-arrow {
  margin-left: auto;
  transition: transform 0.3s;
  font-size: 0.8rem;
}

.inst-nav-arrow.open {
  transform: rotate(90deg);
}

.inst-nav-badge {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  margin-left: auto;
}

.inst-nav-submenu {
  list-style: none;
  margin-left: 1rem;
  border-left: 2px solid rgba(212, 175, 55, 0.2);
  padding-left: 0.75rem;
  margin-top: 0.25rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.inst-nav-submenu.open {
  max-height: 500px;
}

.inst-nav-subitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.125rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.inst-nav-subitem:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--text-primary);
}

.inst-nav-subitem.active {
  color: var(--gold-primary);
  background: rgba(212, 175, 55, 0.15);
}

.inst-nav-item-admin {
  margin-top: 1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 1rem;
}

/**
 * FILE: src/features/institutional/styles/hero.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Hero section styles
 * DEPENDS_ON: base.css
 * EXPOSES: hero styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

.inst-hero-section {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem 0;
}

.inst-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--gold-primary), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.inst-hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/**
 * FILE: src/features/institutional/styles/apps-grid.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Apps grid and card styles
 * DEPENDS_ON: base.css
 * EXPOSES: apps grid styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

.inst-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.inst-app-card {
  background: rgba(44, 44, 44, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.inst-app-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-primary);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.inst-app-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.inst-app-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.inst-app-info h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.inst-app-category {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.inst-app-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.inst-app-status.status-ready {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.inst-app-status.status-development {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.inst-app-status.status-planning {
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple-accent);
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.inst-app-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.inst-platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.inst-platform-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.inst-platform-badge.android {
  background: rgba(61, 220, 132, 0.2);
  color: #3DDC84;
}

.inst-platform-badge.ios {
  background: rgba(0, 122, 255, 0.2);
  color: #007AFF;
}

.inst-platform-badge.windows {
  background: rgba(0, 120, 215, 0.2);
  color: #0078D7;
}

.inst-platform-badge.linux {
  background: rgba(255, 204, 0, 0.2);
  color: #FFCC00;
}

.inst-platform-badge.web {
  background: rgba(255, 87, 34, 0.2);
  color: #FF5722;
}

.inst-app-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/**
 * FILE: src/features/institutional/styles/modals.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Auth and admin modal styles
 * DEPENDS_ON: base.css
 * EXPOSES: modal styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

.inst-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.inst-modal {
  background: linear-gradient(135deg, rgba(44, 44, 44, 0.98), rgba(26, 26, 26, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  position: relative;
}

.inst-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
}

.inst-modal-close:hover {
  color: var(--gold-primary);
}

.inst-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-primary);
  text-align: center;
  margin-bottom: 1.5rem;
}

.inst-auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  border-radius: 8px;
}

.inst-auth-tab {
  flex: 1 1;
  padding: 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
}

.inst-auth-tab.active {
  background: var(--gold-primary);
  color: white;
}

.inst-form-group {
  margin-bottom: 1rem;
  position: relative;
}

.inst-form-input {
  width: 100%;
  padding: 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
}

.inst-form-input:focus {
  outline: none;
  border-color: var(--gold-primary);
}

.inst-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--gold-primary);
  -webkit-user-select: none;
          user-select: none;
}

.inst-form-submit {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}

.inst-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.inst-admin-modal {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(44, 44, 44, 0.98));
  border: 2px solid var(--purple-accent);
}

.inst-admin-modal .inst-modal-title {
  color: var(--purple-accent);
}

.inst-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 9999;
  animation: instSlideIn 0.3s ease;
}

.inst-toast.success {
  background: var(--success);
}

.inst-toast.error {
  background: var(--error);
}

.inst-toast.warning {
  background: var(--warning);
}

@keyframes instSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/**
 * FILE: src/features/institutional/styles/index.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Index file importing all institutional styles
 * DEPENDS_ON: base.css, header.css, sidebar.css, hero.css, apps-grid.css, modals.css
 * EXPOSES: all institutional styles
 * ROUTES: n/a
 * SAFE_CHANGE: move-only modularization (no reformat)
 * OWNER: Emergent AI (execution) / Samuel (approval)
 * VERSION: 1.0.0
 */

/* ==========================================
   APP CARD EXPANDED (Modal)
   ========================================== */
.app-card-expanded-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-card-expanded {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 1.5rem;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

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

.app-card-expanded-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.app-card-expanded-close:hover {
  background: rgba(245, 158, 11, 0.3);
  transform: scale(1.1);
}

.app-card-expanded-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-card-expanded-icon {
  font-size: 4rem;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.app-card-expanded-title-section {
  flex: 1 1;
}

.app-card-expanded-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}

.app-card-expanded-category {
  color: #f59e0b;
  color: var(--gold-primary, #f59e0b);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.app-card-expanded-status {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.app-card-expanded-status.status-available {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.app-card-expanded-status.status-development {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.app-card-expanded-status.status-coming-soon {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.app-card-expanded-body {
  padding: 1.5rem 2rem;
}

.app-card-expanded-description {
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.app-card-expanded-features h3,
.app-card-expanded-platforms h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.app-card-expanded-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.app-card-expanded-features li {
  color: #94a3b8;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.app-card-expanded-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #f59e0b;
  color: var(--gold-primary, #f59e0b);
}

.platform-badges-expanded {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.platform-badge-expanded {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: #e2e8f0;
}

.app-card-expanded-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.inst-btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* Make cards clickable */
.inst-app-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.inst-app-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(245, 158, 11, 0.5);
}

/**
 * FILE: src/features/institutional/components/modals/EmailVerificationModal.css
 * LAYER: frontend
 * FEATURE: institutional
 * RESPONSIBILITY: Styles for email verification modal
 * VERSION: 1.0.0
 */

.email-verification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.email-verification-modal {
  background: linear-gradient(145deg, #1a2a3a 0%, #0d1a26 100%);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.email-verification-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.email-verification-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.email-verification-header {
  text-align: center;
  margin-bottom: 24px;
}

.email-verification-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.email-verification-header h2 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 8px 0;
}

.email-verification-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.email-verification-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email-verification-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.email-verification-input-group label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.email-verification-input-group input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: all 0.2s ease;
}

.email-verification-input-group input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.email-verification-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.email-verification-code-input {
  text-align: center;
  font-size: 28px !important;
  letter-spacing: 12px;
  font-weight: bold;
  font-family: monospace;
}

.email-verification-sent-info {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.email-verification-sent-info p {
  color: #22c55e;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.email-verification-sent-info strong {
  color: #fff;
  font-size: 14px;
}

.email-verification-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 12px;
  color: #ef4444;
  font-size: 14px;
  text-align: center;
}

.email-verification-btn {
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.email-verification-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.email-verification-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.email-verification-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.email-verification-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.email-verification-btn.text {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px;
}

.email-verification-btn.text:hover:not(:disabled) {
  color: #fff;
}

.email-verification-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.email-verification-success {
  text-align: center;
  padding: 20px 0;
}

.email-verification-success-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.email-verification-success h3 {
  color: #22c55e;
  font-size: 24px;
  margin: 0 0 8px 0;
}

.email-verification-success p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* File-ID: um-007-css-base-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: User Management */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : UserManagementPage.css */
/* Summary      : Base styles for user management page layout */
/* ============================================================ */

.user-management-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.user-management-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.user-management-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.back-button:hover {
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
}

.message-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.message-banner.error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.message-banner.success {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #86efac;
}

.message-banner button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0 0.25rem;
}

.user-management-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #334155;
  border-bottom: 1px solid var(--border-color, #334155);
  padding-bottom: 0.5rem;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  border-radius: 0.5rem 0.5rem 0 0;
  transition: all 0.2s;
}

.tab-button:hover {
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
}

.tab-button.active {
  color: #3b82f6;
  color: var(--primary, #3b82f6);
  border-bottom: 2px solid #3b82f6;
  border-bottom: 2px solid var(--primary, #3b82f6);
}

.user-management-content {
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.user-management-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form Base Styles */
.user-profile-card h2,
.user-vehicle-card h2,
.account-settings-card h2 {
  font-size: 1.25rem;
  margin: 0 0 1.5rem 0;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.form-group { margin-bottom: 1rem; }

.form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 1px solid #334155;
  border: 1px solid var(--border-color, #334155);
  border-radius: 0.5rem;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--primary, #3b82f6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.save-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  background: var(--primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.save-button:hover:not(:disabled) { background: #2563eb; background: var(--primary-dark, #2563eb); }
.save-button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

/* File-ID: um-008-css-cards-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: User Management */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : UserManagementCards.css */
/* Summary      : Styles for user management card components */
/* ============================================================ */

/* Vehicle Card Styles */
.user-vehicle-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin: 1.5rem 0 1rem 0;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.vehicle-type-selector { margin-bottom: 1.5rem; }

.vehicle-type-selector > label {
  display: block;
  font-size: 0.875rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 0.75rem;
}

.vehicle-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.vehicle-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 2px solid #334155;
  border: 2px solid var(--border-color, #334155);
  border-radius: 0.5rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.2s;
}

.vehicle-type-btn:hover { border-color: #3b82f6; border-color: var(--primary, #3b82f6); }

.vehicle-type-btn.selected {
  border-color: #3b82f6;
  border-color: var(--primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.vehicle-icon { font-size: 1.5rem; }

.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.checkbox-label input[type="checkbox"] { width: auto; }
.hazmat-icon { color: #f59e0b; }

/* Account Settings Card Styles */
.setting-group {
  padding: 1rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.setting-group h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.setting-group p {
  margin: 0 0 0.75rem 0;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.875rem;
}

.setting-select {
  padding: 0.5rem;
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid #334155;
  border: 1px solid var(--border-color, #334155);
  border-radius: 0.375rem;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.privacy-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #86efac;
}

.danger-zone { border: 1px solid rgba(239, 68, 68, 0.3); }
.danger-zone h3 { color: #ef4444; }

.deactivate-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.deactivate-button:hover { background: rgba(239, 68, 68, 0.1); }

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
  padding: 1.5rem;
  border-radius: 0.75rem;
  max-width: 400px;
  width: 90%;
}

.modal-content h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  color: #ef4444;
}

.warning-text { color: #f59e0b; font-size: 0.875rem; }

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.cancel-button {
  padding: 0.5rem 1rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 1px solid #334155;
  border: 1px solid var(--border-color, #334155);
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  border-radius: 0.5rem;
  cursor: pointer;
}

.confirm-deactivate-button {
  padding: 0.5rem 1rem;
  background: #ef4444;
  border: none;
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
}

.confirm-deactivate-button:disabled { opacity: 0.5; }

@media (max-width: 768px) {
  .dimensions-grid, .vehicle-type-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .dimensions-grid { grid-template-columns: 1fr 1fr; }
}

/* File-ID: hs-007-css-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Help Support */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : HelpSupportPage.css */
/* Summary      : Styles for help support feature components */
/* ============================================================ */

.help-support-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.help-support-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.help-support-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.help-support-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.help-support-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #334155;
  border-bottom: 1px solid var(--border-color, #334155);
  padding-bottom: 0.5rem;
}

.help-support-content {
  background: #1e293b;
  background: var(--bg-secondary, #1e293b);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* Emergency Contacts Card */
.emergency-contacts-card h2,
.feedback-form-card h2,
.faq-card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.emergency-icon { color: #ef4444; }

.emergency-description,
.feedback-description {
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
}

.country-section {
  margin-bottom: 1.5rem;
}

.country-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.country-flag { font-size: 1.25rem; }

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

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 2px solid #334155;
  border: 2px solid var(--border-color, #334155);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.contact-card:hover { border-color: #3b82f6; border-color: var(--primary, #3b82f6); transform: translateY(-2px); }
.contact-card.medical { border-color: rgba(239, 68, 68, 0.5); }
.contact-card.medical:hover { border-color: #ef4444; }
.contact-card.police { border-color: rgba(59, 130, 246, 0.5); }
.contact-card.police:hover { border-color: #3b82f6; }
.contact-card.fire { border-color: rgba(249, 115, 22, 0.5); }
.contact-card.fire:hover { border-color: #f97316; }

.contact-name {
  font-size: 0.875rem;
  text-align: center;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.contact-number {
  font-size: 1.25rem;
  font-weight: 600;
}

.emergency-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #fca5a5;
  margin-top: 1rem;
}

/* Feedback Form Card */
.feedback-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.type-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 2px solid #334155;
  border: 2px solid var(--border-color, #334155);
  border-radius: 0.5rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.75rem;
}

.type-button:hover { border-color: #3b82f6; border-color: var(--primary, #3b82f6); }
.type-button.selected {
  border-color: #3b82f6;
  border-color: var(--primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
}

.type-emoji { font-size: 1.25rem; }

.rating-stars {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.star-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  transition: transform 0.2s;
}

.star-button:hover { transform: scale(1.1); }
.star-button.active { color: #f59e0b; }

.feedback-form-card textarea {
  width: 100%;
  padding: 0.75rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 1px solid #334155;
  border: 1px solid var(--border-color, #334155);
  border-radius: 0.5rem;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  font-size: 1rem;
  resize: vertical;
  min-height: 100px;
}

.feedback-form-card textarea:focus {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--primary, #3b82f6);
}

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  margin-top: 0.25rem;
}

.submit-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  background: var(--primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.submit-button:hover:not(:disabled) { background: #2563eb; background: var(--primary-dark, #2563eb); }
.submit-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* FAQ Card */
.faq-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border: 1px solid #334155;
  border: 1px solid var(--border-color, #334155);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.faq-search input {
  flex: 1 1;
  background: transparent;
  border: none;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  font-size: 1rem;
}

.faq-search input:focus { outline: none; }

.faq-category { margin-bottom: 1.5rem; }

.faq-category h3 {
  font-size: 0.875rem;
  color: #3b82f6;
  color: var(--primary, #3b82f6);
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faq-item {
  background: #0f172a;
  background: var(--bg-primary, #0f172a);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: none;
  color: #f8fafc;
  color: var(--text-primary, #f8fafc);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.faq-question:hover { background: rgba(255, 255, 255, 0.05); }

.faq-answer {
  padding: 0 1rem 1rem 1rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.875rem;
  line-height: 1.6;
}

.faq-answer p { margin: 0; }

.no-results {
  text-align: center;
  padding: 2rem;
  color: #94a3b8;
  color: var(--text-secondary, #94a3b8);
}

.no-results button {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #3b82f6;
  background: var(--primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .feedback-type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* File-ID: comm-fe-004-styles-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Communication */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : CommunicationPage.css */
/* Summary      : Communication Feature Styles */
/* ============================================================ */

.communication-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #ffffff;
}

.communication-header {
  text-align: center;
  margin-bottom: 2rem;
}

.communication-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #ffd700;
}

.communication-header p {
  color: #a0a0a0;
  font-size: 1rem;
}

.communication-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  border-radius: 12px;
}

.communication-tabs button {
  flex: 1 1;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.communication-tabs button:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
}

.communication-tabs button.active {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  color: #1a1a2e;
  font-weight: 600;
}

.communication-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.communication-content {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.5rem;
}

.chat-section h2,
.weather-section h2,
.traffic-section h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #ffd700;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #a0a0a0;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #ffd700;
}

.chat-section button,
.weather-section button,
.traffic-section button {
  width: 100%;
  padding: 1rem;
  border: none;
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  color: #1a1a2e;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-section button:hover,
.weather-section button:hover,
.traffic-section button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.chat-section button:disabled,
.weather-section button:disabled,
.traffic-section button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.deeplink-result {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 255, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

.deeplink-result a {
  color: #ffd700;
  text-decoration: none;
  font-weight: 600;
}

.weather-result,
.traffic-result {
  margin-top: 1rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  text-align: center;
}

.weather-temp {
  font-size: 3rem;
  font-weight: 700;
  color: #ffd700;
}

.weather-conditions {
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0.5rem 0;
  text-transform: capitalize;
}

.weather-shared {
  font-size: 0.85rem;
  color: #a0a0a0;
}

.traffic-status {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem;
  border-radius: 8px;
}

.traffic-status.status-normal {
  background: rgba(0, 255, 0, 0.1);
  color: #00ff00;
}

.traffic-updated {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #a0a0a0;
}

/* File-ID: ferry-fe-005-styles-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Ferries */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : FerriesPage.css */
/* Summary      : Ferries Feature Styles */
/* ============================================================ */

.ferries-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
  color: #ffffff;
}

.ferries-header {
  text-align: center;
  margin-bottom: 2rem;
}

.ferries-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #64ffda;
}

.ferries-header p {
  color: #8892b0;
}

.ferries-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  border-radius: 12px;
}

.ferries-tabs button {
  flex: 1 1;
  padding: 0.75rem;
  border: none;
  background: transparent;
  color: #8892b0;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ferries-tabs button:hover {
  background: rgba(100, 255, 218, 0.1);
  color: #64ffda;
}

.ferries-tabs button.active {
  background: linear-gradient(135deg, #64ffda 0%, #00bfa5 100%);
  color: #0a192f;
  font-weight: 600;
}

.ferries-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.ferries-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 1.5rem;
}

.ferry-search-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
}

.ferry-search-card h2 {
  color: #64ffda;
  margin-bottom: 1rem;
}

.search-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.search-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #8892b0;
}

.search-form .form-group input,
.search-form .form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.search-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #64ffda 0%, #00bfa5 100%);
  border: none;
  border-radius: 8px;
  color: #0a192f;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.search-btn:hover {
  transform: translateY(-2px);
}

.filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-bar select {
  flex: 1 1;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(100, 255, 218, 0.2);
  color: #ffffff;
}

.filter-bar button {
  padding: 0.75rem 1.5rem;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid #64ffda;
  border-radius: 8px;
  color: #64ffda;
  cursor: pointer;
}

.ferries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.ferry-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(100, 255, 218, 0.1);
}

.ferry-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.ferry-card-header h3 {
  color: #64ffda;
  font-size: 1.1rem;
}

.ferry-region {
  font-size: 0.8rem;
  background: rgba(100, 255, 218, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #64ffda;
}

.ferry-card-body p {
  color: #ccd6f6;
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.vehicle-types {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1.25rem;
}

.view-details-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid #64ffda;
  border-radius: 6px;
  color: #64ffda;
  cursor: pointer;
}

.loading-spinner,
.no-results {
  text-align: center;
  padding: 2rem;
  color: #8892b0;
}

.search-results h3 {
  color: #64ffda;
  margin: 1rem 0;
}

.result-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.result-header {
  display: flex;
  justify-content: space-between;
}

.ferry-name {
  font-weight: 600;
  color: #ccd6f6;
}

.ferry-price {
  color: #64ffda;
  font-weight: 600;
}

.result-route,
.result-duration,
.result-schedule {
  font-size: 0.9rem;
  color: #8892b0;
  margin-top: 0.25rem;
}

.routes-section h2 {
  color: #64ffda;
  margin-bottom: 1rem;
}

.route-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.route-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.route-from,
.route-to {
  color: #ccd6f6;
}

.route-arrow {
  color: #64ffda;
}

.route-operators {
  font-size: 0.85rem;
  color: #8892b0;
  margin-top: 0.5rem;
}

.ferry-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #112240;
  padding: 2rem;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #8892b0;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-content h2 {
  color: #64ffda;
  margin-bottom: 1rem;
}

.detail-grid p {
  margin: 0.5rem 0;
  color: #ccd6f6;
}

@media (max-width: 768px) {
  .search-form .form-row {
    grid-template-columns: 1fr;
  }
  
  .ferries-grid {
    grid-template-columns: 1fr;
  }
}

/* File-ID: loc-fe-005-styles-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Location Sharing */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : LocationSharingPage.css */
/* Summary      : Location Sharing Feature Styles */
/* ============================================================ */

.location-sharing-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
  color: #ffffff;
}

.location-header {
  text-align: center;
  margin-bottom: 2rem;
}

.location-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #4fc3f7;
}

.location-header p {
  color: #90caf9;
}

.location-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  border-radius: 12px;
}

.location-tabs button {
  flex: 1 1;
  padding: 0.75rem;
  border: none;
  background: transparent;
  color: #90caf9;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.location-tabs button:hover {
  background: rgba(79, 195, 247, 0.1);
}

.location-tabs button.active {
  background: linear-gradient(135deg, #4fc3f7 0%, #0288d1 100%);
  color: #0d2137;
  font-weight: 600;
}

.location-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.location-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 1.5rem;
}

.current-location-card {
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.current-location-card h3 {
  color: #4fc3f7;
  margin-bottom: 0.5rem;
}

.coordinates {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-family: monospace;
  color: #b3e5fc;
}

.loading-location {
  color: #90caf9;
  font-style: italic;
}

.share-form .form-group {
  margin-bottom: 1rem;
}

.share-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: #90caf9;
}

.share-form input,
.share-form select,
.share-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.share-form input:focus,
.share-form select:focus,
.share-form textarea:focus {
  outline: none;
  border-color: #4fc3f7;
}

.create-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #4fc3f7 0%, #0288d1 100%);
  border: none;
  border-radius: 8px;
  color: #0d2137;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.create-btn:hover {
  transform: translateY(-2px);
}

.create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-link-result {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid #4caf50;
  border-radius: 12px;
}

.share-link-result h3 {
  color: #4caf50;
  margin-bottom: 1rem;
}

.link-box {
  display: flex;
  gap: 0.5rem;
}

.link-box input {
  flex: 1 1;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.link-box button {
  padding: 0.75rem 1rem;
  background: #4fc3f7;
  border: none;
  border-radius: 8px;
  color: #0d2137;
  cursor: pointer;
}

.share-options {
  margin-top: 1rem;
}

.share-whatsapp {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
}

.active-shares-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-header h2 {
  color: #4fc3f7;
}

.refresh-btn {
  padding: 0.5rem 1rem;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid #4fc3f7;
  border-radius: 6px;
  color: #4fc3f7;
  cursor: pointer;
}

.no-shares {
  text-align: center;
  padding: 2rem;
  color: #90caf9;
}

.no-shares .hint {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.share-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.share-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.status-badge.active {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.status-badge.expired {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.time-remaining {
  color: #90caf9;
  font-size: 0.85rem;
}

.share-details p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: #b3e5fc;
}

.share-link {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.share-link input {
  flex: 1 1;
  padding: 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.share-link button {
  padding: 0.5rem;
  background: rgba(79, 195, 247, 0.2);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.share-actions {
  margin-top: 0.75rem;
}

.stop-btn {
  padding: 0.5rem 1rem;
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid #f44336;
  border-radius: 6px;
  color: #f44336;
  cursor: pointer;
}

/* File-ID: rdv-fe-007-cards-styles-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Rendezvous */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : RendezvousCards.css */
/* Summary      : Rendezvous Cards Component Styles */
/* ============================================================ */

/* FRIENDS LIST CARD */
.friends-list-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
}

.friends-list-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.friends-list-card .card-header h2 {
  color: #bb86fc;
}

.add-btn {
  padding: 0.5rem 1rem;
  background: rgba(187, 134, 252, 0.2);
  border: 1px solid #bb86fc;
  border-radius: 6px;
  color: #bb86fc;
  cursor: pointer;
}

.add-friend-form {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.add-friend-form .form-group {
  margin-bottom: 0.75rem;
}

.add-friend-form label {
  display: block;
  margin-bottom: 0.25rem;
  color: #ce93d8;
  font-size: 0.9rem;
}

.add-friend-form input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(187, 134, 252, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.add-friend-form button {
  width: 100%;
  padding: 0.75rem;
  background: #bb86fc;
  border: none;
  border-radius: 6px;
  color: #1a0f2e;
  font-weight: 600;
  cursor: pointer;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.friend-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.friend-email,
.friend-phone,
.friend-last-seen {
  font-size: 0.8rem;
  color: #ce93d8;
}

.remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
}

.remove-btn:hover {
  opacity: 1;
}

.friends-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.refresh-btn {
  padding: 0.5rem 1rem;
  background: rgba(187, 134, 252, 0.1);
  border: 1px solid #bb86fc;
  border-radius: 6px;
  color: #bb86fc;
  cursor: pointer;
}

.friend-count {
  color: #ce93d8;
  font-size: 0.9rem;
}

/* ACTIVE RENDEZVOUS */
.active-rendezvous h2 {
  color: #bb86fc;
  margin-bottom: 1rem;
}

.no-active {
  text-align: center;
  padding: 2rem;
  color: #ce93d8;
}

.rendezvous-detail {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
}

.rendezvous-detail p {
  margin: 0.5rem 0;
  color: #e1bee7;
}

/* File-ID: rdv-fe-006-styles-2025 */
/* Owner: King Group Tech */
/* Layer: frontend */
/* Feature: Rendezvous */
/* Status: stable */
/* Created-At: 2025-12-25 */
/* Last-Updated-At: 2025-12-25 */
/* ============================================================ */
/* Project      : KingRoad / Family King */
/* File         : RendezvousPage.css */
/* Summary      : Rendezvous Feature Styles */
/* ============================================================ */

.rendezvous-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #2d1b4e 0%, #1a0f2e 100%);
  color: #ffffff;
}

.rendezvous-header {
  text-align: center;
  margin-bottom: 2rem;
}

.rendezvous-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #bb86fc;
}

.rendezvous-header p {
  color: #ce93d8;
}

.rendezvous-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  border-radius: 12px;
}

.rendezvous-tabs button {
  flex: 1 1;
  padding: 0.75rem;
  border: none;
  background: transparent;
  color: #ce93d8;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.rendezvous-tabs button:hover {
  background: rgba(187, 134, 252, 0.1);
}

.rendezvous-tabs button.active {
  background: linear-gradient(135deg, #bb86fc 0%, #9c27b0 100%);
  color: #1a0f2e;
  font-weight: 600;
}

.rendezvous-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.rendezvous-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 1.5rem;
}

.select-friends-section h2 {
  color: #bb86fc;
  margin-bottom: 1rem;
}

.no-friends {
  text-align: center;
  padding: 2rem;
  color: #ce93d8;
}

.friends-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.friend-select-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.friend-select-item:hover {
  background: rgba(187, 134, 252, 0.1);
}

.friend-select-item.selected {
  border-color: #bb86fc;
  background: rgba(187, 134, 252, 0.2);
}

.friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bb86fc 0%, #9c27b0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.friend-name {
  font-size: 0.9rem;
  color: #e1bee7;
  text-align: center;
}

.check-mark {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: #bb86fc;
  font-weight: bold;
}

.suggest-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #bb86fc 0%, #9c27b0 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.suggest-btn:hover {
  transform: translateY(-2px);
}

.suggest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.meeting-point-card {
  margin-top: 1.5rem;
  background: rgba(187, 134, 252, 0.1);
  border: 1px solid rgba(187, 134, 252, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
}

.meeting-point-card .card-header h3 {
  color: #bb86fc;
  margin-bottom: 1rem;
}

.meeting-point-info {
  margin-bottom: 1rem;
}

.point-name,
.point-address,
.point-type,
.coordinates,
.notes-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #e1bee7;
}

.point-name .name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
}

.type-badge {
  background: rgba(187, 134, 252, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.distances-section h4,
.travel-times-section h4,
.amenities-section h4 {
  color: #ce93d8;
  font-size: 0.9rem;
  margin: 1rem 0 0.5rem;
}

.distances-list,
.travel-times-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.distance-item,
.travel-time-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.participant-name {
  color: #e1bee7;
}

.distance-value,
.travel-time-value {
  color: #bb86fc;
  font-weight: 600;
}

.amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.amenity-tag {
  background: rgba(187, 134, 252, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.85rem;
  color: #e1bee7;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.confirm-btn {
  padding: 1rem;
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.maps-link {
  display: block;
  text-align: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #bb86fc;
  text-decoration: none;
}

/* Card styles moved to RendezvousCards.css */