/*
  Modern application-shell overrides.
  This block is deliberately loaded after the generated styles and scoped to
  the authenticated shell, so it does not change the login page.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

html.light {
  --el-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --el-color-primary: #ed343b !important;
  --el-color-primary-light-3: #f36f74 !important;
  --el-color-primary-light-5: #f6979b !important;
  --el-color-primary-light-7: #fac0c2 !important;
  --el-color-primary-light-8: #fcd6d7 !important;
  --el-color-primary-light-9: #fff1f2 !important;
  --el-color-primary-dark-2: #cf232b !important;
  --el-color-danger: #d92b32;
  --el-bg-color-page: #f5f7fa;
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #071a2f;
  --el-text-color-regular: #4f667f;
  --el-text-color-secondary: #7b8fa6;
  --el-text-color-placeholder: #a4b3c4;
  --el-border-color: #dfe7f0;
  --el-border-color-light: #e7edf3;
  --el-border-color-lighter: #edf1f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #f9fafc;
  --el-fill-color-blank: #ffffff;
  --bg: #f5f7fa !important;
  --vt-c-white: #ffffff !important;
  --left-menu-bg-color: #071a2f !important;
  --left-menu-bg-dark-color: #061625 !important;
  --left-menu-bg-light-color: #102a44 !important;
  --left-menu-bg-active-color: rgba(237, 52, 59, .16) !important;
  --left-menu-text-color: #b9c7d8 !important;
  --left-menu-text-active-color: #ffffff !important;
}

/*
  Vue teleports dialogs, drawers and popups outside the authenticated shell.
  Set typography at the page/Element Plus level so those surfaces match it.
*/
html.light body,
html.light .el-dialog,
html.light .el-drawer,
html.light .el-message-box,
html.light .el-popper,
html.light .el-overlay,
html.light .el-form,
html.light .el-table {
  font-family: var(--el-font-family) !important;
}

html.light button,
html.light input,
html.light select,
html.light textarea {
  font-family: inherit !important;
}

/*
  The navigation can be rendered directly under #app or inside .skin-single.
  Keep the shell scope independent of that layout wrapper.
*/
#app .nav-top,
#app .nav-top ~ * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Top navigation */
#app .nav-top {
  min-height: 56px;
  padding: 0 16px;
  gap: 14px;
  color: #4f667f;
  border-bottom: 1px solid #dfe7f0;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 1px 0 rgba(7, 26, 47, .03);
  backdrop-filter: blur(14px);
}

#app .nav-top .logo {
  background: transparent !important;
}

#app .nav-top .logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(7, 26, 47, .12);
}

#app .nav-top .menu,
#app .nav-top .menu-container {
  height: 100%;
  background: transparent !important;
}

#app .nav-top .menu > .el-menu-item,
#app .nav-top .menu > .el-sub-menu > .el-sub-menu__title {
  position: relative;
  height: 56px;
  padding: 0 12px;
  color: #60758d !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .18s ease, background-color .18s ease;
}

#app .nav-top .menu > .el-menu-item:hover,
#app .nav-top .menu > .el-sub-menu > .el-sub-menu__title:hover {
  color: #071a2f !important;
  background: #f9fafc !important;
}

#app .nav-top .menu > .el-menu-item.is-active,
#app .nav-top .menu > .el-sub-menu.is-active > .el-sub-menu__title {
  color: #ed343b !important;
  background: transparent !important;
}

#app .nav-top .menu > .el-menu-item.is-active::after,
#app .nav-top .menu > .el-sub-menu.is-active > .el-sub-menu__title::after {
  content: "";
  position: absolute;
  top: auto;
  right: 12px;
  bottom: 0;
  left: 12px;
  width: auto;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: #ed343b;
  transform: none;
}

#app .nav-top .menu .el-icon {
  color: inherit;
}

#app .nav-top .nav-search-select {
  width: min(260px, 22vw);
}

