/*
 * Override CSS (Cascading Style Sheets)
 * https://developer.mozilla.org/en-US/docs/Web/CSS
 */

/* =========================================
   0. COLOR VARIABLES
========================================= */
:root {
  /* Brand Colors */
  --enoc-green: #8FB723;
  --enoc-green-hover: #8FB723;

  /* Standard Button Colors */
  --btn-standard-bg: #719BAD;
  --btn-standard-hover: #719BAD;

  /* Layout Backgrounds */
  --bg-sidebar: #2b2d2e;
  --bg-panel: #f9f9f9;
  --bg-canvas: #ffffff;
  --bg-input: #ffffff;

  /* Borders & Lines */
  --border-light: #eaeaea;
  --separator-line: #f4f5f5;

  /* Typography Colors */
  --text-main: #333333;
  /* Standard labels */
  --text-dark: #1a1a1a;
  /* Dropdown selections */
  --text-light: #ffffff;
  /* Sidebar active/hover, button text */
  --text-muted: #a0a0a0;
  /* Sidebar inactive */
  --text-metrics: #555555;
  /* Top right info text */
}

/* =========================================
   2. OVERALL LAYOUT
========================================= */
#main-container {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--bg-canvas);
}

.sky-toolbar-container {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  max-width: none !important;
  height: 100%;
  position: relative !important;
  z-index: 10;
}

/* =========================================
   3. COLUMN 1: DARK SIDEBAR (Tabs)
========================================= */
.sky-step-bar {
  width: 220px !important;
  height: 100%;
  background-color: var(--bg-sidebar) !important;
  display: flex !important;
  flex-direction: column;
  border-right: none !important;
}

.sky-step-bar>ul,
.sky-step-bar>ul.nav-tabs {
  width: 100% !important;
  border-bottom: none !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.sky-step-bar>ul>li {
  background-color: var(--bg-sidebar) !important;
  float: none !important;
  margin: 0 !important;
}

/* Tab Links */
.sky-step-bar>ul.nav-tabs>li>a {
  width: 100% !important;
  height: auto !important;
  padding: 15px 20px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
}

.sky-step-bar>ul.nav-tabs>li>a:hover {
  color: var(--text-light) !important;
  background-color: transparent !important;
}

.sky-step-bar>ul.nav-tabs>li.active>a,
.sky-step-bar>ul.nav-tabs>li.active>a:focus,
.sky-step-bar>ul.nav-tabs>li.active>a:hover {
  color: var(--enoc-green) !important;
  background-color: transparent !important;
  border: none !important;
}

/* Tab Content & Icons */
uib-tab-heading {
  width: 100%;
}

.sky-step-bar>ul.nav-tabs>li>a p {
  margin: 0 !important;
  font-size: 18px !important;
  text-align: center;
  width: 100%;
}

.sky-step-bar>ul.nav-tabs>li>a img,
.sky-step-bar>ul.nav-tabs>li>a>span.glyphicon {
  display: none !important;
}

/* =========================================
   4. COLUMN 2: LIGHT CONFIG PANEL
========================================= */
.sky-toolbar {
  width: 300px !important;
  height: 100%;
  background-color: var(--bg-panel) !important;
  border-right: 1px solid var(--border-light) !important;
  padding: 20px !important;
  overflow-y: auto;
  display: flex !important;
  flex-direction: column;
  gap: 15px;
}

.sky-toolbar .margin-narrow {
  margin: 0 !important;
  padding: 0 !important;
}

.parameter {
  margin-bottom: 25px !important;
}

/* Labels and Titles */
.sky-toolbar label,
.sky-toolbar .control-label {
  font-size: 12px !important;
  color: var(--text-main) !important;
  margin-bottom: 6px !important;
  font-weight: normal !important;
  text-align: left !important;
  display: block;
}

.parameter-input .parameter-input-title {
  font-size: 18px !important;
  color: var(--text-main) !important;
  display: block !important;
}

/* Input Wrappers & Validation */
.sky-toolbar .parameter-input .parameter-input-field {
  width: 100% !important;
}

.sky-toolbar .parameter-input .validation-row {
  margin-top: 10px !important;
}

/* =========================================
   5. STANDARD BUTTON STYLES
========================================= */
/* Target standard buttons for the base, solid color look */
.sky-toolbar .btn:not(.dropdown-toggle) {
  width: 100% !important;
  padding: 12px 14px !important;
  background-color: var(--btn-standard-bg) !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
  font-family: 'EnocCustomFont', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-light) !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: block !important;
}

