:root {
   --primary: #2563eb;
   --surface: #ffffff;
   --text: #1e293b;
   --activetext: red;
   --border: #CAEEC2;
   --shadow: #cccccc;
   --ecogreen: #E5F6DF;
   --ji-brown: #9F5316;
   --ji-brown-lighter: #efb88b;
   --feedstock-color: #e48500;
   --bc-production-color: #2d9fd4;
   --bc-dispatch-color: #c9c400;
   --feedstock-color-lighter: #ffd08e;
   --pipeline-color: #4CAF50;
   --sink-color: #9f541698;
   --moisture-color: #3ea4f0;
   --distance-color: #00963F;
}

* {
   font-family: 'Poppins', sans-serif;
   font-family: Lato, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }

#data-container {
   position: fixed;
   width: 100%;
   height: 100%;
}

#map {
   position: fixed;
   left: 360px;
   width: 75%;
   height: 100%;
   transition: all 0.3s ease;
}

#map.expanded {
   left: 0;
   width: 100%;
   transform: translateX(0);
}

.factory, .nursery {
   background-size: cover;
   background-color: yellow;
   width: 50px;
   height: 50px;
   border: 2px solid black;
   border-radius: 10%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}

.factory {
   background-image: url('../images/icon_factory.png');
}

.nursery {
   background-image: url('../images/nursery.png');
   border-color: white;
}

.marker {
   background-image: url('../images/tissue.png');
   background-size: cover;
   width: 50px;
   height: 50px;
   border: 2px solid white;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}

.marker.active {
   background-image: none;
   background-color: var(--ji-brown);
   width: 50px;
   height: 50px;
}

.popup-content {
   position: relative;
   left: 0;
   width: 100%;
   height: 10%;
   background: var(--surface);
   display: flow;
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
   text-align: center;
   outline: none;
   box-shadow: none;
}

#side-panel {
   position: fixed;
   left: 0;
   width: 360px;
   height: calc(100vh - 140px);
   background: var(--surface);
   overflow-y: auto;
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
}

#side-panel.collapsed {
   transform: translateX(-100%);
}

.side-panel-toggle {
   position: absolute;
   right: -40px;
   top: 50%;
   transform: translateY(-50%);
   background: white;
   border: none;
   border-radius: 0 4px 4px 0;
   padding: 8px;
   box-shadow: 2px 0 4px rgba(0,0,0,0.1);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   transition: background-color 0.2s ease;
   width: 40px;
   height: 40px;
   visibility: visible;
}

.side-panel-toggle:hover {
   background: #f8fafc;
}

.side-panel-toggle svg {
   color: #64748b;
}

#header-row {
   position: relative;
   left: 0;
   width: 100%;
   height: 10%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: left;
   padding: 1px 10px;
   text-align: center;
   outline: none;
   box-shadow: none;
}

#header-row-left, #header-row-right {
   position: relative;
   left: 0;
   width: 50%;
   height: 10%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: center;
   outline: none;
   box-shadow: none;
}

#header-row-summary {
   position: relative;
   left: 0;
   width: 50%;
   height: 10%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: right;
   text-align: center;
   outline: none;
   box-shadow: none;
}

#header-row-disclaimer {
   position: inline;
   left: 0;
   width: 100%;
   height: 5%;
   color: gray;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: left;
   font-size: 0.85rem;
   padding-left: 0.75rem;
   text-align: center;
   font-style: italic;
}

.accordion {
   margin: 0.75rem;
   margin-bottom: 2rem;
   padding: 0.5rem;
   border-radius: 6px;
   background: white;
   overflow: hidden;
   transition: all 0.1s ease;
}

.accordion.active {
   border: 1px solid var(--ji-brown);
   box-shadow: -4px 0px 0px 0px var(--ji-brown);
   color: var(--ji-brown);
}

.accordion-header {
   padding: 0.25rem;
   background: white;
   cursor: pointer;
   display: flex;
   flex-direction: column;
}

.accordion-header-titlerow {
   background: white;
   cursor: pointer;
   display: flex;
   gap: 0.25rem;
   align-items: center;
   justify-content: left;
   text-align: center;
}
.accordion-header-titlerow-space-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: center;
   width:100%
}

.accordion-header-titlerow-left {
   position: relative;
   left: 0;
   width: 85%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: left;
   outline: none;
   box-shadow: none;
}

.accordion-header-titlerow-right {
   position: relative;
   left: 0;
   width: 15%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: right;
   text-align: center;
   outline: none;
   box-shadow: none;
   padding-right: 0rem;
}