#app .nav-top .nav-search-select .el-input__wrapper {
  min-height: 36px;
  border-radius: 9px;
  background: #f8fafc;
  box-shadow: 0 0 0 1px #dfe7f0 inset;
}

#app .nav-top .nav-search-select .el-input__inner {
  color: #344b64;
  font-size: 12px;
}

#app .nav-top .common-menu {
  gap: 2px;
  color: #60758d;
}

/* The application is pinned to its Default layout for end users. */
#app .katsana-layout-configuration {
  display: none !important;
}

#app .nav-top .common-menu .el-button.is-text {
  color: #60758d !important;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

#app .nav-top .common-menu .el-button.is-text:hover,
#app .nav-top .common-menu .el-button.is-text:focus,
#app .nav-top .common-menu .el-button.is-text:active {
  color: #071a2f !important;
  background: #f1f4f8 !important;
}

#app .nav-top .common-menu .el-button .el-icon,
#app .nav-top .common-menu .material-design-icon,
#app .nav-top .common-menu svg {
  color: inherit !important;
}

#app .nav-top .common-menu svg path {
  fill: currentColor !important;
}

#app .nav-top .menu-item-ruser-user-name {
  color: #344b64 !important;
  font-size: 12px;
  font-weight: 700;
}

#app .min-max {
  color: #60758d;
  border: 1px solid #dfe7f0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(7, 26, 47, .08);
}

/* Left navigation */
#app .nav-top ~ :is(.content-row, .right) {
  background: #f5f7fa;
}

#app .nav-top ~ :is(.content-row, .right) > .bgg {
  color: #b9c7d8;
  border-right: 1px solid rgba(255, 255, 255, .04);
  background: linear-gradient(180deg, #071a2f, #061625);
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu {
  padding: 8px;
  border: 0;
  background: transparent !important;
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu-item,
#app .nav-top ~ :is(.content-row, .right) > .bgg .el-sub-menu__title {
  min-height: 38px;
  margin: 2px 0;
  padding: 0 11px !important;
  color: #b9c7d8 !important;
  border-radius: 9px;
  background: transparent !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.006em;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu-item .el-icon,
#app .nav-top ~ :is(.content-row, .right) > .bgg .el-sub-menu__title .el-icon {
  color: #8195aa;
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu-item:hover,
#app .nav-top ~ :is(.content-row, .right) > .bgg .el-sub-menu__title:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .06) !important;
  transform: translateX(1px);
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu-item.is-active,
#app .nav-top ~ :is(.content-row, .right) > .bgg .el-sub-menu.is-active > .el-sub-menu__title {
  color: #ffffff !important;
  border-radius: 0;
  background: rgba(237, 52, 59, .1) !important;
  box-shadow: inset 4px 0 0 #ed343b;
}

#app .nav-top ~ :is(.content-row, .right) > .bgg .el-menu-item.is-active .el-icon,
#app .nav-top ~ :is(.content-row, .right) > .bgg .el-sub-menu.is-active > .el-sub-menu__title .el-icon {
  color: #ff7176;
}

/* Main application surface */
#app .nav-top ~ :is(.content-row, .right) .transition-page {
  color: #4f667f;
  background: #f5f7fa;
}

#app .nav-top ~ :is(.content-row, .right) .breadcrumb {
  min-height: 42px;
  margin: 10px 12px 0;
  padding: 0 12px;
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(7, 26, 47, .035);
}

#app .nav-top ~ :is(.content-row, .right) .breadcrumb .el-breadcrumb__inner,
#app .nav-top ~ :is(.content-row, .right) .breadcrumb-item {
  color: #7b8fa6;
  font-size: 12px;
  font-weight: 550;
}

#app .nav-top ~ :is(.content-row, .right) .breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner,
#app .nav-top ~ :is(.content-row, .right) .breadcrumb .el-breadcrumb__item:last-child .breadcrumb-item {
  color: #344b64;
  font-weight: 750;
}

#app .nav-top ~ :is(.content-row, .right) .breadcrumb .breadcrumb-icon {
  color: #8a9db3;
}

