/* Shared typography, controls, header, modal, table, and utility components. */

.edm-text-title {
    font-size: 18px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

.edm-text-subtitle {
    font-size: 16px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

.edm-text-body {
    font-size: 14px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

.edm-text-point {
    font-size: 28px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
}

.edm-text-param {
    font-size: 16px;
    font-weight: 600;
    font-family: "Consolas", monospace;
}

.edm-text-type {
    font-size: 12px;
    font-weight: 300;
    font-family: "Consolas", monospace;
}

.edm-text-detail {
    font-size: 14px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

.edm-text-hero-large {
  color: var(--edm-text-header-main);
  font-size: 50px;
  font-weight: 600;
}

.edm-text-home-card-title {
  color: var(--edm-text-body);
  font-size: 16px;
  font-weight: 500
}

.edm-text-home-card-content {
  color: var(--edm-text-subtitle);
  font-size: 14px;
  font-weight: 500
}

.line-container{
  --pad: 5px;
  --dot: 6px;

  position: relative;
  width: 50px;
  height: 20px;
}

.line-container::before{
  content:"";
  position:absolute;
  top:50%;
  left:var(--pad);
  right:var(--pad);
  height:1.5px;
  background-color: var(--edm-icon-line);
  transform: translateY(-50%);
}

.moving-dot{
  position:absolute;
  top:50%;
  width:var(--dot);
  height:var(--dot);
  border-radius:50%;
  transform: translateY(-50%);

  left: var(--pad);
  opacity: 0;
}

@keyframes ess-move{
  0%   { left: var(--pad); }
  100% { left: calc(100% - var(--pad) - var(--dot)); }
}

.mode-idle .moving-dot{
  opacity:0;
  animation:none;
}

.mode-charging .moving-dot{
  opacity:1;
  background-color: var(--edm-ess-charging);
  animation: ess-move 3s linear infinite;
  animation-direction: normal;
}

.mode-discharging .moving-dot{
  opacity:1;
  background-color: var(--edm-ess-discharging);
  animation: ess-move 3s linear infinite;
  animation-direction: reverse;
}

#nav-header {
    display: none;
}

.navbar-inner {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo-link {
    margin: 0;
    padding: 0;
}

.app-logo {
    display: block;
    height: 42px;
    width: auto;
}

.mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    #nav-header {
        display: flex;
        width: 100%;
        flex: 0 0 auto;
    }

    .navbar-inner {
        min-height: 42px;
        gap: 10px;
    }

    .app-logo {
        height: 30px;
    }

    .mobile-menu-btn {
        width: 32px;
        height: 32px;
        padding: 7px 5px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 auto;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-line {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--edm-text-header-main);
    }
}

.edm-btn {
  background-color: var(--edm-accent);
  color: var(--edm-text-button);
  border: 0px solid;
  border-radius: 8px;
  padding: 6px 16px;
  transition: 0.2s ease;
  font-size: 17px;
  font-weight: 600;
}

.edm-btn:not(.no-hover):hover {
  color: var(--edm-text-button);
  background-color: var(--edm-accent-dark);
  font-weight: 400;
  filter: none !important;
  opacity: 1 !important;
  font-weight: 650;
}

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

.edm-ace {
  border: 1px solid var(--edm-outline);
  border-radius: 6px;
}

.edm-ace .ace_scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.edm-ace .ace_scrollbar::-webkit-scrollbar-track {
  background: var(--edm-background);
}

.edm-ace .ace_scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--edm-scrollbar);
  border-radius: 6px;
  border: 2px solid var(--edm-background);
}

.edm-ace .ace_scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--edm-scrollbar-hover);
}

.edm-ace .ace_cursor {
  color: var(--edm-accent);
}

.edm-ace .ace_string {
  color: var(--edm-text-subtitle) !important;
}

.ace_keyword {
  color: var(--edm-accent-blue) !important;
}

.edm-ace .ace_constant.ace_numeric {
  color: var(--edm-accent-blue) !important;
}

.api-setting-row {
  margin: 0 50px;
}

@media (max-width: 576px) {
  .api-setting-row {
    margin: 0 10px;
  }
}

