/* Small custom overrides layered on top of the compiled Tailwind file. */

/* Toastr uses fixed colors; nudge to brand for a cohesive look. */
#toast-container > .toast-success { background-color: #16a34a; }
#toast-container > .toast-error   { background-color: #dc2626; }
#toast-container > .toast-warning { background-color: #d97706; }
#toast-container > .toast-info    { background-color: #1E3A8A; }

/* Numeric inputs align right for stock quantities. */
input[inputmode="numeric"], input[type="number"] { text-align: right; }

/* Print: only the label sheet prints (used by print/labels.php). */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; }
  .no-print { display: none !important; }
}

/* Scanner viewport sizing. */
#scan-reader { width: 100%; max-width: 420px; margin: 0 auto; }

/* ---------------------------------------------------------------------
 * DataTables skin — re-themed to match the Tailwind card/table-wrap look
 * (self-hosted plugin, base CSS loaded from dataTables.min.css /
 * dataTables.responsive.min.css; this block only overrides its visuals).
 * --------------------------------------------------------------------- */
div.dt-container { width: 100%; }
div.dt-container .dt-layout-row:first-child { padding-bottom: .75rem; }
div.dt-container .dt-layout-row:last-child { padding-top: .75rem; }

.dt-search input.dt-input,
.dt-length select.dt-input {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  background-color: #fff;
  color: #1f2937;
}
.dt-search input.dt-input:focus,
.dt-length select.dt-input:focus {
  outline: none;
  border-color: #C9A227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.dt-search { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #6b7280; }
.dt-length { font-size: .875rem; color: #6b7280; }
.dt-info { font-size: .8125rem; color: #6b7280; }

.dt-paging .dt-paging-button {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .35rem .7rem;
  margin-left: .25rem;
  font-size: .8125rem;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
.dt-paging .dt-paging-button.current {
  border-color: #C9A227;
  background: #C9A227;
  color: #fff;
}
.dt-paging .dt-paging-button.disabled {
  opacity: .45;
  cursor: default;
}
.dt-paging .dt-paging-button:not(.disabled):not(.current):hover { background: #f9fafb; }

table.dataTable > thead > tr > th.dt-orderable-asc,
table.dataTable > thead > tr > th.dt-orderable-desc { cursor: pointer; }
table.dataTable > thead > tr > th span.dt-column-order { opacity: .5; }
table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order { opacity: 1; }

table.dataTable td.dt-control { cursor: pointer; }
div.dtr-modal div.dtr-modal-content {
  border-radius: .75rem;
  padding: 1.25rem;
}

/* Compact "sm" density on top of .table-wrap defaults. */
.table-sm td, .table-sm th { padding-top: .5rem; padding-bottom: .5rem; }

/* Dark mode */
html.dark .dt-search input.dt-input,
html.dark .dt-length select.dt-input {
  background-color: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}
html.dark .dt-search,
html.dark .dt-length,
html.dark .dt-info { color: #9ca3af; }
html.dark .dt-paging .dt-paging-button {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}
html.dark .dt-paging .dt-paging-button:not(.disabled):not(.current):hover { background: #111827; }
html.dark div.dtr-modal div.dtr-modal-content { background: #1f2937; color: #f3f4f6; }
html.dark div.dtr-modal div.dtr-modal-close { color: #f3f4f6; }
html.dark table.dataTable > thead > tr > th { color: inherit; }

/* ---------------------------------------------------------------------
 * Select2 skin — re-themed to match .form-input (self-hosted plugin,
 * base CSS from select2.min.css; this block only overrides its visuals).
 * --------------------------------------------------------------------- */
.select2-container { width: 100% !important; font-family: inherit; }

.select2-container--default .select2-selection--single {
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .5rem 2rem .5rem .75rem;
  background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.25rem;
  padding: 0;
  color: #1f2937;
  font-size: .875rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: .5rem; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #C9A227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
  outline: none;
}

.select2-dropdown {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  overflow: hidden;
  z-index: 9999;
}
.select2-search--dropdown { padding: .5rem; }
.select2-search__field {
  border: 1px solid #e5e7eb !important;
  border-radius: .375rem !important;
  padding: .375rem .5rem !important;
  font-size: .875rem;
}
.select2-search__field:focus { outline: none; border-color: #C9A227 !important; }
.select2-results__option { font-size: .875rem; padding: .5rem .75rem; }
.select2-results__option--highlighted[aria-selected] { background: #C9A227 !important; color: #fff !important; }
.select2-results__option--selected:not(.select2-results__option--highlighted) { background: #f9fafb; }
.select2-container--disabled .select2-selection--single { background: #f3f4f6; cursor: not-allowed; }

/* Dark mode */
html.dark .select2-container--default .select2-selection--single {
  background: #1f2937;
  border-color: #374151;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f3f4f6; }
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6b7280; }
html.dark .select2-selection__arrow b { border-color: #9ca3af transparent transparent transparent; }
html.dark .select2-container--open .select2-selection__arrow b { border-color: transparent transparent #9ca3af transparent !important; }
html.dark .select2-dropdown { background: #1f2937; border-color: #374151; color: #f3f4f6; }
html.dark .select2-search__field { background: #111827 !important; border-color: #374151 !important; color: #f3f4f6 !important; }
html.dark .select2-results__option { color: #e5e7eb; }
html.dark .select2-results__option--selected:not(.select2-results__option--highlighted) { background: #111827; }
html.dark .select2-container--disabled .select2-selection--single { background: #111827; }

/* SweetAlert2 popups stay light regardless of app dark mode — keep Select2 in sync. */
html.dark .swal2-popup .select2-container--default .select2-selection--single {
  background: #fff;
  border-color: #e5e7eb;
}
html.dark .swal2-popup .select2-container--default .select2-selection--single .select2-selection__rendered { color: #1f2937; }
html.dark .swal2-popup .select2-selection__arrow b { border-color: #888 transparent transparent transparent; }
html.dark .swal2-popup .select2-container--open .select2-selection__arrow b { border-color: transparent transparent #888 transparent !important; }
html.dark .swal2-popup .select2-dropdown { background: #fff; color: #1f2937; border-color: #e5e7eb; }
html.dark .swal2-popup .select2-search__field { background: #fff !important; border-color: #e5e7eb !important; color: #1f2937 !important; }
html.dark .swal2-popup .select2-results__option { color: #1f2937; }