/* Buttons */
.bs-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bsuite-radius-button);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--bsuite-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  gap: var(--bsuite-space-1);
  justify-content: center;
  min-height: var(--bsuite-control-height);
  padding: 0.5rem 0.875rem;
  transition: background-color var(--bsuite-duration-fast) var(--bsuite-ease),
    border-color var(--bsuite-duration-fast) var(--bsuite-ease),
    box-shadow var(--bsuite-duration-fast) var(--bsuite-ease);
}

.bs-button:hover { box-shadow: var(--bsuite-shadow-sm); }
.bs-button:focus-visible,
.bs-icon-button:focus-visible,
.bs-nav-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bsuite-focus) 35%, transparent);
  outline-offset: 2px;
}
.bs-button:disabled,
.bs-button.is-disabled {
  background: var(--bsuite-disabled-bg);
  border-color: var(--bsuite-disabled-bg);
  color: var(--bsuite-disabled-text);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}
.bs-button--primary { background: var(--bsuite-primary-600); color: #fff; }
.bs-button--primary:hover { background: var(--bsuite-primary-700); }
.bs-button--secondary { background: var(--bsuite-surface); border-color: var(--bsuite-border-strong); color: var(--bsuite-text); }
.bs-button--secondary:hover,
.bs-button--ghost:hover { background: var(--bsuite-hover); }
.bs-button--success { background: var(--bsuite-success-500); color: #fff; }
.bs-button--danger { background: var(--bsuite-danger-500); color: #fff; }
.bs-button--warning { background: var(--bsuite-warning-500); color: #fff; }
.bs-button--ghost { color: var(--bsuite-text); }
.bs-button--sm { min-height: var(--bsuite-control-height-sm); padding: 0.25rem 0.625rem; }
.bs-button--lg { min-height: var(--bsuite-control-height-lg); padding: 0.75rem 1.125rem; }
.bs-button.is-loading { color: transparent; position: relative; }
.bs-button.is-loading::after {
  animation: bsuite-spin 0.7s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  border-top-color: #fff;
  content: "";
  height: 1rem;
  left: calc(50% - 0.5rem);
  position: absolute;
  top: calc(50% - 0.5rem);
  width: 1rem;
}
.bs-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bsuite-radius-button);
  color: var(--bsuite-text-muted);
  cursor: pointer;
  display: inline-flex;
  height: var(--bsuite-touch-target);
  justify-content: center;
  padding: 0;
  transition: background-color var(--bsuite-duration-fast) var(--bsuite-ease);
  width: var(--bsuite-touch-target);
}
.bs-icon-button:hover { background: var(--bsuite-hover); color: var(--bsuite-text); }
.bs-icon { height: 1.125rem; stroke-width: 1.8; width: 1.125rem; }

/* Form controls */
.bs-field { display: grid; gap: 0.375rem; }
.bs-label { color: var(--bsuite-heading); font-size: 0.8125rem; font-weight: 650; }
.bs-label .is-required { color: var(--bsuite-danger-500); }
.bs-input,
.bs-select,
.bs-textarea {
  background: var(--bsuite-surface);
  border: 1px solid var(--bsuite-border-strong);
  border-radius: var(--bsuite-radius-input);
  color: var(--bsuite-text);
  font: 0.9375rem/1.4 var(--bsuite-font-sans);
  min-height: var(--bsuite-control-height);
  padding: 0.5rem 0.75rem;
  width: 100%;
}
.bs-textarea { min-height: 6.5rem; resize: vertical; }
.bs-input::placeholder,
.bs-textarea::placeholder { color: var(--bsuite-text-muted); opacity: 0.8; }
.bs-input:hover,
.bs-select:hover,
.bs-textarea:hover { border-color: var(--bsuite-primary-400); }
.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus {
  border-color: var(--bsuite-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsuite-focus) 22%, transparent);
  outline: none;
}
.bs-input:disabled,
.bs-select:disabled,
.bs-textarea:disabled { background: var(--bsuite-disabled-bg); color: var(--bsuite-disabled-text); }
.bs-field-help { color: var(--bsuite-text-muted); font-size: var(--bsuite-text-caption); }
.bs-field-error { color: var(--bsuite-danger-500); font-size: var(--bsuite-text-caption); }
.bs-input.is-invalid { border-color: var(--bsuite-danger-500); }
.bs-search {
  align-items: center;
  display: flex;
  position: relative;
}
.bs-search .bs-icon { color: var(--bsuite-text-muted); left: 0.75rem; pointer-events: none; position: absolute; }
.bs-search .bs-input { padding-left: 2.4rem; }
.bs-check {
  align-items: center;
  color: var(--bsuite-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  gap: var(--bsuite-space-1);
  min-height: var(--bsuite-control-height);
}
.bs-check input { accent-color: var(--bsuite-primary-600); height: 1rem; width: 1rem; }
.bs-switch {
  appearance: none;
  background: var(--bsuite-border-strong);
  border: 0;
  border-radius: var(--bsuite-radius-pill);
  cursor: pointer;
  height: 1.5rem;
  position: relative;
  transition: background var(--bsuite-duration-fast) var(--bsuite-ease);
  width: 2.75rem;
}
.bs-switch::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--bsuite-shadow-sm);
  content: "";
  height: 1.125rem;
  left: 0.1875rem;
  position: absolute;
  top: 0.1875rem;
  transition: transform var(--bsuite-duration-fast) var(--bsuite-ease);
  width: 1.125rem;
}
.bs-switch:checked { background: var(--bsuite-primary-600); }
.bs-switch:checked::after { transform: translateX(1.25rem); }
.bs-quantity { align-items: center; display: inline-grid; grid-template-columns: 2.5rem 3rem 2.5rem; }
.bs-quantity .bs-input { border-radius: 0; text-align: center; }
.bs-quantity .bs-icon-button { border: 1px solid var(--bsuite-border-strong); border-radius: 0; height: var(--bsuite-control-height); width: 2.5rem; }
.bs-quantity .bs-icon-button:first-child { border-radius: var(--bsuite-radius-input) 0 0 var(--bsuite-radius-input); }
.bs-quantity .bs-icon-button:last-child { border-radius: 0 var(--bsuite-radius-input) var(--bsuite-radius-input) 0; }

