/* ====== SUMMARY SECTION GRID ====== */
#dashboard-panels {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, 1fr); /* desktop default */
  max-width: 100%;
  margin-bottom: 20px;
}

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
  #dashboard-panels {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 480px - 767px */
@media (max-width: 767px) {
  #dashboard-panels {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small mobile: <480px */
@media (max-width: 479px) {
  #dashboard-panels {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
#callreportSummarySection {
  display: grid;
  grid-template-columns:  minmax(160px, 0.6fr) repeat(3, 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
    
}
#taskSummarySection{
  display: grid;
  grid-template-columns:  minmax(160px, 0.6fr) repeat(4, 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

#contactsSummarySection{
  display: grid;
  grid-template-columns: .5fr repeat( 3,1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;   
}
#accountsSummarySection {
   display: grid;
  grid-template-columns: .5fr repeat(2, 1fr 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
#accountsSummarySection2 {
   display: grid;
  grid-template-columns: .5fr repeat(3,1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

#prospectsSummarySection {
 display: grid;
  grid-template-columns:  minmax(160px, 0.6fr) repeat(4, 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
#journalentriesSummarySection {
 display: grid;
  grid-template-columns:  minmax(160px, 0.6fr) repeat(4, 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
#courtshipsSummarySection {
 display: grid;
  grid-template-columns:  minmax(160px, 0.6fr) repeat(4, 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
/* ====== END SUMMARY SECTION GRID ====== */

.panel-number,
.summary-number {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #0e2f55;
  text-decoration: none;
  text-align: center;
    padding-top: 8px;
    background: #fff;
}

.panel-number:hover {
  text-decoration: underline;
  cursor: pointer;
}


/* ====== SUMMARY TITLE (H2) ====== */
#callreportSummarySection .summary-title,
#courtshipsSummarySection .summary-title,
#taskSummarySection .summary-title,
#tasksSummarySection .summary-title,
#accountsSummarySection2 .summary-title,
#contactsSummarySection .summary-title,
#accountsSummarySection .summary-title,
#courtshipSummarySection .summary-title,
#journalentriesSummarySection .summary-title,
#prospectsSummarySection .summary-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-color: #103058;
  border-right: 1px solid #999;
  /* Fill the full left column vertically */
  grid-row: 1 / -1;
  height: 100%;
  margin: 0; /* remove h2 default margins */
}

/* ====== SUMMARY BOXES (DIVs) ====== */
#callreportSummarySection .summary-box,
#taskSummarySection .summary-box,
#tasksSummarySection .summary-box,
#accountsSummarySection2 .summary-box,
#contactsSummarySection .summary-box, 
#accountsSummarySection .summary-box,
#courtshipsSummarySection .summary-box,
#journalentriesSummarySection .summary-box,
#prospectsSummarySection .summary-box {
  display: flex;
  flex-direction: column; /* stack header on top of number */
  justify-content: flex-start;
  align-items: center;
  border-left: 1px solid #999;
  border-top: 1px solid #ccc;
  height: 100px; /* example height for each summary box */
  width: 100%;
    
}
/* ====== ENDSUMMARY TITLE (H2) ====== */

/* ====== PANEL HEADERS (H3) ====== */


#activeProspectspanels .panel-header,
#activecourtshipspanels .panel-header,
#callreportSummarySection .panel-header,
#taskSummarySection .panel-header,
#tasksSummarySection .panel-header,
#accountsSummarySection2 .panel-header,
#contactsSummarySection .panel-header, 
#accountsSummarySection .panel-header, 
#courtshipsSummarySection .panel-header,
#journalentriesSummarySection .panel-header,
#prospectsSummarySection .panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-color: #103057; /* header-specific background */
  width: 100%;
  flex: 1;  /* takes half the container if number is also flex:1 */
  margin: 0;
}
/* ====== END PANEL HEADERS (H3) ====== */

/* ====== SUMMARY NUMBERS (BUTTONS) ====== */
#callreportSummarySection .summary-number,
#taskSummarySection .summary-number,
#tasksSummarySection .summary-number,
#accountsSummarySection2 .summary-number,
#contactsSummarySection .summary-number,
#accountsSummarySection .summary-number,
#courtshipsSummarySection .summary-number,
#journalentriesSummarySection .summary-number,
#prospectsSummarySection .summary-number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  color: #111;
  width: 100%;
  flex: 1;  /* takes the other half */
  border: none;
  cursor: pointer;
}
/* ====== END SUMMARY NUMBERS (BUTTONS) ====== */
/* ====== Panel-Header ====== */
/* Grid container */


/* Individual panel styling */
#dashboard-panels .panel {
  background-color: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

/* Hover effect */
#dashboard-panels .panel:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Panel header - fixed height */
#dashboard-panels .panel-header {
  font-size: 18px;        /* default font size */
  margin: 0;
  padding: 7px 10px;      /* padding determines height */
  min-height: 40px;       /* fixed header height */
  color: #fff;
  background-color: #103057;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-align: center;
  line-height: 1.2;       /* vertically centers text */
  overflow: hidden;       /* ensures text doesn’t overflow */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Summary number */
#dashboard-panels .summary-number {
  display: flex;
  align-items: center;     
  justify-content: center; 
  width: 100%;
  padding: 0;             /* smaller padding for compact look */
  font-weight: bold;
  color: #111;
  background-color: #fff;
  text-decoration: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
}

/* Hover effect for number */
#dashboard-panels .summary-number:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Responsive: Small Mobile */
@media (max-width: 600px) {
  
  #dashboard-panels .panel-header {
    font-size: 14px; /* smaller text for mobile while keeping height same */
  }
}
/* ====== End Panel-Header ====== */

.summary-number {
  display: block;
  font-size: 36px;
  font-weight: bold;
  color: #0e2f55;
  text-decoration: none;
}

.summary-number:hover {
  text-decoration: underline;
  cursor: pointer;
}

/*  ====== tablet styles  ====== */
@media (max-width: 1024px){
#contactsSummarySection {
  display: grid;
      grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
    }
 #accountsSummarySection {
  display: grid;
  grid-template-columns: .5fr repeat(3, 1fr 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
   #accountsSummarySection2 {
  display: grid;
      grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
 #taskSummarySection {
  display: grid;
      grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
  
    
#prospectsSummarySection {
  display: grid;
  grid-template-columns: .5fr repeat(3, 1fr 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
  #journalentriesSummarySection {
  display: grid;
  grid-template-columns: .5fr repeat(3, 1fr 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
  
  #courtshipsSummarySection {
  display: grid;
  grid-template-columns: .5fr repeat(3, 1fr 1fr);
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
#callreportSummarySection {
  display: grid;
      grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid #999;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
    
 /* ====== SUMMARY title ====== */
    .summary-title {
    grid-column: span 2;
    text-align: center;
     font-size: 20px;
     padding: 30px 10px 30px 10px;
  }
 /* ====== End SUMMARY title ====== */
    
  /* ====== SUMMARY BOX (H2) ====== */
     .summary-box:last-child {
    grid-column: span 2;
  }
    /* ====== ENDSUMMARY BOX (H2) ====== */

   @media (max-width: 1024px) {
  #callreportSummarySection .summary-title,
     #courtshipsSummarySection .summary-title,
  #taskSummarySection .summary-title,
  #tasksSummarySection .summary-title,
  #accountsSummarySection2 .summary-title,
  #contactsSummarySection .summary-title,
  #accountsSummarySection .summary-title,
  #courshipsSummarySection .summary-title,     
  #journalentriesSummarySection .summary-title,
  #prospectsSummarySection .summary-title {
    font-size: 18px;       /* smaller than desktop */
    padding: 20px 10px;    /* slightly smaller height */
    height: auto;          /* let container shrink */
    grid-row: auto;        /* stop spanning full height */
  }
.summary-box .panel-header {
  text-align: center;
  font-weight: bold;
  font-size: 1px;
    color: #000;
    background: #fff;
}
  } 
}
@media (max-width: 480px) {
  #callreportSummarySection .summary-title,
  #courtshipsSummarySection .summary-title,
  #taskSummarySection .summary-title,
  #tasksSummarySection .summary-title,
  #accountsSummarySection2 .summary-title,
  #contactsSummarySection .summary-title,
  #accountsSummarySection .summary-title,
  #courtshipsSummarySection .summary-title,
  #journalentriesSummarySection .summary-title,
  #prospectsSummarySection .summary-title {
    grid-column: 1 / -1;       /* full width */
    font-size: 14px !important; /* force it to shrink */
    height: auto;               /* allow container to shrink */
    padding: 8px 6px;
    line-height: 1.2;
    grid-row: auto;             /* remove full-height spanning */
  }
}