TDI-Dashboard/static/css/RPA_Intraz/iscrizioni.css

/* iscrizioni.css — Corsi Intraziendali filter bar */

.isc-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.isc-header h2 { margin: 0; }

.isc-filters {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: .4rem 0;
}

.isc-filter-group {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.filter-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

.isc-filter-checks {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.isc-filter-checks label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}

.isc-filter-checks input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #2563eb;
}

.isc-search {
  border: 1px solid var(--brd, #e2e8f0);
  border-radius: 6px;
  padding: .3rem .65rem;
  font-size: .9rem;
  outline: none;
  min-width: 200px;
  background: var(--bg, #fff);
  color: inherit;
}
.isc-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* Reset column filters button */
.btn-reset-cf {
  background: none;
  border: 1px solid var(--brd, #e2e8f0);
  border-radius: 5px;
  padding: .28rem .65rem;
  font-size: .82rem;
  cursor: pointer;
  color: var(--txt, #1e293b);
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-reset-cf:hover {
  background: #fee2e2;
  border-color: #dc2626;
  color: #dc2626;
}

/* Column filter button (⚙ inside <th>) */
.col-filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  padding: 0 0 0 4px;
  color: var(--mut, #94a3b8);   /* grey when inactive */
  vertical-align: middle;
  line-height: 1;
  transition: color .15s;
}
.col-filter-btn:hover { color: #64748b; }
.col-filter-btn.active { color: #2563eb; }  /* blue when active */

/* Checkbox dropdown panel */
.col-filter-panel {
  display: none;
  position: fixed;
  z-index: 500;
  background: #fff;
  border: 1px solid var(--brd, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  min-width: 150px;
  max-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.col-filter-panel.open { display: block; }

.col-filter-panel label {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 5px 12px;
  font-size: .82rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  color: var(--txt, #1e293b);
}
.col-filter-panel label:hover { background: var(--bg, #f1f5f9); }
.col-filter-panel input[type="checkbox"] {
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
  accent-color: #2563eb;
  cursor: pointer;
}
/* badge inside panel inherits .badge from style.css — just tighten margin */
.col-filter-panel .badge { vertical-align: middle; }

.cfp-all { font-weight: 600 !important; }
.cfp-sep { height: 1px; background: var(--brd, #e2e8f0); margin: 3px 0; }

/* Horizontal scroll with blue native scrollbar */
.tw { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2563eb #dbeafe; }
.tw::-webkit-scrollbar        { height: 14px; }
.tw::-webkit-scrollbar-track  { background: #dbeafe; border-radius: 99px; }
.tw::-webkit-scrollbar-thumb  { background: #2563eb; border-radius: 99px; border: 2px solid #dbeafe; }
.tw::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }
.tw table { width: max-content; min-width: 100%; }

/* Mirror kept for layout, hidden */
.tw-scroll-mirror { display: none; }

/* Step cells with inline error */
.step-td { vertical-align: top; min-width: 80px; }
.step-err {
  display: block;
  color: #b91c1c;
  font-size: .72rem;
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-word;
  white-space: normal;
}

/* Corso column — clip + expand */
.txt-short { white-space: nowrap; }
.txt-full  { white-space: normal; word-break: break-word; }

.btn-expand {
  background: none;
  border: 1px solid var(--brd, #e2e8f0);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  font-size: .8rem;
  cursor: pointer;
  color: var(--pri, #2563eb);
  line-height: 1.4;
  vertical-align: middle;
  transition: background .12s, border-color .12s;
}
.btn-expand:hover {
  background: #eff6ff;
  border-color: var(--pri, #2563eb);
}

/* Actions group — pushes both buttons to the right */
.isc-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.isc-header .btn-toggle-filters { margin-left: 0; }

/* Details toggle button */
.btn-toggle-details {
  background: none;
  border: 1px solid #7c3aed;
  border-radius: 5px;
  padding: .28rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: #7c3aed;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.btn-toggle-details.active {
  background: #f5f3ff;
  color: #7c3aed;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.btn-toggle-details:hover { background: #ede9fe; }

/* Hide data columns when Details is off */
.data-hidden .data-th,
.data-hidden .data-td { display: none; }

/* Log link button inside # column */
.td-id { white-space: nowrap; }
.td-id .btn-log { margin-left: 5px; vertical-align: middle; }

/* ── Steps pagination (fixed bottom bar) ── */
.steps-pagination {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 150;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: .4rem .75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  white-space: nowrap;
}
footer { padding-bottom: 5rem; }

/* Spinner for steps table loading */
.steps-spinner {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; gap: .75rem; color: #7c3aed; font-size: .9rem;
}
.steps-spinner-ring {
  width: 28px; height: 28px;
  border: 3px solid #ede9fe; border-top-color: #7c3aed;
  border-radius: 50%; animation: steps-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes steps-spin { to { transform: rotate(360deg); } }