/* Shared per-user view-settings styles (#28): dirty-aware Apply, the live column
 * panel, and the Saved-view lifecycle switcher. Extracted from stock.css so every
 * module that adopts the shared view-settings system (Stock, PO, …) reuses them. */

/* ---- Dirty-aware Apply: unmistakable when there are unapplied filter changes ---- */
.btn-apply.dirty {
  background: #ff9500;
  box-shadow: 0 0 0 3px rgba(255,149,0,0.25);
  animation: apply-pulse 1.6s ease-in-out infinite;
}
.btn-apply.dirty:hover { background: #e68600; }
.btn-apply.dirty::after { content: ' \2022'; }
@keyframes apply-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,149,0,0.25); } 50% { box-shadow: 0 0 0 5px rgba(255,149,0,0.12); } }

/* ---- Live column panel ---- */
.cp-popover {
  position: fixed;
  z-index: 60;
  width: 280px;
  max-width: 92vw;
  background: white;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 10px;
}
.cp-panel { display: flex; flex-direction: column; gap: 8px; }
.cp-hint { font-size: 12px; color: #86868b; padding: 0 2px; }
.cp-list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.cp-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px;
  cursor: default; user-select: none;
}
.cp-item:hover { background: #f5f5f7; }
.cp-item.cp-off .cp-label { color: #b0b0b5; }
.cp-item.cp-dragging { opacity: 0.5; }
.cp-handle { cursor: grab; color: #c7c7cc; font-size: 14px; }
.cp-label { flex: 1; font-size: 13px; color: #1d1d1f; }

/* ---- Saved-view lifecycle switcher ---- */
/* Container that anchors the popover (both the Stock and the generic class). */
.sv-control, .saved-view-control { position: relative; display: flex; align-items: center; }
.sv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: white;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s;
}
.sv-toggle:hover { background: #f5f5f7; border-color: #b0b0b5; }
.sv-toggle.sv-modified { border-color: #ff9500; }
.sv-toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-mod { color: #ff9500; font-weight: 600; }
.sv-caret { color: #86868b; font-size: 11px; }

.sv-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 320px;
  max-width: 90vw;
  background: white;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 12px;
}
.sv-panel { display: flex; flex-direction: column; gap: 12px; }
.sv-panel-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-panel-statelabel { font-size: 14px; font-weight: 600; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-panel-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sv-btn {
  padding: 6px 12px; font-size: 13px; border: 1px solid #d2d2d7; border-radius: 8px;
  background: white; color: #1d1d1f; cursor: pointer; font-weight: 500;
}
.sv-btn:hover { background: #f5f5f7; border-color: #b0b0b5; }
.sv-btn:disabled { opacity: 0.5; cursor: default; }
.sv-btn-primary { background: #0066cc; border-color: #0066cc; color: white; }
.sv-btn-primary:hover { background: #0052a3; border-color: #0052a3; }
.sv-btn-primary:disabled { background: #0066cc; }

.sv-saveas { display: flex; align-items: center; gap: 6px; border-top: 1px solid #f0f0f2; padding-top: 12px; }
.sv-input {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px;
  border: 1px solid #d2d2d7; border-radius: 8px; color: #1d1d1f;
}
.sv-input:focus { outline: none; border-color: #0066cc; }
.sv-warn { font-size: 12px; color: #ff3b30; white-space: nowrap; }

.sv-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.sv-empty { font-size: 13px; color: #86868b; padding: 8px 2px; }
.sv-row { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 8px; }
.sv-row:hover { background: #f5f5f7; }
.sv-star { border: none; background: none; cursor: pointer; font-size: 16px; color: #c7c7cc; line-height: 1; padding: 2px; }
.sv-star.on { color: #ff9500; }
.sv-name { flex: 1; min-width: 0; font-size: 13px; color: #1d1d1f; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-name:hover { color: #0066cc; }
.sv-icon { border: none; background: none; cursor: pointer; font-size: 13px; color: #86868b; padding: 2px 4px; }
.sv-icon:hover { color: #1d1d1f; }
.sv-del:hover { color: #ff3b30; }