#app .nav-top ~ :is(.content-row, .right) .breadcrumb .el-breadcrumb__separator {
  color: #c2cdda;
}

#app .nav-top ~ :is(.content-row, .right) .short-video-box-form {
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px 12px !important;
  background: #f5f7fa;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-tree-v2,
#app .nav-top ~ :is(.content-row, .right) .state-box-tab {
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(7, 26, 47, .04), 0 5px 16px rgba(7, 26, 47, .035);
}

/* Vehicle panel */
#app .nav-top ~ :is(.content-row, .right) .fleet-table-live-tool {
  min-height: 50px;
  gap: 3px;
  padding: 7px 10px;
  color: #7b8fa6;
  border-bottom: 1px solid #e7edf3;
  background: #ffffff;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-table-live-tool > span {
  color: #8a9db3;
  transition: color .18s ease;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-table-live-tool > span:hover {
  color: #ed343b;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-table-live-tool .el-input__wrapper {
  min-height: 36px;
  margin-left: 5px;
  border-radius: 8px;
  background: #f9fafc;
  box-shadow: 0 0 0 1px #dfe7f0 inset;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-tree-content {
  padding: 6px;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-tree-fleet {
  height: 32px;
  padding: 0 6px;
  color: #4f667f;
  border-radius: 8px;
  font-size: 13px;
  transition: background-color .18s ease;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-tree-fleet:hover {
  background: #f5f7fa;
}

#app .nav-top ~ :is(.content-row, .right) .fleet-tree-fleet-label {
  color: #253d57;
  font-weight: 700;
}

/* Filters and controls */
#app .nav-top ~ :is(.content-row, .right) .state-box-tab > .demo-form-inline {
  position: relative;
  top: auto;
  margin: 0;
  padding: 10px 12px 2px;
  border-bottom: 1px solid #edf1f5;
  background: #ffffff;
}

#app .nav-top ~ :is(.content-row, .right) .demo-form-inline .el-form-item {
  margin-right: 9px;
  margin-bottom: 8px;
}

#app .nav-top ~ :is(.content-row, .right) .demo-form-inline .el-form-item__label {
  padding-right: 8px;
  color: #526b84;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .01em;
}

#app .nav-top ~ :is(.content-row, .right) .el-input__wrapper,
#app .nav-top ~ :is(.content-row, .right) .el-range-editor {
  min-height: 36px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #dfe7f0 inset;
  transition: box-shadow .18s ease, background-color .18s ease;
}

#app .nav-top ~ :is(.content-row, .right) .el-input__wrapper:hover,
#app .nav-top ~ :is(.content-row, .right) .el-range-editor:hover {
  box-shadow: 0 0 0 1px #b8c6d5 inset;
}

#app .nav-top ~ :is(.content-row, .right) .el-input__wrapper.is-focus,
#app .nav-top ~ :is(.content-row, .right) .el-input__wrapper:focus-within,
#app .nav-top ~ :is(.content-row, .right) .el-range-editor.is-active {
  box-shadow: 0 0 0 1px #ed343b inset, 0 0 0 4px rgba(237, 52, 59, .11);
}

#app .nav-top ~ :is(.content-row, .right) .el-input__inner,
#app .nav-top ~ :is(.content-row, .right) .el-range-input,
#app .nav-top ~ :is(.content-row, .right) .el-range-separator {
  color: #253d57;
  font-family: inherit;
  font-size: 12px;
}

#app .nav-top ~ :is(.content-row, .right) .el-input__inner::placeholder,
#app .nav-top ~ :is(.content-row, .right) .el-range-input::placeholder {
  color: #a4b3c4;
}

#app .nav-top ~ :is(.content-row, .right) .el-input__prefix,
#app .nav-top ~ :is(.content-row, .right) .el-input__suffix,
#app .nav-top ~ :is(.content-row, .right) .el-range__icon,
#app .nav-top ~ :is(.content-row, .right) .el-select__caret {
  color: #8a9db3;
}