.accordion-header-bottomrow {
   background: white;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: center;
   font-size: 0.8rem;
   color: #64748b;
   margin-top: 0.25rem;
}

.accordion-header-bottomrow-left, .accordion-header-bottomrow-right {
   position: relative;
   left: 0;
   width: 50%;
   background: var(--surface);
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: center;
   outline: none;
   box-shadow: none;
   font-size: 0.8rem;
   color: #64748b;
   margin-top: 0.25rem;
}

.accordion-header-bottomrow-right {
   justify-content: right;
   padding-right: 0.5rem;
}

.accordion-header h3 {
   font-size: 0.9rem;
   color: var(--text);
}

.accordion-header p {
   font-size: 0.8rem;
   color: #64748b;
   margin-top: 0rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.icon-image-tiny { width: 20px; }
.icon-image-small { width: 25px; }
.icon-image-medium { width: 30px; }
.icon-image-large { width: 40px; }

.icon-image-tiny, .icon-image-small, .icon-image-medium, .icon-image-large {
   border-radius: 5%;
   padding-right: 0.25rem;
}

.bc-production-container, .bc-dispatch-container, .sink-container, .feedstock-container, .pipeline-container {
   padding-bottom: 3rem;
   min-height: 100%;
}

.accordion-content {
   max-height: 0;
   opacity: 0;
   transition: all 0.3s ease-in-out;
   background: #f8fafc;
   overflow: hidden;
   padding: 0 0.5rem;
}

.accordion.active .accordion-content {
   max-height: 1000px;
   opacity: 1;
   padding: 0.5rem;
}

.info-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.5rem;
   background: #f8fafc;
   padding: 0.25rem;
}

