TDI-Dashboard/static/pages/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 — let table grow beyond container */
.tw table { width: max-content; min-width: 100%; }

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