/*
 * Shared table toolbar controls (MusicTrace, ArchiveTrace; ShotTrace is the
 * visual reference). Same shape and behaviour in every tool; the tool colour
 * comes from its own --accent-primary / --accent-hover.
 *
 *   .ctl-btn            neutral action (Add Row, Add Column, Attach Stills…)
 *   .ctl-btn-save       "Add to Database": same purple in every tool (ShotTrace)
 *   .ctl-btn-accent     Export and tool-specific main actions (tool colour)
 *   .ctl-btn-danger     destructive (Delete Selected)
 *   .ctl-icon-btn       square icon button (Undo / Redo)
 *   .ctl-search-wrap    search field + clear (×) button
 *   .ctl-select         select / filter button
 *   .ctl-menu           dropdown menu (Export, multi-select filters)
 *   .ctl-bulk-bar       bar shown when rows are selected
 *   .ctl-side-by-side   Previous / Current Cut panes of a side-by-side compare
 */

.ctl-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ctl-btn,
.ctl-select,
.ctl-search {
  height: 34px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.ctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--border-medium);
  background: var(--bg-light);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.ctl-btn:hover:not(:disabled) { background: var(--bg-medium); border-color: var(--accent-primary); }
.ctl-btn:disabled { opacity: 0.45; cursor: default; }
.ctl-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.ctl-btn-save {
  border: none;
  background: linear-gradient(180deg, #6c5ce7 0%, #5a4bd9 100%);
  color: #fff;
}
.ctl-btn-save:hover:not(:disabled) {
  background: linear-gradient(180deg, #7f71ee 0%, #5a4bd9 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.35);
}

.ctl-btn-accent {
  border: none;
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-primary) 100%);
  color: #fff;
}
.ctl-btn-accent:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ctl-btn-danger { border-color: rgba(231, 76, 60, 0.6); color: #ff8a80; }
.ctl-btn-danger:hover:not(:disabled) { background: rgba(231, 76, 60, 0.15); border-color: #e74c3c; }

.ctl-icon-btn { width: 34px; padding: 0; color: var(--text-secondary); }
.ctl-icon-btn svg { width: 16px; height: 16px; }

.ctl-select {
  padding: 0 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-light);
  color: var(--text-primary);
  cursor: pointer;
}

.ctl-search-wrap { position: relative; display: inline-flex; align-items: center; }
.ctl-search {
  width: 200px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--border-medium);
  background: var(--bg-light);
  color: var(--text-primary);
}
.ctl-search:focus, .ctl-select:focus { outline: none; border-color: var(--accent-primary); }
.ctl-search-clear {
  position: absolute;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.ctl-search-clear:hover { background: var(--bg-medium); color: var(--text-primary); }
.ctl-search-wrap:not(.has-value) .ctl-search-clear { display: none; }

.ctl-dropdown { position: relative; display: inline-flex; }
.ctl-dropdown .ctl-arrow { font-size: 0.7em; opacity: 0.75; }
.ctl-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 180px;
  max-height: 320px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ctl-menu[hidden] { display: none; }
.ctl-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ctl-menu-item:hover { background: var(--bg-light); }
.ctl-menu-item .ctl-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ctl-menu-sep { height: 1px; margin: 4px 2px; background: var(--border-medium); }

.ctl-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 13px;
  color: var(--text-secondary);
}
.ctl-bulk-bar[hidden] { display: none; }
.ctl-bulk-bar .ctl-btn { height: 30px; padding: 0 12px; }

/* Column width handle (drag the right edge of a header). */
.ctl-col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.ctl-col-resizer::after {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 3px;
  width: 1px;
  background: var(--border-medium);
}
.ctl-col-resizer:hover::after { background: var(--accent-primary); }
body.ctl-col-resizing, body.ctl-col-resizing * { cursor: col-resize !important; user-select: none !important; }

.ctl-btn.is-active,
.multiselect-filter-btn.is-active { border-color: var(--accent-primary); color: var(--accent-primary); }

/* Side-by-side compare: Previous Cut pane on the left, Current Cut pane on the right
   (rows kept level by LigoControls.linkSideBySide). */
.ctl-side-by-side {
  display: flex;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ctl-side-pane {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.ctl-side-title {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctl-side-title strong { color: var(--text-primary); letter-spacing: 0.3px; }
.ctl-side-count { color: var(--text-muted); }
.ctl-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: scroll;
  overflow-y: auto;
}
.ctl-side-blank-row td {
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.03) 6px 12px);
}
.ctl-side-by-side tr.ctl-side-selected td {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.ctl-side-by-side tr.ctl-side-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent-primary); }
.ctl-side-nav { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ctl-side-nav:hover { color: var(--accent-primary); }

/* Small modal used by shared tools (e.g. status editor). */
.ctl-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.ctl-modal-card {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.ctl-modal-header, .ctl-modal-footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.ctl-modal-header { justify-content: space-between; border-bottom: 1px solid var(--border-medium); }
.ctl-modal-header h3 { margin: 0; font-size: 15px; }
.ctl-modal-body { padding: 14px 16px; overflow: auto; }
.ctl-modal-footer { justify-content: flex-end; border-top: 1px solid var(--border-medium); }