.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #598527;    
}  
#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: #E5F1F5;/*url(../images/blank.gif);  */
width: 10px;     
left: 0;  
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

#interVeil1{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: transparent;  
width: 10px;   
left: 0;  
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

/* ——— overlay ——— */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.40);
  display:none;           /* toggled by JS */
  z-index:999;
}

/* ——— modal container ——— */
.training-modal{
  position:fixed;
  top:5%; left:50%; transform:translateX(-50%);
  width:90%; max-width:600px; max-height:90%;
  background:#fff;
  border:1px solid #0072B5;
  border-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,.30);
  display:none;           /* toggled by JS  */
  flex-direction:column;  /* header | body | footer */
  z-index:1000;
  overflow:hidden;
}

/* ——— header ——— */
.training-modal__header{
  background:#0072B5;         /* same blue strip as Calendar grid */
  color:#fff;
  padding:8px 16px;
  font-weight:bold;
  position:relative;
}
.training-modal__close{
  position:absolute; right:12px; top:4px;
  border:none; background:transparent;
  font-size:18px; color:#fff;
  cursor:pointer;
}

/* ——— body (scrolls) ——— */
.training-modal__body{
  padding: 12px 16px 0;
  display: flex;           /* make this a flex container */
  flex-direction: column;  /* stack its children vertically */
  flex:1 1 auto;
  overflow:hidden;   /* body never scrolls */
  min-height:0;      /* can shrink */
}

/* ========== NEW ========== */
.table-wrapper{
  flex: 1 1 auto; 
  overflow-y:auto;   /* this is the element that scrolls */
  min-height:0;      /* lets it shrink when needed */
}
/* ========================= */

/* size / border to match grid cells */
input[type="time"]{
  width:100%;
  padding:3px 4px;
  border:1px solid #8fa4bd;     /* subtle blue‑grey */
  border-radius:2px;
  font-size:12px;
  box-sizing:border-box;
}

/* OPTIONAL: recolour clock icon (WebKit only) */
input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(34%) sepia(75%) saturate(3753%)
          hue-rotate(189deg) brightness(87%) contrast(106%);
}

/* Firefox needs this to show the clock consistently */
input[type="time"]::-moz-focus-inner{ border:0; }

/* ——— footer ——— */
.training-modal__footer{
  padding:10px 16px;
  background:#f5f5f5;
  text-align:center;
}
.btn-primary, .btn-secondary{
  padding:6px 14px; margin:0 6px;
  border:none; border-radius:3px;
  cursor:pointer;
}
.btn-primary{
  background:#0072B5; color:#fff;
}
.btn-primary:hover{background:#005f93;}
.btn-secondary{
  background:#ddd; color:#333;
}
.btn-secondary:hover{background:#c8c8c8;}

/* ——— table look & feel ——— */
#dateTimeTableContainer{
  border:1px solid #ccc;             /* thin border like grid */
}
#dateTimeTableContainer table{
  width:100%; border-collapse:collapse; font-size:13px;
}
#dateTimeTableContainer thead th{
  background:#0072B5; color:#fff;
  position:sticky; top:0; z-index:1;
  padding:6px 4px;
  border:1px solid #d0d0d0;
}
#dateTimeTableContainer tbody td{
  text-align:center;
  padding:4px;
  border:1px solid #d0d0d0;
}
#dateTimeTableContainer tbody tr:nth-child(even){
  background:#f9f9f9;               /* soft zebra stripes */
}

input[type="time"] {
  padding: 3px 4px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #fff;
  color: #333;
  font-size: 13px;
  box-sizing: border-box;
}