/* Ensure the page (not the modal) scrolls if the modal grows past viewport */
html, body {
  height: auto;
  overflow-y: auto;
}
/* ===== Calendar Container ===== */
.calendar-container {
  width: 100%;
  /* max-width: 1200px; */
  max-height: 90vh;           /* desktop: fill up to 90% of viewport */
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* ===== Controls ===== */
.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;           /* compressed padding */
  flex: 0 0 auto;
}
.month-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.month-label {
  font-size: 20px;
  font-weight: bold;
  user-select: none;
}
.controls button {
  background: none;
  border: 1px solid #ccc;
  padding: 4px 6px;           /* smaller buttons */
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.controls button:hover {
  background: #f0f0f0;
}
/* refresh icon button */
#refreshButton {
  font-size: 18px;
  line-height: 1;
}

/* ===== Weekday Headers ===== */
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  flex: 0 0 auto;
}
.weekDiv {
  padding: 4px 0;             /* slimmer labels */
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #555;
  user-select: none;
}

/* ===== Day Grid ===== */
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #e0e0e0;
  gap: 1px;                   /* tighter grid */
  /*
  overflow-y: auto;            scroll if too tall */
  flex: 1 1 auto;
}
.day {
  position: relative;
  padding: 6px 4px;           /* moderate padding */
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  /*
  cursor: pointer; */
  font-size: 13px;
  display: flex;
  flex-direction: column;
  min-height: 110px;           /* taller, not square */
}
/* squared on desktop 
.day {
  aspect-ratio: 1 / 1; /* makes each box square 
  height: auto;        /* override any fixed height 
  min-height: unset;   /* remove previous min-height 
}
*/

.day.empty {
  background: #fff;
  pointer-events: none;
  opacity: 0.4;
 cursor: default;
}
.day.today {
  background: #e7eafb;
}
.today::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;                /* adjusted circle */
  height: 24px;
  background: rgba(255,204,0,0.5);
  border-radius: 50%;
  z-index: -1;
}

