/* =============================================================
   ANZCA Programme – Master Stylesheet
   June 2025 • v2.0
   -------------------------------------------------------------
   • Mobile: tabs two per row (14 px) – last solo tab full width
   • Mobile: search fields equal width (stacked)
   • Clear button: orange bg, border, no bold, no wrap
   • Card time: smaller font‑size, wraps naturally
   • Safari: prevent Clear button icon wrap
   =============================================================*/

/* ---------- 1. BASE LAYOUT ---------- */
#pgmcontent{width:100%;overflow:auto}
#pgmcontent .content.pre-init {
  border: 1px solid #342A49;        /* full border before AJAX returns */
  min-height: 80px;                 /* gives the spinner room */
  display: flex; justify-content: center; align-items: center;
}
#pgmcontent .content  {width:100%;padding:20px;box-sizing:border-box;border:1px solid #342A49;border-top:none;overflow:auto}

/* ---------- 2. TABS ---------- */
.tabs{display:flex;margin-bottom:0;cursor:pointer;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.tab{flex:1 1 0;padding:10px;text-align:center;font:700 20px/1 "Helvetica Neue",Arial,sans-serif;color:#fff;background:#5C556D;border:1px solid #342A49;transition:background .3s}
.tab:hover{background:#473F5B}.tab.active{background:#F4F4F4;color:#342A49;border-bottom:1px solid #F4F4F4}
.tab.search-tab{background:#F2B476;color:#342A49}.tab.search-tab:hover{background:#e7a55f}

/* Mobile tab rules */
@media (max-width:600px){
  .tabs{flex-wrap:wrap}
  .tab{flex:1 0 50%;font-size:14px;padding:8px 6px}
  /* if odd number, last tab spans full row */
  .tabs .tab:last-child:nth-child(odd){flex:1 0 100%}
}

/* ---------- 3. PROGRAMME GRID ---------- */
.program-table{width:100%;min-width:840px;table-layout:fixed;border-collapse:collapse;background:#fff}
.program-table th,.program-table td{padding:15px;text-align:center;vertical-align:middle;font-size:16px;box-sizing:border-box;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.program-table th{background:#333;color:#fff}
.program-table th:first-child,.program-table td:first-child{width:10%;min-width:85px;max-width:85px;font-size: 14px;  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;border:1px solid #ccc} 
.program-table td:not(:first-child),.program-table th:not(:first-child){border-left:1px solid #fff}
.program-table tr+tr td,.program-table tr+tr th{border-top:1px solid #fff}
.program-table td:not(:first-child):hover{background:#696969;color:#fff;cursor:pointer}
.program-table td.empty-cell {background-color:#FAFAFA;}
.program-table td.empty-cell:hover{background:#FAFAFA;color:initial;cursor:default}

/* ---------- 4. MODAL ---------- */
.PGMmodal{position:fixed;inset:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);overflow:auto;z-index:10000}
.PGMmodal-content{margin:10% auto;padding:20px;width:80%;max-width:1300px;background:#fff;border:1px solid #888}
.PGMmodal-content p{margin:0;display:none}
.PGMclose{float:right;margin:10px;font:700 28px/1 sans-serif;color:#ccc;cursor:pointer}
.PGMclose:hover,.PGMclose:focus{color:#000}

/* ---------- 5. SEARCH ROW ---------- */
.search-controls{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:15px;border:1px solid #342A49;padding:8px;border-radius:4px;white-space:nowrap}
.search-controls>*{flex:1 1 0}
.search-controls input,.search-controls select{height:36px;padding:6px 8px;font-size:14px;color:#342A49;border:1px solid #342A49;border-radius:4px;background:#fff;-webkit-appearance:none;appearance:none}
#txt{flex:2 1 0}
#clr{flex:0 0 auto;background:#F2B476;border:1px solid #342A49;padding:6px 16px;font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap}
#clr:hover{background:#e7a55f}

/* mobile search fields full width */
@media (max-width:600px){
  .search-controls{flex-wrap:wrap}
  .search-controls>*{flex:1 1 100%}
  #clr{align-self:flex-start;margin-top:8px}
}

mark{background:#ffdf8c;padding:0 2px}

/* ---------- 6. CARDS ---------- */
.cards-wrap{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.session-card{padding:10px;border:1px solid #342A49;border-radius:10px;background:#F4F4F4;cursor:pointer;transition:box-shadow .2s}
.session-card:hover,.session-card:focus{box-shadow:0 0 6px rgba(0,0,0,.3)}
.session-card h3{margin:0 0 4px;font-size:16px}
.session-card p{margin:2px 0;font-size:13px}
.session-card .time{font-size:12px;white-space:normal}

/* ---------- 7. SPINNER ---------- */
.loader{width:32px;height:32px;margin:40px auto;border:4px solid #ccc;border-top:4px solid #342A49;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* mobile cards */
@media (max-width:600px){.cards-wrap{grid-template-columns:repeat(auto-fill,minmax(48%,1fr))}}
@media (max-width:300px){.cards-wrap{grid-template-columns:1fr}}