#app .nav-top ~ :is(.content-row, .right) .el-button {
  min-height: 36px;
  padding: 0 13px;
  color: #344b64;
  border: 1px solid #cad6e2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(7, 26, 47, .04);
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

#app .nav-top ~ :is(.content-row, .right) .el-button:hover {
  color: #071a2f;
  border-color: #aebdcd;
  background: #f9fafc;
}

#app .nav-top ~ :is(.content-row, .right) .el-button--primary {
  color: #ffffff;
  border-color: #ed343b;
  background: #ed343b;
  box-shadow: 0 7px 14px rgba(207, 35, 43, .16);
}

#app .nav-top ~ :is(.content-row, .right) .el-button--primary:hover {
  color: #ffffff;
  border-color: #d92b32;
  background: #d92b32;
  transform: translateY(-1px);
}

#app .nav-top ~ :is(.content-row, .right) .el-button--danger {
  color: #d92b32;
  border-color: #f2b8bb;
  background: #fff1f2;
  box-shadow: none;
}

#app .nav-top ~ :is(.content-row, .right) .el-button--danger:hover {
  color: #ffffff;
  border-color: #d92b32;
  background: #d92b32;
}

#app .nav-top ~ :is(.content-row, .right) .el-button.is-text {
  min-width: 36px;
  padding: 0;
  color: #60758d;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Empty and table states */
#app .nav-top ~ :is(.content-row, .right) .test {
  background: #ffffff;
}

#app .nav-top ~ :is(.content-row, .right) .el-empty {
  min-height: 280px;
  color: #8a9db3;
}

#app .nav-top ~ :is(.content-row, .right) .el-empty__image {
  display: grid;
  width: 76px;
  height: 76px;
  place-content: center;
  padding: 16px;
  border-radius: 18px;
  background: #f0f4f8;
}

#app .nav-top ~ :is(.content-row, .right) .el-empty__description p,
#app .nav-top ~ :is(.content-row, .right) .table-no-data {
  color: #8a9db3;
  font-size: 12px;
  font-weight: 550;
}

#app .nav-top ~ :is(.content-row, .right) .el-table,
#app .nav-top ~ :is(.content-row, .right) .el-table-v2 {
  color: #4f667f;
  background: #ffffff;
  font-size: 12px;
}

#app .nav-top ~ :is(.content-row, .right) .el-table th,
#app .nav-top ~ :is(.content-row, .right) .el-table-v2__header-cell {
  color: #526b84;
  background: #f9fafc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Popups are teleported outside #app's shell, so scope them to light mode. */
html.light .el-select-dropdown,
html.light .el-picker-panel,
html.light .el-dropdown-menu {
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(7, 26, 47, .12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.light .el-select-dropdown__item.selected {
  color: #ed343b;
  font-weight: 700;
}

@media (max-width: 1380px) {
  #app .nav-top {
    gap: 10px;
    padding-inline: 12px;
  }

  #app .nav-top .menu > .el-menu-item,
  #app .nav-top .menu > .el-sub-menu > .el-sub-menu__title {
    padding-inline: 9px;
    font-size: 12px;
  }

  #app .nav-top .nav-search-select {
    width: 170px;
  }

  #app .nav-top .common-menu .el-button.is-text {
    width: 30px;
    min-height: 30px;
    padding: 0;
  }

  #app .nav-top ~ :is(.content-row, .right) .short-video-box-form {
    grid-template-columns: 270px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  #app .nav-top .nav-search-select,
  #app .nav-top .menu-item-ruser-user-name {
    display: none;
  }

  #app .nav-top ~ :is(.content-row, .right) .short-video-box-form {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 10px;
    padding: 10px !important;
  }

  #app .nav-top ~ :is(.content-row, .right) .breadcrumb {
    margin: 10px 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .nav-top *,
  #app .nav-top ~ *,
  #app .nav-top ~ * * {
    transition: none !important;
  }
}