/* Cards */
.bs-card {
  background: var(--bsuite-card);
  border: 1px solid var(--bsuite-border);
  border-radius: var(--bsuite-radius-card);
  box-shadow: var(--bsuite-shadow-sm);
}
.bs-card__header,
.bs-card__body,
.bs-card__footer { padding: var(--bsuite-space-2); }
.bs-card__header { align-items: center; border-bottom: 1px solid var(--bsuite-border); display: flex; gap: var(--bsuite-space-1); justify-content: space-between; }
.bs-card__footer { border-top: 1px solid var(--bsuite-border); }
.bs-stat-card { min-height: 8.5rem; padding: var(--bsuite-space-2); }
.bs-stat-card__label { color: var(--bsuite-text-muted); font-size: 0.8125rem; font-weight: 600; }
.bs-stat-card__value { color: var(--bsuite-heading); font-size: 1.75rem; font-weight: 720; margin-top: 0.5rem; }
.bs-stat-card__trend { color: var(--bsuite-success-500); font-size: 0.75rem; font-weight: 650; margin-top: 0.5rem; }
.bs-product-card { display: grid; gap: var(--bsuite-space-1); grid-template-columns: 3.5rem 1fr auto; padding: var(--bsuite-space-2); }
.bs-product-card__media { align-items: center; background: var(--bsuite-surface-subtle); border-radius: 0.375rem; color: var(--bsuite-text-muted); display: flex; height: 3.5rem; justify-content: center; width: 3.5rem; }
.bs-table-card,
.bs-kitchen-card,
.bs-inventory-card { border-left: 4px solid var(--bsuite-border-strong); padding: var(--bsuite-space-2); }
.bs-table-card.is-available { border-left-color: var(--bsuite-success-500); }
.bs-table-card.is-occupied { border-left-color: var(--bsuite-danger-500); }
.bs-kitchen-card.is-ready { border-left-color: var(--bsuite-primary-500); }
.bs-inventory-card.is-low { border-left-color: var(--bsuite-warning-500); }

/* Badges and alerts */
.bs-badge {
  align-items: center;
  border-radius: var(--bsuite-radius-pill);
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  min-height: 1.5rem;
  padding: 0.25rem 0.625rem;
  text-transform: uppercase;
}
.bs-badge--available, .bs-badge--paid, .bs-badge--completed { background: var(--bsuite-status-available-bg); color: var(--bsuite-status-available-fg); }
.bs-badge--occupied, .bs-badge--cancelled { background: var(--bsuite-status-occupied-bg); color: var(--bsuite-status-occupied-fg); }
.bs-badge--reserved, .bs-badge--served { background: var(--bsuite-status-reserved-bg); color: var(--bsuite-status-reserved-fg); }
.bs-badge--pending { background: var(--bsuite-status-pending-bg); color: var(--bsuite-status-pending-fg); }
.bs-badge--preparing { background: var(--bsuite-status-preparing-bg); color: var(--bsuite-status-preparing-fg); }
.bs-badge--ready { background: var(--bsuite-status-ready-bg); color: var(--bsuite-status-ready-fg); }
.bs-badge--draft, .bs-badge--inactive { background: var(--bsuite-status-draft-bg); color: var(--bsuite-status-draft-fg); }
.bs-alert {
  align-items: flex-start;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--bsuite-radius-card);
  display: flex;
  gap: var(--bsuite-space-1);
  padding: 0.75rem 1rem;
}
.bs-alert--success { background: var(--bsuite-status-available-bg); border-color: var(--bsuite-success-500); color: var(--bsuite-status-available-fg); }
.bs-alert--danger { background: var(--bsuite-status-cancelled-bg); border-color: var(--bsuite-danger-500); color: var(--bsuite-status-cancelled-fg); }
.bs-alert--warning { background: var(--bsuite-status-pending-bg); border-color: var(--bsuite-warning-500); color: var(--bsuite-status-pending-fg); }
.bs-alert--info { background: var(--bsuite-status-reserved-bg); border-color: var(--bsuite-info-500); color: var(--bsuite-status-reserved-fg); }

