/* www/styles.css */

/* Sidebar Scrolling */
.scroll-sidebar { 
  max-height: calc(100vh - 20px) !important; /* Stop exactly at the screen bottom */
  height: fit-content !important; /* SHIELD: Ignore the Main Panel's stretching */
  overflow-y: auto !important; /* Turn on the scrollbar inside the panel */
  position: sticky !important; /* Keep it on screen when scrolling */
  top: 20px !important;
}

/* Stacked Bar Graph Container */
.stack-container { 
  display: flex; 
  width: 100%; 
  height: 24px; 
  border-radius: 6px; 
  overflow: hidden; 
  background: #e5e7eb; 
}
.area_elec, .area_h2, .area_saf { 
  height: 100%; 
}

/* Force tables to full width */
#tbl_el table, #tbl_h2 table, #tbl_saf table { 
  font-size: 14px !important; 
  width: 100% !important; 
  margin-bottom: 0; 
}
#tbl_el, #tbl_h2, #tbl_saf { 
  width: 100%; 
}

/* Environmental Card Colors */
#co2_saved { color: white; font-size: 28px; }
#tree_equivalent { color: #56cc9d; font-size: 26px; }
#flights_powered { color: #fcd34d; font-size: 26px; }

/* Text & Labels Formatting */
#logistics_note { font-size: 11px; color: gray; font-style: italic; }
#truck_deliveries, #saf_tankers { font-size: 15px; }
#unit_cost_box p { font-size: 13px !important; }

/* Dynamic Text Targets */
#capex_elec_per_unit_text, #capex_elec_per_stand_text, 
#capex_h2_per_unit_text, #capex_h2_per_hose_text, 
#capex_saf_per_unit_text, #capex_saf_per_stand_text {
  font-weight: bold; font-size: 12px; 
}
#capex_elec_text, #capex_h2_text, #capex_saf_text {
  font-weight: bold; font-size: 32px;
}
#capex_title { 
  font-weight: 700; font-size: 20px; color: #1a1a1a; 
}

/* Opex & Soft Costs Text */
#annual_opex_text, #h2_design_costs, #h2_risk_costs, 
#el_soft_costs, #el_comm_costs, 
#saf_perm_costs, #saf_risk_costs { 
  color: #6c757d; font-size: 12px; margin-top: 4px; 
}

/* Total Capex & Investment Grade */
#total_capex_text { 
  font-size: 28px; font-weight: 700; color: #1a1a1a; display: block; 
}
#investment_grade_text { 
  background: #d7f5df; color: #1d7f3b; padding: 4px 10px; 
  border-radius: 12px; font-size: 12px; display: inline-block; margin-top: 4px; 
}

/* --- BOTTOM CARD STRETCHING LOGIC --- */

/* 1. Make the main panel a flex container */
.col-sm-9 {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Force full viewport height */
  overflow-y: auto; 
  padding-bottom: 30px; /* The bottom gap */
}

/* 2. The container for the 3 cards takes all REMAINING space */
.fill-to-bottom {
  flex: 1; /* Grow to fill empty space */
  display: flex;
  flex-direction: row; 
  min-height: 400px; 
  margin-bottom: 0 !important;
}

/* 3. The cards themselves stretch to fill that container */
.card-stretch {
  height: 100%; 
  display: flex;
  flex-direction: column;
}

.card-stretch .card-body {
  flex: 1 1 auto; /* Grow to fill card space */
  overflow-y: auto; 
}

/* 4. Fix table container to stay at bottom */
.card-stretch > div:last-child {
  margin-top: auto; 
}

/* 1. Infrastructure Panel Boxes */
.infra-box {
  background-color: #f8f9fa; 
  padding: 15px; 
  border-radius: 8px; 
  border: 1px solid #dee2e6;
}

.infra-title {
  margin-top: 0; 
  font-weight: bold; 
  color: #495057;
}

/* 2. Flex Row Inputs (For side-by-side buttons and inputs) */
.flex-input-row {
  display: flex; 
  gap: 5px;
}

/* 3. Feasibility Card Sections */
.feasibility-col {
  padding: 10px; 
  border-right: 1px solid #e2e8f0;
}
.feasibility-col-last {
  padding: 10px; /* No right border for the last one */
}
.feasibility-subtitle {
  font-weight: bold; 
  font-size: 13px; 
  color: #64748b; 
  margin-bottom: 10px;
}

/* 4. Warning & Error Cards */
.warning-truck {
  color: #7F1D1D; 
  background-color: #FCA5A5; 
  width: 180px;
}
.warning-grid {
  color: #C2410C; 
  background-color: #FFE5B4; 
  width: 180px;
}
.error-box {
  background-color: #B22222;
}

/* 5. Server Output Metrics (HTML text) */
.metric-container { font-size: 12px; }
.metric-value { font-weight: 500; font-size: 15px; }
.metric-unit { font-weight: 500; }

/* 5. Server Output Metrics (HTML text) */
.metric-container { font-size: 12px; }
.metric-value { font-weight: 500; font-size: 15px; }
.metric-unit { font-weight: 500; }

/* ========================================= */
/* --- SMARTPHONE TABLE & CARD FIX --- */
/* ========================================= */
@media (max-width: 767.98px) {
  /* 1. Stop forcing the app to fit on one screen */
  .col-sm-9 {
    height: auto !important; 
    overflow-y: visible !important; 
  }
  
  /* 2. Allow cards to grow naturally instead of squashing */
  .fill-to-bottom {
    display: block !important; 
    height: auto !important;
  }
  .card-stretch {
    height: auto !important; 
    margin-bottom: 20px !important; /* Add breathing room between cards */
  }
  .card-stretch .card-body {
    overflow-y: visible !important; 
    flex: none !important;
  }
  
  /* 3. Stack the inner Metrics and OPEX columns so they don't overlap */
  .card-stretch .card-body .bslib-grid {
    grid-template-columns: 1fr !important; 
    gap: 10px !important;
  }
  
  /* 4. Change the vertical divider to a horizontal divider */
  .card-stretch .card-body .bslib-grid > div:first-child {
    border-right: none !important;
    border-bottom: 1px dashed #dee2e6;
    padding-right: 0 !important;
    padding-bottom: 10px;
    text-align: center !important; /* Center the metrics on phone */
  }
  .card-stretch .card-body .bslib-grid > div:last-child {
    padding-left: 0 !important;
    text-align: center !important; /* Center the OPEX on phone */
  }
  
  /* 5. Keep the table text readable */
  .table-responsive table {
    font-size: 11px !important; 
  }
  .table-responsive th, .table-responsive td {
    padding: 0.3rem 0.2rem !important; 
    word-wrap: break-word; 
  }
}