:root {
    --edm-text-title: #E4E4E4;
    --edm-text-subtitle: #7F7F7F;
    --edm-background-card: #2B2B2B;
    --edm-background-bar: #303030;
    --edm-background-header: #242424;
    --edm-background: #1E1E1E;
    
    --edm-background-dropdown: #3C3C3C;
    --edm-outline: #898A87;
    /* --edm-btn-outline: #565656; */
    --edm-btn-outline-active: #F5F5F5;
    --edm-btn-background-hover: #3A3A3A;
    --edm-accent: #FBF091;   /*main point color*/
    --edm-text: #e5e5e5;
    --edm-text-header-main: #D4D5CF;
    --edm-text-header-sub: #898a87;
    --edm-text-body: #C3C3C3;
    --edm-text-dropdown: #919191;
    --edm-scrollbar: #444444;
    --edm-scrollbar-hover: #555555;
    --edm-highlight: #fbf091;
    --edm-ess-discharging: #80dacb;
    --edm-ess-charging: #8FC9E8;

}


/* ------------------- text style ------------------- */
.edm-text-head-large {
    font-size: 28px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
}

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

.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: 16px;
    font-weight: 300;
    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; /*Fira Code*/
}

.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;
}

/* ------------------- animation ------------------- */
.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:2px;
  background-color: var(--edm-text-subtitle);
  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;   /* left -> right */
}

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


/* ------------------- navigation bar ------------------- */
.app-logo { height: 45px; width: auto; }
@media (max-width: 576px) {
    .app-logo {
        height: 30px; width: auto; 
    }
}

.navbar-inner {
  position: relative;
}

.navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 160px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 26px;
  font-weight: 400;
}
@media (max-width: 576px) {
  .navbar-title {
    max-width: calc(100% - 120px);
    font-size: 18px;
  }
}

.navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 8px;
}

.navbar-toggler-icon {
    width: 22px;
    height: 22px;
}

@media (max-width: 768px) {
    .navbar-toggler {
        width: 34px;
        height: 34px;
        padding: 4px;
    }

    .navbar-toggler-icon {
    background-image: 
    url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FBF091' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
}

.app-offcanvas {
  background-color: var(--edm-background-card); 
}

.app-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.app-offcanvas .offcanvas-title {
  color: var(--edm-text-subtitle);
  font-weight: 600;
  font-size: 18px;
}

.app-offcanvas .nav-link-header.active {
  color: var(--edm-text-header-main) !important;
}

/* .app-offcanvas .offcanvas-body {
  padding: 16px;
} */

.app-offcanvas .btn-close {
    filter: invert(1);
    opacity: 0.7;
}

.app-offcanvas .btn-close:hover {
    opacity: 1;
}

/* API | Dashboard hover default*/
.nav-link-header {
    color: var(--edm-text-header-sub);              /* text color */
    font-size: 18px;
    font-weight: 300;
    font-family: "Inter", sans-serif;   
    cursor: pointer;             /* change mouse to hand */
    transition: color 0.2s ease, 
                border-color 0.2s ease,
                opacity 0.2s ease;
    padding-bottom: 2px;         
}

/* hover */
.nav-link-header:hover {
    color: var(--edm-text-header-main);  
    text-decoration: none;       
}

/* API | Dashboard actived */
.nav-link-header.active {
    color: var(--edm-text-header-main);              /* text color before click */
    border-bottom: 2px solid var(--edm-accent);  /* text color after click */
    font-weight: 400;            
}

/* ------------------- API tool button ------------------- */
.tool-action{
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--edm-text-header-sub);
}
.tool-action:hover{
  background: rgba(255,255,255,0.06);
  color: var(--edm-text-header-main);
}


/* ------------------- button hover ------------------- */
.edm-btn {
  background-color: var(--edm-background-header);
  color: var(--edm-accent);
  border: 1px solid var(--edm-outline);
  border-radius: 8px;
  padding: 6px 16px;
  transition: 0.2s ease;    
}

/* hover */
.edm-btn:hover {
  color: #FFFFFF;;
  background-color: var(--edm-btn-background-hover)!important;
  border-color: var(--edm-btn-outline-active);
}

