/* ── Tab styling ─────────────────────────────── */

.products-tabs .nav-link {
  color: var(--bs-secondary-color);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .65rem 1.25rem;
  font-weight: 500;
  transition: color .15s, border-color .15s;
}

.products-tabs .nav-link:hover {
  color: var(--bs-body-color);
}

.products-tabs .nav-link.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  background: transparent;
}

.products-tabs {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Edit tab hidden until a product is selected */

#tab-edit-btn {
  display: none;
}

/* ── Image upload grid ───────────────────────── */

#uploadedImages, #editUploadedImages, #editExistingImages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: .5rem;
}

.img-thumb-wrap {
  position: relative;
  width: 175px;
  border-radius: .375rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}

.img-thumb-wrap img {
  width: auto;
  height: 175px;
  object-fit: fill;
  display: block;
}

.img-thumb-wrap .img-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*background: var(--bs-focus-ring-color);*/
  /*padding: .1rem;*/
  text-align: end;
}

.img-drag-handle {
  padding: 1px 6px;
  text-align: center;
  border-radius: 1px 1px 10px 1px!important;
}

.p-btn {
  background: var(--bs-focus-ring-color);
  border-radius: 10px 1px 1px 1px!important;
  color: var(--bs-primary);
  font-size: 20px;
  border: red;
  font-weight: 900;
  padding: 0px 5px!important;
  bottom: 0px;
}

.img-thumb-wrap .img-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
  font-weight: 500;
  padding: 6px 8px;
  background: var(--bs-focus-ring-color)!important;
  color: var(--bs-primary)!important;
  border-radius: 1px 1px 1px 10px!important;
}

.img-thumb-wrap {
  cursor: grab;
}

.img-thumb-wrap.sortable-chosen {
  opacity: .75;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor: grabbing;
}

.img-thumb-wrap.sortable-ghost {
  opacity: .3;
}

/* ── Category manager ────────────────────────── */

.cat-manager-box {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: 1rem;
  margin-top: .5rem;
  display: none;
}

.cat-manager-box.open {
  display: block;
}

/* ── Quill editor ────────────────────────────── */

.ql-toolbar {
  border-radius: .375rem .375rem 0 0 !important;
}

.ql-container {
  border-radius: 0 0 .375rem .375rem !important;
  min-height: 130px;
}

/* ── Hide number-input spinners (up/down arrows) */

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ══ Quill toolbar dark-mode icon fix ══ */

/* Light mode: icons are dark — no change needed */

[data-bs-theme="light"] .ql-toolbar .ql-stroke, [data-bs-theme="light"] .ql-toolbar .ql-fill, [data-bs-theme="light"] .ql-toolbar .ql-picker {
}

/* Dark mode: make icons and text visible */

[data-bs-theme="dark"] .ql-toolbar {
  background-color: #2b2b2b;
  border-color: #444 !important;
}

[data-bs-theme="dark"] .ql-container {
  border-color: #444 !important;
  background-color: #1e1e1e;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .ql-editor.ql-blank::before {
  color: #888;
}

/* SVG strokes (bold, italic, underline, link, image, etc.) */

[data-bs-theme="dark"] .ql-toolbar .ql-stroke {
  stroke: #ccc !important;
}

[data-bs-theme="dark"] .ql-toolbar .ql-fill {
  fill: #ccc !important;
}

/* Picker labels (font, size, header dropdowns) */

[data-bs-theme="dark"] .ql-toolbar .ql-picker-label {
  color: #ccc !important;
}

[data-bs-theme="dark"] .ql-toolbar .ql-picker-label .ql-stroke {
  stroke: #ccc !important;
}

/* Dropdown options */

[data-bs-theme="dark"] .ql-toolbar .ql-picker-options {
  background-color: #2b2b2b !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

/* Active / selected state */

[data-bs-theme="dark"] .ql-toolbar button:hover .ql-stroke, [data-bs-theme="dark"] .ql-toolbar button.ql-active .ql-stroke {
  stroke: #ffffff !important;
}

[data-bs-theme="dark"] .ql-toolbar button:hover .ql-fill, [data-bs-theme="dark"] .ql-toolbar button.ql-active .ql-fill {
  fill: #ffffff !important;
}

[data-bs-theme="dark"] .ql-toolbar button:hover .ql-picker-label, [data-bs-theme="dark"] .ql-toolbar .ql-picker-label:hover {
  color: #ffffff !important;
}