/* ---------- Drag & drop zone ---------- */
#dropZone {
  transition: background-color 120ms ease, border-color 120ms ease;
}
#dropZone.dragover {
  background-color: #e9f7ff;
  border-style: dashed;
  border-color: #0d6efd;
}

/* ---------- Change History box ---------- */
#historyLog {
  height: 140px;
  overflow: auto;
  white-space: pre; /* preserve newlines, no wrapping */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Tables: selection + no text highlight ---------- */
#detailsTable,
#calcTable {
  user-select: none; /* stop the blue text highlight when selecting rows */
}

/* bolder group divider between organisations */
.spacer-row td {
  height: 10px;
  padding: 0 !important;
  background: #e3e8ef;          /* darker fill */
  border-top: 2px solid #9aa4ae;   /* thicker borders */
  border-bottom: 2px solid #9aa4ae;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.08);
}

/* ---------- Sticky toolbars in modals ----------
   Works whether your HTML uses .toolbar-sticky (older) or .sticky-top (bootstrap util) */
.modal .toolbar-sticky,
.modal .sticky-top {
  position: sticky;
  top: 0;
  z-index: 1060;               /* above table content inside scrollable modal */
  background-color: #fff;      /* stop rows showing through */
  border-bottom: 1px solid #dee2e6;
  padding: .5rem .75rem;       /* comfy hit area */
}

/* Give a little breathing room after each sticky bar */
.modal .toolbar-sticky + .table-responsive,
.modal .sticky-top + .table-responsive {
  margin-top: .25rem;
}

/* ---------- Dim the Organisation Details modal when Calculator is open ---------- */
.modal.modal-dim .modal-content {
  opacity: 0.45;
  filter: grayscale(0.2);
  transition: opacity 120ms ease;
  pointer-events: none; /* prevents accidental clicks while it's dimmed */
}

/* Optional: small utilities */
.small-muted {
  font-size: .875rem;
  color: #6c757d;
}

/* Make export button larger*/
.btn-export-lg {
  font-weight: 600;
  padding: .55rem .95rem;
  font-size: .95rem;
  line-height: 1.2;
}

/* give a hair of separation under the header */
.modal-header + .modal-body .table-responsive { margin-top: .25rem; }

/* Force selected-row highlight (Details + Calculator) */
#detailsTable tbody tr.table-active,
#calcTable    tbody tr.table-active {
  /* Bootstrap-friendly: drive the accent bg via CSS var */
  --bs-table-accent-bg: #cfe2ff !important;
  color: inherit;
}

/* Extra fallback so every cell paints (and beats striping) */
#detailsTable tbody tr.table-active > *,
#calcTable    tbody tr.table-active > * {
  background-color: #cfe2ff !important;
}

/* Optional: subtle outline so selection is obvious */
#detailsTable tbody tr.table-active,
#calcTable    tbody tr.table-active {
  box-shadow: inset 0 0 0 2px rgba(13,110,253,.35);
}

/* Keep the no-text-selection behavior (does NOT affect row highlight) */
#detailsTable, #calcTable {
  user-select: none;
}

/* Org list: highlight orgs that have no remaining rows */
#orgList option.org-deleted {
  color: #dc3545;          /* Bootstrap danger red */
  font-weight: 600;
}