/* ========== Subtle help icons ========== */
.help-icon{
  font-size:.9rem;
  color:rgba(0,0,0,.5);          /* muted grey */
  transition:color .2s ease;
}
.help-icon:hover{ color:#0d6efd; } /* Bootstrap blue on hover */


/* ========== 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;
}


/* (Optional) Firefox fallback: nothing special needed — clicking the
   icon triggers showPicker() which works across modern Firefox. */

/* Next-step cards */
.ns-card {
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: .75rem .9rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  background: #fff;
}
.ns-card:hover {
  transform: scale(1.01);
  box-shadow: 0 0.35rem 0.8rem rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18);
}
.ns-card.selected {
  outline: 2px solid #0d6efd;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}
.ns-help {
  color: #17a2b8;
  font-size: 1rem;
  opacity: .9;
}
.ns-help:hover { opacity: 1; color: #0d6efd; }
.next-step-card .selected-badge { display: none; }
.next-step-card.selected .selected-badge { display: inline-flex; }

/* === MEI Internal AI Assistant === */
/* === MEI Floating Button — Version A (Small pill, no tail) === */
#mei-ai-bubble {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1500;
    cursor: pointer;
}

#mei-ai-bubble .mei-ai-bubble-inner {
    background: #003366;
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;       /* fully rounded pill */
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: background 0.2s ease;
}

#mei-ai-bubble i {
    font-size: 1rem;
}

#mei-ai-bubble:hover .mei-ai-bubble-inner {
    background: #004c99;
}

/* Slide-up panel for conversation */
#mei-ai-panel {
  position: fixed;
  bottom: 6rem;          /* just above the bubble */
  right: 1.5rem;
  width: 380px;
  height: 520px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
  display: none;         /* JS toggles this to flex */
  flex-direction: column;
  overflow: hidden;
  z-index: 1400;
}

#mei-ai-header {
  background: #003366;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

#mei-ai-close {
  cursor: pointer;
  font-size: 18px;
}

#mei-ai-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: #f7f7f7;
  font-size: 13px;
}

.mei-ai-msg {
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  max-width: 85%;
}

.mei-ai-user {
  background: #d7ebff;
  margin-left: auto;
}

.mei-ai-bot {
  background: #ffffff;
  border: 1px solid #ddd;
  margin-right: auto;
}

#mei-ai-input-area {
  padding: 8px;
  border-top: 1px solid #ccc;
  display: flex;
  gap: 6px;
}

#mei-ai-input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #bbb;
}

#mei-ai-send {
  padding: 6px 12px;
}

/* Sticky support button – bottom left */
#support-widget {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: auto;
  z-index: 1200;  /* above page content, below AI panel */
}

.support-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ccc;
  padding: 8px 14px;
  font-size: 0.9rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.support-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}


/* Sticky support button – bottom left */
#support-widget {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;   /* force it to the left */
    right: auto;    /* in case an old rule set right: ... */
    z-index: 1200;  /* above page content, below AI panel */
}

.support-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ccc;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.support-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* ==============================
   Documents – Status Indicators
   ============================== */

.status-badge {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-pending {
    background-color: #e9ecef;
    color: #495057;
}

.status-due_soon {
    background-color: #fff3cd;
    color: #856404;
}

.status-overdue {
    background-color: #f8d7da;
    color: #721c24;
}

.status-read {
    background-color: #d4edda;
    color: #155724;
}

.training-badge {
    background-color: #e7f1ff;
    color: #084298;
    border: 1px solid #b6d4fe;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}
/* ===============================
   Document status row colouring
   =============================== */

.doc-row.doc-overdue {
    background-color: #f8d7da; /* Bootstrap danger background */
}

.doc-row.doc-due_soon {
    background-color: #fff3cd; /* Bootstrap warning background */
}

.doc-row.doc-read {
    background-color: #d1e7dd; /* Bootstrap success background */
}

.doc-row.doc-pending {
    background-color: #f8f9fa; /* subtle neutral */
}

/* ===============================
   Status badge styling
   =============================== */

.status-badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-transform: capitalize;
}

.status-pending {
    background-color: #e9ecef;
    color: #495057;
}

.status-due_soon {
    background-color: #fff3cd;
    color: #664d03;
}

.status-overdue {
    background-color: #f8d7da;
    color: #842029;
}

.status-read {
    background-color: #d1e7dd;
    color: #0f5132;
}

/* ===============================
   Training indicator
   =============================== */

.training-badge {
    background-color: #0dcaf0;
    color: #055160;
    padding: .25em .5em;
    font-size: .7rem;
    border-radius: 0.375rem;
    font-weight: 600;
}
/* =========================
   Document row states
   ========================= */

.doc-row.doc-pending {
    background-color: #f8f9fa;
}

.doc-row.doc-due_soon {
    background-color: #fff3cd;   /* Bootstrap warning bg */
}

.doc-row.doc-overdue {
    background-color: #f8d7da;   /* Bootstrap danger bg */
}

.doc-row.doc-read {
    background-color: #d1e7dd;   /* Bootstrap success bg */
}
/* =========================
   Status badge
   ========================= */

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
}

.status-pending {
    background-color: #e9ecef;
    color: #495057;
}

.status-due_soon {
    background-color: #ffc107;
    color: #212529;
}

.status-overdue {
    background-color: #dc3545;
    color: #fff;
}

.status-read {
    background-color: #198754;
    color: #fff;
}
/* =========================
   Training badge
   ========================= */

.training-badge {
    background-color: #0d6efd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}
/* --- Compliance badges --- */
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.4rem;
  white-space: nowrap;
}

/* Document status */
.badge-read       { background: #e6f4ea; color: #1e7e34; }
.badge-pending    { background: #f1f3f5; color: #495057; }
.badge-due-soon   { background: #fff3cd; color: #856404; }
.badge-overdue    { background: #f8d7da; color: #842029; }

/* Training status */
.badge-passed     { background: #d1e7dd; color: #0f5132; }
.badge-failed     { background: #f8d7da; color: #842029; }
.badge-not-attempted { background: #e2e3e5; color: #41464b; }


/* SAFE Select2 tweaks – do NOT break layout */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  min-height: 38px;        /* allow Select2 to manage height */
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.select2-container--default.select2-container--focus
.select2-selection--single {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}