/* ================================================
   Developer: Hossein Shahrokhnia, , PhD
   Water-Land-Crop Allocation Optimization Tool
   December 2025
   ================================================ */

body {
        background-color: #f0ecdf; /* your base color */
  /*background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 23px,
    rgba(0, 0, 0, 0.1) 24px 
  );
  background-size: 100% 24px; /* spacing between lines */
      font-family: Calibri, Georgia;
    }

        #Head {
      background-color: #022851;
      background-repeat: no-repeat;
      margin: 0px;
      border: 0px;
       padding: 0; 
       height: 132px;
    }

    #BelowHead {
      background-color: #f3f3ee;
      box-shadow: 0 4px 16px rgba(0, 95, 153, 0.2);
      border-radius: 6px;
      text-align: center;

      margin-left: 0px;
      margin-bottom: 5px;
      border: 0px;
      font-weight: bold;
      
    }

#Headertitle01 {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* ensures everything stays LEFT */
  gap: 20px;
  padding: 0;                    /* optional – removes extra spacing if any */
  color: rgb(243, 244, 247);
  font-size: 0.8rem;
  font-weight: bolder;
}

h2 {
  font-size: 18px;
}

    #PageBody {
      margin-left: 20px;
      border: 0px;
    }

    #PageMenu {
      background-color: #f3f3ee;
      box-shadow: 0 4px 16px rgba(0, 95, 153, 0.2);
      border-radius: 6px;
      border: 0px;
      font-size: 14px;
      
    }
#footnote p {
  white-space: normal;   
  word-wrap: break-word; 
  margin: 0; 
  font-size: 12px;           
}

    .IntroDD {
      font-weight: bold;
      margin-top: 10px;
    }

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 5px;
      text-align: center;
    }

    #resultsTable {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 95, 153, 0.2);
      overflow: hidden;
      font-family: Arial, sans-serif;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      margin-top: 20px;
    }

    #resultsTable.show {
      opacity: 1;
    }

    #resultsTable th {
      background-color: #1991c9eb;
      color: white;
      font-size: 14px;
       white-space: normal; /* <-- allows wrapping */
   word-break: break-word;
     /* optional, helps long words wrap */
    }

    #resultsTable tr:first-child th {
  height: 50px; /* or more if needed */
  vertical-align: middle; /* optional: center-aligns text */
  overflow-wrap: break-word;  /* ensure compatibility */
  padding: 2px 4px;           /* optional: spacing */
  line-height: 1.2;
}

#resultsTable tr:first-child th {
  height: 50px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  vertical-align: middle;
}



    #resultsTable td {
      background-color: #f3f3ee;
    }

    #resultsTable tr:nth-child(even) td {
      background-color: #ecece7;
    }

    #resultsTable tr:hover td {
      background-color: #bbe6faeb;
    }

    button.details-btn {
      background-color: #4478a3;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 4px;
    }

    button.details-btn:hover {
      background-color: #0d9af8;
    }

    .buttonResults {
      background-color: #1991c9eb;
      color: white;
      padding: 5px 10px;
      font-size: 15px;
      margin-top: 10px;
      border: none;
      cursor: pointer;
    }

    .buttonResults:hover {
      background-color: #235c91;
    }


      .buttonEXISTEnglishMetric {
      background-color: #f3f3ee;
      color: rgb(17, 16, 16);
      padding: 5px 5px;
      font-size: 13px;
      margin-top: 2px;
      border: none;
      font-weight: bold;
    }

      .buttonInformation {
      background-color: #FFBF00;
      color: rgb(17, 12, 12);
      padding: 5px 5px;
      font-size: 14px;
      margin-top: 0px;
      border: none;
      cursor: pointer;
      float: right;
      
    }

          .buttonEnglishMetric {
      background-color: #99987b;
      color: white;
      padding: 5px 5px;
      font-size: 12px;
      margin-top: 2px;
      border: none;
      cursor: pointer;
    }

    .buttonEnglishMetric:hover {
      background-color: #d3834e;
    }

    #chartContainer {
      margin-top: 40px;
      max-width: 1000px;
    }

    #cropLegend table {
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      margin-bottom: 10px;
    }

    #cropLegend td {
      padding: 4px 8px;
      border: 1px solid #ccc;
      
    }

    #cropLegend td:first-child {
      font-weight: bold;
      background-color: #d3a6a6;
    }
    #cropLegend table {
  width: 100%;
}
#cropLegend table tr:first-child td {
  
  font-weight: bold;
}
#cropLegend table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  background-color: #dfdfd6; /* match chart background */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

#cropLegend td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #f3f3ee;
}

#cropLegend tr:first-child td {
  
  font-weight: bold;
  color: #333;
}

#cropLegend td:first-child {

  font-weight: bold;
  color: #000;
}