/* global.css — shared styles across all pages */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #333;
}

/* Floating-label form fields — reusable on any page */
.field { position: relative; margin-bottom: 20px; }

.field input,
.field select,
.field textarea {
  width: 100%; padding: 14px 16px; font-size: 14px;
  border: 1px solid #ddd; border-radius: 8px; outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #f9fafb;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #2c5364; box-shadow: 0 0 0 3px rgba(44,83,100,.12);
  background: #fff;
}
.field label {
  position: absolute; left: 16px; top: 14px;
  font-size: 14px; color: #999; pointer-events: none;
  transition: .2s ease all;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: -8px; left: 12px; font-size: 11px;
  background: #fff; padding: 0 4px; color: #2c5364;
}

/* Primary button */
.btn-primary {
  padding: 14px; font-size: 15px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, #203a43, #2c5364);
  border: none; border-radius: 8px; cursor: pointer;
  transition: opacity .2s;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* Spinner */
.spinner { display: none; }
.spinner.show { display: inline-block; }
.spinner::after {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid #fff; border-top-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Selected product row highlight --- */
tr.selected-product td {
    color: red !important;
    font-weight: bold !important;
    font-size: 110% !important;
    white-space: nowrap;
}