.api-editor-row {
  padding: 0 50px;
}

@media (max-width: 576px) {
  .api-editor-row {
    padding: 0 10px;
  }
}

.edm-dropdown .Select-control {
  background-color: var(--edm-background-card) !important;
  border-color: var(--edm-outline) !important;
}

.edm-dropdown .Select-value-label {
  color: var(--edm-text-body) !important;
}

.edm-dropdown .VirtualizedSelectOption {
  background-color: var(--edm-background-card) !important;
  color: var(--edm-text-subtitle) !important;
}

.edm-dropdown .VirtualizedSelectOption.VirtualizedSelectFocusedOption {
  background-color: var(--edm-background-btn-hover) !important;
}

.edm-dropdown:focus-within .Select-control {

  box-shadow:  none !important;
  outline: none !important;
}

.edm-input.form-control {
  background-color: var(--edm-background-button) !important;
  border-color: var(--edm-outline) !important;
  color: var(--edm-text-body) !important;
  border-radius: 6px;
}

.edm-input::placeholder {
  color: var(--edm-text-subtitle) !important;
  opacity: 0.7;
}

.edm-input.form-control:hover {
  border-color: var(--edm-text-body) !important;
  background-color: var(--edm-background) !important;
}
.edm-input.form-control:disabled:hover {
  border-color: var(--edm-text-subtitle) !important;
  background-color: var(--edm-background-button) !important;
}

.edm-input.form-control:focus {
  background-color: var(--edm-background) !important;
  color: var(--edm-text-body) !important;

  box-shadow: none !important;
  border-color: var(--edm-accent) !important;
  outline: none !important;
}

.edm-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #2b2b2b inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

.edm-input::-webkit-outer-spin-button,
.edm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edm-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.edm-number-wrapper {
  position: relative;
}

.edm-spinner-container {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.edm-spinner-btn {
  font-size: 10px;
  color: var(--edm-text-subtitle);
  line-height: 10px;
  cursor: pointer;
  user-select: none;
  padding: 2px;
  transition: color 0.2s;
}

.edm-spinner-btn:not(.no-hover):hover {
  color: var(--edm-text-body);
}

.edm-spinner-btn.no-hover {
  cursor: default;
}

.edm-radio-btn {
  background-color: var(--edm-background-button);
  color: var(--edm-text-subtitle);
  border: 1px solid var(--edm-text-subtitle);
  border-radius: 6px;
  margin-right: 6px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

.edm-radio-btn:hover {
  color: var(--edm-text-body);
  border: 1px solid var(--edm-text-body);
}

input[type="radio"]:disabled + .edm-radio-btn,
input[type="radio"]:disabled + .edm-radio-btn:hover {
  color: var(--edm-text-subtitle);
  border: 1px solid var(--edm-text-subtitle);
}

.edm-radio-btn.active {
  background-color: var(--edm-background);
  color: var(--edm-text-body);
  border-color: var(--edm-accent);
}

.radio-readonly {
  pointer-events: none;
}

.radio-readonly .edm-radio-btn {
  cursor: default;
}

.radio-readonly .edm-radio-btn:hover {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

#bar-u-chiller > div > div,
#bar-u-heater > div > div,
#bar-u-load > div > div,
#bar-q-load > div > div,
#bar-q-chiller > div > div,
#bar-q-heater > div > div,
#bar-q-leak > div > div {
  width: 200px;
  background-color: var(--edm-background-main-sub) !important;
}

.edm-modal .btn-close {
  filter: none;
  opacity: 0.7;
}

.edm-modal .btn-close:hover {
  opacity: 1;
}

.no-toast-header .toast-header {
    display: none;
}

.rotate-icon {
    transition: transform 0.25s ease-in-out;
    transform: rotate(0deg);
}

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

.api-header-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.api-header-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.api-header-table th,
.api-header-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  vertical-align: middle;
  text-align: left;
}

.api-header-table th {
  font-weight: 600;
}

@media (max-width: 768px) {
  .api-header-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  .api-header-table th,
  .api-header-table td {
    white-space: nowrap;
  }
}

.guide-responsive-mx {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
@media (max-width: 576px) {
  .guide-responsive-mx {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}