/* ================================================================
   ElectroCatalog — Custom Styles
   Complements Bootstrap 5. Kept minimal — let Bootstrap do the work.
   ================================================================ */

/* ----------------------------------------------------------------
   General
   ---------------------------------------------------------------- */
html, body {
  height: 100%;
}

body {
  background-color: #f4f6fb;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------------
   Navbar
   ---------------------------------------------------------------- */
.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   Table — Inline Rate Editing
   Rate cells are highlighted on hover to hint they are editable.
   Double-clicking one switches the display span to an <input>.
   ---------------------------------------------------------------- */
.rate-cell {
  cursor: pointer;
  position: relative;
  min-width: 120px;
  transition: background-color 0.15s;
}

.rate-cell:hover {
  background-color: rgba(255, 193, 7, 0.12);
}

.rate-cell.editing {
  background-color: rgba(255, 193, 7, 0.2);
}

.rate-cell .rate-display {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.rate-cell .rate-input {
  width: 100px;
}

/* Saving spinner shown inside the cell while AJAX is in flight */
.rate-cell .saving-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
}

/* Visual feedback: flash green on success, red on error */
@keyframes flash-success {
  0%   { background-color: rgba(25, 135, 84, 0.25); }
  100% { background-color: transparent; }
}
@keyframes flash-error {
  0%   { background-color: rgba(220, 53, 69, 0.25); }
  100% { background-color: transparent; }
}

.rate-cell.flash-success {
  animation: flash-success 1.2s ease-out forwards;
}
.rate-cell.flash-error {
  animation: flash-error 1.2s ease-out forwards;
}

/* Tooltip-style "edit hint" label on first hover */
.rate-cell::after {
  content: '✎ click to edit';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.rate-cell:hover::after {
  opacity: 1;
}
.rate-cell.editing::after {
  opacity: 0;
}

/* ----------------------------------------------------------------
   Inline-editable purchase code cell (.code-cell)
   Mirrors .rate-cell styling but for text input
   ---------------------------------------------------------------- */
.code-cell {
  cursor: pointer;
  position: relative;
  min-width: 120px;
  transition: background-color 0.15s;
}

.code-cell:hover {
  background-color: rgba(13, 110, 253, 0.07);
}

.code-cell.editing {
  background-color: rgba(13, 110, 253, 0.12);
}

.code-cell .code-display {
  display: inline-block;
}

.code-cell .code-input {
  width: 130px;
}

.code-cell::after {
  content: '✎ click to edit';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.code-cell:hover::after { opacity: 1; }
.code-cell.editing::after { opacity: 0; }

.code-cell.flash-success { animation: flash-success 1.2s ease-out forwards; }
.code-cell.flash-error   { animation: flash-error   1.2s ease-out forwards; }

/* ----------------------------------------------------------------
   Table
   ---------------------------------------------------------------- */
#catalogTable thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#catalogTable tbody tr {
  transition: background-color 0.1s;
}

/* ----------------------------------------------------------------
   Category badges
   ---------------------------------------------------------------- */
.badge.bg-secondary-subtle {
  background-color: #e9ecef !important;
}

/* ----------------------------------------------------------------
   Search bar
   ---------------------------------------------------------------- */
#searchInput:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
  border-color: #ffc107;
}

/* ----------------------------------------------------------------
   Auth cards (login / register)
   ---------------------------------------------------------------- */
.card.shadow-lg {
  border-radius: 1rem !important;
}

.input-group-text {
  color: #6c757d;
}

/* ----------------------------------------------------------------
   Toast notifications
   ---------------------------------------------------------------- */
#rateToast {
  min-width: 220px;
  font-size: 0.875rem;
}

#rateToast.bg-success .toast-body,
#rateToast.text-white .toast-body {
  color: #fff;
}

/* ----------------------------------------------------------------
   Empty state
   ---------------------------------------------------------------- */
#emptyRow td {
  padding: 4rem 1rem;
}

/* ----------------------------------------------------------------
   Loading overlay (shown while AJAX search is in flight)
   ---------------------------------------------------------------- */
#tableLoadingOverlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}