/* =======================================================
   TRS Management — Scoped Styles
   File: trsmgmt-chatgpt-gend.css
   Scope: Table + bulkbar styles, plus Saving… badge.
   Safe to include globally after Bootstrap/Select2.
   ======================================================= */

/* ------------ Inline editor ------------- */

#trs_table .ti-cell-editor {
  outline: none;
  min-height: 1.4em;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

#trs_table .ti-cell-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
  pointer-events: none;
}

/* Commit flash */

#trs_table td.editable_updated {
  transition: background-color .25s ease;
  background-color: rgba(46, 204, 113, 0.25);
}

/* ------------ Row states ------------- */

#trs_table tbody tr.ti-row-saving {
  background-image: linear-gradient( 90deg, rgba(0,0,0,.03) 25%, rgba(0,0,0,.06) 37%, rgba(0,0,0,.03) 63% );
  background-size: 400% 100%;
  animation: trsSavingAnim 1s linear infinite;
}

#trs_table tbody tr.ti-row-saved {
  box-shadow: inset 0 0 0 9999px rgba(46, 204, 113, 0.12);
}

#trs_table tbody tr.ti-row-error {
  box-shadow: inset 0 0 0 9999px rgba(231, 76, 60, 0.12);
}

@keyframes trsSavingAnim {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* Cell error highlight */

#trs_table td.ti-cell-error {
  outline: 2px solid rgba(231, 76, 60, 0.9);
  outline-offset: -2px;
}

/* Keyboard focus ring (only inside this table) */

#trs_table td:focus {
  box-shadow: inset 0 0 0 2px rgba(52, 152, 219, 0.85);
  outline: none;
}

/* ------------ Per-cell saving indicator (CSS-based) ------------- */

#trs_table td.ti-cell-saving {
  position: relative;
  background-image: linear-gradient(transparent, rgba(255,193,7,.08) 45%, transparent 55%);
}

#trs_table td.ti-cell-saving::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,193,7,.7);
  border-top-color: transparent;
  border-radius: 50%;
  animation: tiSpin .6s linear infinite;
  pointer-events: none;
}

@keyframes tiSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------ Select (bulk) column ------------- */

#trs_table th.ti-select-hd, #trs_table td.ti-select-td {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

#trs_table th.ti-select-hd input[type="checkbox"], #trs_table td.ti-select-td input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}

/* Slightly tighter cell padding (table-only) */

#trs_table > thead th, #trs_table > tbody td {
  padding: .4rem .5rem;
}

/* Keep Select2 full width only inside this table */

#trs_table .select2-container {
  width: 100% !important;
}

/* Tooltips originating from cells in this table */

#trs_table .tooltip, #trs_table .tooltip .tooltip-inner {
  max-width: 360px;
}

/* ------------ Bulk action bar ------------- */

#trs-bulkbar {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .5rem 0;
}

/* Compact buttons inside bulkbar */

#trs-bulkbar .btn {
  padding: .25rem .6rem;
  line-height: 1.2;
  border-width: 1px;
}

/* ======== High-contrast “Set Affiliate” button (dark-friendly) ======== */

#trs-bulkbar #ti-bulk-aff.btn-outline-secondary {
  color: #ffd666;
  border-color: #ffd666;
}

#trs-bulkbar #ti-bulk-aff.btn-outline-secondary:hover, #trs-bulkbar #ti-bulk-aff.btn-outline-secondary:focus {
  color: #1a1a1a;
  background-color: #ffd666;
  border-color: #ffd666;
}

#trs-bulkbar #ti-bulk-aff.btn-outline-secondary:active, #trs-bulkbar #ti-bulk-aff.btn-outline-secondary.active {
  color: #1a1a1a;
  background-color: #ffcd4d;
  border-color: #ffc533;
}

#trs-bulkbar #ti-bulk-aff:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.45);
}

/* Optional: if your project uses data-bs-theme="dark", keep consistent contrast */

[data-bs-theme="dark"] #trs-bulkbar #ti-bulk-aff.btn-outline-secondary {
  color: #ffd666;
  border-color: #ffd666;
}

/* --------- Optional: subtle separators for dark tables (scoped) --------- */

#trs_table tbody tr + tr td {
  border-top: 1px solid rgba(255,255,255,0.06);
}

#trs_table thead th {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* =======================================================
   Saving… Badge (classic look + success variant)
   ======================================================= */

.ti-saving-badge {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 2147483647;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 6px;
  color: #856404;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .28s ease, transform .28s ease, background-color .28s ease, color .28s ease, border-color .28s ease;
}

.ti-saving-badge .fa {
  font-size: 12px;
}

/* Show/hide animations */

.ti-saving-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ti-saving-badge.is-hiding {
  opacity: 0;
  transform: translateY(-4px);
}

/* Green success flash (toggled in JS after save succeeds) */

.ti-saving-badge.success {
  color: #155724;
  background: #d4edda;
  border-color: #c3e6cb;
}

/* Optional: red error variant if you want later */

.ti-saving-badge.error {
  color: #721c24;
  background: #f8d7da;
  border-color: #f5c6cb;
}

@media (prefers-reduced-motion: reduce) {
  .ti-saving-badge {
    transition: none !important;
    transform: none !important;
  }
}

