/* =========================================================
   jConfirm dialog sizing + scrolling
========================================================= */
.jconfirm .jconfirm-box{
  padding:18px 16px !important;
  max-width:100% !important;
}

.jconfirm .jconfirm-content-pane{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

.jconfirm-content{
  width:100%;
}

/* =========================================================
   Table wrapper
========================================================= */
#events-container{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* =========================================================
   Desktop table layout (fixed and controlled)
========================================================= */
#eventsTable{
  width:100%;
  max-width:100%;
  table-layout:fixed;             /* IMPORTANT for fixed column widths */
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px dotted #074280;
  border-radius:12px;
  overflow:hidden;
  font-family:'Salsa', Arial, sans-serif;
}

/* Cells */
#eventsTable th,
#eventsTable td{
  padding:10px 12px;
  font-size:14px;
  line-height:1.35;
  vertical-align:top;
  border:1px dotted #074280;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}

/* Header */
#eventsTable thead th{
  background:#9dd5eb;
  color:#074280;
  font-weight:600;
}

/* Main heading row */
#eventsTable thead .events-main-header th{
  background:#074280 !important;
  color:#fff !important;
  text-align:center;
  font-size:18px;
  font-weight:600;
  border-bottom:1px dotted #074280;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

/* Zebra */
#eventsTable tbody tr:nth-child(even){ background:#f7fbff; }
#eventsTable tbody tr:hover{ background:#eaf2ff; }

/* =========================================================
   DESKTOP/TABLET ONLY: Apply fixed column widths
   (Prevents mobile break)
========================================================= */
@media (min-width: 481px) {

  /* Strongest way to control table column widths */
  #eventsTable col.col-date   { width: 8% !important; }
  #eventsTable col.col-group  { width: 8% !important; }
  #eventsTable col.col-event  { width: 25% !important; }
  #eventsTable col.col-desc   { width: 51% !important; }
  #eventsTable col.col-action { width: 8% !important; }

  #eventsTable th:nth-child(1), #eventsTable td:nth-child(1) { width: 8% !important; } /* Date */
  #eventsTable th:nth-child(2), #eventsTable td:nth-child(2) { width: 8% !important; } /* Group */
  #eventsTable th:nth-child(3), #eventsTable td:nth-child(3) { width: 25% !important; } /* Event */
  #eventsTable th:nth-child(4), #eventsTable td:nth-child(4) { width: 51% !important; } /* Description */
  #eventsTable th:nth-child(5), #eventsTable td:nth-child(5) { width: 8% !important; } /* Action */
}
/* =========================================================
   Download link
========================================================= */
#eventsTable .download-link{ color:#074280; font-size:16px; text-decoration:none; }
#eventsTable .download-link:hover{ color:#0b55d4; }
#eventsTable .download-link.disabled{ opacity:.4; cursor:not-allowed; }

/* =========================================================
   Tablet tweaks
========================================================= */
@media (max-width:768px){
  #eventsTable th, #eventsTable td{
    padding:8px 10px;
    font-size:13px;
  }
}

/* =========================================================
    MOBILE VIEW (<=480px)
   - remove "wide columns" effect
   - card layout with better label/value ratio
========================================================= */
@media (max-width:480px){

  #eventsTable col { width: auto !important; }

  /* Hide head, use cards */
  #eventsTable thead{ display:none !important; }

  #eventsTable,
  #eventsTable tbody,
  #eventsTable tr,
  #eventsTable td{
    display:block !important;
  }
  
    #eventsTable th,
  #eventsTable td {
    width: 100% !important;
    max-width: 100% !important;
  }
  

  /* Each row becomes a card */
  #eventsTable tr{
    margin:0 0 12px 0;
    border:1px solid #d6e4ff !important;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }

  /* Remove dotted grid look inside cards */
  #eventsTable td{
    border:none !important;
    border-bottom:1px solid #eef4ff !important;
    padding:10px 12px !important;

    /*  Fix: don't reserve 45% space (this caused "wide columns" look) */
    padding-left:12px !important;
    text-overflow:clip !important;
    white-space:normal !important;

    /*  Create label/value layout using CSS grid */
    display:grid !important;
    grid-template-columns: 110px 1fr; /* label fixed, value flexible */
    gap:8px;
    align-items:start;
  }

  #eventsTable td:last-child{ border-bottom:none !important; }

  /* Labels */
  #eventsTable td::before{
    position:static !important;         /*  NOT absolute, so no reserved width */
    width:auto !important;
    font-weight:700;
    color:#074280;
    white-space:nowrap;
  }

  #eventsTable td:nth-child(1)::before{ content:"Due By"; }
  #eventsTable td:nth-child(2)::before{ content:"Group"; }
  #eventsTable td:nth-child(3)::before{ content:"Event"; }
  #eventsTable td:nth-child(4)::before{ content:"Description"; }
  #eventsTable td:nth-child(5)::before{ content:"Action"; }

  /* Make action area align nicely */
  #eventsTable td:nth-child(5){
    grid-template-columns: 110px auto;
  }
}

/* =========================================================
   CLOSE ICON (Always visible)
========================================================= */
.jconfirm .jconfirm-box {
  position: relative !important;  /* anchor for absolute close icon */
  overflow: visible !important;    /* prevents clipping */
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon {
  display: block !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;

  background: #074280 !important; /* visible on any background */
  border-radius: 50% !important;

  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  text-align: center !important;

  z-index: 999999 !important;
  border: 0 !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.jconfirm .jconfirm-box div.jconfirm-closeIcon:hover {
	background: #d9363e !important;
}
/* Sometimes theme sets container overflow hidden which can clip icon */
.jconfirm .jconfirm-box{
  overflow:visible !important;
}

/* =========================================================
   Show more bottom-right
========================================================= */
.jconfirm .jconfirm-content-pane .show-more-wrap{
  display:flex !important;
  justify-content:flex-end !important;
  width:100% !important;
  margin-top:10px;
}

.jconfirm .jconfirm-content-pane .show-more-link{
  display:inline-block !important;
  font-weight:600;
  color:#0b55d4;
  text-decoration:none;
  font-family:'Salsa', Arial, sans-serif;
}

.jconfirm .jconfirm-content-pane .show-more-link:hover{
  text-decoration:underline;
}