/* ------------------- login button------------------- */
.public-login-btn {
    margin-left: 30px;
    min-width: 220px;
    height: 44px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.public-login-btn,
.public-login-btn:link,
.public-login-btn:visited {
    color: var(--edm-text-title) !important;
    text-decoration: none !important;
}

.public-login-btn:hover,
.public-login-btn:focus,
.public-login-btn:active {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: #3a3a3a !important;
    border-color: #8f8f8f !important;
    box-shadow: none !important;
}

/* ------------------- API Dash Ace ------------------- */
.edm-ace {
  border: 1px solid var(--edm-outline);
  border-radius: 6px;
}

/* .edm-ace.ace_focus {
  box-shadow: 0 0 6px 3px rgba(255, 255, 102, 0.25) !important;
} */

.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: #99CCFF !important;
}

.ace_keyword {
  color: #CC9966 !important;
}

.edm-ace .ace_constant.ace_numeric {
  color: #CC9966 !important;
}

/* .edm-ace .ace_constant {
    color: #c6cc99 !important;
}

.ace_keyword {
  color: #6699CC !important;
} */

/* ------------------- User Guide ------------------- */
.guide-display {
  display: flex;
}
@media (max-width: 576px) {
  .guide-display {
    display: none;
  }
}


/* ------------------- API Setting Row ------------------- */
.api-setting-row {
  margin: 0 50px;
}

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

/* ------------------- API Dash Ace Row ------------------- */
.api-editor-row {
  padding: 0 50px;
}

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

/* ------------------- LED Display ------------------- */
#current-time label {
  color: var(--edm-text-subtitle) !important;      
  font-size: 16px;
  font-weight: 300;                
}

#current-time label + div {
  border: 2px solid var(--edm-background-card) !important;  
}


/* ------------------- Dropdown ------------------- */
.edm-dropdown .Select-control {
  background-color: var(--edm-background) !important;
  border-color: var(--edm-text-subtitle) !important;
}

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

/* list text color */
.edm-dropdown .VirtualizedSelectOption {
  background-color: var(--edm-background) !important;
  color: var(--edm-text-dropdown) !important;
}

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

.edm-dropdown:focus-within .Select-control {               
  /* box-shadow:  0 0 6px 3px rgba(255, 255, 102, 0.25) !important;  */
  box-shadow:  none !important;
  outline: none !important;                         
}


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

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

/* hover */
.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-header) !important;
}

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

  /* box-shadow: 0 0 6px 3px rgba(255, 255, 102, 0.25) !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;
}

/* ------------------- Customize Input Spin Button ------------------- */
/* hide original spin button */
.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;
}

/* whole container */
.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;
}

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



/* ------------------- Radio (RadioItem) ------------------- */
.edm-radio-btn {
  background-color: var(--edm-background-header);
  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;
}

/* hover */
.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);
}

/* button selected, active */
.edm-radio-btn.active {
  background-color: var(--edm-background);   
  color: var(--edm-text-body);                 
  border-color: var(--edm-accent);
}


/* ------------------- Graduated Bar ------------------- */
#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-bar) !important;
}


/* ------------------- Modal Button CLose ------------------- */
.edm-modal .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

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

/* .edm-modal-body .modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.edm-modal-body .modal-body::-webkit-scrollbar-track {
    background: var(--edm-background);     
}

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

.edm-modal-body .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--edm-scrollbar-hover); 
} */

/* ------------------- API params hover ------------------- */
.api-tips-link {
    color: var(--edm-text-body);
    transition: color 0.15s ease;
}

.api-tips-link:hover {
    color: var(--edm-accent);
}



/*----*/
@media (max-width: 767px) {
  .figure-padding-responsive {
    padding-right: 0 !important;
  }
}

/* large screen: add padding */
@media (min-width: 768px) {
  .figure-padding-responsive {
    padding-right: 60px;
  }
}

/* set toast  */
.no-toast-header .toast-header {
    display: none;
}

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

/* expand: up */
.rotate-icon.open {
    transform: rotate(180deg);
}

/* ------------------- Guide table ------------------- */
.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;   /* ≈ mx-4 */
  margin-right: 1.5rem;
}
@media (max-width: 576px) {
  .guide-responsive-mx {
    margin-left: 0.5rem;  
    margin-right: 0.5rem;
  }
}