/* ── Schedules controls: location selector, template tab bar, row overflow menu
   Prefixes: loc-, tplbar, tpl-, row-menu, sched-row-overflow
   Tokens: Academic Curator Design System (colors_and_type.css)
─────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   LOCATION SELECTOR
   Classes: loc-*
════════════════════════════════════════════════════════════ */

.loc-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  position: relative;
}

.loc-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-left: calc(-1 * var(--space-3));
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  line-height: var(--leading-snug);
  transition: var(--transition-fast);
}
.loc-trigger:hover { background: var(--color-neutral-100); border-color: var(--border-default); }
.loc-trigger.open  { background: var(--color-neutral-100); border-color: var(--border-strong); }

.loc-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-tertiary);
  flex-shrink: 0;
}
.loc-name { white-space: nowrap; }
.loc-chevron {
  color: var(--fg-tertiary);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.loc-trigger.open .loc-chevron { transform: rotate(180deg); }

.loc-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  padding: var(--space-1);
  overflow: hidden;
  animation: locFadeIn .12s ease-out;
}
@keyframes locFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loc-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.loc-row:hover { background: var(--color-neutral-100); }
.loc-row.selected { background: var(--color-primary-light); }
.loc-row-check { width: 14px; flex-shrink: 0; color: var(--color-primary-700); }
.loc-row-label {
  flex: 1;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-row.selected .loc-row-label { color: var(--color-primary-700); font-weight: var(--weight-semibold); }

.loc-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.loc-row:hover .loc-row-actions { opacity: 1; }

.loc-action-btn {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-tertiary);
  transition: var(--transition-fast);
}
.loc-action-btn:hover { background: var(--bg-surface); color: var(--fg-secondary); box-shadow: var(--shadow-xs); }
.loc-action-btn.danger:hover { color: var(--color-danger); background: var(--color-danger-light); box-shadow: none; }

.loc-row-input {
  flex: 1;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--color-primary-600);
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: var(--shadow-focus);
  min-width: 0;
}

.loc-divider { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }

.loc-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-700);
  background: transparent; border: none;
  width: 100%; text-align: left;
  font-family: var(--font-sans);
}
.loc-add-row:hover { background: var(--color-primary-light); }

/* ════════════════════════════════════════════════════════════
   SCHEDULE TEMPLATE TAB BAR
   Classes: tplbar, tpl-*
   Layout: flex child between .sched-page and .sched-footer
════════════════════════════════════════════════════════════ */

.tplbar {
  flex-shrink: 0;
  height: 40px;
  background: var(--bg-surface-alt, var(--color-neutral-50));
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: stretch;
  /* No position:fixed — it is a flex child of .sched-view */
}

.tplbar-scroll {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tplbar-scroll::-webkit-scrollbar { height: 3px; }
.tplbar-scroll::-webkit-scrollbar-thumb { background: var(--color-neutral-300); }

.tpl-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-4);
  height: 100%;
  background: transparent;
  border: none; border-right: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  max-width: 220px;
}
.tpl-tab:hover { background: var(--color-neutral-100); color: var(--fg-primary); }
.tpl-tab.active {
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-weight: var(--weight-semibold);
  border-bottom: 2px solid var(--color-primary-700);
  margin-bottom: -1px;
  padding-top: 2px;
}

.tpl-tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.tpl-tab-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success, #16a34a);
  box-shadow: 0 0 0 2px var(--bg-surface-alt, var(--color-neutral-50));
  flex-shrink: 0;
}
.tpl-tab.active .tpl-tab-live-dot { box-shadow: 0 0 0 2px var(--bg-surface); }

.tpl-tab-menu-btn {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-tertiary);
  transition: var(--transition-fast);
  margin-left: var(--space-1);
  opacity: 0;
  flex-shrink: 0;
}
.tpl-tab:hover .tpl-tab-menu-btn,
.tpl-tab.active .tpl-tab-menu-btn { opacity: 1; }
.tpl-tab-menu-btn:hover { background: var(--color-neutral-200); color: var(--fg-primary); }

.tpl-tab-input {
  padding: 2px 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--color-primary-600);
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: var(--shadow-focus);
  min-width: 0; max-width: 160px;
}

.tpl-add-btn {
  flex-shrink: 0;
  width: 40px; height: 100%;
  background: transparent; border: none; border-left: 1px solid var(--border-default);
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--fg-secondary);
  display: flex; align-items: center; justify-content: center;
}
.tpl-add-btn:hover { background: var(--color-primary-light); color: var(--color-primary-700); }

/* Tab context menu — rendered as a body portal (position:fixed), so z-index only */
.tpl-menu {
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: var(--space-1);
  animation: locFadeIn .12s ease-out;
}

.tpl-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--fg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  background: transparent; border: none;
  width: 100%; text-align: left;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
}
.tpl-menu-item:hover { background: var(--color-neutral-100); }
.tpl-menu-item.danger { color: var(--color-danger); }
.tpl-menu-item.danger:hover { background: var(--color-danger-light); }
.tpl-menu-divider { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }
.tpl-menu-icon { width: 14px; flex-shrink: 0; color: var(--fg-tertiary); display: flex; align-items: center; }
.tpl-menu-item.danger .tpl-menu-icon { color: var(--color-danger); }

/* ════════════════════════════════════════════════════════════
   ROW OVERFLOW MENU (⋮)
════════════════════════════════════════════════════════════ */
.sched-cell-actions-multi {
  justify-content: flex-start;
  gap: 2px;
  padding: 0 6px;
}

.sched-row-overflow-btn {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: transparent; border: none; cursor: pointer;
  color: var(--fg-tertiary);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
}
.sched-row-overflow-btn:hover,
.sched-row-overflow-btn.open {
  background: var(--color-neutral-200);
  color: var(--fg-primary);
}

.row-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  min-width: 210px; padding: var(--space-1);
}

.row-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--fg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition-fast);
  background: transparent; border: none; width: 100%; text-align: left;
  font-family: var(--font-sans); font-weight: var(--weight-medium);
}
.row-menu-item:hover { background: var(--color-neutral-100); }
.row-menu-divider { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }

/* ── Responsive: controls sizing on mobile ───────────────── */
@media (max-width: 767px) {
  .tplbar { height: 38px; }
  .loc-trigger { font-size: 22px; }
}