.sky-toolbar .btn:not(.dropdown-toggle):hover,
.sky-toolbar .btn:not(.dropdown-toggle):focus,
.sky-toolbar .btn:not(.dropdown-toggle):active {
  outline: none !important;
  background-color: var(--btn-standard-hover) !important;
  color: var(--text-light) !important;
  box-shadow: 0 0 0 1px var(--btn-standard-bg), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

/* Primary/Action Button rule (Solid Green) - apply class ".enoc-primary" */
.sky-toolbar .btn.enoc-primary:not(.dropdown-toggle) {
  background-color: var(--enoc-green) !important;
  border-color: var(--enoc-green) !important;
  color: var(--text-light) !important;
}

.sky-toolbar .btn.enoc-primary:not(.dropdown-toggle):hover,
.sky-toolbar .btn.enoc-primary:not(.dropdown-toggle):focus,
.sky-toolbar .btn.enoc-primary:not(.dropdown-toggle):active {
  background-color: var(--enoc-green-hover) !important;
  color: var(--text-light) !important;
  box-shadow: 0 0 0 1px var(--enoc-green), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

/* =========================================
   6. UI BOOTSTRAP DROPDOWNS
========================================= */
.sky-toolbar .dropdown,
.sky-toolbar .btn-group,
.sky-toolbar [uib-dropdown] {
  width: 100% !important;
  display: block !important;
}

/* Dropdown Toggle Button */
.sky-toolbar .btn.dropdown-toggle {
  width: 100% !important;
  padding: 12px 14px !important;
  background-color: var(--bg-input) !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
  font-family: 'EnocCustomFont', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  letter-spacing: 0.5px !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-transform: none !important;
  text-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}

.sky-toolbar .btn.dropdown-toggle:focus,
.sky-toolbar .btn.dropdown-toggle:active {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--enoc-green), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
  background-color: var(--bg-input) !important;
}

/* Custom Chevron */
.sky-toolbar .btn.dropdown-toggle .caret {
  display: none !important;
}

.sky-toolbar .btn.dropdown-toggle::after {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%238cc63f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-left: 10px !important;
}

/* Expanded Menu */
.sky-toolbar .dropdown-menu {
  width: 100% !important;
  margin-top: 2px !important;
  padding: 0 !important;
  background-color: var(--bg-input) !important;
  border: none !important;
  border-radius: 0 0 2px 2px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.sky-toolbar .dropdown-menu>li>a {
  padding: 12px 14px !important;
  font-family: 'EnocCustomFont', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  border-bottom: 1px solid var(--separator-line) !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}


.sky-toolbar .dropdown-menu>li:last-child>a {
  border-bottom: none !important;
}

.sky-toolbar .dropdown-menu>li>a:hover,
.sky-toolbar .dropdown-menu>li>a:focus {
  background-color: var(--bg-panel) !important;
  color: var(--enoc-green) !important;
  background-image: none !important;
}

.skyparameter-dropdown-menu {
  max-height: 350px;
}

/* =========================================
   1. MOBILE RESPONSIVENESS
========================================= */
@media only screen and (max-width: 800px) {

  /* 1. Stack main app vertically */
  #main-container {
    flex-direction: column !important;
  }

  /* 2. Move Canvas to the top */
  #container-canvas {
    order: 1 !important;
    width: 100% !important;
    height: 45vh !important;
    /* Takes up top 45% of screen */
    flex-grow: 0 !important;
  }

  /* 3. Move Toolbars to the bottom */
  .sky-toolbar-container {
    order: 2 !important;
    width: 100% !important;
    height: 55vh !important;
    /* Takes up bottom 55% of screen */
    flex-direction: column !important;
  }

  /* 4. Convert Sidebar Tabs into a horizontal row */
  .sky-step-bar {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    /* Vertically centers the logo and tabs */
    padding: 0 10px !important;
    /* Slight padding on the edges */
  }

  .sky-step-bar>ul.nav-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    /* Allows horizontal scrolling if many tabs */
    overflow-y: hidden !important;
    white-space: nowrap !important;
    /* Prevents tabs from wrapping to a second line */
  }

  .sky-step-bar>ul.nav-tabs>li {
    flex: 1 1 auto !important;
    /* Distribute space evenly */
  }

  .sky-step-bar>ul.nav-tabs>li>a {
    justify-content: center !important;
    padding: 12px 15px !important;
    text-align: center !important;
  }

  .sky-step-bar>ul.nav-tabs>li>a p {
    font-size: 14px !important;
    /* Smaller text for mobile */
  }

  #enoc-logo-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 15px 0 0 !important;
    /* Adds space between logo and tabs */
    flex-shrink: 0 !important;
    /* Prevents the logo from being squished */
  }

  #enoc-logo-container img {
    width: 70px !important;
    /* Make the logo small for mobile */
    height: auto !important;
  }

  #enoc-logo-container+div {
    display: none !important;
  }

  /* 5. Inputs Panel takes up remaining space */
  .sky-toolbar {
    width: 100% !important;
    flex-grow: 1 !important;
    height: auto !important;
    padding: 15px !important;
  }

  /* Optional: Adjust quickbar if you have it enabled */
  .sky-quick-bar {
    width: 100% !important;
  }
}

#main-menu-header {
  display: block;
}