/* ── Schedules table widgets: inputs, autocomplete, chips, action buttons
   Prefix: sched-
   Tokens: Academic Curator Design System (colors_and_type.css)
─────────────────────────────────────────────────────────── */

/* ── Inline inputs ───────────────────────────────────────── */
.sched-input {
  width: 100%;
  padding: 4px 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition-fast);
  min-width: 0;
}

/* Override forms.css specificity (input[type="text"] = 0,1,1 > .sched-input = 0,1,0) */
input.sched-input,
select.sched-input {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.sched-input::placeholder {
  color: var(--fg-tertiary);
}

.sched-input:hover {
  border-color: var(--border-default);
  background: var(--bg-surface);
}

.sched-input:focus {
  border-color: var(--color-primary-600);
  background: var(--bg-surface);
  box-shadow: var(--shadow-focus);
}

.sched-input[type="time"],
.sched-input[type="date"] {
  cursor: pointer;
}

/* ── Student count badge ─────────────────────────────────── */
.sched-student-count {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-700);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── Autocomplete dropdown ───────────────────────────────── */
.sched-autocomplete-wrap {
  position: relative;
  width: 100%;
}

.sched-autocomplete-dropdown {
  /* position/top/left/width set by JS (portal on document.body) */
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
}

.sched-autocomplete-dropdown[hidden] { display: none; }

.sched-autocomplete-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sched-autocomplete-item:hover,
.sched-autocomplete-item--active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* ── Student chip search ─────────────────────────────────── */
.sched-chip-search-wrap {
  position: relative;
}

.sched-chip-search-input {
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--color-primary-400);
  border-radius: var(--radius-full);
  outline: none;
  width: 110px;
  box-shadow: var(--shadow-focus);
}

.sched-chip-search-dropdown {
  /* position/top/left/width set by JS (portal on document.body) */
  position: fixed;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.sched-chip-search-dropdown[hidden] { display: none; }

.sched-chip-search-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sched-chip-search-item:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* ── Makeup lesson student multi-select ───────────────────── */
.sched-student-multi {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-height: 36px;
}

.sched-student-trigger {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.sched-student-trigger:hover {
  background: var(--color-neutral-100);
}

.sched-student-trigger:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: -2px;
}

.sched-student-panel {
  /* top/left/minWidth set by JS (portal on document.body) */
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-1) 0;
}

.sched-student-panel[hidden] { display: none; }

.sched-student-panel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sched-student-panel-item:hover {
  background: var(--color-primary-50);
}

.sched-student-panel-item input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--color-primary-600);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.sched-student-panel-empty {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  font-style: italic;
}

/* ── Add row button (desktop) ────────────────────────────── */
.sched-add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-secondary);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-default);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: var(--transition-fast);
}

.sched-add-btn:hover {
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}

.sched-add-btn-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  transition: var(--transition-fast);
}

.sched-add-btn:hover .sched-add-btn-icon {
  background: var(--color-primary-200);
  color: var(--color-primary-700);
}

/* ── Delete button (desktop) ─────────────────────────────── */
.sched-delete-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: var(--transition-fast);
}

.sched-row:hover .sched-delete-btn {
  color: var(--fg-tertiary);
}

.sched-delete-btn:hover {
  color: var(--color-danger) !important;
  background: var(--color-danger-light);
}