.info-item {
   background: white;
   padding: 0.5rem;
   border-radius: 8px;
   border: 0.1px solid var(--surface);
   transition: transform 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-item:hover {
   transform: translateY(-2px);
}

.info-label {
   font-size: 0.80rem;
   color: #64748b;
   font-weight: normal;
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.info-value {
   display: grid;
   font-size: 1rem;
   font-weight: normal;
   color: var(--text);
   margin-top: 0.25rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

h2 {
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 1.5rem;
   font-weight: normal;
}

h4 {
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 1.2rem;
   font-weight: normal;
}

.badge-distance {
   background-color: var(--distance-color);
}

.badge-biochar {
   background-color: var(--ji-brown);
}

.badge-moisture {
   background-color: var(--moisture-color);
}

.badge-feedstock {
   background-color: var(--feedstock-color);
}

.badge-distance, .badge-biochar, .badge-moisture, .badge-feedstock {
   font-size: 1rem;
   font-weight: 300;
   color: white;
   padding: 2px 4px;
   text-align: center;
   border-radius: 4px;
}

.badge-area {
   background-color: yellow;
   color: black;
}

.badge-total-plants {
   background-color: #76B828;
}

.badge-total-biochar {
   background-color: #9F5316;
}

.badge-total-feedstock {
   background-color: var(--feedstock-color);
}

.badge-area, .badge-total-plants, .badge-total-biochar, .badge-total-feedstock {
   font-size: 1.5rem;
   font-weight: normal;
   color: white;
   padding: 8px 16px;
   text-align: center;
   border-radius: 4px;
}

.badge-area {
   font-size: 1rem;
   background-color: yellow;
   color: black;
}

.badge-total-distance-max {
   background-color: orange;
}

.badge-total-distance-min {
   background-color: #76B828;
}

.badge-total-distance-avg {
   background-color: yellow;
   color: black;
}

.badge-total-distance-max, .badge-total-distance-min, .badge-total-distance-avg {
   font-size: 1.2rem;
   font-weight: normal;
   color: white;
   padding: 4px 8px;
   text-align: center;
   border-radius: 4px;
}

.tab-container {
   display: flex;
   background: var(--surface);
   padding: 0.5rem;
   padding-top: 0rem;
}

.tab {
   padding: 0.75rem 1.5rem;
   font-size: 1.2rem;
   font-weight: normal;
   color: var(--text);
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
   align-self: center;
}

.testing {
   align-self: center;
}

.tab.active {
   color: var(--primary);
   border-bottom: 2px solid var(--primary);
}

.tab:hover:not(.active) {
   background: var(--ecogreen);
}

.panel {
   display: none;
}

.panel.active {
   display: block;
}

.feedstock-marker, .feedstock-marker-corn, .feedstock-marker-cotton, .feedstock-marker-mango {
   background-size: cover;
   width: 50px;
   height: 50px;
   border: 2px solid #FFB74D;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}

.feedstock-marker { background-image: url('../images/feedstock.png'); }
.feedstock-marker-corn { background-image: url('../images/icon_corn.png'); }
.feedstock-marker-cotton { background-image: url('../images/icon_cotton.png'); }
.feedstock-marker-mango { background-image: url('../images/icon_mango.png'); }

.feedstock-marker.active,
.feedstock-marker-corn.active,
.feedstock-marker-cotton.active,
.feedstock-marker-mango.active {
   background-image: none;
   background-color: var(--feedstock-color);
   width: 50px;
   height: 50px;
}

.pipeline-marker {
   background-image: url('../images/pipeline.png');
   background-size: cover;
   width: 50px;
   height: 50px;
   border: 2px solid white;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}

.pipeline-marker.active {
   background-image: none;
   background-color: var(--pipeline-color);
   width: 50px;
   height: 50px;
}

.badge-status {
   font-size: 1rem;
   font-weight: 300;
   background-color: #4CAF50;
   color: white;
   padding: 2px 4px;
   text-align: center;
   border-radius: 4px;
}

.badge-capacity {
   font-size: 1rem;
   font-weight: normal;
   background-color: #3949AB;
   color: white;
   padding: 2px 4px;
   text-align: center;
   border-radius: 4px;
}

.subtab-container {
   padding: 0rem;
}

.subtab-summary {
    display: none;
    padding: 0.5rem;
    padding-top: 0rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
 }
 
 .subtab-summary.active {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
 }
 
 /* Customize scrollbar appearance */
 .subtab-summary::-webkit-scrollbar {
    height: 6px;
 }
 
 .subtab-summary::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
 }
 
 .subtab-summary::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
 }
 
 .subtab-summary::-webkit-scrollbar-thumb:hover {
    background: #555;
 }
 
.summary-stat {
   border-radius: 0.5rem;
   padding: 0.75rem;
   min-width: 150px;
   /* max-height: 80px;  */
   text-align: center;
   align-content: center;
}

.summary-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    width: 100%;

}
.summary-label-left {
   display: flex;
   align-items: center;
   justify-content: left;
   font-size: 1rem;
   color: #64748b;
   margin-bottom: 0.25rem;
   width: 100%;

}
.summary-label-right {
   display: flex;
   align-items: center;
   justify-content: right;
   font-size: 1rem;
   color: #64748b;
   /* margin-bottom: 0.25rem; */
   width: 100%;


}


.summary-sublabel {
   font-size: 0.75rem;
   color: #64748b;
   margin-top: 0.25rem;
}

.summary-value {
    display: flex;
    align-items: center;
    justify-content: center;
   font-size: 1.4rem;
   font-weight: 100;
}
.photoLink {
   align-items: center;
   justify-content: center;
  font-size: 1.2rem;
  
}
.photoLink-small {
   align-items: center;
   justify-content: center;
  font-size: 0.8rem;
  
}
.logout-button {
   background-color: var(--ji-brown);
   color: white !important;
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9rem;
   text-decoration: none;
   margin-left: 1rem;
   transition: background-color 0.2s;
}

.logout-button:hover {
   background-color: var(--ji-brown-lighter);
}

.factory::after,
.nursery::after {
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   right: -5px;
   bottom: -5px;
   border-radius: 10%;
   animation: glow 2s infinite;
   pointer-events: none;
}

.marker.active::after {
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   right: -5px;
   bottom: -5px;
   border-radius: 50%;
   animation: glow 2s infinite;
   pointer-events: none;
   border: 3px solid var(--ji-brown);
}

.feedstock-marker.active::after,
.feedstock-marker-corn.active::after,
.feedstock-marker-cotton.active::after,
.feedstock-marker-mango.active::after {
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   right: -5px;
   bottom: -5px;
   border-radius: 50%;
   animation: glowFeedstock 2s infinite;
   pointer-events: none;
   border: 3px solid var(--feedstock-color);
}

.pipeline-marker.active::after {
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   right: -5px;
   bottom: -5px;
   border-radius: 50%;
   animation: glowPipeline 2s infinite;
   pointer-events: none;
   border: 3px solid var(--pipeline-color);
}

@keyframes glow {
   0% {
       box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.4);
   }
   70% {
       box-shadow: 0 0 0 15px rgba(255, 255, 0, 0);
   }
   100% {
       box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
   }
}

@keyframes glowFeedstock {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.4);
  }
  70% {
      box-shadow: 0 0 0 15px rgba(255, 255, 0, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
  }
}

@keyframes glowPipeline {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.4);
  }
  70% {
      box-shadow: 0 0 0 15px rgba(255, 255, 0, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
  }
}