/* ===== Event Counts ===== */
.event-icons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;                   /* tighter badges */
}
.event-icon {
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*
.event-cabinetry { background: #2a7087; }
.event-doors     { background: #ce7500; }
.event-service   { background: #cc0000; }
.event-hardware  { background: #846A60; }
*/
.event-cabinetry { background: #5C677D; }
.event-doors     { background: #e6ac00; }
.event-service   { background: #CB4C4E; }
.event-hardware  { background: #3B5D5F; }
/* ===== Multi-Day Event Bar ===== 
.event-bar {
  position: absolute;
  top: 28px;
  left: 4px;
  right: 4px;                 
  height: 6px;
  border-radius: 3px;
  z-index: 1;
}
.bar_Cabinetry   { background: #2a7087; }
.bar_Doors       { background: #ce7500; }
.bar_Service     { background: #cc0000; }
.bar_Hardware    { background: #846A60; }
*/

/* make all bars thin */
.event-bar {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 4px;
  border-radius: 2px;
  z-index: 1;
}
/* a full‐width dashed line for weekends */
/* base dashed‐stripe style (no color yet) */
.weekend-line {
  position: absolute;
  left: 4px;
  right: 4px;
  border-top: 2px dashed;
  height: 0;
  z-index: 0;           /* behind the solid .event-bar */
  pointer-events: none;
}

/* give each type its correct border‐color */

.weekend_Cabinetry { border-top-color: #5C677D; }
.weekend_Doors     { border-top-color: #e6ac00; }
.weekend_Service   { border-top-color: #CB4C4E; }
.weekend_Hardware  { border-top-color: #3B5D5F; }


/* stack them by type 
.bar_Cabinetry { background: #2a7087; color:#fff;padding-left:6px;margin-bottom: 6px;margin-top: 6px;}
.bar_Doors     { background: #ce7500; color:#fff;padding-left:6px;margin-bottom: 6px;margin-top: 16px;}
.bar_Service   { background: #cc0000; color:#fff;padding-left:6px;margin-bottom: 6px;margin-top: 16px;}
.bar_Hardware  { background: #846A60; color:#fff;padding-left:6px;margin-bottom: 6px;margin-top: 16px;}
*/
/* Gradient-to-white at 60% for each bar type */
.bar_Cabinetry {
  background: linear-gradient(
    to right,
    #5C677D 0%,
    #ffffff 99%
  );
  color: #fff;
  padding-left: 6px;
  margin: 6px 0 6px 0; /* shorthand: margin-top & bottom */
}

.bar_Doors {
  background: linear-gradient(
    to right,
    #cc9900 0%,
    #ffffff 99%
  );
  color: #fff;
  padding-left: 6px;
  margin: 16px 0 6px 0;
}

.bar_Service {
  background: linear-gradient(
    to right,
    #CB4C4E 0%,
    #ffffff 99%
  );
  color: #fff;
  padding-left: 6px;
  margin: 16px 0 6px 0;
}

.bar_Hardware {
  background: linear-gradient(
    to right,
    #5C677D 0%,
    #ffffff 99%
  );
  color: #fff;
  padding-left: 6px;
  margin: 16px 0 6px 0;
}





/* ===== Modal ===== */
/* Overlay covers the page but stays in document flow so the page can scroll */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;    /* allow scrolling underneath */
  z-index: 999;
}

/* The modal box itself */
.modal {
  position: absolute;
  top: 10vh;                       /* start 10% down from top of page */
  left: 50%;
  transform: translateX(-50%);     /* center horizontally */
  width: 90vw;                     /* nearly as wide as viewport/calendar */
  max-width: 1200px;               /* cap on large screens */
  background-color: #fff;          /* solid white */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: auto;    
  max-height: none;                /* no internal clipping */
  overflow: visible;               /* no scrollbars inside */
  z-index: 1000;                   /* above overlay */
}

.modal,
.modal-overlay {
  display: none;
}


/* Header pinned at top of modal */
.modal-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}

/* Inner content expands vertically with its content */
.modal-inner {
  flex: none;
  padding: 16px;
  background-color: #fff;
  overflow: visible;               /* no scrollbars */
}

/* Footer stays at the bottom of the box */
.modal-footer {
  flex: 0 0 auto;
  margin-top: auto;                /* pushes it under the inner */
  padding: 12px 16px;
  background-color: #fafafa;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}



/* Predictable sizing everywhere */
.modal, .modal * {
  box-sizing: border-box;
}



.close-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.close-btn:hover {
  background: #0056b3;
}

/*here*/
.bullet-jobs li{
 padding-left:2px;
}


/* ===== Responsive ===== */
@media (max-width: 600px) {
    /*
  .calendar-container {
    max-height: 100vh;        
    margin: 0;
  }
  */
  .calendar-container {
    max-height: 100vh;
    width: 95vw;       /* optional: controls how “wide” it sits */
    margin: 10px auto; /* top/bottom 10px, left/right auto */
  }
  .controls button {
    font-size: 14px;
    padding: 4px 6px;
  }
  .month-label {
    font-size: 16px;
  }
  .weekDiv {
    font-size: 12px;
  }
  .day {
    /*
    font-size: 12px;
    padding: 4px;
    min-height: 60px;
    */
     aspect-ratio: unset;
    min-height: 60px;
    height: auto;
  }
}







.day-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.day-number {
  font-weight: bold;
  font-size: 13px;
}

.event-flags {
  display: flex;
  gap: 2px;
}

.event-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}

.event-flag.event-cabinetry { background: #5C677D; }
.event-flag.event-doors     { background: #e6ac00; } 
.event-flag.event-service   { background: #CB4C4E; }

/* #ffbf00 */
.dot-count {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ccc; /* or use evt.type-based color */
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 16px;
  vertical-align: middle;
}





/* 1) Force #modal to wrap only its children — no top/bottom pinning */ 
#modal {
  position: absolute;        /* keep your centering logic */
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  
  /* preserve width, cap maximum */
  width: 90vw;
  max-width: 1180px;

  /* crucial: remove any bottom/height constraints */
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;

  /* stack header → inner → footer without stretching */
  display: flex;
  flex-direction: column;
}

/* 2) Lock header, inner, footer to their own heights */
#modal .modal-header,
#modal .modal-inner,
#modal .modal-footer {
  flex: 0 0 auto !important;
}

/* 3) Remove any auto‐margin on the footer */
#modal .modal-footer {
  margin-top: 0 !important;
}