/* Data table */
.bs-table-shell { background: var(--bsuite-surface); border: 1px solid var(--bsuite-border); border-radius: var(--bsuite-radius-table); overflow: hidden; }
.bs-table-toolbar { align-items: center; border-bottom: 1px solid var(--bsuite-border); display: flex; flex-wrap: wrap; gap: var(--bsuite-space-1); justify-content: space-between; padding: var(--bsuite-space-1); }
.bs-table-scroll { max-height: 32rem; overflow: auto; }
.bs-data-table { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; margin: 0; min-width: 48rem; width: 100%; }
.bs-data-table th {
  background: var(--bsuite-surface-subtle);
  border-bottom: 1px solid var(--bsuite-border-strong);
  color: var(--bsuite-heading);
  font-weight: 700;
  height: 2.75rem;
  padding: 0.625rem 0.75rem;
  position: sticky;
  text-align: left;
  top: 0;
  z-index: 1;
}
.bs-data-table td { border-bottom: 1px solid var(--bsuite-border); color: var(--bsuite-text); height: 3rem; padding: 0.625rem 0.75rem; vertical-align: middle; }
.bs-data-table tbody tr:nth-child(even) { background: var(--bsuite-table-row-alt); }
.bs-data-table tbody tr:hover { background: var(--bsuite-hover); }
.bs-data-table tbody tr.is-selected { background: var(--bsuite-selected); }
.bs-sort { align-items: center; background: none; border: 0; color: inherit; display: inline-flex; font: inherit; gap: 0.25rem; padding: 0; }
.bs-pagination { align-items: center; display: flex; gap: 0.25rem; justify-content: flex-end; padding: var(--bsuite-space-1); }

/* Dialogs */
.bs-dialog-backdrop {
  align-items: center;
  background: var(--bsuite-overlay);
  display: none;
  inset: 0;
  justify-content: center;
  padding: var(--bsuite-space-2);
  position: fixed;
  z-index: 1100;
}
.bs-dialog-backdrop.is-open { display: flex; }
.bs-dialog {
  background: var(--bsuite-surface-raised);
  border: 1px solid var(--bsuite-border);
  border-radius: var(--bsuite-radius-dialog);
  box-shadow: var(--bsuite-shadow-lg);
  max-height: calc(100vh - 2rem);
  max-width: 32rem;
  overflow: auto;
  width: 100%;
}
.bs-dialog--large { max-width: 52rem; }
.bs-dialog__header,
.bs-dialog__body,
.bs-dialog__footer { padding: var(--bsuite-space-2); }
.bs-dialog__header { align-items: flex-start; border-bottom: 1px solid var(--bsuite-border); display: flex; justify-content: space-between; }
.bs-dialog__footer { align-items: center; border-top: 1px solid var(--bsuite-border); display: flex; gap: var(--bsuite-space-1); justify-content: flex-end; }

/* Utility patterns */
.bs-empty-state { color: var(--bsuite-text-muted); padding: var(--bsuite-space-6) var(--bsuite-space-2); text-align: center; }
.bs-skeleton {
  animation: bsuite-pulse 1.5s ease-in-out infinite;
  background: var(--bsuite-surface-subtle);
  border-radius: 0.25rem;
  min-height: 1rem;
}
.bs-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@keyframes bsuite-spin { to { transform: rotate(360deg); } }
@keyframes bsuite-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .bs-button.is-loading::after,
  .bs-skeleton { animation: none; }
}

/* Global action notification */
.bs-global-toast {
  align-items: center;
  background: var(--bsuite-heading);
  border: 1px solid transparent;
  border-radius: var(--bsuite-radius-card);
  bottom: 1.5rem;
  box-shadow: var(--bsuite-shadow-lg);
  color: var(--bsuite-surface);
  display: flex;
  gap: 0.625rem;
  left: 50%;
  max-width: min(30rem, calc(100vw - 2rem));
  opacity: 0;
  padding: 0.75rem 0.875rem;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 1rem);
  transition: opacity var(--bsuite-duration), transform var(--bsuite-duration);
  width: max-content;
  z-index: 1400;
}
.bs-global-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.bs-global-toast--success .bs-global-toast__icon { color: #66d4a8; }
.bs-global-toast--error { background: #7f1d2d; }
.bs-global-toast--error .bs-global-toast__icon { color: #fecdd3; }
.bs-global-toast__message { font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.bs-global-toast__close { align-items: center; background: transparent; border: 0; color: inherit; display: inline-flex; height: 1.75rem; justify-content: center; margin-left: 0.25rem; opacity: 0.8; padding: 0; width: 1.75rem; }
.bs-global-toast__close:hover { opacity: 1; }
