/**
 * UI Components
 * TraceLog - Food Producer Traceability System
 */

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Group */
.btn-group {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-dark);
}

/* Outline Secondary Button */
.btn-outline-secondary {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-dark);
}

/* Danger Button */
.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

/* Success Button */
.btn-success {
  background-color: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background-color: #1e7e34;
  border-color: #1c7430;
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* Icon Button */
.btn-icon {
  padding: var(--space-2);
  width: 36px;
  height: 36px;
}

.btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  padding: var(--space-1);
}

/* ===== CARDS ===== */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Clickable Card */
.card-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-clickable:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* ===== FORMS ===== */
.form-group {
  margin-bottom: var(--space-4);
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-row .form-group {
  flex: 1;
}

.form-group-half {
  flex: 0 0 calc(50% - var(--space-2));
}

.form-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-4) 0;
}

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-label.required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

/* Explicit height for inputs and selects to ensure consistent alignment */
.form-input,
.form-select {
  height: 38px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-bg-tertiary);
  cursor: not-allowed;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-danger);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.form-help {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Form Sections */
.form-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.form-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.form-section-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

/* Static Display (read-only values) */
.form-static {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
}

/* Input Allocation Groups (for production batch modal) */
.input-allocation-group {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.input-allocation-group:last-child {
  margin-bottom: 0;
}

.input-allocation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.input-allocation-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.input-allocation-required {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.available-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.available-hint.low-stock {
  color: var(--color-warning);
}

/* Optional quantity hint */
.qty-optional-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  font-style: italic;
}

/* ===== MULTIPLE INPUT ROWS (Stage 8) ===== */
.input-allocation-group.multi-input {
  padding-bottom: var(--space-2);
}

.input-rows-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.input-row {
  position: relative;
  padding: var(--space-3);
  padding-right: var(--space-8);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.input-row-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.input-row-remove:hover {
  background-color: var(--color-danger-bg, #fee2e2);
  color: var(--color-danger, #dc2626);
}

.input-row-remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.input-row-remove:disabled:hover {
  background-color: transparent;
  color: var(--color-text-muted);
}

.add-input-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  margin-top: var(--space-2);
  background-color: var(--color-bg-primary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.add-input-btn:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.input-allocation-group.multi-input .input-row .form-group {
  margin-bottom: var(--space-2);
}

.input-allocation-group.multi-input .input-row .form-group:last-child {
  margin-bottom: 0;
}

.input-allocation-group.multi-input .form-row {
  display: flex;
  gap: var(--space-3);
}

.input-allocation-group.multi-input .form-row > .form-group {
  flex: 1;
}

/* Recipe-driven input allocation */
.recipe-needed-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  margin-left: var(--space-2);
}

.recipe-input-group .input-allocation-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

/* Recipe input allocation header with remove button */
.recipe-input-group .input-allocation-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.recipe-input-group .remove-ingredient-btn {
  margin-left: auto;
  padding: var(--space-1);
  color: var(--color-text-muted);
}

.recipe-input-group .remove-ingredient-btn:hover {
  color: var(--color-danger);
}

/* Substitute ingredient styling */
.substitute-group {
  border-left: 3px solid var(--color-warning);
}

.substitute-badge {
  background-color: var(--color-warning-bg, #fff3cd);
  color: var(--color-warning-text, #856404);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

/* Substitute ingredient section */
.substitute-ingredient-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.substitute-picker {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.substitute-picker-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Batch Preview Section */
.batch-preview {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.batch-preview .form-static {
  background-color: var(--color-bg-primary);
}

/* ===== BADGES & STATUS ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge-secondary {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

/* Status Badges (Production Board) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
}

.status-germinating {
  background-color: var(--color-status-germinating-bg);
  color: var(--color-status-germinating);
}

.status-growing {
  background-color: var(--color-status-growing-bg);
  color: var(--color-status-growing);
}

.status-ready {
  background-color: var(--color-status-ready-bg);
  color: var(--color-status-ready);
}

.status-completed {
  background-color: var(--color-status-completed-bg);
  color: var(--color-status-completed);
}

/* School Meals Workflow Status Classes */
.status-prep {
  background-color: var(--color-status-prep-bg);
  color: var(--color-status-prep);
}

.status-cooking {
  background-color: var(--color-status-cooking-bg);
  color: var(--color-status-cooking);
}

.status-cooling {
  background-color: var(--color-status-cooling-bg);
  color: var(--color-status-cooling);
}

.status-chilled-storage {
  background-color: var(--color-status-chilled-storage-bg);
  color: var(--color-status-chilled-storage);
}

.status-hot-holding {
  background-color: var(--color-status-hot-holding-bg);
  color: var(--color-status-hot-holding);
}

.status-ready-to-dispatch {
  background-color: var(--color-status-ready-to-dispatch-bg);
  color: var(--color-status-ready-to-dispatch);
}

/* ===== TABLES ===== */
.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-primary);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background-color: var(--color-bg-secondary);
}

.table-clickable tbody tr {
  cursor: pointer;
}

/* Sortable Table Headers */
.table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.table th.sortable:hover {
  background-color: var(--color-bg-tertiary, #e5e7eb);
}

.table th .sort-icon {
  display: inline-block;
  width: 16px;
  margin-left: var(--space-1);
  opacity: 0.3;
  vertical-align: middle;
}

.table th .sort-icon::after {
  content: '⇅';
  font-size: 12px;
}

.table th.sort-asc .sort-icon,
.table th.sort-desc .sort-icon {
  opacity: 1;
}

.table th.sort-asc .sort-icon::after {
  content: '↑';
}

.table th.sort-desc .sort-icon::after {
  content: '↓';
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Stacked modal (modal opened from within another modal) */
.modal-overlay.modal-stacked {
  z-index: calc(var(--z-modal) + 10);
}

.modal {
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - var(--space-8));
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal-close {
  padding: var(--space-1);
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.modal-close:hover {
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Large Modal */
.modal-lg {
  max-width: 700px;
}

/* ===== NAVIGATION ===== */
.nav {
  display: flex;
  gap: var(--space-1);
}

.nav-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.nav-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Sidebar Navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  text-decoration: none;
}

.sidebar-nav-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.sidebar-nav-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.sidebar-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Sidebar Guide Link (opens in new tab) */
.sidebar-guide-link {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, transparent 100%);
  border: 1px solid var(--color-primary-lighter, rgba(79, 70, 229, 0.2));
  margin-bottom: var(--space-2);
}

.sidebar-guide-link:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.sidebar-guide-link .external-link-icon {
  width: 14px;
  height: 14px;
  margin-left: auto;
  opacity: 0.5;
}

.sidebar-guide-link:hover .external-link-icon {
  opacity: 1;
}

/* Sidebar Divider */
.sidebar-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) var(--space-4);
}

/* ===== ALERTS & TOASTS ===== */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.alert-message {
  font-size: var(--font-size-sm);
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.alert-danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.alert-info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

/* Toast Container */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
}

.toast {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===== LOADING STATES ===== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

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

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

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

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sticky);
}

/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center;
  padding: var(--space-8);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  color: var(--color-text-muted);
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ===== DROPDOWNS ===== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  padding: var(--space-1);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.15s ease;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover {
  background-color: var(--color-bg-secondary);
}

.dropdown-item.danger {
  color: var(--color-danger);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-1) 0;
}

/* ===== TABS ===== */
.tabs {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-4);
}

.tab {
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab:hover {
  color: var(--color-text-primary);
}

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-panel {
  display: none;
  padding: var(--space-4) 0;
}

.tab-panel.active {
  display: block;
}

/* ===== AVATARS ===== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-lg);
}

/* ===== PROGRESS ===== */
.progress {
  height: 8px;
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.progress-bar.success {
  background-color: var(--color-success);
}

.progress-bar.warning {
  background-color: var(--color-warning);
}

.progress-bar.danger {
  background-color: var(--color-danger);
}

/* ===== DIVIDERS ===== */
.divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-4) 0;
}

.divider-vertical {
  width: 1px;
  height: auto;
  background-color: var(--color-border);
  margin: 0 var(--space-4);
}

/* ===== TOOLTIPS ===== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
  z-index: var(--z-tooltip);
  pointer-events: none;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  margin-bottom: var(--space-1);
}

/* ===== FILTER BAR ===== */
.filter-card {
  margin-bottom: var(--space-4);
}

.filter-bar {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}

.filter-group {
  margin-bottom: 0;
  min-width: 150px;
}

.filter-group .form-label {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
}

.filter-actions {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
}

.filter-checkbox-group {
  display: flex;
  align-items: center;
  min-width: auto;
}

.filter-checkbox-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-top: 22px; /* Align with other filter controls */
}

.filter-checkbox-group .checkbox-label:hover {
  color: var(--color-text);
}

.filter-checkbox-group .checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ===== LOW STOCK INDICATORS ===== */
.row-low-stock {
  background-color: var(--color-warning-bg) !important;
}

.row-low-stock:hover td {
  background-color: #fff0c2 !important;
}

.row-depleted {
  opacity: 0.6;
  background-color: var(--color-bg-tertiary) !important;
}

.row-depleted:hover td {
  background-color: var(--color-bg-tertiary) !important;
}

.qty-value {
  font-weight: var(--font-weight-medium);
}

.qty-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ===== INPUT TYPE BADGES ===== */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  text-transform: capitalize;
  /* Default badge styling - will be overridden by dynamic color classes */
  background-color: var(--color-bg-tertiary, #e9ecef);
  color: var(--color-text-secondary, #6c757d);
}

/* Dynamic color palette for input type badges - assigned via JS hash */
.type-badge-color-0 { background-color: #e8f5e9; color: #2e7d32; }  /* Green */
.type-badge-color-1 { background-color: #e3f2fd; color: #1565c0; }  /* Blue */
.type-badge-color-2 { background-color: #fff3e0; color: #e65100; }  /* Orange */
.type-badge-color-3 { background-color: #f3e5f5; color: #7b1fa2; }  /* Purple */
.type-badge-color-4 { background-color: #fce4ec; color: #c2185b; }  /* Pink */
.type-badge-color-5 { background-color: #e0f7fa; color: #00838f; }  /* Cyan */
.type-badge-color-6 { background-color: #fff8e1; color: #ff8f00; }  /* Amber */
.type-badge-color-7 { background-color: #f0e6d3; color: #8b6914; }  /* Brown/Tan */
.type-badge-color-8 { background-color: #e8eaf6; color: #3949ab; }  /* Indigo */
.type-badge-color-9 { background-color: #efebe9; color: #5d4037; }  /* Brown */

/* ===== DISPATCH STYLES ===== */
.dispatch-batch-info {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
}

.dispatch-batch-info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

.dispatch-batch-info-row .label {
  color: var(--color-text-muted);
}

.dispatch-batch-info-row .value {
  font-weight: var(--font-weight-medium);
}

.dispatch-batch-info-row.highlight {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.dispatch-batch-info-row.highlight .value {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.dispatch-type-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.dispatch-type-badge.waste {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.batch-id-link {
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

.batch-id-link:hover {
  text-decoration: underline;
}

.batch-dispatch-summary {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.dispatch-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

.dispatch-summary-row .label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.dispatch-summary-row .value {
  font-weight: var(--font-weight-medium);
}

.dispatch-entry {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.dispatch-entry .dispatch-type {
  font-weight: var(--font-weight-medium);
}

.dispatch-entry .dispatch-id-link {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  cursor: pointer;
}

.dispatch-entry .dispatch-type-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.dispatch-entry .dispatch-qty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dispatch-entry .dispatch-customer {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.dispatch-entry.waste .dispatch-customer {
  color: var(--color-danger);
}

.batch-info-preview {
  margin-bottom: var(--space-4);
}

/* ===== MULTI-LINE DISPATCH ITEMS ===== */
.dispatch-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.dispatch-items-empty {
  background-color: var(--color-bg-secondary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.dispatch-item {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.dispatch-item:last-child {
  margin-bottom: 0;
}

.dispatch-item-row {
  display: grid;
  grid-template-columns: 1fr 150px 120px auto;
  gap: var(--space-3);
  align-items: center;
}

.dispatch-item-batch {
  min-width: 0;
}

.dispatch-item-batch select {
  width: 100%;
}

.dispatch-item-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dispatch-item-info .product-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.dispatch-item-info .available-qty {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dispatch-item-qty {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.dispatch-item-qty input {
  width: 80px;
  text-align: right;
}

.dispatch-item-unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 40px;
}

.dispatch-item-remove {
  color: var(--color-danger);
  padding: var(--space-1);
  cursor: pointer;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}

.dispatch-item-remove:hover {
  background-color: var(--color-danger-bg);
}

/* Dispatch ID Preview */
#dispatch-id-preview {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-semibold);
}

/* Dispatch Detail Modal */
.dispatch-detail-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.dispatch-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dispatch-detail-item .label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dispatch-detail-item .value {
  font-weight: var(--font-weight-medium);
}

.dispatch-detail-items {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dispatch-detail-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.dispatch-detail-line:last-child {
  border-bottom: none;
}

.dispatch-detail-line .product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dispatch-detail-line .product-name {
  font-weight: var(--font-weight-medium);
}

.dispatch-detail-line .batch-id {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

.dispatch-detail-line .quantity {
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

/* Dispatch Table - Updated for multi-line */
.dispatch-id-cell {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  cursor: pointer;
}

.dispatch-id-cell:hover {
  text-decoration: underline;
}

.items-summary {
  font-size: var(--font-size-sm);
}

.items-summary .item-count {
  color: var(--color-text-muted);
}

.items-summary .single-item {
  color: var(--color-text-primary);
}

/* Medium modal size */
.modal-md {
  max-width: 600px;
}

/* ===========================================
   TRACEABILITY STYLES
   =========================================== */

/* Trace Summary Grid */
.trace-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.trace-summary-item {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.trace-summary-item .value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.trace-summary-item .label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Trace Tree Structure */
.trace-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trace-level {
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-border);
  margin-left: var(--space-4);
}

.trace-level-header {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.trace-nodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Individual Trace Node */
.trace-node {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: relative;
}

.trace-node::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) - 1px);
  top: 50%;
  width: var(--space-6);
  height: 2px;
  background-color: var(--color-border);
}

.trace-node-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.trace-node-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.trace-node-toggle:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.trace-node-toggle .chevron-icon {
  transition: transform 0.2s ease;
}

.trace-item.collapsed .trace-node-toggle .chevron-icon {
  transform: rotate(-90deg);
}

.trace-node-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  flex: 1;
}

.trace-node-summary {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: none;
}

.trace-item.collapsed > .trace-node .trace-node-summary {
  display: inline;
}

.trace-node-type {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

/* Collapsible body */
.trace-node-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Trace item structure for collapsible hierarchy */
.trace-item {
  margin-bottom: var(--space-2);
}

.trace-children {
  margin-left: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
  margin-top: var(--space-3);
}

.trace-item.collapsed > .trace-children {
  display: none;
}

.trace-direction {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0;
  font-weight: var(--font-weight-medium);
}

/* Trace Legend Panel */
.trace-legend-panel {
  margin-bottom: var(--space-4);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trace-legend-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  list-style: none;
}

.trace-legend-toggle::-webkit-details-marker {
  display: none;
}

.trace-legend-toggle::before {
  content: '▶';
  font-size: 10px;
  transition: transform 0.2s ease;
}

.trace-legend-panel[open] .trace-legend-toggle::before {
  transform: rotate(90deg);
}

.trace-legend-toggle:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
}

.trace-legend-toggle svg {
  color: var(--color-primary);
}

.trace-legend-content {
  padding: var(--space-4);
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.trace-legend-section h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trace-legend-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trace-legend-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.trace-legend-item dt {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.trace-legend-item dd {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.trace-legend-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.trace-legend-supplier {
  background-color: rgba(99, 102, 241, 0.1);
  color: rgb(99, 102, 241);
}

.trace-legend-input {
  background-color: rgba(245, 158, 11, 0.1);
  color: rgb(180, 117, 8);
}

.trace-legend-batch {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}

.trace-legend-dispatch {
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
}

.trace-node-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.trace-node-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.trace-node-detail .label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.trace-node-detail .value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.trace-node-detail .value code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Primary detail - emphasized identifier */
.trace-node-detail-primary {
  grid-column: 1 / -1;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.trace-node-detail-primary .value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.trace-node-detail-primary .value code {
  font-size: var(--font-size-base);
  padding: var(--space-1) var(--space-3);
}

/* Trace Node Type Colors */
.trace-node-type-supplier {
  background-color: rgba(99, 102, 241, 0.1);
  color: rgb(99, 102, 241);
  border-left: 3px solid rgb(99, 102, 241);
}

.trace-node-type-supplier .trace-node-type {
  background-color: rgba(99, 102, 241, 0.1);
  color: rgb(99, 102, 241);
}

.trace-node-type-input {
  background-color: rgba(245, 158, 11, 0.05);
  color: var(--color-text-primary);
  border-left: 3px solid rgb(245, 158, 11);
}

.trace-node-type-input .trace-node-type {
  background-color: rgba(245, 158, 11, 0.1);
  color: rgb(180, 117, 8);
}

.trace-node-type-batch {
  background-color: rgba(34, 197, 94, 0.05);
  color: var(--color-text-primary);
  border-left: 3px solid rgb(34, 197, 94);
}

.trace-node-type-batch .trace-node-type {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}

.trace-node-type-dispatch {
  background-color: rgba(59, 130, 246, 0.05);
  color: var(--color-text-primary);
  border-left: 3px solid rgb(59, 130, 246);
}

.trace-node-type-dispatch .trace-node-type {
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
}

.trace-node-type-product {
  background-color: rgba(168, 85, 247, 0.05);
  color: var(--color-text-primary);
  border-left: 3px solid rgb(168, 85, 247);
}

.trace-node-type-product .trace-node-type {
  background-color: rgba(168, 85, 247, 0.1);
  color: rgb(168, 85, 247);
}

/* Nested children within trace nodes */
.trace-node-children {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.trace-node-children .trace-level {
  margin-left: 0;
  padding-left: var(--space-4);
}

/* ===========================================
   REPORTS STYLES
   =========================================== */

/* Report Summary Grid */
.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.report-summary-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.report-summary-card .card-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.report-summary-card .card-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Report Card Color Variants */
.report-summary-card.primary {
  border-left: 4px solid var(--color-primary);
}

.report-summary-card.primary .card-value {
  color: var(--color-primary);
}

.report-summary-card.success {
  border-left: 4px solid var(--color-success);
}

.report-summary-card.success .card-value {
  color: var(--color-success);
}

.report-summary-card.warning {
  border-left: 4px solid var(--color-warning);
}

.report-summary-card.warning .card-value {
  color: var(--color-warning);
}

.report-summary-card.danger {
  border-left: 4px solid var(--color-danger);
}

.report-summary-card.danger .card-value {
  color: var(--color-danger);
}

.report-summary-card.info {
  border-left: 4px solid rgb(59, 130, 246);
}

.report-summary-card.info .card-value {
  color: rgb(59, 130, 246);
}

/* Report Breakdown List */
.report-breakdown {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.report-breakdown-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.report-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.report-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.report-breakdown-item .name {
  color: var(--color-text-secondary);
}

.report-breakdown-item .value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Report Table Enhancements */
.report-table {
  width: 100%;
}

.report-table th,
.report-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.report-table th {
  background-color: var(--color-bg-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.report-table td.numeric {
  text-align: right;
  font-family: var(--font-family-mono);
}

.report-table td.date {
  white-space: nowrap;
}

.report-table tr:hover {
  background-color: var(--color-bg-secondary);
}

/* Report Filters */
.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

.report-filters .form-group {
  flex: 1;
  min-width: 150px;
  margin-bottom: 0;
}

.report-filters .btn {
  flex-shrink: 0;
}

/* ===========================================
   SORTABLE TABLE HEADERS
   =========================================== */

th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  position: relative;
  padding-right: var(--space-6);
}

th.sortable:hover {
  background-color: var(--color-bg-secondary);
}

th.sortable .sort-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.3;
}

th.sortable.sort-asc .sort-icon {
  border-bottom: 6px solid var(--color-text-primary);
  border-top: none;
  opacity: 1;
}

th.sortable.sort-desc .sort-icon {
  border-top: 6px solid var(--color-text-primary);
  border-bottom: none;
  opacity: 1;
}

th.sortable:not(.sort-asc):not(.sort-desc) .sort-icon {
  border-bottom: 6px solid var(--color-text-muted);
  border-top: none;
}

/* ===========================================
   STOCK ADJUSTMENT MODAL
   =========================================== */

.adjustment-modal-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.adjustment-modal-header h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.adjustment-modal-header .current-stock-display {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.adjustment-step {
  min-height: 200px;
}

.adjustment-step h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Batch selection table */
.batch-selection-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.batch-selection-table th,
.batch-selection-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.batch-selection-table th {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-bg-secondary);
}

.batch-selection-table .batch-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.batch-selection-table .batch-row:hover {
  background-color: var(--color-bg-secondary);
}

.batch-selection-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.batch-actions {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-2);
}

.empty-batches {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
}

.empty-batches p {
  margin-bottom: var(--space-4);
}

/* Adjustment form */
.form-section {
  margin-bottom: var(--space-4);
}

.form-section h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.form-section .form-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.selected-batch-info {
  background-color: var(--color-bg-secondary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

.selected-batch-info div {
  white-space: nowrap;
}

.radio-group {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.input-with-unit {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.input-with-unit .form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}

.input-with-unit .unit-label {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.adjustment-preview {
  padding: var(--space-3);
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  min-height: 20px;
}

.adjustment-preview:empty {
  display: none;
}

.adjustment-preview .text-danger {
  color: var(--color-danger);
}

.adjustment-preview .preview-text {
  color: var(--color-text-secondary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.loading-spinner {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
}

.error-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-danger);
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
  /* Hide non-essential elements */
  .sidebar,
  .mobile-header,
  .btn:not(.btn-print),
  .page-actions,
  .filter-card,
  nav,
  .sidebar-nav {
    display: none !important;
  }

  /* Full width main content */
  .main-content,
  .dashboard-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .page {
    display: block !important;
    padding: 0 !important;
  }

  /* Trace tree print adjustments */
  .trace-tree {
    page-break-inside: avoid;
  }

  .trace-node {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  .trace-level {
    border-left-color: #ccc !important;
  }

  .trace-node::before {
    background-color: #ccc !important;
  }

  /* Ensure colors print */
  .trace-node-type-supplier,
  .trace-node-type-input,
  .trace-node-type-batch,
  .trace-node-type-dispatch,
  .trace-node-type-product {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Report summary cards print */
  .report-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .report-summary-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Tables print nicely */
  .report-table {
    width: 100% !important;
  }

  .report-table th,
  .report-table td {
    border: 1px solid #ccc !important;
  }
}

/* ===== QR CODE MODAL ===== */
.qr-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.qr-view-modal.active {
  opacity: 1;
  visibility: visible;
}

.qr-view-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.qr-view-dialog {
  position: relative;
  background-color: var(--color-bg-primary, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.15));
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.qr-view-modal.active .qr-view-dialog {
  transform: translateY(0);
}

.qr-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.qr-view-header h3 {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-semibold, 600);
}

.qr-view-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-muted, #6b7280);
  padding: 0;
  line-height: 1;
}

.qr-view-close:hover {
  color: var(--color-text-primary, #111827);
}

.qr-view-body {
  padding: var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 16px);
}

.qr-view-code {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  background-color: var(--color-bg-secondary, #f9fafb);
  border-radius: var(--radius-md, 8px);
}

.qr-view-code canvas {
  display: block;
}

.qr-view-info {
  text-align: center;
}

.qr-view-batch-id {
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-mono, monospace);
  margin: 0 0 var(--space-1, 4px) 0;
}

.qr-view-batch-name {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-muted, #6b7280);
  margin: 0;
}

.qr-view-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border-top: 1px solid var(--color-border, #e5e7eb);
}