/* ============================================== */
/* 1. BASE STYLES & VARIABLES */
/* ============================================== */
:root {
    --primary-color: #4E7387;
    --primary-dark: #233741;
    --accent-color: #ff4d37;
    --text-light: #ffffff;
    --text-dark: #111111;
    --bg-light: rgba(78, 115, 135, 0.1);
    --font-main: 'Manrope', sans-serif;
  }
  
  /* ============================================== */
  /* 2. BUTTON STYLES */
  /* ============================================== */
  /* Main button styles - Note: .lTusASS-button typo should be .ltusass-btn */
  .ltusass-btn {
      background-color: var(--primary-color);
      color: var(--text-light);
      border: none;
      padding: 8px 16px;
      margin: 2px;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.3s ease;
      font-family: var(--font-main);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .ltusass-btn:hover {
      background-color: var(--primary-dark);
  }
  
  .ltusass-btn.active {
      background-color: var(--accent-color);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
      transform: translateY(1px);
  }
  
  /* Column button specific styles */
  .ltusass-btn.column-btn {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 0; /* Fully square */
  }
  
  /* ============================================== */
  /* 3. FORM CONTROLS */
  /* ============================================== */
  #ltusass-investment-controls {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 21px;
      flex-wrap: wrap;
      margin-top: 21px;
  }
  
  #ltusass-investment-controls > div {
      display: flex;
      align-items: center;
      gap: 6px;
  }
  
  #ltusass-investment-controls label {
      font-family: var(--font-main);
      color: var(--primary-color);
  }
  
  /* Input fields - consolidated duplicate selectors */
  .ltusass-input,
  #ltusass-investment-amount,
  #ltusass-start-date,
  #ltusass-end-date {
      font-family: var(--font-main);
      font-size: 13px;
      padding: 1px 4px;
      width: 120px;
      background-color: var(--bg-light);
      border: none;
      border-bottom: 3px solid var(--primary-color);
      color: var(--primary-color);
  }
  
  /* ============================================== */
  /* 4. CHART CONTAINER */
  /* ============================================== */
  #ltusass-chart {
      width: 100%;
      max-width: 800px;
      margin: 20px auto;
  }
  
  /* ============================================== */
  /* 5. METRICS SECTIONS */
  /* ============================================== */
  /* Consolidated metrics sections - they share most styles */
  #ltusass-metrics,
  #ltusass-drawdown-metrics {
      font-family: var(--font-main);
      font-size: 14px;
      margin-top: 20px;
      padding: 10px 0;
      background-color: #fff;
  }
  
  #ltusass-metrics p,
  #ltusass-drawdown-metrics p {
      margin: 6px 0;
  }
  
  #ltusass-metrics strong,
  #ltusass-drawdown-metrics strong {
      color: var(--primary-color);
  }
  
  /* Specific to drawdown metrics */
  #ltusass-drawdown-metrics h5 {
      font-size: 17px;
      margin: 14px 0;
      color: var(--primary-color);
  }
  
  /* ============================================== */
  /* 6. LAYOUT UTILITIES */
  /* ============================================== */
  .two-columns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px 30px;
      line-height: 1.2;
  }
  
  .two-columns > p, 
  .two-columns > div {
      margin: 0;
  }
  
  /* Special case for metrics two-columns */
  #ltusass-metrics .two-columns {
      gap: 6px 30px;
  }
  
  #ltusass-metrics .two-columns > p {
      line-height: 1.1;
      white-space: nowrap;
  }
  
  /* ============================================== */
  /* 7. RESPONSIVE ADJUSTMENTS */
  /* ============================================== */
  @media (max-width: 768px) {
      #ltusass-chart {
          height: 400px;
      }
  
      #ltusass-investment-controls {
          flex-direction: column;
          align-items: flex-start;
      }
  
      .two-columns {
          grid-template-columns: 1fr;
      }
  }

  .date-availability {
    font-size: 0.8em;
    color: #4E7387;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}
.date-availability span {
    font-weight: bold;
}
.date-range {
    color: #666;
}