:root { --mei-row-odd:#e4e9f0; --mei-row-even:#d5e3f0; --mei-head:#d0dbeb; --mei-hover:#c4d8eb; }
  @media (prefers-color-scheme: dark) {
    :root { --mei-row-odd:#2f3b46; --mei-row-even:#394652; --mei-head:#44515f; --mei-hover:#516273; }
  }
  #incident-table{font-size:.75rem;}
  #incident-table thead th,#incident-table tbody td{padding:.35rem .5rem;vertical-align:middle;}
  div.dataTables_wrapper{width:100%;overflow-x:auto;}
  #incident-table tbody tr:nth-child(odd)>*{background-color:var(--mei-row-odd)!important;}
  #incident-table tbody tr:nth-child(even)>*{background-color:var(--mei-row-even)!important;}
  #incident-table tbody tr:hover>*{background-color:var(--mei-hover)!important;}
  #incident-table td,#incident-table th,#incident-table tr{border:none!important;}
  #incident-table.dataTable thead th,#incident-table.dataTable thead td,
  div.dataTables_scrollHead thead th,div.dataTables_scrollHead thead td,
  div.fixedHeader-floating thead th,div.fixedHeader-floating thead td,
  div.fixedHeader-locked thead th,div.fixedHeader-locked thead td{
    background:linear-gradient(to bottom,var(--mei-head),var(--mei-row-even));
    color:#1b2a3a;font-size:.75rem!important;font-weight:500!important;
    padding:.35rem .5rem!important;text-align:left!important;border:none!important;white-space:nowrap;
  }
  @media (prefers-color-scheme: dark){
    #incident-table.dataTable thead th,#incident-table.dataTable thead td,
    div.dataTables_scrollHead thead th,div.dataTables_scrollHead thead td,
    div.fixedHeader-floating thead th,div.fixedHeader-floating thead td,
    div.fixedHeader-locked thead th,div.fixedHeader-locked thead td {color:#e4e9f0;}
  }
  div.fixedHeader-floating,div.fixedHeader-locked,div.dataTables_scrollHead{box-shadow:0 2px 6px rgba(0,0,0,.08);}
  #attach-list a{text-decoration:none;}
  #attach-list a:hover{text-decoration:underline;}
  .badge-doc{background:#e0f0ff;color:#123a57;border:1px solid #c8e2ff}
  #export-attach-list .filename { font-weight: 500; }
  #export-attach-list .desc { color: #6c757d; }

  /* --- Dashboard table layout tuning --- */
  #incident-table .text-wrap {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Make Title wider; keep date cols narrow; Step/Desc equal; Diary fills remainder */
  #incident-table th.col-title, #incident-table td.col-title { width: 22%; }
  #incident-table th.col-step,  #incident-table td.col-step  { width: 18%; }
  #incident-table th.col-desc,  #incident-table td.col-desc  { width: 26%; }
  /* date-col already exists; keep it narrow and non-wrapping */
  #incident-table th.date-col,  #incident-table td.date-col  { white-space: nowrap; }

  /* Let diary note flex into remaining space (no fixed width) */
  #incident-table th.col-diary, #incident-table td.col-diary { width: auto; }

  /* Remove any inherited truncation */
  #incident-table .text-truncate { overflow: visible !important; text-overflow: clip !important; }

  /* ========== Compact date filter (icon-only until focus) ========== */
/* Wrapper keeps the column as narrow as the icon */
.date-compact-wrap{
  position:relative;
  width:1.6rem;                  /* only as wide as the icon */
  height:1.875rem;               /* ~ .form-control-sm height */
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}

/* The actual <input type="date"> stays in DOM but invisible & width:0 */
.date-compact-wrap .date-compact{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:0 !important;            /* no visible rectangle */
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:transparent !important;
  outline:0;
  z-index:1;                     /* under the icon by default */
  -webkit-appearance:none;
  appearance:none;
  /* hide built-in text in WebKit when collapsed */
  -webkit-text-fill-color:transparent;
}

/* Expand ONLY when wrapper is marked open */
.date-compact-wrap.open .date-compact{
  width:11rem !important;
  min-width:11rem !important;
  padding:.25rem .5rem !important;
  border:1px solid var(--bs-border-color, #ced4da) !important;
  border-radius:.375rem;
  background:var(--bs-body-bg, #fff) !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit;
  z-index:2;
}

/* Calendar icon button (uses Bootstrap Icons) */
.date-compact-wrap .cal-btn{
  position:relative;
  width:1.25rem; height:1.25rem;
  padding:0; border:0; background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:3;                      /* sit above collapsed input */
}
.date-compact-wrap .cal-btn i{ font-size:1rem; opacity:.85; }
.date-compact-wrap .cal-btn:hover i{ opacity:1; }

/* Keep THs for date filters as narrow as possible */
#incident-table thead th.date-col{
  width:1% !important;
  white-space:nowrap;
}

/* Support DataTables fixed/floating header clones */
.fixedHeader-floating thead th.date-col,
.dataTables_scrollHead thead th.date-col{
  width:1% !important;
  white-space:nowrap;
}

/* In clones, keep wrapper compact; focus expansion still works */
.fixedHeader-floating .date-compact-wrap,
.dataTables_scrollHead .date-compact-wrap{
  width:1.6rem;
}
.fixedHeader-floating .date-compact,
.dataTables_scrollHead .date-compact{
  width:0 !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
  border:0 !important; background:transparent !important;
  color:transparent !important; -webkit-text-fill-color:transparent;
}
.fixedHeader-floating .date-compact-wrap.open .date-compact,
.dataTables_scrollHead .date-compact-wrap.open .date-compact{
  width:11rem !important;
  min-width:11rem !important;
  padding:.25rem .5rem !important;
  border:1px solid var(--bs-border-color, #ced4da) !important;
  border-radius:.375rem;
  background:var(--bs-body-bg, #fff) !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit;
  z-index:2;
}

/* Date column must stay ultra-narrow */
#incident-table th.date-col,
#incident-table td.date-col {
  width: 1% !important;
  white-space: nowrap;
}

/* Dashboard incident table row behaviour */
#incident-table tbody tr.incident-row { cursor: pointer; }
#incident-table tbody tr.incident-row:hover { background-color: #f1f1f1; }

.mei-table-wrap {
    width: 100%;
    overflow-x: auto;
}